See the Pen JavaScript forEach Practical Application by MONO365 -Color your days- (@monoqlo365) on CodePen.
解説（追加機能）
1️⃣ 読み込み中アニメーション表示
#loadingを作成して API読み込み前に表示- データ取得後
loadingEl.style.display = 'none'で非表示
2️⃣ 投稿クリックでモーダル表示
.cardにclickイベント追加 →showModal(post)- モーダル内にタイトル・本文・IDを表示
- モーダル外クリックや × ボタンで閉じる
3️⃣ 並び替え基準の変更
<select>でtitleまたはidを選択updateList()内のsortKeyで判定し、昇順/降順切替
学習ポイント
- forEach：配列の要素を1件ずつ DOMに追加＆クリックイベント登録
- 非同期 fetch：データ取得の待機
- filter + sort：検索＆並び替えを動的に実装
- モーダル操作：クリックで詳細表示、閉じる操作を実装
- 読み込みUI：ユーザーにデータ取得中とわかる表示
このコードをさらに発展させると…
- ページネーション（1ページ10件ずつ表示）
- 投稿ごとにいいねボタンやコメント追加
- 並び替えを複数条件（タイトル＋ID）
…など、実際のWebアプリと同じような構造にできます。
