💡 記事の下にエディタを用意しています。壊してもOK！

更新日: 2026年5月31日

JavaScriptのfilterの使い方｜配列を条件で抽出

📌

結論

filter で条件に合う要素だけを抽出できます

📝 実際のコードはこちら

const filtered = [1, 2, 3, 4, 5].filter(n => n >= 3);
console.log(filtered); // [3, 4, 5]

filterの特徴

特徴	説明
非破壊	元の配列は変更しない
コールバック	`true` を返した要素だけ残る
mapとの違い	mapは変換、filterは抽出

実務での活用

検索、絞り込み、条件フィルタリングなど、あらゆる場面で使います。APIから取得したデータを条件で絞り込むのは日常的な操作です。

まとめ

・filter は条件に合う要素だけの新配列を作る・コールバックが true の要素だけが残る・元の配列は変更されない

演習で試してみよう

filterで3以上の数だけ抽出してみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

試してみる一覧ページで解く →

■ 演習

配列[1,2,3,4,5]から3以上の数だけをfilterで抽出し、console.logで出力してください。

詰まったらヒント

arr.filter(n => n >= 3)

20pt

フィルター

配列[1,2,3,4,5]から3以上の数だけをfilterで抽出し、console.logで出力してください。

コード

const arr = [1, 2, 3, 4, 5];

プレビュー

エラー一覧・コンソール

エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。

ロードマップ · 全解説

この演習を深掘りする

「フィルター」は上級レベルのJavaScript演習です。配列[1,2,3,4,5]から3以上の数だけをfilterで抽出し、console.logで出力してください。この課題は、ブラウザ内エディタでその場実行でき、正誤判定も自動で行われます。

filterで条件に合う要素だけの配列を作れます。実務では同様のパターンがコードレビューやUI実装の現場で繰り返し登場します。

学習ロードマップ「project」とセットで進めると、インプット→アウトプットの循環が作れます。演習#73はカテゴリ「project」の中核スキルを固める位置づけです。

取り組み手順（ステップバイステップ）

ページ上部の解説記事を読み、「フィルター」のゴールを把握する
エディタのJavaScript欄を確認し、スターターコードから書き始める
詰まったらヒントを開き、解答例と見比べながら差分を埋める
「実行」ボタンでプレビュー／コンソールを確認し、期待どおりの表示になるかテストする
正解判定では「3」「4」「5」などが含まれることを確認します。
正解後は前後の演習リンクから続けて取り組み、同カテゴリを通しで完成させる

解答コードの読み解き方

JavaScript側では console.log、.filter( が使われています。API名のtypoとawaitの有無を確認してください。解説: filterで条件に合う要素だけの配列を作れます。ヒントの要点: arr.filter(n => n >= 3)

実務・転職でどう活きるか

TODO・カウンター・タイマーは技術面接のライブコーディング題材にもなります。小さく完成させる経験がポートフォリオの説得力になります。

よくある間違い

ヒントを読まずに解答を見る: arr.filter(n => n >= 3)
状態（count等）をDOMだけに持つ
イベントリスナーの二重登録
localStorageに機密情報を保存

トラブルシューティング

実行してもプレビューが変わらない: JavaScriptの編集欄を触っているか確認し、実行ボタンを押したあと数秒待ってから再確認してください。
正解なのに判定が通らない: 正解判定では「3」「4」「5」などが含まれることを確認します。全角スペースやtypo、タグの閉じ忘れを疑ってください。
コンソールにエラーが出る: DevToolsのConsoleタブで行番号を確認し、括弧・引用符の対応を見直します。
スマホで入力しづらい: 横画面にするか、PCブラウザで同じURLを開くと快適です。進捗はlocalStorageに保存されます。

転職・面接で話せるポイント

「フィルター」で扱う技術を自分の言葉で30秒説明できるようにしておく
解答コードの各行が何をしているか、面接官に白板で説明する練習をする
JavaScript API（console.log, .filter(）の使いどころを実例付きで話せる
「なぜこの実装方法を選んだか」「別解はあるか」を必ず1つ用意する

用語集

localStorage: ブラウザにキー値データを永続保存。
setTimeout: 指定時間後に関数を実行。
状態管理: アプリのデータ（カウント等）を一箇所で扱う考え方。

このページで扱うキーワード

このページは「フィルター」「project」「上級」「console.log」「.filter(」「project filter」などのキーワードで検索される方に向けた、フィルターの無料演習・解説です。

学習ロードマップ

学習ロードマップ →

よくある質問（FAQ）

フィルターは無料ですか？

この演習は完全無料で、ブラウザだけで完結します。アカウント登録やクレジットカードは不要です。

難易度と所要時間は？

「フィルター」は難易度「上級」です。解説記事を読んでから取り組めば、プログラミング未経験でも30分以内に解ける設計になっています。 1問あたり5〜15分が目安です。詰まったらヒント→解答の順で確認してください。

正解後は何をすればいい？

正解したら「次の問題」リンクから続けてください。同カテゴリを一通り終えたら、学習ロードマップの次ステップへ進むのがおすすめです。

スマホでもできますか？

スマートフォンのブラウザでもエディタとプレビューは動作します。ただしコード入力はPCの方が快適です。

他の演習はどこ？

演習一覧は/learn/から。カテゴリ・難易度でフィルターできます。

「フィルター」で覚えるポイントは？

filterで条件に合う要素だけの配列を作れます。ヒント: arr.filter(n => n >= 3)

実践プロジェクトカテゴリの位置づけは？

TODO・カウンター・タイマーは技術面接のライブコーディング題材にもなります。小さく完成させる経験がポートフォリオの説得力になります。

「フィルター」の具体的な手順は？

1. ページ上部の解説記事を読み、「フィルター」のゴールを把握する
2. エディタのJavaScript欄を確認し、スターターコードから書き始める
3. 詰まったらヒントを開き、解答例と見比べながら差分を埋める
4. 「実行」ボタンでプレビュー／コンソールを確認し、期待どおりの表示になるかテストする
5. 正解判定では「3」「4」「5」などが含まれることを確認します。
6. 正解後は前後の演習リンクから続けて取り組み、同カテゴリを通しで完成させる

解答コードの読み方は？

JavaScript側では console.log、.filter( が使われています。API名のtypoとawaitの有無を確認してください。

解説: filterで条件に合う要素だけの配列を作れます。

ヒントの要点: arr.filter(n => n >= 3)

うまくいかないときは？

実行してもプレビューが変わらない → JavaScriptの編集欄を触っているか確認し、実行ボタンを押したあと数秒待ってから再確認してください。
正解なのに判定が通らない → 正解判定では「3」「4」「5」などが含まれることを確認します。全角スペースやtypo、タグの閉じ忘れを疑ってください。
コンソールにエラーが出る → DevToolsのConsoleタブで行番号を確認し、括弧・引用符の対応を見直します。
スマホで入力しづらい → 横画面にするか、PCブラウザで同じURLを開くと快適です。進捗はlocalStorageに保存されます。

転職・ポートフォリオでどうアピールする？

「フィルター」で扱う技術を自分の言葉で30秒説明できるようにしておく解答コードの各行が何をしているか、面接官に白板で説明する練習をする JavaScript API（console.log, .filter(）の使いどころを実例付きで話せる「なぜこの実装方法を選んだか」「別解はあるか」を必ず1つ用意する

この演習の前提知識は？

学習ロードマップの該当章を読んでおくとスムーズです。

スターターコードは変更していい？

はい。動けばOKですが、まずはスターターを理解してから差分だけ足すと学習効率が上がります。

点数（pt）の意味は？

20ptは難易度の目安です。合計点を競う必要はなく、理解度を測る指標として使ってください。

ツール一覧