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の基本
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);

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で選択します。
// 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は新しい配列を返すため、元の配列は変更されません。
// 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);

読みやすい配列のヒント
ヒント:
- 分かりやすさのため、小さなコールバックには適切な名前(n、item)を付けます。
- チェーンは短く保ちます(最大2~3ステップ)。
- 副作用のない純粋なコールバックを優先します。

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

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

よくある質問
「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フィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- mapとfilter — 基本
- reduce、some/every、find — シンプルなパターン