LoginSignup
0
0
@Yun1988

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

Posted at

今回は、JavaScriptを使ってシンプルなTODOアプリを作成する方法を紹介します。HTML、Bootstrap、JavaScriptを使い、ユーザーがタスクを追加、削除、完了できる機能を実装します。

準備

まずは、必要なツールを準備しましょう。

使用するツール

  • Visual Studio Code (VScode): コードエディタ
  • Live Server: ローカル環境でWebページを簡単にプレビューするための拡張機能

VScodeのLive Serverを使えば、コードを編集するたびにリアルタイムでブラウザ上に反映されます。まず、VScodeで新しいプロジェクトを作成し、Live Serverを有効にしましょう。

HTMLファイルを作成

まず、基本となるHTMLファイルを作成します。TODOの入力フォームと、タスクの表示用エリアを用意します。

サンプルコード（open） 
<!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>

説明

  • Bootstrapを使って見た目を整えます。BootstrapはCDN経由で読み込んでいます
  • 入力フォームには、新しいタスクを入力するためのテキストフィールドと、「追加」ボタンを設置しています
  • タスクのリストを表示するための<ul>要素も準備しています

JavaScriptを追加

次に、JavaScriptでアプリの動作を実装します。app.jsというファイルを作成し、以下のコードを書きます。

サンプルコード（open） 
// 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();
    }
});

説明

  • タスクの追加:addTodo関数は、入力フォームに入力された内容をリストに追加します。タスクはリストアイテム<li>として表示されます
  • 完了機能: 各タスクには「完了」ボタンがあり、クリックするとそのタスクに完了スタイルが適用されます
  • 削除機能: 「削除」ボタンをクリックすると、そのタスクはリストから削除されます
  • Enterキーで追加: テキストフィールドでEnterキーを押すと、タスクが追加されるようにしています

スタイルのカスタマイズ

必要に応じて、タスクが完了した際にスタイルが変わるようにCSSでクラスを追加できます。例えば、タスク完了時に文字を取り消し線で表示するように以下のCSSを追加します

.completed {
    text-decoration: line-through;
    color: gray;
}

このCSSは、<li>要素にcompletedクラスが追加された際に、タスクのテキストを取り消し線で表示します。

まとめ

今回の記事では、JavaScriptを使ってシンプルなTODOアプリを作成しました。このアプリは、タスクの追加、完了、削除といった基本的な機能を備えています。さらに、Bootstrapを使って見た目を整えることで、実用的なデザインに仕上げました。

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

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0