はじめに
本サイトを開発した動機は 2 つあります。
1つは単純に猫が好きだからです。
開発前に軽く調査したところ、猫スポットを紹介する サイトやWebサービスは、記事や一覧形式が多く、地図上でサッと近くを探せるものは見当たりませんでした。
猫好きは猫に直接会いたいと思っている方も多く、自分の身近な場所にある猫スポットを地図形式で簡単に調べられれば需要があるのでは、と思いました。
もう 1つは技術検証目的です。
新しい職場では地図関連のシステムを開発することが多く、地図システムがどのように開発されるのか、という流れを把握しておきたかったからです。
また、React や FastAPI を業務として使うのも初めてとなるため、実務に入る前に一通り触れておきたかったという理由もあります。
開発して思ったのが、地図系アプリにはポリゴン・ポリライン・ポイントといった複数の図形データを扱う機会があり、それぞれをDBにどう格納し、地図上でどう描画するかが奥深いということです。
今回のシステムでは殆どがピンで描画されており、猫島のみポリゴンで表示しています。
本格的なデータがある場合は、ポリゴンデータも増えていき、同時にそれらをどう描画させるのか、サイトが重くなりすぎないか、といったことも考慮する必要があります。
こうした本格的な地図システムの詳細については、今後業務をしていく中で吸収していきたいと思っています。
作ったもの
日本全国の猫スポット（猫カフェ・保護猫カフェ・猫神社・猫寺・猫島・猫駅長・猫城主・猫美術館・猫博物館の 9カテゴリ）を地図で探せる SPA です。
現在地周辺を初期表示し、地図を動かすたびに表示範囲のスポットを再取得します。
スポットのデータは主に、Google Places API・Wikipedia・Wikidata・手動データを組み合わせて集めました。
なお、サイト上には猫ちゃんが歩き回っており、地図の周囲をふらふらと徘徊します。
当初は3Dにする予定でしたが、良いアセットが見当たらなかったのと、モーションを本格的に作ろうとするとUnityなどが必要になることがわかり、2Dのピクセルアートにして、レトロでかわいい雰囲気で作ることにしました。
技術スタック
- フロント: React + TypeScript + Vite、地図は Google Maps JavaScript API
- バック: FastAPI + Mangum (Lambda 化用アダプタ)、SQLAlchemy + psycopg
- DB: Supabase (PostgreSQL + PostGIS)
- インフラ: AWS (Lambda + API Gateway + S3 + CloudFront + ECR)
- IaC: Terraform
失敗したこと
無料クレジットがない状態で、開発してしまい課金額が10,000円を超えてしまいました。
最初、Google Maps API を使う前提で開発を進めていましたが、自分が使っていた GCP
アカウントに無料クレジットが付与されていない状態だったことに気付かないまま実装を始めてしまいました。
Maps JavaScript APIは表示するたびに地図ロード料金がかかるため、開発で何度もページを開いているうちに料金が積み上がっていきます。
さらに、データ収集のため Google Places API（New）の Text Search を全国規模でループ実行してしまったのが致命傷でした。
後から判明したのですが、Places API は Maps API の無料クレジット対象外で、別 SKU として独立して課金されます。「Google Maps の無料枠があるから大丈夫」という思い込みが完全に外れていました。
また、開発段階で細かい設定はしなくてもいいやと思い、GCPのQuota Limits（課金上限） や Budget Alert（使用量アラート）をちゃんと設定しておらず、 気づくのが遅れてしまいました。
技術検証目的で始めた個人開発でしたが、結果的に「クラウド課金事故の踏み方」も実地で学べたので、業務に入る前に経験できたのはむしろ前向きに捉えています。
まとめ
「猫好きとして欲しかったもの」と「実務前の素振り」を兼ねた個人開発でしたが、多くを学べました。
React と FastAPI を初めて本気で触り、Terraform で AWS インフラを組み、PostGIS で空間検索を試し、クラウド課金事故までセットで体験できました。
教科書では身につかない感覚をまとめて手に入れられた のが今回の最大の収穫です。
特に AWSでも経験した「クラウドの課金は自分でガードレールを建てないと一瞬で授業料を払わされる」という気付きは、GCPでも同じく洗礼にあってしまいました。
業務前に痛い目を見ておけて結果的にはプラスでしたが、やはりこういう所は手を動かして身に着けていくものだなと思いました。
今後は手動データ（猫城主など API では取れないスポット）の充実、説明文の品質向上、Place Photo の S3 キャッシュ化によるコスト削減など、が予定されていますが、仕事が忙しくなりそうなので、どこまで手を加えられるかは不明です。
猫スポットの情報提供や改善提案など、コメントいただけると嬉しいです。
肉球マップ：https://d2jyxfn5xlva24.cloudfront.net
