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

JavaScript JavaScript
スポンサーリンク

4日目のゴールとテーマ

4日目のテーマは「オブジェクトで“1人分の情報”をまとめる」です。
昨日までで、配列とループを使って「複数の数字」を扱えるようになりました。
今日はそこから一歩進めて、

1人分（1件分）の情報を1つにまとめる
その“1件”を配列にたくさん入れて「名簿」にする
ループで名簿をきれいに表示する

という、「アプリのデータの持ち方」の核心に触れていきます。
ここを通ると、一気に“アプリを設計する目”が育ちます。

オブジェクトとは「名前付きの引き出しの集合」

ただの数字や文字列では足りなくなる瞬間

例えば「人」を表現したいとします。
その人には、名前・年齢・メールアドレス…といった情報があります。

名前だけなら文字列1つで足りますが、
「名前と年齢とメールアドレス」を全部まとめて扱いたいとき、
変数をバラバラにするとこうなります。

let name = "山田太郎";
let age = 25;
let email = "taro@example.com";
JavaScript

これでも動きますが、「この3つが“同じ人の情報”だ」ということがコードからは分かりにくいです。
そこで登場するのが「オブジェクト」です。

オブジェクトの基本形

JavaScriptのオブジェクトは、こう書きます。

let person = {
  name: "山田太郎",
  age: 25,
  email: "taro@example.com"
};
JavaScript

ここで起きていることをかみ砕きます。

person という変数に、「1人分の情報」をまとめて入れている
中身は、name・age・email という“項目名（プロパティ名）”と、その値のセット
{ ... } で囲まれたものがオブジェクト

イメージとしては、「名前付きの引き出しがいくつも入った箱」です。
name という引き出しを開けると “山田太郎” が入っている、という感じです。

オブジェクトの中身を取り出す

ドット記法で「箱の中の引き出し」を開ける

さっき作った person から、名前や年齢を取り出してみます。

console.log(person.name);   // 山田太郎
console.log(person.age);    // 25
console.log(person.email);  // taro@example.com
JavaScript

person.name は、「person の中の name というプロパティ」を意味します。
この「変数名.プロパティ名」という書き方を「ドット記法」と呼びます。

ここでの重要ポイントは、「person という1つの変数の中に、複数の情報がまとまっている」ということです。
これができると、「1人分」「1件分」という単位で考えられるようになります。

オブジェクトを使って“自己紹介メッセージ”を作る

1件分の情報から、1つの文章を組み立てる

person を使って、自己紹介メッセージを作ってみましょう。

let person = {
  name: "山田太郎",
  age: 25,
  email: "taro@example.com"
};

let message = "私は " + person.name + " です。年齢は " + person.age + " 歳で、メールアドレスは " + person.email + " です。";

console.log(message);
JavaScript

結果はこうなります。

私は 山田太郎 です。年齢は 25 歳で、メールアドレスは taro@example.com です。

ここで意識してほしいのは、「person という“1人分の塊”から、必要な情報だけを取り出して組み立てている」という感覚です。
バラバラの変数ではなく、「1人＝1オブジェクト」という単位で扱うことで、頭の中の整理もしやすくなります。

オブジェクトを配列に入れると「名簿」になる

「1人分のオブジェクト」がたくさん並んだ配列

今度は、person を1人だけでなく、複数人分用意してみます。

let people = [
  { name: "山田太郎", age: 25, email: "taro@example.com" },
  { name: "佐藤花子", age: 30, email: "hanako@example.com" },
  { name: "鈴木次郎", age: 22, email: "jiro@example.com" }
];
JavaScript

ここでやっていることは、

[] の中に、{ ... } を3つ並べている
つまり、「オブジェクトの配列」を作っている
people[0] は1人目のオブジェクト、people[1] は2人目…

という構造です。

people[0] の中身を見てみましょう。

console.log(people[0].name);  // 山田太郎
console.log(people[1].email); // hanako@example.com
JavaScript

people[0].name は、「people の0番目の人の name」という意味です。
配列とオブジェクトが組み合わさると、こういう「階層的なアクセス」が出てきます。

ここが今日いちばん大事なポイントの1つです。
「配列で“たくさん”を表し、オブジェクトで“1件分”を表す」
この組み合わせが、アプリのデータ構造の基本になります。

ループで名簿をきれいに表示する

for を使って「全員分の自己紹介」を出す

people 配列の全員分を、自己紹介として表示してみましょう。

let people = [
  { name: "山田太郎", age: 25, email: "taro@example.com" },
  { name: "佐藤花子", age: 30, email: "hanako@example.com" },
  { name: "鈴木次郎", age: 22, email: "jiro@example.com" }
];

for (let i = 0; i < people.length; i = i + 1) {
  let person = people[i];

  let message = "私は " + person.name + " です。年齢は " + person.age + " 歳で、メールアドレスは " + person.email + " です。";

  console.log(message);
}
JavaScript

実行すると、3人分の自己紹介が順番に表示されます。

ここで深掘りしたいポイントは3つです。

1つ目、「ループの中で let person = people[i]; としている」こと。
毎回「i番目の人」を person という変数に入れてから使うことで、
people[i].name のような長い書き方を避けて、読みやすくしています。

2つ目、「配列の長さ people.length を使っている」こと。
人数が増えても、length を使っていればループの回数を自動で合わせてくれます。

3つ目、「配列＋オブジェクト＋ループ」がきれいに組み合わさっていること。
これがまさに、「名簿アプリの土台」となるパターンです。

ユーザー入力からオブジェクトを作る

prompt を使って「1人分のデータ」を作る

今度は、ユーザーに入力してもらった情報から、person オブジェクトを作ってみます。

let name = prompt("名前を入力してください：");
let ageText = prompt("年齢を入力してください：");
let email = prompt("メールアドレスを入力してください：");

let age = Number(ageText);

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

console.log("登録された人：");
console.log(person);
JavaScript

コンソールには、オブジェクトの中身がそのまま表示されます。

ここでの重要ポイントは、「入力された値をそのままオブジェクトに詰めている」ことです。
name, age, email という変数を一度作り、それを { name: name, age: age, email: email } にまとめています。

実は、プロパティ名と変数名が同じときは、もっと短く書けます。

let person = {
  name,
  age,
  email
};
JavaScript

これは「name: name, age: age, email: email」と同じ意味です。
4日目の時点では「こういう省略もあるんだ」くらいで大丈夫です。

入力した人を配列にどんどん追加する

簡易「名簿登録アプリ」をコンソールで作る

ここまでの要素を組み合わせて、
「何人かの情報を入力して、最後に一覧表示する」ミニアプリを書いてみます。

仕様はこうします。

人数を先に入力してもらう
その人数分だけ、名前・年齢・メールアドレスを聞く
1人分ごとにオブジェクトを作り、配列に入れる
最後に全員分の自己紹介を表示する

コードはこうです。

let countText = prompt("何人分の情報を登録しますか？");
let count = Number(countText);

if (Number.isNaN(count) || count <= 0) {
  console.log("1以上の数字で入力してください。");
} else {
  let people = [];

  for (let i = 0; i < count; i = i + 1) {
    console.log((i + 1) + "人目の情報を入力します。");

    let name = prompt("名前：");
    let ageText = prompt("年齢：");
    let email = prompt("メールアドレス：");

    let age = Number(ageText);

    let person = {
      name,
      age,
      email
    };

    people.push(person);
  }

  console.log("登録された人の一覧：");

  for (let i = 0; i < people.length; i = i + 1) {
    let person = people[i];
    let message = "名前: " + person.name + " / 年齢: " + person.age + " / メール: " + person.email;
    console.log(message);
  }
}
JavaScript

ここで深掘りしたいポイントがいくつかあります。

最初に「何人分か」を聞いて、その回数だけ for で回している
1人分の入力が終わるたびに、person オブジェクトを作って people 配列に push している
最後に、people 配列をループして一覧表示している

つまり、

入力フェーズ（for + prompt + オブジェクト作成 + push）
表示フェーズ（for + console.log）

という2フェーズ構成になっています。
これは、今後いろんなアプリで繰り返し出てくる“型”です。

条件分岐と組み合わせて「フィルタ表示」してみる

20歳以上だけを表示する

せっかく年齢も持っているので、「20歳以上だけ表示する」という機能も試してみましょう。
さっきの people 配列がある前提で、次のように書けます。

console.log("20歳以上の人の一覧：");

for (let i = 0; i < people.length; i = i + 1) {
  let person = people[i];

  if (person.age >= 20) {
    let message = "名前: " + person.name + " / 年齢: " + person.age;
    console.log(message);
  }
}
JavaScript

ここでの重要ポイントは、「ループの中で if を使っている」ことです。

全員をループでなめながら、
条件に合う人だけを表示する、というパターンです。

これは、3日目までに学んだ「ループ」と2日目の「条件分岐」が、
4日目の「オブジェクト」ときれいに組み合わさった瞬間です。

4日目で一番大事な感覚

「1件分を“塊”として扱うと、アプリが見えてくる」

今日あなたが手に入れたのは、

オブジェクトで「1人分（1件分）の情報」を1つにまとめる力
そのオブジェクトを配列に入れて「名簿（一覧）」を作る力
ループ＋条件分岐で「一覧を表示したり、絞り込んだり」する力

です。

ここまで来ると、もう「名簿アプリ」「タスク管理アプリ」「商品リスト」など、
いろんなアプリの“骨格”が頭の中に見えるようになってきます。

1件分のオブジェクト
その配列
配列をループして表示・検索・絞り込み

この3つのセットが、アプリのデータ処理の基本パターンです。

4日目のまとめ

今日のキーポイントを短く整理すると、

オブジェクト { ... } で「名前付きの情報のセット」を作れるようになった
person.name のようなドット記法で、中身を取り出せるようになった
オブジェクトの配列（[{...}, {...}, ...]）で「名簿」のような構造を作れた
prompt から入力した値をオブジェクトに詰めて、配列に push する流れを体験した
ループ＋if＋オブジェクトで、「20歳以上だけ表示」などのフィルタ処理が書けるようになった

次の5日目では、
いよいよ「ブラウザの画面（HTML）とJavaScriptをつなげて、
実際に“画面に名簿を表示する”」方向に進んでいきます。

もし余裕があれば、
今日の名簿ミニアプリに「特定の名前だけ表示する」「メールアドレスが空の人を警告する」など、
自分なりのルールを足して遊んでみてください。
それを考える時間が、そのまま“アプリ設計の筋トレ”になります。

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