Section 03: JavaScript基礎2

名前付きデータの集合体です。ここでも「いかに簡潔に書くか」「いかに安全に書くか」が進化しています。

1-1. JSON (JavaScript Object Notation) (1/2)

JSONは、 「データをやり取りするための共通ルール（フォーマット）」 です。 JavaScriptの書き方をベースにしていますが、JSのオブジェクトそのものではありません。

1-1. JSON (JavaScript Object Notation) (2/2)

「JSのオブジェクト」と「JSON」の違いは、「組み立て済みの家具」 と 「段ボールに入った家具」 に例えられます。

オブジェクト（組み立て済み）: プログラム上ですぐに使える状態のデータ。
- user.name のように直接データを取り出したり、書き換えたりできます。
JSON（段ボール梱包）: 別のPCやサーバーに「送る・保存する」ために、実体をただの文字列（テキスト）にした状態。

家具（データ）の送り方

インターネットを通じてデータを送るには、一度段ボール（JSON）に梱包する 必要があります。

箱に詰める (JSON.stringify)
- 組み立て済みのオブジェクトを、ペタンコの「JSON文字列」にする。
送る・保存する
- ただのテキストなので、インターネットでどこへでも送れる。
箱から出して組み立てる (JSON.parse)
- 届いたJSON文字列を、プログラムで使える「オブジェクト」に復元する。

1-1-1. JSONの具体例：よくあるパターン (1/2)

構文ルールは 「キーを必ず

" "

(ダブルクォート) で囲む」 こと。非常に厳格です。

1. 単体のデータ (User)

{
  "id": 101,
  "name": "田中 太郎",
  "isAdmin": false
}

1-1-1. JSONの具体例：よくあるパターン (2/2)

配列 [ ] の中にオブジェクト { } が複数並ぶ、データ一覧などを表現する際によく使うパターンです。

2. リストデータ (Products)

[
  { "id": 1, "name": "PC", "price": 100000 },
  { "id": 2, "name": "Mouse", "price": 3000 }
]

1-1-2. JSONの具体例：高度な構造（ネスト）

オブジェクトの中にオブジェクト/配列を「入れ子」にすると綺麗に表現できます。

3. 入れ子構造 (Nested)

{
  "event": "学園祭",
  "location": "A棟ホール",
  "schedule": [
    { "time": "10:00", "title": "開会式" },
    { "time": "11:00", "title": "LIVE" }
  ],
  "contact": {
    "email": "info@example.com",
    "tel": "03-xxxx-xxxx"
  }
}

1-1-3. まとめる：JSONで扱える型

JSONでは、プログラムで使う主要なデータをすべて表現できます。

型	例	備考
文字列	`"Hello"`	必ずダブルクォート
数値	`123`, `0.5`	そのまま書く
真偽値	`true`, `false`	そのまま書く
Null	`null`	空であることを示す
配列	`[...]`	データのリスト
オブジェクト	`{...}`	名前付きデータの集合

1-1-4. JSONの具体例：アクセス許可リスト (1/2)

全体が大きなObjectであり、その中にまた別のObjectが入ります。

{ "allowList": {

"user_123": { "read": true, "write": false, "roles": ["editor"] }

"user_456": { "read": true, "write": true, "roles": ["admin"] }

} }

1-1-4. JSONの具体例：アクセス許可リスト (2/2)

青い枠

{ }

: 全体のデータ
プロパティ名 allowList にデータをまとめています。

緑の枠

{ }

: 各ユーザーごとの詳細データ
これも立派なひとつのObjectです。

このように、JSONではObjectをマトリョーシカのように重ねることで、大規模で複雑なデータも整理して送ることができます。

1-2. オプショナルチェーン

深層にあるデータにアクセスする際、途中に null があるとアプリがクラッシュすることがあります。

const user = null;
const name = user.profile.name;
// TypeError: Cannot read properties of null

API通信待ちの間など、データが不完全な状態は頻繁に起こります。いちいち if でチェックするのは大変です。

1-3. オプショナルチェーン : `?.`

「もしあれば進む、なければそこで止まる」 演算子です。

const user = {};

//  エラー！ (Cannot read property 'name' of undefined)
// console.log(user.profile.name);

//  エラーにならず、undefined が返る
console.log(user.profile?.name);

「もしかしたら無いかもしれない」データには、迷わず ?. をつけましょう。

1-4. プロパティの省略記法 (Shorthand)

オブジェクトを組み立てる時、変数名とプロパティ名が同じなら : 以降を省略できます。非常に頻繁に使われる、基本テクニックです。

const name = "Shake";
const role = "Admin";

// 昔：わざわざ同じ名前を2回書いていた
const oldUser = { name: name, role: role };

// 今：スッキリ！
const newUser = { name, role };

console.log(newUser); // { name: "Shake", role: "Admin" }

1-5. 分割代入 (Destructuring)

今度はオブジェクトからデータを取り出す時の魔法です。いちいち user.name のように書かず、構造に合わせて一発で変数として抽出します。

const user = { id: 1, name: "Shake", role: "Admin" };

// 昔：一つずつ取り出していた
const oldId = user.id;
const oldName = user.name;

// 今：左辺に {} を書いて一気に取り出す！
const { id, name } = user;

console.log(name); // "Shake"

1-6. 高度な分割代入 (別名・ネスト)

変数名の変更

APIから来たデータの名前が分かりにくい時などにリネームします。

const user = { id: 1, name: "Shake", role: "Admin" };
const { name: userName } = user;
console.log(userName); // "Shake" (name変数は作られない)

ネストしたデータの取得

深い階層のデータも一発で取れます。

const response = { data: { title: "Hello" } };
const {
  data: { title },
} = response;

console.log(title); // "Hello"

const baseUser = { name: "Shake", active: false };
const extraInfo = { role: "Admin" };

// baseUserの中身を展開し、activeだけ true で上書きしつつ合体
const updatedUser = { 
  ...baseUser, 
  ...extraInfo,
  active: true 
};

console.log(updatedUser); // { name: "Shake", role: "Admin", active: true }

// { name: "Shake", role: "Admin", active: true }

モダンなJavaScriptでは、オブジェクトを 「より短く・よりスマートに」 扱うための記法が進化しています。

JSON: データを送受信するための厳格な文字列フォーマット。
省略記法: 変数名と同じプロパティ名は : 以降を省略可能。
分割代入: { } を使って、構造に合わせて一発で変数を取り出す。

これらの記法は、今後の Hono / React 開発で 息をするように使います。少しずつ慣れていきましょう！