JavaScript | 2週間で身につく、アプリを作りながら学ぶJavaScriptの基本 － 6日目

JavaScript JavaScript
スポンサーリンク

6日目のゴールとテーマ

6日目のテーマは「ブラウザ上で動く“名簿アプリ”の最初の形を作る」です。
4日目で学んだ「オブジェクト＋配列」、5日目で学んだ「HTMLとJavaScriptの連携」を組み合わせて、
今日は「人を登録して、画面に一覧表示する」というところまで持っていきます。

ポイントは三つです。
画面は「ただの入れ物」で、データの本体は JavaScript 側に持つこと。
配列を「アプリの状態（state）」として扱うこと。
配列の中身をもとに「画面を描き直す」という考え方を身につけること。

ここが分かると、もう立派に「アプリを作る人の頭」になっていきます。

今日作るミニアプリのイメージ

機能のイメージを先に言葉で決める

まずは、どんな動きをするアプリにするかを言葉で決めます。
「名前と年齢を入力して『追加』ボタンを押すと、下に名簿として追加されていく」
これだけです。シンプルですが、アプリの基本が全部入っています。

ユーザーが入力する。
JavaScriptがオブジェクトを作って配列に入れる。
配列の中身をもとに、画面の一覧を描き直す。

この流れを、今日は丁寧にコードに落としていきます。

HTMLの土台を用意する

入力欄とボタンと「一覧表示エリア」

テキストエディタで index.html を開き、次のような内容にします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>6日目：名簿ミニアプリ</title>
</head>
<body>
  <h1>名簿ミニアプリ</h1>

  <div>
    <input type="text" id="name-input" placeholder="名前">
    <input type="text" id="age-input" placeholder="年齢">
    <button id="add-button">追加</button>
  </div>

  <h2>登録された人一覧</h2>
  <div id="list-area">
    まだ誰も登録されていません。
  </div>

  <script src="main.js"></script>
</body>
</html>
HTML

ここで押さえておきたいのは三つです。
名前と年齢の入力欄に、それぞれ id を付けていること。
「追加」ボタンにも id を付けていること。
一覧を表示する場所として、id="list-area" の div を用意していること。

JavaScript は、この id を手がかりに HTML 要素をつかまえて操作していきます。

JavaScript側の「状態」として配列を持つ

people 配列をアプリの“心臓”にする

main.js を作り、まずは次のように書きます。

let people = [];

let nameInputElement = document.getElementById("name-input");
let ageInputElement = document.getElementById("age-input");
let addButtonElement = document.getElementById("add-button");
let listAreaElement = document.getElementById("list-area");
JavaScript

ここでやっていることをかみ砕きます。
people という空の配列を用意しています。ここに「1人分のオブジェクト」をどんどん入れていきます。
その下で、HTML 側の入力欄、ボタン、一覧表示エリアを、それぞれ変数としてつかんでいます。

大事なのは、「データの本体は people 配列にある」という意識です。
画面はあくまで「people の中身を見せているだけ」です。

一覧を描く関数 renderList を作る

「配列の中身から画面を作る」専用の関数

次に、「今の people 配列の中身をもとに、list-area の中身を全部描き直す」関数を作ります。

function renderList() {
  if (people.length === 0) {
    listAreaElement.textContent = "まだ誰も登録されていません。";
    return;
  }

  let lines = [];

  for (let i = 0; i < people.length; i = i + 1) {
    let person = people[i];
    let line = (i + 1) + "人目: 名前: " + person.name + " / 年齢: " + person.age + "歳";
    lines.push(line);
  }

  let text = lines.join("\n");

  listAreaElement.textContent = text;
}
JavaScript

ここでの重要ポイントを丁寧に見ていきます。

最初に「誰もいないとき」の特別処理をしていること。
people.length が 0 のときは、メッセージを出して return で関数を終わらせています。

次に、lines という配列を用意していること。
これは「画面に表示する1行1行の文字列」を一時的にためておく配列です。

for ループの中で、i 番目の person を取り出し、
「何人目か」「名前」「年齢」を1つの文字列 line にまとめて、lines に push しています。

最後に、lines.join(“\n”) で、配列の中身を改行でつないで1つの長い文字列にしています。
それを listAreaElement.textContent に入れることで、一覧として表示しています。

ここで大事なのは、「画面を直接ちょこちょこいじる」のではなく、
「配列 → 文字列 → 一括で表示」という流れにしていることです。
この「render（描画）関数」を1つ持っておくと、
データが変わったときに「とりあえず renderList を呼べば画面が最新になる」という状態を作れます。

「追加」ボタンが押されたときの処理を書く

入力値からオブジェクトを作り、配列に入れて、描画する

次に、「追加」ボタンにイベントを登録します。

addButtonElement.addEventListener("click", function () {
  let name = nameInputElement.value;
  let ageText = ageInputElement.value;

  if (name === "") {
    alert("名前を入力してください。");
    return;
  }

  let age = Number(ageText);

  if (Number.isNaN(age) || age < 0) {
    alert("年齢は0以上の数字で入力してください。");
    return;
  }

  let person = {
    name: name,
    age: age
  };

  people.push(person);

  nameInputElement.value = "";
  ageInputElement.value = "";

  renderList();
});
JavaScript

ここでの重要ポイントを深掘りします。

まず、入力欄から値を取り出しています。
nameInputElement.value で名前、ageInputElement.value で年齢の文字列を取得しています。

次に、入力チェックをしています。
名前が空文字なら alert を出して return で処理を中断しています。
年齢は Number に変換し、NaN だったりマイナスだったりしたら、同じく alert して return しています。

そのあとで、person オブジェクトを作っています。
name と age をプロパティに持つ、1人分の情報の塊です。

people.push(person) で、その人を配列に追加しています。
これで「アプリの状態」が1件増えました。

入力欄を空文字に戻して、ユーザーが次の入力をしやすいようにしています。

最後に renderList() を呼んでいます。
これがとても大事で、「配列が変わったら、必ず renderList を呼んで画面を最新にする」というルールを自分の中に作ると、コードが整理されていきます。

初期表示でも renderList を呼んでおく

「最初の状態」も関数で描く

ファイルの最後に、次の1行を足しておきます。

renderList();
JavaScript

これで、ページを開いた瞬間にも「まだ誰も登録されていません。」というメッセージが表示されます。
つまり、「初期状態の描画」も「追加後の描画」も、同じ関数でやっていることになります。

この「状態が変わったら render、最初も render」というパターンは、
現代のフロントエンドフレームワーク（React など）にも通じる、とても大事な考え方です。
今はそこまで意識しなくていいですが、「画面は状態の結果である」という感覚だけ持っておいてください。

少し発展：削除機能をどう考えるか

まずは「考え方」だけ触れておく

今日は実装まではやりませんが、
「もし削除機能を付けるならどうするか」を少しだけ考えてみます。

例えば、「3人目を削除したい」となったとき、
やるべきことは二つです。

people 配列から「3人目の要素」を取り除く。
そのあと renderList() を呼んで、画面を描き直す。

つまり、「画面を直接いじって消す」のではなく、
「配列（状態）を変えてから、画面は render に任せる」という流れは変わりません。

この「状態を変える → 画面は関数で再描画」という筋を通しておくと、
機能が増えてもコードがぐちゃぐちゃになりにくくなります。

6日目で一番大事な感覚

「配列が“アプリの状態”になった」

今日あなたが手に入れたのは、
配列を「アプリの状態」として扱う感覚です。

people という配列に「今登録されている人たち」が全部入っている。
画面は、people をもとに renderList が描いているだけ。
追加ボタンを押すと、people が変わり、renderList が呼ばれて画面が更新される。

この構造が見えた時点で、あなたはもう「アプリの骨格」を理解しています。
あとは、ここに「削除」「編集」「検索」などの機能を少しずつ足していくだけです。

6日目のまとめ

今日のキーポイントを短くまとめると、こうなります。

HTML側に「入力欄」「ボタン」「一覧表示エリア」を用意し、id で名前を付けた。
JavaScript側で getElementById を使って、それらを変数としてつかんだ。
people 配列を「名簿データの本体」として持ち、1人分をオブジェクトで表現した。
renderList 関数で「people の中身から画面の一覧を描く」処理をまとめた。
ボタンのクリックイベントで、入力値のチェック → オブジェクト作成 → 配列に追加 → renderList という流れを書いた。

次の7日目では、この名簿ミニアプリを少し発展させて、
「検索」や「並び替え」といった“ちょっと便利な機能”に踏み込んでいきます。

もし余裕があれば、
今日のアプリに「年齢が20歳以上の人だけを表示するボタン」や
「登録人数を別の場所に表示する」などを自分で考えて足してみてください。
その試行錯誤こそが、アプリ開発の一番おもしろい部分です。

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