フロントエンド（Frontend）
フロントエンドは、利用者の端末で情報を提示し、入力を受け取り、バックエンドや外部サービスと連携して利用者価値を実現するソフトウェアの部分です。画面の見た目だけでなく、状態管理、通信、性能、アクセシビリティ、セキュリティ、配布と更新までを含めて設計します。
設計の中心
- 利用者が達成したいタスクと、途中状態・失敗状態を明示する。
- URL、履歴、フォーム、キャッシュ、通信中、再試行、オフラインなどの状態を設計する。
- UIの責務とドメイン・データ取得の責務を分離し、変更理由の異なるコードを同じコンポーネントへ詰め込まない。
- キーボード操作、読み上げ、色や動きへの依存、画面幅や入力方式の違いを最初から扱う。
- 表示速度だけでなく、利用者が操作可能になるまでの時間、遅い通信、失敗時の理解可能性を評価する。
技術選択を比較する
SPA、サーバーサイドレンダリング、静的生成、ネイティブアプリ、クロスプラットフォームのどれが常に優れているわけではありません。SEO、初期表示、対話性、更新頻度、端末能力、チームの技能、運用コスト、アクセシビリティ要件を比較し、必要な複雑性だけを採用します。
検証
ユニットテストだけでは、画面遷移、通信失敗、実機差、支援技術、入力方式を十分に検証できません。コンポーネント・統合・E2Eテスト、ブラウザと実機での確認、性能計測、手動アクセシビリティ評価をリスクに応じて組み合わせます。