JavaScript | 配列の中から「条件を満たす要素だけ」を取り出して、新しい配列を作る

JavaScript JavaScript
2020.08.02
スポンサーリンク

初心者向け JavaScript の filter メソッドに関して、レベル別に「問題 → 解答 → 解説」を用意しました。

初級編

  • 問題: filter メソッドは何を返す？

解答: 条件に合う要素を集めた新しい配列
解説: filter は元の配列を変えずに、新しい配列を返します。

  • 問題:
const nums = [1, 2, 3, 4];
const result = nums.filter(n => n % 2 === 0);
console.log(result);
JavaScript

解説: 偶数だけが残るので 2 と 4 が出力されます。

  • 問題
    配列 [5, 10, 15, 20] から「10以上」の要素だけを取り出してください。

解答 

const nums = [5, 10, 15, 20];
const result = nums.filter(n => n >= 10);
console.log(result); // [10, 15, 20]
JavaScript

解説: n >= 10 という条件でふるいにかけています。

  • 問題
    配列 ["dog", "cat", "bird", "cow"] から「c」で始まる単語だけを取り出してください。

解答 

const animals = ["dog", "cat", "bird", "cow"];
const result = animals.filter(a => a.startsWith("c"));
console.log(result); // ["cat", "cow"]
JavaScript

解説: startsWith("c") を使うと、文字列が「c」で始まるかどうかを判定できます。

  • 問題
    配列 [true, false, true, false] から true だけを取り出してください。

解答 

const flags = [true, false, true, false];
const result = flags.filter(f => f === true);
console.log(result); // [true, true]
JavaScript

解説: 真偽値の配列でも同じように条件を指定できます。

    • 問題
      配列 [1, 2, 3, 4, 5, 6] から「3より大きく、かつ5未満」の要素を取り出してください。

    解答 

    const nums = [1, 2, 3, 4, 5, 6];
const result = nums.filter(n => n > 3 && n < 5);
console.log(result); // [4]
    JavaScript

    解説: 複数条件を組み合わせるときは && を使います。

      • 問題
        配列 ["", "apple", "", "banana"] から「空文字でない要素」だけを取り出してください。

      解答 

      const words = ["", "apple", "", "banana"];
const result = words.filter(w => w !== "");
console.log(result); // ["apple", "banana"]
      JavaScript

      解説: 空文字を除外する条件を指定しています。

        中級編

        • 問題: 文字列配列から「5文字以上の単語」だけを取り出すコードを書け。

        解答: 

        const words = ["cat", "elephant", "sun", "notebook"];
const result = words.filter(w => w.length >= 5);
console.log(result); // ["elephant", "notebook"]
        JavaScript

        • 問題: 配列 [10, 25, 30, 45, 50] から「30以上50未満」の要素を取り出せ。

        解答: [30, 45]
        解説: n >= 30 && n < 50 という条件で絞り込みます。

        • 問題
          配列 [12, 25, 37, 40, 55, 68] から「30以上かつ偶数の数値」だけを取り出してください。

        解答 

        const nums = [12, 25, 37, 40, 55, 68];
const result = nums.filter(n => n >= 30 && n % 2 === 0);
console.log(result); // [40, 68]
        JavaScript

        解説: n >= 30 と n % 2 === 0 を組み合わせて条件を作ります。

        • 問題
          配列 ["apple", "banana", "grape", "kiwi", "mango"] から「文字数が5文字未満の単語」だけを取り出してください。

        解答 

        const fruits = ["apple", "banana", "grape", "kiwi", "mango"];
const result = fruits.filter(f => f.length < 5);
console.log(result); // ["kiwi"]
        JavaScript

        解説: length プロパティで文字数を判定します。

          • 問題
            以下の配列から「合格（score >= 70）の学生」だけを取り出してください。 
          const students = [
  { name: "Aki", score: 68 },
  { name: "Ken", score: 85 },
  { name: "Mao", score: 92 },
];
          JavaScript

          解答 

          const result = students.filter(s => s.score >= 70);
console.log(result);
// [{ name: "Ken", score: 85 }, { name: "Mao", score: 92 }]
          JavaScript

          解説: オブジェクトのプロパティ score を条件に使います。

            • 問題
              配列 [ "doc.pdf", "image.png", "notes.txt", "script.js" ] から「.js で終わるファイル」だけを取り出してください。

            解答 

              const files = ["doc.pdf", "image.png", "notes.txt", "script.js"];
const result = files.filter(f => f.endsWith(".js"));
console.log(result); // ["script.js"]
              JavaScript

              endsWith を使うと、文字列の末尾を判定できます。

              • 問題
                配列 [100, 200, 300, 400, 500] から「インデックスが偶数の要素」だけを取り出してください。

              解答 

              const nums = [100, 200, 300, 400, 500];
const result = nums.filter((n, index) => index % 2 === 0);
console.log(result); // [100, 300, 500]
              JavaScript

              解説: filter の第2引数でインデックスを受け取り、偶数番目を判定します。

                上級編

                • 問題: 以下の配列から「在庫が1以上の商品名」だけを取り出せ。 
                const products = [
  { name: "Pen", stock: 0 },
  { name: "Notebook", stock: 12 },
  { name: "Marker", stock: 5 }
];
                JavaScript

                解答: ["Notebook", "Marker"]
                解説: 

                const result = products.filter(p => p.stock > 0).map(p => p.name);
                JavaScript

                filter で在庫ありを絞り、map で名前だけを取り出します。

                • 問題: 配列 ["go", "good", "on", "door", "cat"] から「3文字以上かつ ‘o’ を含む単語」を取り出せ。

                解答: ["good", "door"]
                解説: w.length >= 3 && w.includes("o") で条件を組み合わせます。

                • 問題
                  以下の配列から「在庫が1以上の商品名」だけを取り出してください。 
                const products = [
  { name: "Pen", stock: 0 },
  { name: "Notebook", stock: 12 },
  { name: "Marker", stock: 5 }
];
                JavaScript

                解答 

                const result = products.filter(p => p.stock > 0).map(p => p.name);
console.log(result); // ["Notebook", "Marker"]
                JavaScript

                解説: filter で在庫ありを絞り、map で名前だけを取り出します。

                • 問題
                  配列 [ "go", "good", "on", "door", "cat" ] から「3文字以上かつ ‘o’ を含む単語」を取り出してください。

                解答 

                const words = ["go", "good", "on", "door", "cat"];
const result = words.filter(w => w.length >= 3 && w.includes("o"));
console.log(result); // ["good", "door"]
                JavaScript

                解説: 複数条件を && で組み合わせています。

                  • 問題
                    以下の配列から「偶数かつ50以上の数値」を取り出し、その数値を2倍にした配列を作ってください。 
                  const nums = [20, 35, 50, 63, 80, 95];
                  JavaScript

                  解答 

                  const result = nums.filter(n => n % 2 === 0 && n >= 50).map(n => n * 2);
console.log(result); // [100, 160]
                  JavaScript

                  解説: filter で条件を満たす数値を選び、map で変換しています。

                    • 問題
                      以下の配列から「メールアドレスを持っているユーザーの名前」だけを取り出してください。 
                    const users = [
  { name: "Aki", email: "aki@example.com" },
  { name: "Ken", email: "" },
  { name: "Mao", email: "mao@example.com" }
];
                    JavaScript

                    解答 

                    const result = users.filter(u => u.email).map(u => u.name);
console.log(result); // ["Aki", "Mao"]
                    JavaScript

                    解説: 空文字は falsy なので、u.email で「メールがあるかどうか」を判定できます。

                      • 問題
                        以下の配列から「奇数番目（インデックスが1,3,5…）の要素で、かつ文字数が4文字以上」の単語を取り出してください。 
                      const words = ["sun", "moon", "star", "planet", "sky", "cloud"];
                      JavaScript

                      解答 

                      const result = words.filter((w, i) => i % 2 === 1 && w.length >= 4);
console.log(result); // ["moon", "planet", "cloud"]
                      JavaScript

                      解説: filter の第2引数でインデックスを利用し、さらに文字数条件を組み合わせています。

                        👉 こうしてレベルを上げながら練習すると、filter の使い方が自然に身につきます。

                        次のステップとしては、reduce と組み合わせて集計処理を学ぶと、さらに実践的なコードが書けるようになります。

                        前へ次へ
                        12345
                        スポンサーリンク
                        タイトルとURLをコピーしました