ふらっと乗換

概要

ベビーカーや車いすで鉄道を利用する方向けに、バリアフリー対応の乗換情報を提供する Web アプリです。他社線間にも対応したバリアフリー・乗換難易度を表示し、より良い代替ルートも提示します。また、列車のフリースペースと各駅のホーム設備を同時に確認できます。

デモのリンクは、駅構内図の一例（丸ノ内線 淡路町駅）です。

開発の目的

このアプリを開発したきっかけは、私が鉄道員として勤務していた際に感じていた、次のようなユーザーの課題を解決したいと思ったからです。

他社線をまたぐ乗り換えのバリアフリー情報がない

各鉄道会社が提供するバリアフリー対応状況は自社線同士のみで、他社線間の乗り換えがバリアフリー対応かどうかを調べることが難しいです。

フリースペースの位置がわからない

列車内のフリースペースの位置は路線によって異なります。その位置がわからず、混雑するドア前にベビーカーや車いすの利用者が溜まって、肩身の狭い思いをしている利用者を多く見受けます。

乗降駅のエレベーターとフリースペースの位置を対比できれば、乗車するドアを事前に決められます。

実装のポイント

ドメイン指向の 4 層アーキテクチャ

app / features / shared / external の 4 層を設け、技術レイヤーではなくドメイン（駅・ホーム・停車パターン）で凝集する構成としました。

ports パターンによる依存性逆転

当初は Drizzle ORM の型をそのまま features でも使用していました。この実装では最小のクエリ 1 本のために 3 段のチェーンモックが必要で、where 句を 1 つ追加するだけでテストが壊れる状況でした。

DB アクセスに ports パターンを導入して依存性を逆転させたことで、usecase のテストには 1 行のフェイクを注入するだけで済むようになり、テスタビリティが大幅に向上しました。

ADR によるアーキテクチャ決定の記録

個人開発にありがちな行き当たりばったりの設計判断や、開発に空白ができたときに過去の失敗や不採用案を蒸し返してしまうことを防ぐため、アプリケーション全体に及ぶアーキテクチャ判断は、決定までの道筋も添えて不変の ADR としてリポジトリに積み重ねています。

• ADR の例（DB への読み取りと書き込みで異なる抽象を用いる - Query Service と Repository）

使用技術

Next.js 16（App Router）、React 19、TypeScript、Mantine v8、Tailwind CSS、Drizzle ORM、Neon（PostgreSQL）、NextAuth、Zod、Turborepo、pnpm を使用しています。開発には Claude Code を活用しました。