JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：JavaScriptを使えるレベルにする － Day15：総合演習①　練習問題

JavaScript JavaScript
スポンサーリンク

Day15：総合演習①の練習問題

ボタンクリックで文字を変更する仕組みは、DOM 操作の基礎をすべて含んだ「総合問題」です。
document.getElementById、textContent、イベント処理、状態管理など、Day14 までの内容をまとめて使います。

基本問題：ボタンを押したら文字を変える

問題1：ボタンを押したら id=”title” の文字を「変更されました」に書き換えてください

次の HTML を前提とします。

<h1 id="title">元のタイトル</h1>
<button id="btn">変更</button>

解答と解説

const titleElement = document.getElementById("title");
const btnElement = document.getElementById("btn");

btnElement.addEventListener("click", () => {
  titleElement.textContent = "変更されました";
});
JavaScript

document.getElementById で要素を取得し、
addEventListener(“click”) で「クリックされたら実行する処理」を登録します。
textContent に代入することで、画面の文字が即座に変わります。

応用問題：押すたびに文字を切り替える（トグル）

問題2：ボタンを押すたびに「こんにちは」と「こんばんは」を切り替えてください

次の HTML を前提とします。

<h1 id="title">こんにちは</h1>
<button id="btn">切り替え</button>

解答と解説

const titleElement = document.getElementById("title");
const btnElement = document.getElementById("btn");

let isMorning = true;

btnElement.addEventListener("click", () => {
  if (isMorning) {
    titleElement.textContent = "こんばんは";
    isMorning = false;
  } else {
    titleElement.textContent = "こんにちは";
    isMorning = true;
  }
});
JavaScript

ここで重要なのは「状態を変数で持つ」ことです。
isMorning が true なら「こんにちは」、false なら「こんばんは」。
クリックのたびに isMorning を反転させることで、表示が切り替わります。

応用問題：状態と表示を関数で整理する

問題3：表示更新処理を updateTitle() 関数に切り出してください

次の仕様を満たしてください。

・isMorning が true なら「こんにちは」
・false なら「こんばんは」
・クリック時に isMorning を反転し、updateTitle() を呼ぶ

解答と解説

const titleElement = document.getElementById("title");
const btnElement = document.getElementById("btn");

let isMorning = true;

function updateTitle() {
  if (isMorning) {
    titleElement.textContent = "こんにちは";
  } else {
    titleElement.textContent = "こんばんは";
  }
}

btnElement.addEventListener("click", () => {
  isMorning = !isMorning;
  updateTitle();
});

updateTitle();
JavaScript

状態（isMorning）と表示処理（updateTitle）を分けることで、
コードが読みやすく、拡張しやすくなります。
これは実務でもよく使う「ロジックと表示の分離」です。

実務寄り問題：要素が見つからない場合の安全な処理

問題4：id のスペルミスなどで要素が取得できなかった場合、エラーメッセージを出してください

次の仕様を満たしてください。

・titleElement または btnElement が null の場合
・console.error でエラーを出す
・null でなければ通常の処理を行う

解答と解説

const titleElement = document.getElementById("title");
const btnElement = document.getElementById("btn");

if (!titleElement || !btnElement) {
  console.error("必要な要素が見つかりません。id のスペルを確認してください。");
} else {
  let isMorning = true;

  btnElement.addEventListener("click", () => {
    if (isMorning) {
      titleElement.textContent = "こんばんは";
    } else {
      titleElement.textContent = "こんにちは";
    }
    isMorning = !isMorning;
  });
}
JavaScript

DOM 操作では「要素が存在しない」ことがよくあります。
そのまま textContent に触るとエラーになるため、
安全性のために null チェックを入れるのは非常に重要です。

発展問題：ボタンの文字も切り替える

問題5：タイトルだけでなく、ボタンの文字も切り替えてください

仕様は次の通りです。

・タイトルが「こんにちは」のとき、ボタンは「こんばんはにする」
・タイトルが「こんばんは」のとき、ボタンは「こんにちはに戻す」

解答と解説

const titleElement = document.getElementById("title");
const btnElement = document.getElementById("btn");

let isMorning = true;

function updateView() {
  if (isMorning) {
    titleElement.textContent = "こんにちは";
    btnElement.textContent = "こんばんはにする";
  } else {
    titleElement.textContent = "こんばんは";
    btnElement.textContent = "こんにちはに戻す";
  }
}

btnElement.addEventListener("click", () => {
  isMorning = !isMorning;
  updateView();
});

updateView();
JavaScript

タイトルとボタンの両方を「状態に応じて更新」しています。
このように「画面全体を状態から再構築する」考え方は、
React や Vue などのフレームワークにもつながる重要な概念です。

Day15 練習問題まとめ

Day15 の総合演習では、
document.getElementById
textContent
addEventListener
状態管理（変数）
条件分岐
関数化

といった DOM 操作の基礎をすべて使いました。

今回の練習問題で、
・ボタンクリックで文字を変える
・押すたびに切り替える
・状態を変数で管理する
・表示更新を関数にまとめる
・安全な DOM 操作（null チェック）
・ボタンの文字も動的に変える

といった「小さなアプリを自分で組み立てる力」が身につきました。

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