タスクを追加する
JavaScriptでタスクの追加機能を実装します。
このレッスンで作るもの
入力欄にテキストを入れて「追加」ボタンを押すと、タスクが一覧に表示される機能を作ります。
削除機能はレッスン04で実装します。
JavaScriptファイルを作成する
現在のフォルダ構造を確認しましょう。
- index.html
- style.css
- main.js← 作成するファイル
main.jsファイルを作成してください。HTMLで読み込む設定は既に済んでいます。
Step 1: 要素を取得する
まず、HTMLの要素をJavaScriptから操作できるようにします。
// HTML要素を取得
const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');
const list = document.getElementById('todo-list');
// タスクを保存する配列
let todos = [];.getElementById() は、HTMLの id 属性を使って要素を取得するです。
(参考)
Step 2: タスクを表示するを作る
配列 todos の中身を画面に表示するを作ります。
// タスクを画面に表示する関数
function renderTodos() {
// 一旦リストを空にする
list.innerHTML = '';
// todos配列の中身を1つずつ処理
todos.forEach((todo) => {
const li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = `
<input type="checkbox">
<span>${todo.text}</span>
<button type="button">削除</button>
`;
list.appendChild(li);
});
}ポイント
innerHTML = ''でリストを空にしてから再描画します（なぜ再描画の必要があるか考えてみましょう）forEachで配列の要素を1つずつ処理しますcreateElementで新しいHTML要素を作成します
Step 3: タスクを追加する処理を作る
ここからが本番です。フォームが送信されたときの処理を書きます。
イベントリスナーについて
addEventListener()を使うと、「このボタンがクリックされたら〇〇する」のような処理を設定できます。
addEventListener() の第2引数に渡しているのように、他のに渡して、あとから呼び出してもらうのことをと呼びます。ここでは「フォームが送信されたら呼び出してね」とを渡しています。
addEventListener()はDOM要素が持つです。
第1引数にイベント名（'click'、'submit'など）、第2引数にを渡します。
今回はHTMLのフォームでsubmitイベントがすると、第2引数のが実行されます。
// フォーム送信時の処理
form.addEventListener('submit', (e) => {
e.preventDefault();
// ========================================
// ここを自分で考えて実装してみよう！
// ========================================
// やること:
// 1. 入力欄の値を取得する（input.value）
// 2. 空欄チェック（空なら何もしないで return）
// 3. todosに新しいタスクを追加する
// → { text: 入力値 } というオブジェクトで追加
// 4. renderTodos() を呼んで画面を更新
// 5. 入力欄を空にする（input.value = ''）
// ========================================
});はブラウザのデフォルト動作をキャンセルするです。
まずは自分で考えてみましょう！
5〜10分ほど試してみて、分からなければ下のヒントを見てください。
ヒント
const text = input.value.trim();trim() は前後の空白を除去します。
if (!text) {
return;
}空白除去後に空文字なら何もしません。
todos.push({ text });{ text } は { text: text } の省略記法です。プロパティ名と変数名が同じ場合に使えます。
答え
form.addEventListener('submit', (e) => {
e.preventDefault();
// 1. 入力欄の値を取得（前後の空白を除去）
const text = input.value.trim();
// 2. 空欄チェック
if (!text) {
return;
}
// 3. todosに新しいタスクを追加
todos.push({ text });
// 4. 画面を更新
renderTodos();
// 5. 入力欄を空にする
input.value = '';
});動作確認
ブラウザで確認してみましょう。
- 入力欄にテキストを入力
- 「追加」ボタンをクリック（またはEnterキー）
- タスクが一覧に表示されればOK！
完成コード
ここまでの main.js の全体像です。
// HTML要素を取得
const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');
const list = document.getElementById('todo-list');
// タスクを保存する配列
let todos = [];
// タスクを画面に表示する関数
function renderTodos() {
list.innerHTML = '';
todos.forEach((todo) => {
const li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = `
<input type="checkbox">
<span>${todo.text}</span>
<button type="button">削除</button>
`;
list.appendChild(li);
});
}
// フォーム送信時の処理
form.addEventListener('submit', (e) => {
e.preventDefault();
const text = input.value.trim();
if (!text) {
return;
}
todos.push({ text });
renderTodos();
input.value = '';
});セキュリティについて
今回は innerHTML を使っていますが、このTodoアプリはデータベースがなく、自分の入力を自分で見るだけなので問題ありません。
ただし、他のユーザーの入力を表示するアプリ（掲示板、SNSなど）では、悪意あるスクリプトが実行される危険があります（XSS攻撃）。今後の開発では気をつけましょう。
次のステップ
タスクの追加ができるようになりました！
ただ、「削除」ボタンを押しても何も起きませんね。次のレッスンで削除機能を実装しましょう。