尾形 大地

概要
特定の駅周辺のインフラ情報（路線・駅画像）と飲食店情報を統合して表示する探索型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エンコード処理やクエリパラメータの構築を疎結合に管理しました。手動の文字列連結を排除することで、パラメータの追加や仕様変更に強い、メンテナンス性の高いコードベースを構築しています。

Next.js × Zodで実現する、型安全で堅牢な外部API統合ダッシュボード

・フロントエンド（クロスプラットフォーム／React Native／Expo）環境の構築
開発スタックとして、Expo + React Native を採用。
型安全・保守性向上のため TypeScript を導入。 
・画面／UI設計と実装
ユーザーの「今日の間食回数カウント」や「過去記録閲覧」などの画面要件を把握し、React Native コンポーネントを実装。
グローバルな状態管理には Jotai を採用し、「ログ状態」「ユーザー設定」などをシンプルに管理。 
・バックエンド／データの同期・保存
クラウドバックエンドとして Firebase を導入し、ログデータの保存・取得、ユーザー認証（必要に応じて）を実装。 
・ルーティングとナビゲーション設計
ファイルベースルーティングを実現する Expo Router をプロジェクトに組み込み、画面遷移を簡潔に設計。 
・ビルド／リリース体制構築
クラウドビルドサービスとして EAS（Expo Application Services）を用いた iOS バイナリ作成・App Store 提出フローを整備。 

間食をしない習慣をサポートするモバイルアプリを作成

自分が行ったアーティストのライブのセットリストを記録するWebアプリです。
複数人で共有できます。

■■　開発環境　■■
・デプロイ：Google Cloud Run
・言語：PHP
・フレームワーク：Laravel
・DB：Cloud SQL for MySQL、Cloud Firestore
・ストレージ：Cloud Storage for Firebase
・コード管理：Github

◆ダミーアカウント
・メールアドレス：test_user01@example.com
・パスワード：password

ソースコード
https://github.com/ryomasolid/live_record

尾形大地

尾形大地

尾形 大地

尾形 大地

尾形大地

尾形大地