Smoking Spot Finderの設計・技術選定・コミット履歴を解説

01 / 概要

プロジェクトの概要と目的

静岡駅 喫煙所検索プロトタイプ /smoking にアクセスすると、静岡駅周辺半径1000m以内のコンビニ・飲食店をGoogle Places APIで検索し、口コミをClaudeで解析して喫煙可否を地図上に表示します。ダミーデータは使用せず、毎回APIから直接取得します。 事前準備 1. .env.local.example を .env.local にコピーし、キーを設定する。 GOOGLE MAPS API KEY / NEXT PUBLIC GOOGLE MAPS API KEY : Google Cloud で Places API と Maps JavaScript API を有効化して取得。 NEXT PUBLIC はブラウザに露出するため、HTTPリファラー制限を設定すること。 ANTHROPIC API KEY : Anthropic Consoleで発行したAPIキー。 2. npm install （インストール済みであれば不要）。 3. npm run dev で起動し、 http://localhost:3000/smoking を開く。 実装箇所 app/api/smoking spots/route.ts : Nearby Search → Place Details（口コミ取得）→ Claude（口コミから喫煙可否をツール呼び出しで抽出）の順に処理し、結果をJSONで返すAPI Route。 app/smoking/page.tsx : Google Maps JS APIをスクリプトタグで読み込み、マーカー色分け（緑=紙タバコOK / 青=電子タバコ限定 / 黄=コンビニ店外灰皿あり）とサイドバー一覧を表示するクライアントコンポーネント。 便利マップ（ve

本記事は公開されている構成と master ブランチのコミットを一次情報として整理しています。

02 / 使用技術

使用技術と役割

03 / 設計

構成から読み解く設計

主な項目は AGENTS.md、CLAUDE.md、README.md、app、eslint.config.mjs、lib、next.config.ts、package-lock.json です。

• 画面・ルーティング層
• データ永続化層

04 / 変更履歴

コミットから見る実装の変遷

以下は既定ブランチの直近の変更です。リンク先で原文と一次情報を確認できます。

1. 2026/07/16
   機能・コンテンツを追加d7f1e66をGitHubで確認 ↗
2. 2026/07/08
   機能・コンテンツを追加4cddaf7をGitHubで確認 ↗
3. 2026/07/08
   機能・コンテンツを追加1a8e654をGitHubで確認 ↗
4. 2026/07/08
   実装内容を更新e4da0f4をGitHubで確認 ↗
5. 2026/07/08
   実装と使いやすさを改善f188ce7をGitHubで確認 ↗
6. 2026/07/08
   不具合や設定を修正b846e3cをGitHubで確認 ↗
7. 2026/07/08
   機能・コンテンツを追加3771b02をGitHubで確認 ↗
8. 2026/07/08
   実装・データを更新0988e7cをGitHubで確認 ↗
9. 2026/07/08
   機能・コンテンツを追加61fd758をGitHubで確認 ↗
10. 2026/07/08
    実装内容を更新a17d7e5をGitHubで確認 ↗
11. 2026/07/08
    実装内容を更新9ae363cをGitHubで確認 ↗
12. 2026/07/08
    機能・コンテンツを追加04af03eをGitHubで確認 ↗

05 / 学び

このプロジェクトから得られる学び

• 変更を小さく記録する

  コミット単位で目的を分けると、実装の意図を追跡しやすくなります。

• 構成と技術選定を結び付ける

  TypeScriptの採用理由と各ディレクトリの責務を説明できることが保守性につながります。

• READMEと実装を同時に育てる

  説明とコードを近い状態に保つことが、再利用と振り返りを助けます。

06 / よくある質問

よくある質問