JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：ミニWebアプリ開発 － Day30：総復習

Day30 後半のゴール

前半では「条件分岐」「配列」「DOM 操作」「イベント処理」を、
それぞれ単体で確認しました。

後半では、それらを全部まとめて
「小規模 Web アプリを自分で組み立てられるか」
という視点で整理していきます。

ここで大事なのは、
文法を覚えているかどうかではなく、
機能を組み合わせて「動くもの」を設計できるかどうかです。

小規模 Web アプリとは何かを言葉にしてみる

「入力があって、状態があって、画面が変わるもの」

小規模 Web アプリを、あえてシンプルに定義すると
「ユーザーの入力に応じて、内部の状態が変わり、その結果として画面が変わるもの」
です。

例えば、TODO アプリを分解すると、こうなります。

入力
テキストボックスと追加ボタン

状態
tasks 配列（タスクの一覧）

画面
tasks をもとに作られたタスクリストの DOM

そして、
入力があるたびに状態が変わり、
状態が変わるたびに画面を描き直す、
というサイクルで動いています。

この「入力 → 状態 → 画面」の流れを意識できると、
どんなミニアプリも設計しやすくなります。

小さなアプリを設計する思考の順番

先に「日本語で仕様を書く」ことの大切さ

いきなりコードを書き始めるのではなく、
まず日本語で仕様を書き出すのが、実は一番の近道です。

例えば「簡単なカウンターアプリ」を作るとします。

ボタンを押すと数字が 1 ずつ増える
もう一つのボタンで 1 ずつ減らせる
現在の値を画面に表示する
0 未満にはならないようにする

この時点で、すでに必要な要素が見えてきます。

状態
現在の数値（number 型の変数）

条件分岐
0 未満にならないようにする if 文

DOM
数字を表示する要素
ボタン 2 つ

イベント処理
増やすボタンの click
減らすボタンの click

こうやって「必要な部品」を先に洗い出してから、
JavaScript のコードに落としていきます。

例題1：カウンターアプリをゼロから組み立てる

HTML のイメージを頭に描く

まず、画面に何が必要かを考えます。

現在の数値を表示する場所
増やすボタン
減らすボタン

HTML としては、例えばこんな形を想像できます。

<p id="count">0</p>
<button id="incrementButton">＋</button>
<button id="decrementButton">−</button>

ここまで決まれば、あとは JavaScript で
「状態」と「イベント」と「DOM 更新」を書いていくだけです。

JavaScript で状態とイベントをつなぐ

カウンターアプリの JavaScript は、こう書けます。

const countElement = document.getElementById("count");
const incrementButtonElement = document.getElementById("incrementButton");
const decrementButtonElement = document.getElementById("decrementButton");

let count = 0;

function renderCount() {
  countElement.textContent = count;
}

incrementButtonElement.addEventListener("click", () => {
  count = count + 1;
  renderCount();
});

decrementButtonElement.addEventListener("click", () => {
  if (count === 0) {
    return;
  }
  count = count - 1;
  renderCount();
});

renderCount();

const countElement = document.getElementById("count");
const incrementButtonElement = document.getElementById("incrementButton");
const decrementButtonElement = document.getElementById("decrementButton");

let count = 0;

function renderCount() {
  countElement.textContent = count;
}

incrementButtonElement.addEventListener("click", () => {
  count = count + 1;
  renderCount();
});

decrementButtonElement.addEventListener("click", () => {
  if (count === 0) {
    return;
  }
  count = count - 1;
  renderCount();
});

renderCount();

ここには、Day30 までに学んだ要素がすべて入っています。

条件分岐
0 のときは減らさない if 文

配列は使っていませんが、「状態を変える」という感覚は同じです。

DOM 操作
countElement.textContent で表示を更新

イベント処理
ボタンの click に反応して状態を変える

このように、
小さなアプリでも「学んだ要素の集合体」であることが分かると思います。

例題2：簡易 TODO 風アプリを自分で設計してみる

機能を最小限に絞った TODO を考える

今度は、TODO アプリの超シンプル版を自分で設計してみます。

機能は次の 3 つだけに絞ります。

タスクを追加できる
タスク一覧を表示できる
空文字は追加しない

ここでも、まず日本語で分解します。

入力
テキストボックスと追加ボタン

状態
tasks 配列（文字列の配列でもよい）

条件分岐
入力が空なら追加しない

DOM
タスクリストを表示する要素

イベント処理
追加ボタンの click

コードに落とし込む

HTML のイメージはこうです。

<input id="taskInput" />
<button id="addButton">追加</button>
<div id="taskList"></div>

JavaScript は、こう書けます。

const taskInputElement = document.getElementById("taskInput");
const addButtonElement = document.getElementById("addButton");
const taskListElement = document.getElementById("taskList");

let tasks = [];

function renderTasks() {
  taskListElement.textContent = "";

  tasks.forEach((task) => {
    const itemElement = document.createElement("div");
    itemElement.textContent = task;
    taskListElement.appendChild(itemElement);
  });
}

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

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

  tasks.push(text);
  renderTasks();
  taskInputElement.value = "";
});

renderTasks();

const taskInputElement = document.getElementById("taskInput");
const addButtonElement = document.getElementById("addButton");
const taskListElement = document.getElementById("taskList");

let tasks = [];

function renderTasks() {
  taskListElement.textContent = "";

  tasks.forEach((task) => {
    const itemElement = document.createElement("div");
    itemElement.textContent = task;
    taskListElement.appendChild(itemElement);
  });
}

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

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

  tasks.push(text);
  renderTasks();
  taskInputElement.value = "";
});

renderTasks();

ここでも、Day30 の確認ポイントが全部出てきます。

条件分岐
入力が空なら return

配列操作
tasks.push
tasks.forEach

DOM 操作
要素を作って appendChild
textContent で表示更新

イベント処理
ボタンの click

「小規模 Web アプリを作れるか」という問いは、
言い換えると
「これらを自分で組み合わせて書けるか」
ということです。

自分でアプリを設計するときのチェックポイント

4 つの質問で設計を見直す

何かミニアプリを作ろうとしたとき、
次の 4 つを自分に問いかけてみてください。

どんな状態（データ）を持つ必要があるか
その状態は配列か、オブジェクトか、単なる数値か
どんなイベントが起きたときに状態が変わるか
状態が変わったとき、画面のどこをどう更新するか

例えば「簡単なメモ帳アプリ」を作るなら、こう考えられます。

状態
メモの配列

イベント
追加ボタンの click
削除ボタンの click

画面更新
メモ一覧を描画し直す

この 4 つが言葉で説明できれば、
あとは Day30 までに学んだ文法を組み合わせるだけです。

Day30 後半のまとめ

Day30 後半で一番伝えたいのは、
「あなたはもう、小さな Web アプリを自分で設計できるところまで来ている」
ということです。

条件分岐で状況に応じて処理を変えられる
配列で複数のデータを扱える
DOM を作って、書き換えて、消せる
イベントでユーザーの操作に反応できる

これらを組み合わせれば、
カウンター、簡易 TODO、メモ帳、タイマー、簡単なゲームなど、
いくらでもミニアプリを作れます。

ここから先は、
「何を作りたいか」を自分で決めて、
今日までのピースをどう組み合わせるかを楽しむフェーズです。