コーディングクイズ No.27：JavaScript（配列メソッド）

July 9, 2025

毎日コーディングクイズシリーズ！今回はJavaScriptの配列メソッドについて、実践的なクイズ形式で学習しましょう！

🎯 問題

ECサイトで商品の在庫管理システムを作成しています。在庫データの配列から「在庫数が10以下の商品」を抽出し、その商品名のみを新しい配列として取得したい場合の最適な実装方法を選んでください。

const products = [
  { id: 1, name: "iPhone 15", stock: 25 },
  { id: 2, name: "MacBook Pro", stock: 5 },
  { id: 3, name: "iPad Air", stock: 15 },
  { id: 4, name: "AirPods Pro", stock: 8 },
  { id: 5, name: "Apple Watch", stock: 3 }
];

// 在庫数が10以下の商品名を取得する処理

上記の配列から在庫数が10以下の商品名（[“MacBook Pro”, “AirPods Pro”, “Apple Watch”]）を取得するための最も効率的で読みやすいコードはどれでしょうか？

A. products.filter(product => product.stock <= 10).map(product => product.name)
B. products.map(product => product.stock <= 10 ? product.name : null).filter(name => name !== null)
C. products.reduce((result, product) => product.stock <= 10 ? [...result, product.name] : result, [])
D. products.forEach(product => product.stock <= 10 && lowStockNames.push(product.name))

答えを確認する

✅ 正解：A

正解

正解は A です！

解説

選択肢Aの「filter()→map()」のメソッドチェーンが最も適切です。この組み合わせは「条件に合致する要素をフィルタリングしてから、各要素を変換する」という処理の流れを直感的に表現しており、コードの可読性と実行効率の両方を満たします。

選択肢A: 正解。filter()で条件に合致する要素のみを抽出し、その後map()でname属性を取得。処理の流れが直感的で最も読みやすい。
選択肢B: 不正解。すべての要素をmap()で処理してnullを生成し、その後filter()で除去する無駄な処理が発生。メモリ効率が悪い。
選択肢C: 不正解。reduce()を使用しているが、スプレッド構文により毎回新しい配列を作成するため、パフォーマンスが悪い。オーバーエンジニアリング。
選択肢D: 不正解。forEach()は戻り値がundefinedのため、外部変数への依存が必要。また、配列の事前宣言が必要で関数型プログラミングの原則に反する。

実際の開発現場では、複数の配列メソッドを組み合わせることが頻繁にあります。特にfilter()とmap()の組み合わせは、データの絞り込みと変換を行う際の定番パターンです。React.jsでのリスト表示や、APIから取得したデータの加工処理でよく使用されます。

// 実行結果
const lowStockProducts = products
  .filter(product => product.stock <= 10)
  .map(product => product.name);

console.log(lowStockProducts);
// 出力: ["MacBook Pro", "AirPods Pro", "Apple Watch"]

// 実際の在庫管理システムでの応用例
const createLowStockAlert = (products) => {
  const lowStockNames = products
    .filter(product => product.stock <= 10)
    .map(product => product.name);
  
  return lowStockNames.length > 0 
    ? `在庫不足の商品: ${lowStockNames.join(', ')}` 
    : '在庫は十分です';
};

このパターンを覚えておくことで、配列データの処理が格段に効率的になります。filter()→map()の順序を間違えないよう注意し、まず条件で絞り込んでから変換処理を行うことがポイントです。

💡 ポイント

filter()→map()の順序で処理することで、不要な変換処理を避けられる
メソッドチェーンは処理の流れが直感的で、コードの可読性が向上する
forEach()は戻り値がないため、新しい配列を作成する処理には適さない
reduce()は万能だが、シンプルな処理では適切なメソッドを使い分ける

よかったらシェアしてね！

コーディングクイズ No.27：JavaScript（配列メソッド）

✅ 正解：A

関連記事