チュートリアル

JavaScript基礎：配列とオブジェクト

JavaScript
JavaScript入門配列オブジェクト
広告エリア

配列

配列の作成

const fruits = ["apple", "banana", "orange"];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "hello", true, null];
const empty = [];

// Array コンストラクタ
const arr = new Array(3);  // [undefined, undefined, undefined]
const arr2 = Array.of(1, 2, 3);  // [1, 2, 3]
const arr3 = Array.from("hello");  // ["h", "e", "l", "l", "o"]

要素へのアクセス

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]);  // "apple"
console.log(fruits[2]);  // "orange"
console.log(fruits[-1]); // undefined（負のインデックスは使えない）
console.log(fruits.at(-1)); // "orange"（ES2022）

fruits[1] = "grape";  // 変更
console.log(fruits);  // ["apple", "grape", "orange"]

配列メソッド（破壊的）

const arr = [1, 2, 3];

// 末尾に追加/削除
arr.push(4);      // [1, 2, 3, 4]
arr.pop();        // [1, 2, 3]、戻り値は4

// 先頭に追加/削除
arr.unshift(0);   // [0, 1, 2, 3]
arr.shift();      // [1, 2, 3]、戻り値は0

// 任意の位置を変更
arr.splice(1, 1, "a", "b");  // インデックス1から1個削除し、"a","b"を挿入
// [1, "a", "b", 3]

// ソート
const nums = [3, 1, 4, 1, 5];
nums.sort((a, b) => a - b);  // [1, 1, 3, 4, 5]
nums.reverse();  // [5, 4, 3, 1, 1]

配列メソッド（非破壊的）

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

// スライス
console.log(arr.slice(1, 3));  // [2, 3]
console.log(arr.slice(-2));    // [4, 5]

// 連結
console.log(arr.concat([6, 7]));  // [1, 2, 3, 4, 5, 6, 7]

// 検索
console.log(arr.indexOf(3));      // 2
console.log(arr.includes(3));     // true
console.log(arr.find(n => n > 3));     // 4
console.log(arr.findIndex(n => n > 3)); // 3

// 変換
console.log(arr.join("-"));  // "1-2-3-4-5"
console.log(arr.map(n => n * 2));  // [2, 4, 6, 8, 10]
console.log(arr.filter(n => n % 2 === 0));  // [2, 4]

// 集約
console.log(arr.reduce((sum, n) => sum + n, 0));  // 15
console.log(arr.every(n => n > 0));  // true
console.log(arr.some(n => n > 4));   // true

// フラット化
const nested = [[1, 2], [3, [4, 5]]];
console.log(nested.flat());    // [1, 2, 3, [4, 5]]
console.log(nested.flat(2));   // [1, 2, 3, 4, 5]

スプレッド構文

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

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

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

// 関数の引数に展開
console.log(Math.max(...arr1));  // 3

// 配列の一部を置換
const newArr = [...arr1.slice(0, 1), 10, ...arr1.slice(2)];
// [1, 10, 3]

オブジェクト

オブジェクトの作成

const user = {
  name: "太郎",
  age: 25,
  "full-name": "山田太郎",  // ハイフンを含む場合
  greet() {
    return `こんにちは、${this.name}です`;
  }
};

// 動的なキー
const key = "email";
const user2 = {
  [key]: "taro@example.com",
  [`${key}Verified`]: true
};

プロパティへのアクセス

const user = { name: "太郎", age: 25 };

// ドット記法
console.log(user.name);  // "太郎"

// ブラケット記法
console.log(user["name"]);  // "太郎"
console.log(user["full-name"]);  // ハイフンを含む場合

// 動的なキー
const key = "age";
console.log(user[key]);  // 25

// オプショナルチェイニング（ES2020）
const user2 = { profile: { name: "花子" } };
console.log(user2.profile?.name);    // "花子"
console.log(user2.settings?.theme);  // undefined（エラーにならない）

プロパティの追加・変更・削除

const user = { name: "太郎" };

// 追加
user.age = 25;
user["email"] = "taro@example.com";

// 変更
user.name = "花子";

// 削除
delete user.email;

オブジェクトのメソッド

const user = { name: "太郎", age: 25 };

// キーの一覧
console.log(Object.keys(user));    // ["name", "age"]

// 値の一覧
console.log(Object.values(user));  // ["太郎", 25]

// キーと値のペア
console.log(Object.entries(user)); // [["name", "太郎"], ["age", 25]]

// オブジェクトの結合
const defaults = { theme: "light", lang: "ja" };
const settings = { theme: "dark" };
const merged = Object.assign({}, defaults, settings);
// { theme: "dark", lang: "ja" }

// スプレッド構文でも同様
const merged2 = { ...defaults, ...settings };

// オブジェクトのコピー
const copy = { ...user };

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

分割代入

配列の分割代入

const [a, b, c] = [1, 2, 3];
console.log(a, b, c);  // 1 2 3

// 一部をスキップ
const [first, , third] = [1, 2, 3];
console.log(first, third);  // 1 3

// 残りを配列で取得
const [head, ...tail] = [1, 2, 3, 4];
console.log(head);  // 1
console.log(tail);  // [2, 3, 4]

// デフォルト値
const [x = 0, y = 0] = [1];
console.log(x, y);  // 1 0

// 変数の入れ替え
let m = 1, n = 2;
[m, n] = [n, m];
console.log(m, n);  // 2 1

オブジェクトの分割代入

const user = { name: "太郎", age: 25, city: "東京" };

const { name, age } = user;
console.log(name, age);  // "太郎" 25

// 別名をつける
const { name: userName, age: userAge } = user;
console.log(userName, userAge);  // "太郎" 25

// デフォルト値
const { country = "日本" } = user;
console.log(country);  // "日本"

// ネストしたオブジェクト
const data = {
  user: { name: "太郎", address: { city: "東京" } }
};
const { user: { address: { city } } } = data;
console.log(city);  // "東京"

// 残りのプロパティ
const { name: n, ...rest } = user;
console.log(rest);  // { age: 25, city: "東京" }

Map と Set

// Map - キーに任意の値を使える
const map = new Map();
map.set("name", "太郎");
map.set(1, "one");
map.set({ id: 1 }, "object key");

console.log(map.get("name"));  // "太郎"
console.log(map.size);  // 3
console.log(map.has("name"));  // true

for (const [key, value] of map) {
  console.log(key, value);
}

// Set - 重複のない値の集合
const set = new Set([1, 2, 2, 3, 3, 3]);
console.log(set);  // Set { 1, 2, 3 }
console.log(set.size);  // 3

set.add(4);
set.delete(1);
console.log(set.has(2));  // true

// 配列の重複除去
const arr = [1, 2, 2, 3, 3, 3];
const unique = [...new Set(arr)];
console.log(unique);  // [1, 2, 3]

まとめ

  • 配列はmap, filter, reduceで操作
  • スプレッド構文...でコピーや結合
  • オブジェクトはObject.keys/values/entriesで操作
  • 分割代入で値を取り出す
  • Mapは任意のキー、Setは重複なし

次回はクラスについて学びます。

広告エリア