この記事で振り返る範囲

• 画像ブロックの保存先を S3 に変更
• 画像選択ダイアログの整備
• 問題編集画面への DnD 導入

当時の流れ

• f84b619c (2024-09-02) 画像を LocalStack の S3 に保存する仕様へ変更
• daa78d88 (2024-09-02) 画像一覧ダイアログで選択可能に実装
• 6cafca3e (2024-09-03) 選択/解除のUX修正
• 421ecadc (2024-09-03) 削除時の選択状態整合を修正
• d5d619a9 (2024-09-04) 問題編集画面に DnD でブロック配置

この時期は、UI 操作体験だけでなく「画像データの所在」を明確にした点が重要でした。

学び

1. 画像管理は早期に外部ストレージへ寄せるべき

フロント内状態だけで画像を扱う方式は限界があり、複数画面・複数ユーザー運用に耐えにくいです。S3 管理へ寄せたことで、後の API/CDN 設計に接続しやすくなりました。

2. DnD は導入後の微修正が本番

DnD 自体を入れるより、背景色やスクロール、ドロップ判定などの地道な修正が実用性を決めます。コミット履歴でも、導入直後の修正が多く入っています。

次につながったこと

画像と編集操作の土台ができたあとは、教材メタデータ（学習指導要領コード、タグ）に焦点が移りました。

次回は、学習指導要領コードとタグ運用の導入時期を振り返ります。

参考コミット

• f84b619c (2024-09-02)
• daa78d88 (2024-09-02)
• 6cafca3e (2024-09-03)
• 421ecadc (2024-09-03)
• d5d619a9 (2024-09-04)