JavaScript | 1 日 60 分 × 7 日アプリ学習：超初級編

JavaScript
スポンサーリンク

6日目のゴールと今日のテーマ

6日目のテーマは「オブジェクトで“意味のあるデータ”を扱えるようになること」です。
昨日までは、配列で「文字列のリスト」を扱ってきました。今日はそこに、

オブジェクト（名前付きの情報のセット）
配列＋オブジェクトで「1件のデータ」を表現する
メニューに「値段」などの情報を足して扱う

を足して、「データ構造がちょっと“アプリっぽく”なる感覚」をつかんでもらいます。

ゴールはこうです。
オブジェクトとは何かを、自分の言葉で説明できる。
オブジェクトのプロパティを読み書きできる。
「配列の中にオブジェクト」を入れて、メニュー＋値段を扱える。

ここまで行けたら、超初級6日目としてかなりいい仕上がりです。

オブジェクトとは何かをイメージでつかむ

「名前付きの情報をまとめた1セット」

オブジェクトは、「名前付きの情報をまとめた1セット」です。
人間で言えば、「1人のプロフィール」がわかりやすい例です。

名前
年齢
趣味

これをバラバラの変数で持つと、こうなります。

let name = "太郎";
let age = 20;
let hobby = "ゲーム";
JavaScript

でも、「この3つは“太郎さん”という1人の情報だよね」とまとめたくなります。
そこで使うのがオブジェクトです。

let person = {
  name: "太郎",
  age: 20,
  hobby: "ゲーム"
};
JavaScript

この1つの person の中に、「名前」「年齢」「趣味」がセットで入っています。

プロパティを取り出す

オブジェクトの中の1つ1つの情報を「プロパティ」と呼びます。
取り出すときは、.（ドット）を使います。

console.log(person.name);   // 太郎
console.log(person.age);    // 20
console.log(person.hobby);  // ゲーム
JavaScript

ここでの重要ポイントは、

person は「1人分の情報の塊」
person.name は「その中の“name”という名前の情報」

という感覚です。

オブジェクトを使うメリットを感じてみる

バラバラの変数との違い

バラバラの変数で書くと、こんな感じになります。

let name = "太郎";
let age = 20;

console.log("名前: " + name);
console.log("年齢: " + age);
JavaScript

オブジェクトで書くと、こうです。

let person = {
  name: "太郎",
  age: 20
};

console.log("名前: " + person.name);
console.log("年齢: " + person.age);
JavaScript

一見、手間は変わらないように見えます。
でも、「人が増えたとき」を想像してみてください。

バラバラの変数だと、

let name1 = "太郎";
let age1 = 20;

let name2 = "花子";
let age2 = 25;
JavaScript

と、名前に番号をつけていくことになります。
一方、オブジェクトなら、

let person1 = { name: "太郎", age: 20 };
let person2 = { name: "花子", age: 25 };
JavaScript

と、「1人＝1オブジェクト」で考えられます。
この「1件のデータを1つのオブジェクトで表す」という感覚が、アプリのデータ設計の土台になります。

配列＋オブジェクトで「複数件のデータ」を扱う

「人のリスト」を配列＋オブジェクトで表現する

昨日は「文字列の配列」をやりました。
今日は、「オブジェクトの配列」をやります。

例えば、「複数人のプロフィール」を配列で持つとこうなります。

let people = [
  { name: "太郎", age: 20 },
  { name: "花子", age: 25 },
  { name: "次郎", age: 18 }
];
JavaScript

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

people[0] は「太郎さんのオブジェクト」
people[1] は「花子さんのオブジェクト」
people[2] は「次郎さんのオブジェクト」

という「オブジェクトのリスト」を作ることです。

取り出してみましょう。

console.log(people[0].name);  // 太郎
console.log(people[1].age);   // 25
JavaScript

ここでの重要ポイントは、「配列の要素がオブジェクトになっている」ということです。
つまり、「複数件の“意味のあるデータ”」を扱えるようになっています。

for 文で全員分を表示する

配列なので、もちろん for 文で回せます。

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

実行すると、こんな感じになります。

名前: 太郎 / 年齢: 20
名前: 花子 / 年齢: 25
名前: 次郎 / 年齢: 18

ここでの流れは、

people[i] で「i番目の人のオブジェクト」を取り出す。
その中の name と age を使って表示する。

というシンプルなものです。
でも、これができると一気に「アプリのデータっぽさ」が出てきます。

メニューに「値段」を足してみる

昨日のメニューをオブジェクトにする

5日目では、こんなメニュー配列を使いました。

let menus = ["カレー", "ラーメン", "サラダ", "オムライス"];
JavaScript

ここに「値段」を足したくなったとします。
文字列だけでは、「名前」と「値段」を一緒に持てません。
そこで、オブジェクトの出番です。

let menus = [
  { name: "カレー", price: 800 },
  { name: "ラーメン", price: 700 },
  { name: "サラダ", price: 500 },
  { name: "オムライス", price: 900 }
];
JavaScript

これで、「1つのメニュー＝名前＋値段」という形になりました。

メニュー表示をオブジェクト対応にする

昨日の printMenu を、オブジェクト対応に書き換えてみます。

function printMenu(menus) {
  console.log("メニュー一覧：");

  for (let i = 0; i < menus.length; i = i + 1) {
    let number = i + 1;
    let menu = menus[i];
    console.log(number + ": " + menu.name + "（" + menu.price + " 円）");
  }
}
JavaScript

使い方は同じです。

printMenu(menus);
JavaScript

実行すると、こんな感じになります。

メニュー一覧：
1: カレー（800 円）
2: ラーメン（700 円）
3: サラダ（500 円）
4: オムライス（900 円）

ここでの重要ポイントは、

menus[i] が「1件分のメニューオブジェクト」
menu.name と menu.price で、中の情報を取り出している

ということです。

選んだメニューの「合計金額」を計算する

1品選んで金額を表示する

まずは、昨日と同じように「番号で1品選ぶ」ところから始めます。

printMenu(menus);

let input = prompt("食べたいメニューの番号を入力してください：");
let choice = Number(input);

if (choice >= 1 && choice <= menus.length) {
  let index = choice - 1;
  let selected = menus[index];
  console.log("あなたが選んだのは「" + selected.name + "」です。");
  console.log("お会計は " + selected.price + " 円です。");
} else {
  console.log("1 から " + menus.length + " の番号を入力してください。");
}
JavaScript

ここでの違いは、「選んだメニューの price を使っている」ことです。
selected はオブジェクトなので、selected.name と selected.price の両方が使えます。

複数品を選んで合計金額を出す（少し発展）

少しだけ発展させて、「複数品を選んで合計金額を出す」こともできます。
仕様はこうです。

メニューを表示する。
番号を入力させる。
0 が入力されたら終了。
1〜メニュー数なら、そのメニューの値段を合計に足す。
最後に合計金額を表示する。

コードはこうなります。

let total = 0;

while (true) {
  printMenu(menus);
  console.log("0: 注文を終了して会計");

  let input = prompt("注文したいメニューの番号を入力してください（0で会計）：");
  let choice = Number(input);

  if (choice === 0) {
    break;
  }

  if (choice >= 1 && choice <= menus.length) {
    let index = choice - 1;
    let selected = menus[index];
    console.log("「" + selected.name + "」を追加しました（" + selected.price + " 円）。");
    total = total + selected.price;
  } else {
    console.log("1 から " + menus.length + " の番号、または 0 を入力してください。");
  }
}

console.log("合計金額は " + total + " 円です。");
JavaScript

ここでの深掘りポイントは、

menus[index] で「選ばれたメニューオブジェクト」を取り出す。
selected.price を total に足していく。
オブジェクトのおかげで、「名前」と「値段」をセットで扱えている。

ということです。

6日目のまとめと、明日へのつなぎ

今日やったことを、言葉で整理します。

オブジェクトは「名前付きの情報をまとめた1セット」で、{ name: "太郎", age: 20 } のように書く。
.（ドット）で person.name のようにプロパティを取り出せる。
配列の中にオブジェクトを入れることで、「複数件の意味のあるデータ」を扱える。
メニューを「名前だけ」から「名前＋値段」のオブジェクトにすることで、表現力が一気に上がる。
配列＋オブジェクト＋for 文で、「メニュー一覧」「選択」「合計金額」といった処理が書ける。

明日（7日目）は、この「配列＋オブジェクト」の形を使って、
「自分で設計した“ミニアプリ”の全体像をもう一度整理する日」にします。
今までのピース（変数・条件・関数・配列・オブジェクト）が、どうつながっているかを言葉にしていきます。

最後に一つだけ、ちゃんと聞きたい。

今日の中で、「あ、これちょっと気持ちいいな」と感じたのはどこでしたか？
menu.name と menu.price がセットで扱えた瞬間か、選んだメニューの合計がちゃんと計算された瞬間か。
その「気持ちいい」と感じたところが、あなたと「データ設計」の一番の接点です。
そこを意識しながら、7日目に進んでいきましょう。

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