【要約】フェンリル株式会社 5dayインターンシップ参加レポート [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
高校生インターン生が、短期間でWeb管理画面を開発する過程で、実装の複雑化と開発プロセスの混乱という課題に直面した。具体的には以下の問題が発生した。
- ・画面コンポーネントへのロジック集中による、コードの見通しの悪化。
- ・API呼び出しやソート処理が混在することによる、保守性の低下。
- ・Gitのブランチ運用やPRの単位が整理されておらず、コンフリクト解消に時間を要した。
- ・OpenAPI等の自動生成ツールの検討不足による、手動実装の工数増。
// Approach
開発者は、画面コンポーネントを「薄く」保つため、ロジックを各レイヤーへ適切に分散させる設計アプローチを採用した。以下の手法で実装を進めた。
- ・APIクライアント層: axiosの呼び出しや共通エラー処理を専用のApiClientクラスに集約。
- ・Router層: TanStack Routerのloaderを利用し、ページ表示に必要な初期データを取得。
- ・Hooks層: ソートなどの複雑なロジックをCustom Hookへ分離。
- ・UI層: PaginationやSearchInputなどの共通コンポーネント化による再利用性の確保。
// Result
5日間の開発を通じて、機能実装のみならず、保守性と可読性を意識したフロントエンド設計の基礎を習得した。成果は以下の通りである。
- ・責務の分離により、画面コンポーネントのコード量を削減し、見通しを改善。
- ・共通コンポーネント化により、類似画面の開発効率を向上。
- ・レビューを通じ、エラーハンドリング、アクセシビリティ、セキュリティ等の実戦的な視点を得た。
Senior Engineer Insight
> 記述された「責務の分離」は、実戦のフロントエンド開発においても極めて重要な原則である。特に、APIクライアントの抽象化とRouter loaderによるデータ取得の分離は、宣言的なUIを実現する上で理にかなっている。ただし、大規模開発ではAPIクライアントの手動実装ではなく、OpenAPI等を用いた型安全な自動生成が標準となる。また、Git運用やPRの粒度といった開発プロセスへの反省は、チーム開発のスケーラビリティに直結する重要な視点である。