宣言的なデータ変換
map、filter、reduce でデータを変換します。
「宣言的なデータ変換」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
宣言的コードと命令的コード
命令的なコードはHOW（ループ、カウンター、変更）を記述します。宣言的なコードはWHATを記述します。map、filter、reduceなどの配列メソッドを使うと、手作業のループを書かずに変換を表現できます。
const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]map：各要素を変換する
mapは、各要素を関数で変換した、元の配列と同じ長さの新しい配列を返します。元の配列は変更されません。
const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchangedfilter：一部の要素を残す
filterは、述語関数がtruthyを返す要素だけを含む新しい配列を返します。
const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]reduce：1つの値に畳み込む
reduceは、値を累積しながら配列を1つの値にまとめます。reducerと初期値を指定してください。
const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10処理をチェーンする
各メソッドは新しい配列を返すため、それらを読みやすいパイプラインとしてチェーンできます。コードは上から下へ読むことができます。
const nums = [1, 2, 3, 4, 5, 6];
const result = nums
.filter((n) => n % 2 === 0)
.map((n) => n * 10);
console.log(result); // [20, 40, 60]実践的なパイプライン
filter、map、reduceを組み合わせると、1つの式でデータセットについての問いに答えられます。
const orders = [
{ item: "pen", price: 3, paid: true },
{ item: "ink", price: 8, paid: false },
{ item: "pad", price: 5, paid: true }
];
const paidTotal = orders
.filter((o) => o.paid)
.map((o) => o.price)
.reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8新しい形へのマッピング
mapは数値だけでなく、オブジェクトの形も変えられます。各レコードから必要なフィールドだけを取り出してください。
const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]reduceで何でも構築できる
reduceは合計を求めるだけのものではありません。オブジェクトの構築、データのグループ化、さらにはmapやfilterの再実装もできます。
const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
acc[w] = (acc[w] || 0) + 1;
return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }順序が重要
mapの前にfilterを使うと、最終的に破棄する要素を変換せずに済みます。明確さと効率のため、安価なフィルターをチェーンの早い段階に置いてください。
const data = [1, 2, 3, 4, 5];
const out = data
.filter((n) => n > 2) // shrink first
.map((n) => n * n); // then transform
console.log(out); // [9, 16, 25]どこでも変更しない
これらのメソッドは元の配列を変更しません。そのためパイプラインは安全で予測しやすく、関数型のスタイルにぴったり合います。
const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src); // [3, 1, 2] untouchedネストした結果にはflatMap
mapの結果が配列になる場合、flatMapを使うと、マッピングと1段階の平坦化を1回の処理で行えます。
const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]確認問題
宣言的な変換
まとめ
宣言的な変換では、HOWではなくWHATを記述します。mapは変換、filterは選択、reduceは1つの値への畳み込みを行います。これらをチェーンして読みやすいパイプラインを作りましょう。どのメソッドも元の配列を変更せず、先にフィルタリングすると効率的です。reduceはあらゆる構造を構築でき、mapの結果が配列になる場合はflatMapを使います。
よくある質問
「宣言的なデータ変換」レッスンは無料ですか？
はい。「宣言的なデータ変換」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「宣言的なデータ変換」で何を学びますか？
map、filter、reduce でデータを変換します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「宣言的なデータ変換」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 純粋関数と副作用
- 宣言的なデータ変換
- ミューテーションを避ける
- ポイントフリースタイル