尾形 大地

概要 特定の駅周辺のインフラ情報（路線・駅画像）と飲食店情報を統合して表示する探索型Webアプリケーションです。外部API（Google, Wikipedia, HeartRails等）の「データ構造の複雑さ」や「レスポンス速度」といった課題を、Next.jsのサーバー機能を活用して解決しました。 使用技術 Frontend: Next.js (App Router), TypeScript, React, Tailwind CSS Validation/Schema: Zod API Management: URLSearchParamsによるクリーンなクエリ構築, Next.js API Routes (Route Handlers) こだわったポイント・解決した課題 1. 堅牢なデータバリデーション（Zodの活用） WikipediaやGoogle等の外部APIはレスポンスの構造が複雑で、実行時にエラーが発生しやすいという課題がありました。これに対し、Zodを用いた厳格なスキーマ定義を行い、サーバーサイド（API Routes）でデータを検品。フロントエンドに流れるデータの型を保証することで、ランタイムエラーを未然に防ぎ、開発効率とアプリの堅牢性を高めました。 2. ハイブリッド・データ戦略によるパフォーマンス最適化 APIの無料枠制限や通信遅延を考慮し、「事前定義データ（静的キャッシュ）」と「ライブAPIフェッチ」を組み合わせたハイブリッド構成を実装しました。 主要6エリア（横浜・みなとみらい等）については、サーバーサイドに構造化されたデータを保持。 これにより、検索頻度の高いエリアではレスポンス速度を極限まで高め（0ms）、APIコストを100%削減することに成功しました。 3. クリーンコードと保守性の追求 URLSearchParams を活用し、複雑なURLエンコード処理やクエリパラメータの構築を疎結合に管理しました。手動の文字列連結を排除することで、パラメータの追加や仕様変更に強い、メンテナンス性の高いコードベースを構築しています。