配列とオブジェクト

複数のデータをまとめて管理する

配列とオブジェクトとは？

日常での例え

配列 = 番号付きロッカー

「1番に〇〇、2番に△△...」
順番が大事な時に使う

オブジェクト = 名前付きロッカー

「名前に〇〇、年齢に△△...」
意味のある名前で管理したい時

なぜ配列とオブジェクトが必要？

個別の変数だけだと：

100人のユーザーに100個の変数が必要 → 管理が大変
「全員の名前を表示」のような一括処理ができない

配列/オブジェクトを使うと：まとめて管理、一括処理、追加・削除も簡単！

配列の基本

配列の作成とアクセス

[]で作成、インデックスでアクセス

javascript

// 配列の作成
const fruits = ["りんご", "バナナ", "オレンジ"];

// インデックスでアクセス（0から始まる）
fruits[0];  // "りんご"
fruits[1];  // "バナナ"
fruits[2];  // "オレンジ"

// 長さ
fruits.length;  // 3

// 要素の変更
fruits[1] = "ぶどう";

プレビュー

fruits[0] // → "りんご"
fruits[1] // → "バナナ"
fruits.length // → 3

配列の操作メソッド

追加・削除・検索

javascript

const arr = [1, 2, 3];

// 末尾に追加
arr.push(4);        // [1, 2, 3, 4]

// 末尾から削除
arr.pop();          // [1, 2, 3]

// 先頭に追加
arr.unshift(0);     // [0, 1, 2, 3]

// 先頭から削除
arr.shift();        // [1, 2, 3]

// 含まれているか
arr.includes(2);    // true

// インデックスを取得
arr.indexOf(2);     // 1

プレビュー

.push(4) // 末尾に追加
.pop() // 末尾を削除
.includes(2) // → true
.indexOf(2) // → 1

配列の変換メソッド

map, filter, reduce

javascript

const numbers = [1, 2, 3, 4, 5];

// map: 各要素を変換して新配列を作成
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter: 条件に合う要素だけ抽出
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

// reduce: 1つの値にまとめる
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 15

// チェーン（連結）できる
const result = numbers
  .filter(n => n > 2)
  .map(n => n * 10);
// [30, 40, 50]

プレビュー

.map(n => n * 2) // [2, 4, 6, 8, 10]
.filter(n => n % 2 === 0) // [2, 4]
.reduce((acc, n) => acc + n, 0) // 15

オブジェクトの基本

オブジェクトの作成とアクセス

キーと値のペア

javascript

// オブジェクトの作成
const user = {
  name: "田中太郎",
  age: 25,
  email: "tanaka@example.com"
};

// ドット記法でアクセス
user.name;   // "田中太郎"
user.age;    // 25

// ブラケット記法（変数キーに便利）
user["email"];  // "tanaka@example.com"
const key = "name";
user[key];      // "田中太郎"

// プロパティの追加・変更
user.city = "東京";
user.age = 26;

プレビュー

user.name // → "田中太郎"
user.age // → 25
user["email"] // → "tanaka@example.com"

オブジェクトのメソッド

Object.keys, values, entries

javascript

const user = { name: "田中", age: 25, city: "東京" };

// キーの配列
Object.keys(user);
// ["name", "age", "city"]

// 値の配列
Object.values(user);
// ["田中", 25, "東京"]

// [キー, 値] の配列
Object.entries(user);
// [["name", "田中"], ["age", 25], ["city", "東京"]]

// プロパティの存在確認
"name" in user;           // true
user.hasOwnProperty("age"); // true

プレビュー

Object.keys(user) // ["name", "age", "city"]
Object.values(user) // ["田中", 25, "東京"]
"name" in user // true

スプレッド構文

「スプレッド構文（...）」とは？

配列やオブジェクトを展開（バラバラにする）記号。
「箱の中身を取り出して並べる」イメージです。
配列のコピー、結合、オブジェクトのマージに使います。

配列のスプレッド

...で展開・コピー

javascript

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 配列の結合
const combined = [...arr1, ...arr2];
// [1, 2, 3, 4, 5, 6]

// 配列のコピー
const copy = [...arr1];

// 途中に挿入
const inserted = [0, ...arr1, 4];
// [0, 1, 2, 3, 4]

プレビュー

[...arr1, ...arr2] // [1, 2, 3, 4, 5, 6]
[0, ...arr1, 4] // [0, 1, 2, 3, 4]

オブジェクトのスプレッド

マージやコピー

javascript

const defaults = { theme: "light", lang: "ja" };
const settings = { theme: "dark" };

// オブジェクトのマージ（後から上書き）
const merged = { ...defaults, ...settings };
// { theme: "dark", lang: "ja" }

// プロパティの追加
const updated = { ...defaults, fontSize: 16 };

// 一部を変更したコピー
const newSettings = { ...settings, lang: "en" };

プレビュー

// defaults を settings で上書きマージ
{ ...defaults, ...settings }
// → { theme: "dark", lang: "ja" }

分割代入

「分割代入」とは？

配列やオブジェクトから必要な値だけを取り出す構文。
「箱から特定のものだけ取り出して、変数に入れる」イメージです。

配列の分割代入

配列から変数に展開

javascript

const colors = ["red", "green", "blue"];

// 分割代入
const [first, second, third] = colors;
// first = "red", second = "green", third = "blue"

// 一部だけ取得
const [primary, , tertiary] = colors;
// primary = "red", tertiary = "blue"

// 残りをまとめる
const [head, ...rest] = colors;
// head = "red", rest = ["green", "blue"]

プレビュー

const [first, second] = colors
// first = "red", second = "green"

オブジェクトの分割代入

プロパティを変数に展開

javascript

const user = {
  name: "田中",
  age: 25,
  email: "tanaka@example.com"
};

// 分割代入
const { name, age } = user;
// name = "田中", age = 25

// 別名をつける
const { name: userName } = user;
// userName = "田中"

// デフォルト値
const { city = "不明" } = user;
// city = "不明"

// 関数の引数で使う
function greet({ name, age }) {
  console.log(name + "は" + age + "歳");
}

プレビュー

const { name, age } = user
// name = "田中", age = 25

JSON

「JSON（ジェイソン）」とは？

JavaScript Object Notationの略。
データをやり取りするための「共通フォーマット」です。

なぜJSONが必要？

サーバーとブラウザでデータをやり取りする時、
「文字列」にしないと送れない → JSONで文字列に変換！
受け取った後は、オブジェクトに戻して使う。

JSON変換

文字列とオブジェクトの相互変換

javascript

const user = { name: "田中", age: 25 };

// オブジェクト → JSON文字列
const jsonString = JSON.stringify(user);
// '{"name":"田中","age":25}'

// 整形して出力
JSON.stringify(user, null, 2);
// {
//   "name": "田中",
//   "age": 25
// }

// JSON文字列 → オブジェクト
const parsed = JSON.parse(jsonString);
// { name: "田中", age: 25 }

プレビュー

JSON.stringify(user)
'{"name":"田中","age":25}'
JSON.parse(jsonString)
// → オブジェクトに戻る

前へ：関数次へ：非同期処理