実践例：APIデータを検索＆並び替え（forEach活用）
See the Pen JavaScript forEach Practical Application by MONO365 -Color your days- (@monoqlo365) on CodePen.
目的
- JSONPlaceholder（架空の投稿API）からデータを取得
- タイトルを検索してフィルタ
- 昇順／降順ボタンで並び替えを切り替え
forEach()でデータを表示
解説
| 処理 | 内容 | 関連メソッド |
|---|---|---|
| データ取得 | fetch() を使ってAPIからJSONを取得 | 非同期処理 |
| フィルタ | filter() で検索キーワードに一致する投稿だけ抽出 | 配列操作 |
| 並び替え | sort() でタイトルを昇順／降順に切替 | 並び替え処理 |
| 表示 | forEach() で1件ずつカードを生成して追加 | DOM操作 |
forEach が使われる理由
- シンプルに要素を1件ずつ処理したいときに最適
map()やfilter()のように新しい配列を作らないので、表示専用処理に向く- 非同期APIの結果をそのまま出力するのに使いやすい
