JavaScriptで作るシンプルなTODOアプリ

今回は、JavaScriptを使ってシンプルなTODOアプリを作成する方法を紹介します。HTML、Bootstrap、JavaScriptを使い、ユーザーがタスクを追加、削除、完了できる機能を実装します。
## 準備
まずは、必要なツールを準備しましょう。
## 使用するツール
* Visual Studio Code (VScode): コードエディタ
* Live Server: ローカル環境でWebページを簡単にプレビューするための拡張機能

VScodeのLive Serverを使えば、コードを編集するたびにリアルタイムでブラウザ上に反映されます。まず、VScodeで新しいプロジェクトを作成し、Live Serverを有効にしましょう。
## HTMLファイルを作成
まず、基本となるHTMLファイルを作成します。TODOの入力フォームと、タスクの表示用エリアを用意します。
<details><summary>サンプルコード（open）</summary>

```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODOアプリ</title>
    <!-- Bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">TODOアプリ</h1>
        <!-- 入力フォーム -->
        <div class="input-group mb-3">
            <input id="todo-input" type="text" class="form-control" placeholder="新しいタスクを入力">
            <button id="add-btn" class="btn btn-primary">追加</button>
        </div>
        <!-- TODOリストを表示 -->
        <ul id="todo-list" class="list-group"></ul>
    </div>

    <!-- JavaScriptファイルを読み込む -->
    <script src="app.js"></script>
</body>
</html>
```
</details>

## 説明
* Bootstrapを使って見た目を整えます。BootstrapはCDN経由で読み込んでいます
* 入力フォームには、新しいタスクを入力するためのテキストフィールドと、「追加」ボタンを設置しています
* タスクのリストを表示するための`<ul>`要素も準備しています
## JavaScriptを追加
次に、JavaScriptでアプリの動作を実装します。app.jsというファイルを作成し、以下のコードを書きます。
<details><summary>サンプルコード（open）</summary>

```
// DOMの要素を取得
const todoInput = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');

// タスクを追加する関数
function addTodo() {
    const todoText = todoInput.value;
    if (todoText === '') return; // 入力が空なら何もしない

    // タスクを表示する<li>要素を作成
    const li = document.createElement('li');
    li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
    
    // タスクのテキストを表示
    li.textContent = todoText;

    // 完了ボタン
    const completeBtn = document.createElement('button');
    completeBtn.textContent = '完了';
    completeBtn.classList.add('btn', 'btn-success', 'btn-sm', 'ml-2');
    completeBtn.addEventListener('click', () => {
        li.classList.toggle('completed');
    });

    // 削除ボタン
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '削除';
    deleteBtn.classList.add('btn', 'btn-danger', 'btn-sm', 'ml-2');
    deleteBtn.addEventListener('click', () => {
        li.remove();
    });

    // ボタンを<li>に追加
    li.appendChild(completeBtn);
    li.appendChild(deleteBtn);

    // リストにタスクを追加
    todoList.appendChild(li);

    // 入力フィールドをクリア
    todoInput.value = '';
}

// 追加ボタンをクリックしたときにタスクを追加
addBtn.addEventListener('click', addTodo);

// Enterキーでタスクを追加
todoInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        addTodo();
    }
});
```
</details>

## 説明
* タスクの追加:`addTodo`関数は、入力フォームに入力された内容をリストに追加します。タスクはリストアイテム`<li>`として表示されます
* 完了機能: 各タスクには「完了」ボタンがあり、クリックするとそのタスクに完了スタイルが適用されます
* 削除機能: 「削除」ボタンをクリックすると、そのタスクはリストから削除されます
* Enterキーで追加: テキストフィールドでEnterキーを押すと、タスクが追加されるようにしています
## スタイルのカスタマイズ
必要に応じて、タスクが完了した際にスタイルが変わるようにCSSでクラスを追加できます。例えば、タスク完了時に文字を取り消し線で表示するように以下のCSSを追加します

```
.completed {
    text-decoration: line-through;
    color: gray;
}
```
このCSSは、`<li>`要素に`completed`クラスが追加された際に、タスクのテキストを取り消し線で表示します。
## まとめ
今回の記事では、JavaScriptを使ってシンプルなTODOアプリを作成しました。このアプリは、タスクの追加、完了、削除といった基本的な機能を備えています。さらに、Bootstrapを使って見た目を整えることで、実用的なデザインに仕上げました。

ぜひ、あなた自身のプロジェクトでこのコードを活用し、カスタマイズしてみてください！