JavaScript

配列メソッド

JavaScript

map、filter、reduce、find など

配列の基本操作

作成、アクセス、追加・削除

arrays.js javascript
// 作成
const arr = [1, 2, 3];
const from = Array.from('hello');     // ['h','e','l','l','o']
const fill = Array.from({ length: 5 }, (_, i) => i * 2); // [0,2,4,6,8]
const of   = Array.of(1, 2, 3);       // [1,2,3]

// アクセス
arr[0];         // 1
arr.at(-1);     // 最後の要素(ES2022)
arr.at(-2);     // 最後から2番目

// 末尾の追加・削除
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.splice(1, 1);          // [1,3] — index1から1個削除
arr.splice(1, 0, 'a','b'); // [1,'a','b',3] — 挿入

// 検索
arr.indexOf(2);        // 1(見つからない場合-1)
arr.includes(2);       // true
arr.findIndex(x => x > 2); // 2

イテレーション系メソッド

forEach、map、filter、reduce

iteration.js javascript
const nums = [1, 2, 3, 4, 5];

// forEach: 副作用のみ(返り値なし)
nums.forEach((n, i) => console.log(i, n));

// map: 各要素を変換した新配列
const doubled = nums.map(n => n * 2);     // [2,4,6,8,10]
const users = ids.map(id => fetchUser(id));

// filter: 条件を満たす要素の新配列
const evens = nums.filter(n => n % 2 === 0); // [2,4]
const active = users.filter(u => u.isActive);

// find: 最初に条件を満たす要素(または undefined)
const first = nums.find(n => n > 3);     // 4

// findIndex: 最初に条件を満たすインデックス
const idx = nums.findIndex(n => n > 3);  // 3

// some: 1つでも条件を満たすか
const hasEven = nums.some(n => n % 2 === 0); // true

// every: 全て条件を満たすか
const allPositive = nums.every(n => n > 0);  // true

// reduce: 累積処理
const sum  = nums.reduce((acc, n) => acc + n, 0); // 15
const max  = nums.reduce((a, b) => a > b ? a : b);
const flat = [[1,2],[3,4]].reduce((a, b) => a.concat(b), []); // [1,2,3,4]

変換・整形メソッド

flat、flatMap、sort、slice、concat

transform.js javascript
// sort(デフォルトは文字列順!)
[10, 1, 5].sort();                // [1, 10, 5] ← バグ注意
[10, 1, 5].sort((a, b) => a - b); // [1, 5, 10] ← 正しい数値ソート
[10, 1, 5].sort((a, b) => b - a); // [10, 5, 1] ← 降順
users.sort((a, b) => a.name.localeCompare(b.name)); // 文字列比較

// flat / flatMap
[1, [2, [3, [4]]]].flat();    // [1, 2, [3, [4]]] — 1層
[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4]
[[1,2],[3,4]].flatMap(x => x); // [1,2,3,4]
[1, 2, 3].flatMap(n => [n, n * 2]); // [1,2, 2,4, 3,6]

// slice(元配列変更なし)
[1,2,3,4,5].slice(1, 3); // [2,3]
[1,2,3,4,5].slice(-2);   // [4,5]

// concat
[1,2].concat([3,4], [5,6]); // [1,2,3,4,5,6]
[...a, ...b, ...c];          // スプレッド推奨

// join / split
['a','b','c'].join('-');    // 'a-b-c'
'a-b-c'.split('-');         // ['a','b','c']

// reverse(元配列を変更!)
[1,2,3].toReversed();       // ES2023: 非破壊版
[1,2,3].toSorted((a,b) => b-a); // ES2023: 非破壊sort

よく使うパターン

重複削除、グループ化、zip など

patterns.js javascript
// 重複削除
const unique = [...new Set([1, 2, 2, 3, 3])]; // [1,2,3]

// オブジェクト配列の重複削除
const uniqueById = [...new Map(users.map(u => [u.id, u])).values()];

// グループ化(Object.groupBy — ES2024)
const grouped = Object.groupBy(users, u => u.role);
// { admin: [...], user: [...] }

// グループ化(reduceで)
const grouped = users.reduce((acc, u) => {
    (acc[u.role] ??= []).push(u);
    return acc;
}, {});

// 配列の分割
const [first, second, ...rest] = [1,2,3,4,5];
// first=1, second=2, rest=[3,4,5]

// zip(2配列を組み合わせ)
const zip = (a, b) => a.map((v, i) => [v, b[i]]);
zip([1,2,3], ['a','b','c']); // [[1,'a'],[2,'b'],[3,'c']]

// チャンク分割
const chunk = (arr, size) =>
    Array.from({ length: Math.ceil(arr.length / size) },
        (_, i) => arr.slice(i * size, i * size + size));
chunk([1,2,3,4,5], 2); // [[1,2],[3,4],[5]]