【実践】JavaScriptでTODOアプリを作成しよう！第５回新しいTODOをリストに追加する

こんにちは、Reiです！

前回のステップで、
入力された文字を取得して、入力欄をクリアする流れができました。

今回はその続きとして、
取得したデータを画面に反映していきます。

TODOを画面に追加する
今回の処理の流れ
1. 全体像の確認
まとめ

TODOを画面に追加する

今回は、取得した文字を使って
画面上に「新しいTODOの行」を追加する処理を作っていきます。

これまでは、「データを取得する」段階でしたが、
いよいよ画面に要素を追加する処理を扱います。

JavaScriptを使うことで、

・新しいHTML要素を作る
・それをリストに追加する

といった操作ができるようになります。

このステップでは、データを画面に反映する流れ を理解していきましょう。
それでは、順番に実装していきます！

1. 未完了リストにIDを付ける

JavaScriptから未完了TODOリストを取得できるように、
HTMLの <ul> タグに id を付けておきます。

また、このタイミングで 最初から書いてあったサンプルの <li> を削除 します。
これからは JavaScript が TODO を追加していくため、
HTML側にはリストの ulのみ残します。

【編集ファイル：index.html】

修正前

<ul>
  <li>
    <p>TODOです</p>
    <button>完了</button>
    <button>削除</button>
  </li>
</ul>

修正後

<ul id="incomplete-list"></ul>

このIDを使って、JavaScriptから
未完了リストの要素を取得し、新しいTODOを追加できるようになります。

HTMLの書き方のポイント
<ul> タグは中に <li> を入れる コンテナ要素 のため、<ul /> のような自己終了タグでは記載できません 💦
必ず 開始タグと終了タグのセットで書く必要があります！

2. リストの土台となる li タグを生成する

まずは、TODOの1行分を入れるための
<li> 要素をJavaScriptで作成します。

また、これまで動作確認のために使用していた alert は、
今回から不要になるため削除しておきます。

【編集ファイル：src/index.js】

const onClickAdd = () => {
  const inputText = document.getElementById("add-text").value;
  document.getElementById("add-text").value = "";

  // 1. 新しく li タグを作成する
  const li = document.createElement("li");

  alert(inputText); // 削除する
};

document.createElement()
指定したHTMLタグを 新しく生成する命令 です。
JavaScriptからHTML要素を作り出すことができ、画面に追加するためのパーツを用意するときに使用します。

document.createElement("li") と書くことで、
JavaScript上に 新しい <li> 要素 が作られます。

ただし、この段階ではまだ
ブラウザの画面には表示されていません。

まずは、TODOのデータを入れていくための
「空の入れ物」 を用意している状態になります。

3. レイアウト用の div を生成し、クラスを適用する

続けて、文字とボタンを横並びにするための箱となる
<div> を作成します。

そして、CSSで定義しておいたレイアウト用クラス を適用します。

【編集ファイル：src/index.js】

  // 2. 新しく div タグを作成し、クラス名「list-row」を付与する
  const div = document.createElement("div");
  div.className = "list-row";

className
HTML要素に クラス名を設定するプロパティ です。
JavaScriptからクラス名を指定することで、CSSであらかじめ用意しておいたデザインを後から適用することができます。

このようにして、JavaScriptで作った要素にも
既存のCSSレイアウトをそのまま使えるようになります。

4. テキストを表示する p タグを生成し、入力値を流し込む

次に、TODOの本文を表示するための
<p> タグを作成します。

そして、その中に入力された文字を設定します。

【編集ファイル：src/index.js】

  // 3. 新しく p タグを作成し、入力されたテキストを設定する
  const p = document.createElement("p");
  p.className = "todo-item";
  p.innerText = inputText;

innerText
タグの中に 文字（テキスト）を書き込むためのプロパティ です。
入力欄から取得した文字をここで設定することで、画面に表示される文章としてHTML要素に反映されます。

こうして作成した <p> 要素の中に、
ユーザーが入力したTODOの内容が表示されるようになります。

5. 階層構造を組み立てる（appendChild）

ここまでで、 li、div、p という3つの要素がそれぞれ作成されました。
次はこれらを、HTMLと同じ親子関係になるように組み立てていきます。

【編集ファイル：src/index.js】

  // 4. 親要素の中に子要素を入れる（li > div > p の構造を作る）
  div.appendChild(p);
  li.appendChild(div);

appendChild()
指定した要素の中に、別の要素を子要素として追加する命令 です。
これによってJavaScriptで作成した要素同士をつなぎ、HTMLと同じ階層構造を組み立てることができます。

ここでは

li
 └ div
     └ p

という形の階層構造を作っています。

このようにして、
JavaScript上で HTMLと同じ構造 を組み立てていきます。

6. 未完了リスト（ul）の末尾に合体させる

最後に、作成したTODOの行を
画面上のリストに追加します。

【編集ファイル：src/index.js】

  // 5. HTML上の未完了リスト（ul）を取得して、作成した li を追加する
  document.getElementById("incomplete-list").appendChild(li);

このコードでは、
まず document.getElementById(“incomplete-list”) で、
HTMLにすでに存在している未完了TODOのリスト（ul） を取得しています。

そしてそのリストの中に、appendChild(li) で
新しく作成した <li> 要素を追加 しています。

これまでの処理はすべてJavaScriptの中で要素を作っていただけでしたが、
このタイミングで画面上のHTMLに結合されるため、初めてTODOが表示されます。

今回の処理の流れ

ここまでの処理を整理すると、
ボタンがクリックされたときに次の順番で処理が行われます。

入力欄から文字を取得する
入力欄を空にリセットする
新しいHTML要素（li・div・p）を作成する
要素同士を親子関係で組み立てる
完成したTODO行を未完了リストに追加する

この流れによって、
入力した内容が 新しいTODOとして画面に表示される ようになります。

全体像の確認

最終的に、以下のような構成になっていればOKです。

index.html
未完了エリアの <ul> に id="incomplete-list" が付与されている
src/index.js
li > div > p という親子構造が組み立てられ、最後に ul に追加されている

このように、

要素を生成 → 構造を組み立て → 画面に追加

という手順を踏むことで、
JavaScriptから 動的にHTMLを追加する処理 を作ることができます。

【完成ファイル：index.html】

〜省略〜

    <!-- 未完了TODO -->
    <div class="incomplete-area">
      <p class="title">未完了のTODO</p>
      <ul id="incomplete-list"></ul>
    </div>

〜省略〜

【完成ファイル：src/index.js】

const onClickAdd = () => {
  // テキストボックスの値を取得
  const inputText = document.getElementById("add-text").value;
  // 2. テキストボックスの中身を空にする
  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;

  // 階層構造の組み立て
  div.appendChild(p);
  li.appendChild(div);

  // 未完了リストに追加
  document.getElementById("incomplete-list").appendChild(li);
};


// 追加ボタンの要素を取得
const addButton = document.getElementById("add-button");

// ボタンがクリックされたら onClickAdd を実行
addButton.addEventListener("click", onClickAdd);

まとめ

今回は、JavaScriptを使って
「新しいHTML要素を作り、画面に追加する」 処理を実装しました。

＼＼　今回のまとめ　／／

・ document.createElement で新しいタグを作成する
・ className や innerText で要素の内容を設定する
・ appendChild で要素を連結し、最後に画面へ追加する

TODOが画面に表示されるようになり、
アプリとしての形が少しずつ見えてきました！

次は、このTODOを操作するための
「完了ボタン」と「削除ボタン」をセットで表示する
機能を作っていきましょう！

TODOを画面に追加する

1. 未完了リストにIDを付ける

2. リストの土台となる li タグを生成する

3. レイアウト用の div を生成し、クラスを適用する

4. テキストを表示する p タグを生成し、入力値を流し込む

5. 階層構造を組み立てる（appendChild）

6. 未完了リスト（ul）の末尾に合体させる

今回の処理の流れ

全体像の確認

まとめ

コメント