IH12B332 12番 神保恒介 - JS23 No.02

概要

• このリポジトリは、JS23 No.02の課題を管理するためのものです。
• このリポジトリは、cloudflare Pagesを用いて、こちらのページで公開しています。
• 今回はNext.jsのAppRouer、Tailwind CSSを用いて、Google Maps APIを用いた地図アプリを作成しました。

こだわったところ

• 設定画面でマップのコントロール・テーマを設定できます。
• マップ上をクリックすると、ピンを追加するフォームが表示されます、未完成です。(無念...)
• マップ上のピンをクリックすると表示されるフォームにクリック地点の座標が表示されます。
• おすすめリストは、JSONファイルに記述したデータを読み込んで表示しています。
• ローカルストレージに設定を保存しています。
• マップの表示は、googlemaps-reactWrapperを用いています。
• 複数のリストに対応できるよう、リストはタグにて分けられるようにしています。
• APIKEYは、環境変数に設定しています。

使用した技術

• Node.js
• Next.js
• Tailwind CSS
• Cloudflare Pages

ローカルでの実行方法

1. このリポジトリをクローンする
2. npm installを実行する
3. .envファイルを作成し、NEXT_PUBLIC_GOOGLEMAP_APIKEYにGoogleのAPIキーを設定する
4. npm run devを実行する
5. http://localhost:3000にアクセスする

主要なファイル構成

.
├── README.md
├── src
│   ├── components/
│   │   ├── CreatePlace.tsx     // マップ上をクリックすると呼び出されるピン追加用フォーム (未完成)
│   │   ├── GoogleMaps.tsx      // Google Maps APIを用いたマップ表示
│   │   ├── Header.tsx          // ヘッダー
│   │   ├── LocationList.tsx    // おすすめリストを表示するコンポーネント
│   │   └── ThemeSwitch.tsx     // テーマ切り替えセレクトのコンポーネント
│   ├── hooks/
│   │   └── useLocalStorage.ts  // ローカルストレージをstate管理するためのフック
│   ├── app/
│   │   ├── layout.tsx            // ルートコンポーネント
│   │   ├── page.tsx              // メインページ (htmlファイル+jsファイルを統合したファイル)
│   │   ├── global.css            // グローバルCSS (tailwindの指定等)
│   │   └── settings/
│   │       └── page.tsx          // 設定ページ (画面上のコントロール等の設定)
│   └── static/
│       └── data.json             // 聖地巡礼のロケーションデータを格納したJSON
└── .env                          // 環境変数 (NEXT_PUBLIC_GOOGLEMAP_APIKEY をGoogleのAPIキーに設定)