0Pricing
JavaScript Academy · レッスン

mapとfilter — 基本

mapとfilterでデータを変換・選択し、メソッドをチェーンして、ミューテーションを避けた安全なコードを書きます。

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

mapとfilterの導入

目標: mapで要素を変換し、filterで要素を選べるようになることです。

  • map: 変換
  • filter: 選択
  • map → filterのチェーン
  • ミューテーションなし
mapとfilter — 基本 — イラスト1

mapの基本

mapはすべての要素に関数を適用し、同じ長さの新しい配列を返します。

// map transforms each value and returns a new array
const nums = [1, 2, 3];

const doubled = nums.map(function (n) {
  return n * 2;
});

console.log("nums:", nums);
console.log("doubled:", doubled);
mapとfilter — 基本 — イラスト2

filterの基本

filterは、コールバックがtrueを返した要素だけを返します(長さは変わる場合があります)。

// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];

const evens = values.filter(function (n) {
  return n % 2 === 0;
});

console.log("values:", values);
console.log("evens:", evens);
mapとfilter — 基本 — イラスト3

チェーンの例

処理を組み合わせます。mapで変換し、その後filterで選択します。

// Chain methods for clarity
const prices = [4, 7, 10];

// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
  return p * 1.1;
});

const expensive = withTax.filter(function (p) {
  return p > 8;
});

console.log("withTax:", withTax);
console.log("expensive:", expensive);
mapとfilter — 基本 — イラスト4

ミューテーションなしの例

イミュータビリティ: map/filterは新しい配列を返すため、元の配列は変更されません。

// map and filter do not mutate the original array
const base = [2, 4, 6];

const plusOne = base.map(function (n) {
  return n + 1;
});

const small = base.filter(function (n) {
  return n < 5;
});

console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
mapとfilter — 基本 — イラスト5

読みやすい配列のヒント

ヒント:

  • 分かりやすさのため、小さなコールバックには適切な名前(n、item)を付けます。
  • チェーンは短く保ちます(最大2~3ステップ)。
  • 副作用のない純粋なコールバックを優先します。
mapとfilter — 基本 — イラスト6

mapとfilterのクイズ

クイックチェック: すべての要素を変換する方法

mapとfilter — 基本 — イラスト7

振り返り

振り返り:mapで値を変換し、filterで一部を選び、元の配列を変更せずにこれらをつなげて使います。

mapとfilter — 基本 — イラスト8

よくある質問

「mapとfilter — 基本」レッスンは無料ですか?

はい。「mapとfilter — 基本」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全2レッスンが含まれています。

「mapとfilter — 基本」で何を学びますか?

mapとfilterでデータを変換・選択し、メソッドをチェーンして、ミューテーションを避けた安全なコードを書きます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか?

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

「mapとfilter — 基本」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. mapとfilter — 基本
  2. reduce、some/every、find — シンプルなパターン
← JavaScript Academyに戻る