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

JavaScript JavaScript
スポンサーリンク

Day23：総合演習②（簡易メモ帳）の練習問題

Day23 のテーマは「簡易メモ帳」。
ここまで学んだ DOM 操作・イベント・関数分割・localStorage・デバッグ を総動員して作る総合演習です。
以下では、初心者でも確実に力がつくように、段階的な練習問題と丁寧な解答解説をまとめています。

メモ追加機能の基礎

問題1：入力されたメモを画面に追加してください

次の HTML を前提とします。

<textarea id="memoInput"></textarea>
<button id="addButton">追加</button>
<div id="memoList"></div>

メモを入力し「追加」ボタンを押すと、memoList に p 要素として追加されるようにしてください。

解答と解説

const memoInput = document.getElementById("memoInput");
const addButton = document.getElementById("addButton");
const memoList = document.getElementById("memoList");

addButton.addEventListener("click", () => {
  const text = memoInput.value.trim();

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

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

  memoInput.value = "";
});
JavaScript

ここでの重要ポイントは
入力値を trim で整える
空文字は追加しない
DOM に p 要素を作って appendChild する
追加後に入力欄をリセットする

という「メモ帳の基本動作」を押さえることです。

関数分割で処理を整理する

問題2：メモ追加処理を addMemo 関数に分けてください

問題1のコードを、次のように関数分割してください。

仕様：
addMemo(text) を作り、メモを画面に追加する処理をまとめる。

解答と解説

function addMemo(text) {
  const p = document.createElement("p");
  p.textContent = text;
  memoList.appendChild(p);
}

addButton.addEventListener("click", () => {
  const text = memoInput.value.trim();

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

  addMemo(text);
  memoInput.value = "";
});
JavaScript

関数分割のメリットは
イベントハンドラが「流れ」だけを担当する
見通しが良くなる
後で localStorage を組み込むときに拡張しやすい

という点にあります。

配列でメモを管理する

問題3：メモを memos 配列に保存し、画面は renderMemos で描画してください

仕様：
memos 配列を作る
メモ追加時に memos.push(text)
renderMemos() で memos の内容を画面に描画する

解答と解説

let memos = [];

function renderMemos() {
  memoList.textContent = "";

  memos.forEach((text) => {
    const p = document.createElement("p");
    p.textContent = text;
    memoList.appendChild(p);
  });
}

addButton.addEventListener("click", () => {
  const text = memoInput.value.trim();

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

  memos.push(text);
  renderMemos();
  memoInput.value = "";
});
JavaScript

ここでの重要ポイントは
「画面の状態」ではなく「配列の状態」を正とする
画面は renderMemos でいつでも再構築できる

という構造に変わったことです。
これが localStorage と相性抜群の設計です。

localStorage に保存する

問題4：memos 配列を localStorage に保存する saveMemos 関数を作ってください

仕様：
saveMemos() を作り、memos を JSON.stringify して保存する
メモ追加時に saveMemos() を呼ぶ

解答と解説

function saveMemos() {
  const json = JSON.stringify(memos);
  localStorage.setItem("memos", json);
}

addButton.addEventListener("click", () => {
  const text = memoInput.value.trim();

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

  memos.push(text);
  saveMemos();
  renderMemos();
  memoInput.value = "";
});
JavaScript

localStorage は文字列しか保存できないため、
配列は JSON.stringify で文字列化する必要があります。

localStorage から復元する

問題5：ページ読み込み時に memos を復元する loadMemos 関数を作ってください

仕様：
localStorage.getItem(“memos”) を取得
null でなければ JSON.parse して memos に代入
最後に renderMemos() を呼ぶ

解答と解説

function loadMemos() {
  const json = localStorage.getItem("memos");
  if (json === null) {
    memos = [];
    return;
  }
  memos = JSON.parse(json);
}

loadMemos();
renderMemos();
JavaScript

これで「リロードしてもメモが残る」メモ帳になります。

デバッグ練習

問題6：メモが保存されないとき、どこを console.log で確認すべきか説明してください

仕様：
saveMemos が正しく呼ばれているか
localStorage に保存される JSON が正しいか
loadMemos で読み込んだ JSON が正しいか

解答と解説

確認すべきポイントは次の三つです。

saveMemos 内で JSON を console.log

console.log("保存する JSON:", json);
JavaScript

localStorage.getItem の結果を console.log

console.log("読み込んだ JSON:", json);
JavaScript

JSON.parse 後の memos を console.log

console.log("復元した memos:", memos);
JavaScript

これにより
保存されていないのか
読み込めていないのか
JSON が壊れているのか

原因を正確に切り分けられます。

総合問題

問題7：以下の仕様を満たす簡易メモ帳を完成させてください

仕様：
メモを追加できる
空文字は追加しない
memos 配列で管理する
localStorage に保存する
ページ読み込み時に復元する
関数分割を行う（renderMemos / saveMemos / loadMemos）

解答と解説（完成コード）

const memoInput = document.getElementById("memoInput");
const addButton = document.getElementById("addButton");
const memoList = document.getElementById("memoList");

let memos = [];

function renderMemos() {
  memoList.textContent = "";
  memos.forEach((text) => {
    const p = document.createElement("p");
    p.textContent = text;
    memoList.appendChild(p);
  });
}

function saveMemos() {
  const json = JSON.stringify(memos);
  localStorage.setItem("memos", json);
}

function loadMemos() {
  const json = localStorage.getItem("memos");
  if (json === null) {
    memos = [];
    return;
  }
  memos = JSON.parse(json);
}

addButton.addEventListener("click", () => {
  const text = memoInput.value.trim();

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

  memos.push(text);
  saveMemos();
  renderMemos();
  memoInput.value = "";
});

loadMemos();
renderMemos();
JavaScript

このコードは Day23 の総まとめであり、
「小さな Web アプリ」を自分で作れる実力がついた証拠です。

Day23 練習問題まとめ

今回の練習問題で、次の力が身につきます。

メモ追加の DOM 操作
関数分割による整理
配列でのデータ管理
localStorage による永続化
JSON の扱い
デバッグによる原因特定

これらは、今後どんな Web アプリを作るときにも必ず使う基礎技術です。

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