青春18きっぷの行先をランダムに決めてくれるサイトを公開

はじめに

いままで自作アプリを公開したことがなく、なにか作ってみたいなと常々考えておりました。
そんな時に昔テレビでやってたロケみつの稲垣早希のブログ旅みたいに、行先がランダムに決められるアプリとか面白そうだなと思い。
今まで青春18きっぷの行先をランダムに決めるサイトは見たことないなと思い、今回そのサイトを作ってみました。

🌐 公開URL: https://seishun18-random-journey.pages.dev

このアプリの特徴

🎲 完全ランダムな目的地生成

出発駅を入力すると、JR全線の駅からランダムに目的地を選択します

💡 駅名サジェスト機能

駅名を入力する際、リアルタイムで候補を表示

🎰 スロットアニメーション

目的地が決まる瞬間を、スロットマシンのような演出で盛り上げます。
ぱっと結果だすと面白くないので、とりあえずの演出としていれてます。

🗺️ 地図・観光情報の統合

• Google Maps で目的地の位置を確認
• Perplexity AI で駅周辺の観光スポットを検索
• ジョルダンで経路を確認

📤 結果のシェア機能

生成された旅程を SNS やクリップボードで簡単にシェアできます

⚡ 完全無料運用

Cloudflare の無料枠と Ekispert API の無料プランのみで動作。
インフラコストゼロで運用できる設計です。

技術スタック

フロントエンド

• React 18 + TypeScript: 型安全な開発とモダンなフロントエンド体験
• Vite: 高速なビルドとホットリロード
• Tailwind CSS: ユーティリティファーストの効率的なスタイリング
• React Router: SPA のルーティング管理

バックエンド

• Hono: 超軽量な Web フレームワーク（Cloudflare Workers 最適化）
• TypeScript: 型安全な API 実装
• Ekispert Web Service API: 駅情報・路線情報取得（無料プラン）

インフラ・デプロイ

• Cloudflare Workers: エッジコンピューティングでグローバルに高速応答
• Cloudflare Pages: フロントエンドの静的ホスティング
• Cloudflare KV Namespace: 駅データの 24 時間キャッシュ
• GitHub Actions: CI/CD パイプライン（自動テスト・デプロイ）

システムアーキテクチャ

ランダム旅行生成フロー

※ 外部APIのデータはキャッシュデータがあればそちらを使います

開発で苦労したこと

利用できる技術スタックの検索負荷

はじめはもっと前にこのアプリの構想があったのですが
そのときはSDD駆動ではなく、自分で構想を練る必要があったので
そこでどうすればいいかの判断が難しく、断念。
今回久々にやりはじめ、cc-sddを利用して開発することで。数日で終わらせることができました。

位置情報を利用したアプリを断念

青春18きっぷのアプりをつくったものの
実は一回も使ったことはなく、細かいルール等も知らなかったので
最初苦労しました、、位置情報からHeartRails Expressを使い現在位置とランダム駅を探し
それを経路としてだしたかったのですが。青春18きっぷの駅はJRであることの制約をそもそもしらず
そのままだとまったく使えなかったのでこれを断念

路線をそのままだすことを断念

代わりにEkispert APIを利用して、いい感じにしようとおもったのですが
フリープランでは駅の検索のみのため、経路を画面に出すことは難しく
また現在の位置情報も利用はできないため。JRでの抽出条件で
路線と、そこから駅を検索し。そのリストからランダムにだすことにしました。
路線はジョルダンへのリンクを張ることでカバーしました。

まとめ

拙い内容ではありますが、自分が作成したものが世の公開されるのはやはりうれしい気持ちがありました。
また学びとしては、CloudflareをCDNの目的以外で使うことは初めてで、無料枠をつかってこんな簡単にアプリを立ち上げられることにも感動しました。
今後は思いつくたび、何かのアプリケーションを公開するようにしていきたいと思います。

もし利用された際に、ご意見ご感想あればコメントくださると幸いです