JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day23：総合演習②

JavaScript JavaScript
スポンサーリンク

Day23 前半のゴール

今日のテーマは「総合演習②：簡易メモ帳」です。
ここまで学んできた

DOM 操作
フォーム入力
localStorage による保存
関数分割
デバッグ（console.log）

を全部まとめて、小さな「使える」アプリを作っていきます。
前半では、まずは「最小限のメモ帳」を作るところまでを目標にします。

メモを入力して「追加」ボタンを押すと、画面にメモが増えていく。
ページをリロードすると消える（＝まだ保存はしない）。
まずはここまでをしっかり作り切ります。

簡易メモ帳の全体イメージ

どんな機能から作るかを決める

いきなり「完璧なメモ帳」を作ろうとすると、ほぼ確実に詰まります。
なので、機能を段階的に分けて考えます。

最初のステップでは、次の 2 つだけに絞ります。

メモを入力するテキストエリアと「追加」ボタンを作る
追加したメモを画面に表示する

保存（localStorage）は後半に回します。
まずは「入力 → 追加 → 表示」の流れを固めることが大事です。

HTML を組み立てる

必要なパーツをシンプルに置く

まずは HTML から。
最小限のメモ帳画面を作ります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>簡易メモ帳</title>
  </head>
  <body>
    <h1>簡易メモ帳</h1>

    <h2>新しいメモ</h2>
    <textarea id="memoInput" rows="4" cols="40" placeholder="ここにメモを書いてください"></textarea>
    <p>
      <button id="addButton">追加</button>
    </p>

    <h2>メモ一覧</h2>
    <div id="memoList"></div>

    <script src="app.js"></script>
  </body>
</html>

ここで重要なのは、JavaScript から触る要素に id を付けていることです。

memoInput
addButton
memoList

この 3 つが、今回の主役になります。

JavaScript の骨組みを作る

まずは「要素を取ってくる」ところから

app.js を作って、次のように書きます。

const memoInputElement = document.getElementById("memoInput");
const addButtonElement = document.getElementById("addButton");
const memoListElement = document.getElementById("memoList");
JavaScript

ここまでで、「JavaScript から HTML の要素に触れる準備」ができました。
次に、「追加ボタンが押されたときに何をするか」を書いていきます。

メモを画面に追加する処理を書く

まずは 1 個だけ追加してみる

いきなり「何個も追加」ではなく、
「ボタンを押したら 1 個メモが増える」というところから始めます。

addButtonElement.addEventListener("click", () => {
  const text = memoInputElement.value;

  const memoElement = document.createElement("p");
  memoElement.textContent = text;

  memoListElement.appendChild(memoElement);
});
JavaScript

これで、

テキストエリアに文字を書く
「追加」ボタンを押す
下の「メモ一覧」に p 要素が 1 つ増える

という動きになります。

ただし、このままだと問題があります。

空のままでも追加できてしまう
追加したあともテキストエリアに前の文字が残る

ここを少しずつ改善していきます。

入力チェックを入れる

空のメモは追加しないようにする

メモが空のまま追加されると、見た目も分かりにくくなります。
なので、空文字は弾きます。

addButtonElement.addEventListener("click", () => {
  const text = memoInputElement.value.trim();

  if (text === "") {
    return;
  }

  const memoElement = document.createElement("p");
  memoElement.textContent = text;

  memoListElement.appendChild(memoElement);
});
JavaScript

ここで trim を使っているのがポイントです。
スペースだけの入力（” “）も空とみなして弾けます。

追加後に入力欄をリセットする

ユーザーの気持ちを考えた挙動にする

メモを追加したあと、同じテキストが残っていると、
「もう一回押したら同じメモが増える」という事故が起きやすいです。
なので、追加後は入力欄を空にします。

addButtonElement.addEventListener("click", () => {
  const text = memoInputElement.value.trim();

  if (text === "") {
    return;
  }

  const memoElement = document.createElement("p");
  memoElement.textContent = text;

  memoListElement.appendChild(memoElement);

  memoInputElement.value = "";
});
JavaScript

これで、

書く → 追加 → 入力欄が空になる

という自然な流れになります。

関数分割で「役割」を整理する

追加処理を関数に切り出す

ここまでのコードは、まだ 1 つのイベントハンドラに処理が詰め込まれています。
Day21 で学んだ「関数分割」をここでも活かします。

まず、「メモを 1 つ画面に追加する処理」を関数にします。

function addMemoToList(text) {
  const memoElement = document.createElement("p");
  memoElement.textContent = text;
  memoListElement.appendChild(memoElement);
}
JavaScript

これを使ってイベントハンドラを書き直します。

addButtonElement.addEventListener("click", () => {
  const text = memoInputElement.value.trim();

  if (text === "") {
    return;
  }

  addMemoToList(text);
  memoInputElement.value = "";
});
JavaScript

こうすると、イベントハンドラは

入力値を取得する
空チェックをする
メモを追加する関数を呼ぶ
入力欄をリセットする

という「流れ」だけを担当するようになります。
見通しが良くなり、後半で localStorage を組み込むときにも楽になります。

デバッグ視点を少し入れておく

「おかしい」と感じたら console.log を仕込む

例えば、「ボタンを押しても何も出てこない」とき。
そんなときは、addEventListener の中に console.log を入れてみます。

addButtonElement.addEventListener("click", () => {
  console.log("追加ボタンが押されました");

  const text = memoInputElement.value.trim();
  console.log("入力されたテキスト:", text);

  if (text === "") {
    console.log("空なので追加しません");
    return;
  }

  addMemoToList(text);
  memoInputElement.value = "";
});
JavaScript

これで、

そもそもイベントが発火しているか
入力値がちゃんと取れているか
if に引っかかって return していないか

を一つずつ確認できます。

「動かない」ときに、いきなりコードをいじるのではなく、
まず「何が起きているか」を console.log で観察する。
この癖を、総合演習でも意識してほしいです。

前半の時点での完成コード

ここまでの「最小メモ帳」

前半のゴールとして、ここまでのコードをまとめておきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>簡易メモ帳</title>
  </head>
  <body>
    <h1>簡易メモ帳</h1>

    <h2>新しいメモ</h2>
    <textarea id="memoInput" rows="4" cols="40" placeholder="ここにメモを書いてください"></textarea>
    <p>
      <button id="addButton">追加</button>
    </p>

    <h2>メモ一覧</h2>
    <div id="memoList"></div>

    <script>
      const memoInputElement = document.getElementById("memoInput");
      const addButtonElement = document.getElementById("addButton");
      const memoListElement = document.getElementById("memoList");

      function addMemoToList(text) {
        const memoElement = document.createElement("p");
        memoElement.textContent = text;
        memoListElement.appendChild(memoElement);
      }

      addButtonElement.addEventListener("click", () => {
        const text = memoInputElement.value.trim();

        if (text === "") {
          return;
        }

        addMemoToList(text);
        memoInputElement.value = "";
      });
    </script>
  </body>
</html>

この時点では、メモはブラウザをリロードすると消えます。
でも、「入力 → 追加 → 表示」の流れは完成しています。
後半では、ここに localStorage を組み込んで、

メモを配列として管理する
配列を JSON で保存・読み込みする
ページ読み込み時にメモ一覧を復元する

という「本物のメモ帳」に育てていきます。

Day23 前半のまとめ

前半でやったことを整理すると、こうなります。

HTML で「入力欄」「ボタン」「表示エリア」を用意した
DOM から要素を取得して、イベントを設定した
メモを p 要素として画面に追加する処理を書いた
空入力を弾き、追加後に入力欄をリセットするようにした
addMemoToList という関数に分けて、役割を整理した

ここまでできていれば、後半の「保存機能追加」にスムーズに進めます。
今の段階で一度、自分の手で同じものを書いて動かしてみると、
理解がぐっと深くなります。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました