Geo Linker

背景にあった課題

主な課題は、d3.jsによるインタラクティブな地球儀の描画、Framer Motionを使った滑らかな写真アニメーション、陸路での到達可能性を判定するゲームロジック、これらすべてをNext.jsのApp Router上でパフォーマンス良く統合することでした。

自身の提案・解決策

ロジックを`useGameLogic`（ゲーム状態管理）と`useCountryData`（データ取得）というカスタムフックに厳密に分離しました。地図描画は`WorldMap.tsx`コンポーネントがd3.jsを用いて担当し、UIコンポーネント（`Button.tsx`, `CountryModal.tsx`）は`tailwind-variants`と`framer-motion`を活用して再利用性とデザイン性を高めました。写真はローカルと外部APIを組み合わせたハイブリッド方式で表示しています。

導入した結果や学び

ゲームのクリア後には、旅のルートをスライドショーで振り返ることができ、結果をSNS（X, LINE, Facebookなど）で共有する機能も実装しました。これにより、ユーザーはゲーム体験を他者と共有し、エンゲージメントを高めることができます。