こんにちは、Reiです！
前回は、入力した文字を「未完了リスト」に追加する仕組みを作りました。
これで、入力したTODOが画面に表示されるようになりました。
ただ、今の状態では TODOの文章が表示されるだけ で、
操作するためのボタンがまだ用意されていません。
そこで今回はまず、
TODOの横に「完了」と「削除」のボタンを表示する処理 を作っていきます。
実はここまでの記事で、必要な作り方はすべて学んでいるため、
これまでに学んだ内容を使えば、実装できる内容になっています。
まずは自分で作ってみよう！
ここまでの記事で、
- HTML要素を生成する
- テキストを設定する
- appendChildで構造を組み立てる
という流れを学びました。
今回やることは、
実は 前回作った処理にボタンを2つ追加するだけです。
ここまでの記事で学んだ内容を使って、
TODOの横に「完了」と「削除」のボタンを追加してみましょう。
前回は次のような構造でした。
li
└ div
└ p
ここにボタンを追加して、次のような構造を作ってみてください。
li
└ div
├ p（TODOの本文）
├ button（完了）
└ button（削除）
ポイントは、これまでと同じ流れでボタン要素を追加することです。
ここまでの手順を思い出しながら、一度自分で実装してみましょう！
できたでしょうか？
「あれ、どう書くんだっけ？」と手が止まってしまった方も大丈夫です。
大切なのは、「どうすれば実現できるか？」を自分で考えてみたことそのものです。
もし、「まだ納得いくまで考えたい！」という方は、
ここで一度手を止めて、もう一度コードと向き合ってみてください。
「よし、次に進もう！」「答え合わせをしたい！」という方は、
ここから一緒にコードを完成させていきましょう！
TODOにボタンを追加する実装
それでは、前回作成したコードに
「完了」と「削除」のボタンを追加する処理を組み込んでいきましょう！
ここまでの知識を組み合わせることで、
ただのテキストだったTODOが、一気に「操作できるアプリ」へと進化します。
一歩ずつ、着実に進めていきましょう。
1. 「完了」ボタンと「削除」ボタンを生成する
まずは、 pタグを生成したコードの次に
「完了」と「削除」のボタン要素を作成していきます。
【編集ファイル：src/index.js】
〜省略〜
// pの生成
const p = document.createElement("p");
p.className = "todo-item";
p.innerText = inputText;
// 完了ボタンの生成（追加）
const completeButton = document.createElement("button");
completeButton.innerText = "完了";
// 削除ボタンの生成（追加）
const deleteButton = document.createElement("button");
deleteButton.innerText = "削除";
〜省略〜
このようにして、TODOの横に表示する
「完了」と「削除」のボタンを用意します。
2. 生成したボタンを階層構造の中に組み込む
続いて作成したボタンを、
TODOの1行をまとめている div の中に追加します。
【編集ファイル：src/index.js】
〜省略〜
// 階層構造の組み立て
div.appendChild(p);
div.appendChild(completeButton); // 追加
div.appendChild(deleteButton); // 追加
li.appendChild(div);
// 未完了リストに追加
document.getElementById("incomplete-list").appendChild(li);
〜省略〜appendChild を実行した順番に、
要素は 左から右へ並びます。
そのため今回は、p → 完了 → 削除 という順番で追加しています。
今回の処理の流れ
ここまでの処理を整理すると、
ボタンがクリックされたときに次の順番で処理が行われます。
① 入力欄から文字を取得する
② 入力欄を空にする
③ TODOの行（li）を作成する
④ TODO本文（p）を作成する
⑤ 完了ボタンと削除ボタンを作成する
⑥ それぞれをdivの中に追加する
⑦ 完成したTODO行を未完了リストに追加する
この流れによって、
文字とボタンがセットになったTODO行 が画面に表示されます。
全体像の確認
最終的に、次のような構造が作られていればOKです。
- index.html
未完了エリアの<ul>にid="incomplete-list"が付与されている - src/index.js
次の階層構造がJavaScriptで組み立てられている
li
└ div
├ p（TODOの本文）
├ button（完了）
└ button（削除）
この構造になるように要素を組み立てることで、
TODOの本文と2つのボタンが横並びの1行として表示させることができます！
【完成ファイル：src/index.js】
const onClickAdd = () => {
const inputText = document.getElementById("add-text").value;
document.getElementById("add-text").value = "";
// liの生成
const li = document.createElement("li");
// divの生成
const div = document.createElement("div");
div.className = "list-row";
// pの生成
const p = document.createElement("p");
p.className = "todo-item";
p.innerText = inputText;
// 完了ボタンの生成（追加）
const completeButton = document.createElement("button");
completeButton.innerText = "完了";
// 削除ボタンの生成（追加）
const deleteButton = document.createElement("button");
deleteButton.innerText = "削除";
// 階層構造の組み立て
div.appendChild(p);
div.appendChild(completeButton);
div.appendChild(deleteButton);
li.appendChild(div);
// 未完了リストに追加
document.getElementById("incomplete-list").appendChild(li);
};
// 追加ボタンの要素を取得
const addButton = document.getElementById("add-button");
// ボタンがクリックされたら onClickAdd を実行
addButton.addEventListener("click", onClickAdd);まとめ
今回は、JavaScriptを使って
TODOの横にボタンを表示する処理 を実装しました。
＼＼ 今回のポイント ／／
・ ボタン要素を追加することで、TODOに操作機能を持たせる
・ appendChild を使って、狙い通りの順番で要素を配置する
・ 要素を追加するだけで、今あるTODOの表示に機能を付け足せる
今回は、前回作ったTODOの行に
「完了」と「削除」のボタンを追加しました。
これまで学んできた
・要素を生成する
・内容を設定する
・構造に追加する
という流れを使うことで、
既存の処理に新しい要素を追加して機能を拡張できるようになります。
次はいよいよ、ボタンが押されたときに、それぞれのTODOに
TODOを完了させたり削除できるようにする処理 を実装していきましょう！
コメント