0Pricing
Frontend Academy · レッスン

配列メソッド：map・filter・reduce・find

手作業のループではなく高階メソッドで配列を変換・絞り込み・集約します。メソッドを連結して、表現力の高いデータパイプラインを作ります。

「配列メソッド：map・filter・reduce・find」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

なぜ配列メソッドを使うのか

命令型のforループでも処理できますが、意図が分かりにくくなります。配列の高階メソッドを使うと、反復処理をどのように行うかではなく、何を求めているかを宣言できます。コードがより読みやすく、テストしやすく、組み合わせやすくなり、文章のように読めるようになります。

Array.map() — すべての要素を変換

map()は、各要素をコールバックで変換した新しい配列を返します。元の配列は変更されません。ある配列を別の配列に変換する必要があるときに使用してください。

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — 条件に一致する要素を選択

filter()は、コールバックがtruthyを返す要素だけを含む新しい配列を返します。このコールバックは述語関数です。

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — 値を累積

reduce(callback, initialValue)は、すべての要素を1つの値に累積します。コールバックには累積値と現在の要素が渡されます。初期値は、累積値の開始値です。

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — 最初の一致

find()は、述語に一致する最初の要素を返します。一致する要素がない場合はundefinedを返します。IDやプロパティ値から項目を検索するときに使用してください。

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex()はfind()と似ていますが、一致する要素のインデックスを返します。見つからない場合は-1を返します。配列内の要素を更新する位置を見つけるときに便利です。

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some()とArray.every()

some()は、少なくとも1つの要素がテストに合格するとtrueを返します。every()は、すべての要素が合格した場合にのみtrueを返します。どちらも、結果が確定した時点で処理を短絡します。

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — マッピングしてからフラット化

flatMap()は各要素をマッピングしてから、結果を1階層分フラット化します。.map(...).flat()と同等ですが、より効率的です。

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

配列メソッドのチェーン

メソッドは新しい配列を返すため、メソッドをチェーンできます。チェーンは左から右へ読みます。まずfilterし、次に変換し、最後に集約します。

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at()とArray.includes()

at(-1)は最後の要素を取得します。includes(value)は値が存在するかを確認します。arr[arr.length - 1]やarr.indexOf(v) !== -1を使うよりも、はるかにすっきり書けます。

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

不変性：変更しない

map、filter、reduceは新しい配列を返します。一方、push、pop、spliceは元の配列を変更します。Reactのstateでは、stateを直接変更するのではなく、スプレッド構文やmapを使って常に新しい配列を作成してください。

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

確認問題

コールバックがtrueを返す要素で構成された新しい配列を返す配列メソッドはどれでしょうか。

まとめ：配列メソッド

map()はすべての要素を変換します。filter()は条件に一致する要素を選択します。reduce()は値を1つに累積します。find()は最初に一致する要素を返します。some()/every()は要素の存在をテストします。これらのメソッドをチェーンすると、ネストしたループを、読みやすく宣言的なデータパイプラインに置き換えられます。

よくある質問

「配列メソッド：map・filter・reduce・find」レッスンは無料ですか？

はい。「配列メソッド：map・filter・reduce・find」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「配列メソッド：map・filter・reduce・find」で何を学びますか？

手作業のループではなく高階メソッドで配列を変換・絞り込み・集約します。メソッドを連結して、表現力の高いデータパイプラインを作ります。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「配列メソッド：map・filter・reduce・find」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 配列メソッド：map・filter・reduce・find
  2. オブジェクトの分割代入とスプレッド
  3. テンプレートリテラルとオプショナルチェーン
  4. モジュール：import と export
← Frontend Academyに戻る