読み込み中...

Web · 進行中

空港ラウンジマップ

空港のターミナルを3Dマップで表示し、ラウンジの場所・入室条件・レビューを確認できるWebアプリ。手持ちのクレジットカードや航空会社ステータスを登録すると、各空港で入れるラウンジを判定

デモを開く

期間: 2026年10月 – 現在
分野: Web
所属: 趣味（個人・チーム）
状態: 進行中

1 / 2

概要

国内外187空港のターミナルを3Dマップで表示し、ラウンジの位置・入室条件・営業時間・最寄りゲート・フロアを確認できるWebアプリを開発しています。
クレジットカード・プライオリティ・パス・JAL/ANA・各アライアンスのステータスなど104種類から手持ちのものを登録すると、空港ごとに入れるラウンジを判定して表示します。
ラウンジごとにYouTube動画やブログ記事のレビューも掲載しています。

アーキテクチャ

OpenStreetMapターミナル・滑走路・鉄道
データ生成スクリプトNode.js
GitHub Actions
空港ごとのJSONzodで検証
空港ページ・sitemap.xmlSEO用に生成
Cloudflare Workers
世界地図D3
3DマップThree.js
UITypeScript / DOM
入室判定ドメイン層

Vite + TypeScriptで、UIフレームワークを使わずDOM操作で構成しています。
3D描画はThree.js、トップページの世界地図はD3（d3-geo / d3-zoom）で実装しています。
ターミナルの外形・館内・滑走路・鉄道はOpenStreetMapから取得し、Node.jsのスクリプトで空港ごとのJSONに変換しています。
空港データのスキーマはzodで定義・検証し、空港ごとに遅延読み込みします。
入室判定のロジックは画面から切り離したドメイン層に置き、Vitestでテストしています。
ビルド時に空港ごとのページとsitemap.xmlを生成し、Cloudflare Workersで配信しています。

技術的挑戦

課題空港ごとの3Dマップ作成解決OpenStreetMapデータの取得・ターミナル建物の対応付け・JSON生成をスクリプト化し、Three.jsで描画
課題カードやステータスによる入室可否の判定解決入室手段とラウンジの受け入れ条件をドメイン層に定義し、判定ロジックをテストで担保
課題ビルドなしの静的サイトからの移行解決TypeScript・Vite・zod・Biome・Vitestへ移行し、生成データをスキーマで検証できる形に整理
課題187空港規模のデータ配信解決空港ごとの遅延読み込みと、ビルド時のSEO用ページ・sitemap生成