Day12 配列応用の練習問題
map / filter / forEach は JavaScript 実務で最も使われる三種の神器。
ここでは、初心者でも確実に理解できるように、
それぞれの特徴を活かした練習問題と解答・解説をまとめます。
map の練習問題
問題1：配列の値を2倍にする
次の配列 numbers を map を使ってすべて2倍にした新しい配列 doubled を作ってください。
const numbers = [1, 2, 3, 4];
解答と解説
const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]
map は「変換」専用のメソッドです。
元の配列は変えず、同じ長さの新しい配列を返します。
問題2：オブジェクト配列から名前だけを取り出す
次の users 配列から、名前だけの配列 names を作ってください。
const users = [
{ name: "Taro", age: 20 },
{ name: "Hanako", age: 25 },
{ name: "Ken", age: 17 }
];
解答と解説
const names = users.map((user) => user.name);
console.log(names); // ["Taro", "Hanako", "Ken"]
map は「必要な情報だけを抜き出す」用途でもよく使われます。
実務では API のレスポンスから必要な項目だけ取り出す場面が非常に多いです。
filter の練習問題
問題3：偶数だけを取り出す
次の numbers 配列から偶数だけを取り出した配列 even を作ってください。
const numbers = [1, 2, 3, 4, 5, 6];
解答と解説
const even = numbers.filter((n) => n % 2 === 0);
console.log(even); // [2, 4, 6]
filter は「条件に合うものだけ残す」メソッドです。
true を返した要素だけが残ります。
問題4：20歳以上のユーザーだけを取り出す
次の users 配列から、20歳以上のユーザーだけを取り出した配列 adults を作ってください。
const users = [
{ name: "Taro", age: 20 },
{ name: "Hanako", age: 25 },
{ name: "Ken", age: 17 }
];
解答と解説
const adults = users.filter((user) => user.age >= 20);
console.log(adults);
// [{ name: "Taro", age: 20 }, { name: "Hanako", age: 25 }]
filter は「安全なデータだけを通すゲート」としても使えます。
実務では「無効なデータを除外する」用途で頻繁に登場します。
forEach の練習問題
問題5：配列の値を順番に表示する
次の numbers 配列の値を forEach を使ってすべて表示してください。
const numbers = [10, 20, 30];
解答と解説
numbers.forEach((n) => {
console.log(n);
});
forEach は「処理をする」ためのメソッドで、
map や filter と違い、新しい配列は返しません。
問題6：ユーザーの名前と年齢を表示する
次の users 配列の各ユーザーについて
「Taro さんは 20 歳です」のように表示してください。
const users = [
{ name: "Taro", age: 20 },
{ name: "Hanako", age: 25 }
];
解答と解説
users.forEach((user) => {
console.log(`${user.name} さんは ${user.age} 歳です`);
});
forEach は「出力」「ログ」「DOM 操作」など、
副作用を伴う処理に向いています。
map × filter × forEach の応用問題
問題7：20歳以上のユーザーの名前だけを表示する
次の users 配列から、
20歳以上のユーザーの名前だけを取り出して表示してください。
const users = [
{ name: "Taro", age: 20 },
{ name: "Hanako", age: 25 },
{ name: "Ken", age: 17 }
];
解答と解説
users
.filter((user) => user.age >= 20)
.map((user) => user.name)
.forEach((name) => {
console.log(`${name} さんは大人です`);
});
filter → map → forEach の流れは、
実務で最もよく使われる「データ処理の型」です。
絞り込み → 変換 → 出力
という処理が縦に並ぶため、読みやすく安全です。
セキュリティ視点の練習問題
問題8：メールアドレスが空のユーザーを除外して通知する
次の users 配列から、
email が空でないユーザーだけに通知メッセージを表示してください。
const users = [
{ name: "Taro", email: "taro@example.com" },
{ name: "Hanako", email: "" },
{ name: "Ken", email: "ken@example.com" }
];
解答と解説
users
.filter((user) => user.email !== "")
.forEach((user) => {
console.log(`${user.name} さんに通知を送信します`);
});
filter を「安全ゲート」として使うことで、
メールアドレスが空のユーザーに誤って通知を送る事故を防げます。
実務ではこのような「事前フィルタリング」が非常に重要です。
Day12 練習問題まとめ
map は「変換」
filter は「選別」
forEach は「処理」
この3つを使いこなせると、
配列処理のほぼすべてを直感的に書けるようになります。
実務で毎日使うレベルの重要スキルなので、
ここでしっかり身につけておきましょう。