挨拶
はじめまして！
Next.jsを使用してポートフォリオ用のwebアプリケーションを作成しましたので，紹介させていただきます．
アプリ概要
旅行計画の作成を楽にする「spots viewer」というアプリを作成しました．
- 旅行で訪れたい観光地・店などを検索できる
- 候補に追加したスポットを地図上に一覧表示させることができる
- スポット間の移動時間を検索することができる
制作背景
私は旅行が好きでよく旅行をします．
旅行の計画を立てる際，旅行先にある良さげな観光スポットやレストラン，カフェなどをinstagramなどで調べては，スポット間の位置関係を確認するために，そのスポットをいちいちGoogleマップで検索しております．
この「いちいちGoogleマップで検索する」という作業が手間に感じていたため，気になるスポットをすぐマップ上に一覧表示することができるアプリケーションがあれば，旅行計画の作成が大分楽になるのではないかと考えたのが制作背景です．
機能一覧
| 機能 | |
|---|---|
| 1 | アカウント登録 / 削除機能 |
| 2 | ログイン / ログアウト機能 |
| 3 | ゲストログイン機能 |
| 4 | パスワード再設定機能 |
| 5 | 旅行の新規作成 / 削除機能 |
| 6 | 旅行名変更機能 |
| 7 | 日程の追加 / 削除機能 |
| 8 | キーワードでのスポット検索機能 |
| 9 | エリアとカテゴリでのスポット検索機能 |
| 10 | 候補スポット追加/削除機能 |
| 11 | Googleマップ上に候補スポットを一覧表示する機能 |
| 12 | Googleマップビューポート自動調整機能 |
| 13 | 候補スポット詳細表示機能 |
| 14 | 候補スポットについてのメモ保存機能 |
| 15 | Googleマップマーカーの色切り替わり機能 |
| 16 | スポット間の移動時間検索機能 |
| 17 | スポット間の移動経路表示機能 |
使用イメージ
ゲストログイン
ログインしていない状態で，トップページの「使ってみる」ボタンを押すことでゲストログインできます．
旅行の新規作成/名前変更/削除，日程の追加/削除
キーワードでのスポット検索
エリアとカテゴリでのスポット検索
メモの追加，スポットの削除
Googleマップのビューポート自動調整
Googleマップマーカーの色切り替わり
移動時間検索
使用技術
- HTML / CSS / JavaScript
- React 18
- TypeScript
- Next.js 14.2.3
- Material UI
- Tailwind CSS
- Google Maps API(Maps JavaScript API, Places API, Directions API)
- react-google-maps
- Firebase(Function, Firestore, Authentication)
- その他ツール
- VSCode
- Git / GitHub
Firestoreのデータ構造
tripsサブコレクションの各ドキュメントに対してわざわざdaysサブコレクションを設定している理由は，firestoreでは配列フィールドの中に配列を設定することはできないためです．
このようにはできない ↓
ただ，このデータ構造だと読み込むドキュメントの数が多くなり，firebaseの課金額が増えやすくなってしまいます．
より適切なデータ構造があるのかもしれませんが，未経験の自分が深く考えても最適案を出すのは難しいと判断し，とりあえず思いついたこのデータ構造で進めました．
苦労した点
-
TypeScriptエラー
シンプルな型を扱う分には問題ないのですが，useRefやイベントハンドラ，ライブラリ関数等の複雑な型のエラーで苦労しました． -
非同期処理の扱い
Google Maps APIリクエストなどの非同期処理が終わってから描画をさせるように実装する点で苦労しました．
Promise/async/awaitを使った非同期処理やuseEffectの性質について一から学び，対処しました． -
Google Maps API関連の実装
Google Maps APIは公式ドキュメントが古いままのものが多く，公式ドキュメント通りにコードを書いてもうまく実装できないことが多々あり，苦労しました．
vis.glの「react-google-map」という比較的新しくドキュメントが充実しているライブラリを使うことで，なんとか所望の実装をすることができました．
また，途中でGoogle Cloudの請求先アカウントが突然停止され，APIキーが無効になってしまいました．コードを書いていたわけではないですが，ここが最もポートフォリオ作成で苦しんだ点です．
アカウントを有効にするために様々なことを試みたのですが，結局有効にできず，最終的には家族にGoogle Cloudアカウントを作成してもらい，それを使ってポートフォリオを完成させました．
今後の課題
-
公共交通機関での移動経路・時間検索
このアプリでは，スポット間の移動経路・時間の検索にはGoogle Directions APIを使用しております．
Directions APIでは，日本国内のみ，公共交通機関を使った移動経路の検索ができないことが後からわかりました．
今後，他のAPIを使って，公共交通機関での移動経路・時間検索も実装できればと思います． -
スケジュールページのレスポンシブデザイン実装
-
再レンダリングの最適化（動作が少し重い）
-
コードが長いコンポーネントを分割して可読性を上げる
-
検索結果を人気順に並び替え
-
検索結果を増やしてページネーション実装（現在は最大20件までしか表示されない）
-
確定版スケジュールの作成ページ実装
→ スケジュールをGoogleカレンダーに反映機能する機能の実装
etc.
終わりに
以上，約４ヶ月かけて作成したポートフォリオについてまとめました．
作成を進めていく中で，中々解決できないエラーなど多くの壁に直面し辛い時期もありましたが，諦めずに一つずつ壁を乗り越え，完成まで至ることができました．
また，辛いと感じつつも，基本的にはwebアプリケーションを作っている時は楽しく，困難なエラーを解決できたときは大きな喜びを感じることができました．
今後も様々な技術をキャッチアップして，より価値のあるアプリケーションを提供できるエンジニアになれるよう，努めてまいります！
最後まで読んでいただきありがとうございました！
学習教材
- progate HTML & CSSコース
- progate JavaScriptコース
- Udemy Git：はじめてのGitとGitHub
https://www.udemy.com/course/intro_git/ - Udemy 【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門
https://www.udemy.com/course/modern_javascipt_react_beginner - Udemy Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
https://www.udemy.com/course/react_stepup - Udemy 今後のフロントエンド開発で必須知識となるReact v18の機能を丁寧に理解する
https://www.udemy.com/course/react_v18 - Udemy 【Next.js13】最新バージョンのNext.js13をマイクロブログ構築しながら基礎と本質を学ぶ講座
https://www.udemy.com/course/nextjs13_learning_with_microblog