JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptでToDoリスト（やることリスト）を作成する方法【サンプルコード付き】

CSSとJavaScriptを組み合わせることで、入力したタスクを一覧表示し、クリックで削除できるシンプルなToDoリスト（やることリスト）をブラウザ上で作成できます。この記事では、実際に動くサンプルコードを交えながら、その実装方法をわかりやすく解説します。

ToDoリストの仕組み

今回作成するToDoリストは、以下の3つの要素で構成されています。

  • HTML … タスクを入力するテキストボックスと、リストを表示するためのul要素
  • CSS … 入力欄やリスト項目のデザイン・レイアウトの定義
  • JavaScript … Enterキーでタスクを追加し、項目クリックで削除する処理

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    html {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    body {
        max-width: 500px;
        margin: 10px auto;
    }
    .todoInput {
        margin-top: 10px;
        padding: 10px;
        width: 500px;
        height: 60px;
        font-size: 40px;
        border: 2px solid black;
        color: purple;
    }
    li {
        text-align: left;
        font-size: 22px;
        list-style: none;
        border: 1px solid rgb(212, 212, 212);
        padding: 5px;
        margin-bottom: 10px;
    }
    li:hover {
        color: red;
    }
</style>
</head>
<body>
<div style="border: 1px solid black;">
<h1 style="text-align: center;color: red;">To-do List Example</h1>
<input class="todoInput" placeholder="Add Something" />
<ul id="list"></ul>
</div>
<script>
    function addItem() {
        var todoItem = document.querySelector(".todoInput").value;
        var ul = document.getElementById("list");
        var li = document.createElement("li");
        li.appendChild(document.createTextNode("- " + todoItem));
        ul.appendChild(li);
        todoItem = "";
        li.onclick = deleteItem;
    }
    document.body.onkeyup = function(ele) {
        if (ele.keyCode == 13) {
            addItem();
        }
    };
    function deleteItem(ele) {
        ele.target.parentElement.removeChild(ele.target);
    }
</script>
</body>
</html>

コードの解説

1. タスクを追加する「addItem()」関数

document.querySelector(".todoInput")で入力欄に入力された値を取得し、document.createElement("li")で新しいリスト項目を生成。appendChild()でul要素に追加することで、タスクが一覧に反映されます。

2. Enterキーで追加を実行するイベント処理

document.body.onkeyupでキー入力を検知し、キーコードが13（Enterキー）のときだけaddItem()を呼び出す仕組みになっています。

3. クリックでタスクを削除する「deleteItem()」関数

各li要素にはonclick = deleteItemが設定されており、項目をクリックするとremoveChild()によって親要素（ul）から該当項目が削除されます。また、CSSのli:hover { color: red; }により、マウスオーバー時には文字色が赤くなり、削除可能であることが直感的に伝わります。

補足：より現代的な書き方

keyCodeは現在非推奨（Deprecated）となっているため、新しくコードを書く場合は if (ele.key === "Enter") のようにkeyプロパティを使うのがおすすめです。

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

CSSとJavaScriptでToDoリスト（やることリスト）を作成する方法【サンプルコード付き】

入力欄にタスクを入力してEnterキーを押すと、リストに新しい項目が追加されます。

CSSとJavaScriptでToDoリスト（やることリスト）を作成する方法【サンプルコード付き】

追加された項目はクリックするだけで削除できるので、完了したタスクを手軽に整理できます。この基本形を応用すれば、チェック機能や保存機能などを加えた本格的なToDoアプリへ発展させることも可能です。

  1. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini

  2. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード