Open3

レストラン検索アプリについて

atnuhsatnuhs

終わった直後の感想

締め切り１日前にクエリパラメータに位置情報を含めても良いことにした。そのため、そこからの変更箇所の多さに引っ張られ地図表示の実装が想定していたところまで進まなかった。コンポーネントやユーティリティ関数の整理、エラーハンドリングの確認など機能が実装できたあとで確認しようと思っていた部分が確認できずに終わってしまった。時間が足りずREADMEに書ききれなかったため、記憶が新しいうちに考えていたこと、学んだことを残しておく。

目次

  • 開発プロセスについての気づき
  • 技術的な学びと成長
  • 時間配分と注力ポイント
  • 開発手法とツールの活用
  • 今後の展望と改善点

開発プロセスについての気づき

  • 今回の課題では、自分のコードがしっかり審査されることを意識し、実装内容よりもコードの書き方や設計に注力した
    • 特に序盤はNext.jsやReactの作法やベストプラクティスに沿うよう慎重に実装
    • 終盤は納期への焦りから、機能の動作を優先した実装へと移行した
  • 明確な締切の存在がパフォーマンスに大きく影響することを再認識
    • 今後は強制的に締切を設定して開発に取り組みたい

技術的な学びと成長

  • Next.jsやReactに関する自分の理解の浅さを実感
    • 期間中はReactの公式ドキュメントを毎日参照
    • useStateやuseEffectの基本的な挙動について理解を深められた
    • 命令的UIと宣言的UIの違いについても学べた
  • 並行して「プロになるためのWeb技術入門」を読んでいたため、Web技術の歴史的変遷についても学び、これまでの点としての知識が線でつながった
    • フロントエンド技術の変遷についてさらに詳しく学びたいと感じた

時間配分と注力ポイント

  • 時間をかけた主な部分:
    • ReactとNext.jsの思想・設計・ベストプラクティスの理解
    • Google Maps APIのReactライブラリの選定と理解
    • 開発初期段階でのDocker環境構築とnode_modules関連の問題対応

開発手法とツールの活用

  • 初めて機能ごとにブランチを分け、こまめなコミットを心がけた
    • PRにもタイトルや説明を記載するよう意識
    • ただ短期間の個人開発だったため、その効果を十分に実感するには至らなかった
  • GitHub Copilotを初めて本格的に活用
    • コードの記述の効率化には大いに役立った
    • ただし、提案されたコードを適切に評価するには、使用技術に対する十分な理解が前提となることを実感
    • 公式ドキュメントや技術記事との行き来を繰り返すことで理解を深められた

今後の展望と改善点

  • これまでは「どんな機能が作れるか」と「最新技術を試す」ことを優先してきたが、今後はコードの保守性や可読性を重視し、チーム開発・運用を視野に入れた実装を心がけていきたい
atnuhsatnuhs

タイムライン

1. 環境構築

  • Dockerを用いたNext.jsの環境構築を行う
  • Dockerの復習
  • node_modulesへの対処：「バインドマウント + Volume Trick」=> 「Docker Compose Watch」

2. CSR中心の開発

  • URLのクエリパラメータに位置情報を含めず、セッションストレージに保存
  • カスタムフックの使用
  • useState、useEffectの仕様確認
  • 検索条件の増加を考慮し、react hook formの導入

3. Google Mapsの追加

  • ライブラリに関してはreact-google-maps、react-google-maps/api、@vis.gl/react-google-mapsなどあったが2024年5月14日に公式リリースされたReact インテグレーション ライブラリである@vis.gl/react-google-mapsを採用

https://cloud.google.com/blog/ja/products/maps-platform/google-maps-platform-graduates-react-integration-library-to-1-0

4. SSRへの移行

きっかけ

  • ホットペッパーグルメやぐるなびなどの現在地からのレストラン検索ページのURLを見たところ位置情報をクエリパラメータに含めていた
    # 例
https://xxxx/search?lat=34.43232&lon=135.43274
  • URLに位置情報を含めるのはセキュリティ的に良くないのではと思い、含めないようにしていたが、今あるサービスがしてるので大丈夫なのかもしれない
  • 以前は位置情報をGeolocation APIやセッションストレージから取得し、クエリパラメータに位置情報を含めないようにしていたためでCSR中心にせざるを得なかった

移行理由

  • 今回のアプリの場合パフォーマンス的にはSSRでもCSRでもあまり変化がなかったが、以下の理由からSSRへ移行した
    • できるだけNext.jsの思想に従いたい
    • コードの処理が追いやすく何をしているかわかりやすい
      • Hooksがあると処理がジャンプして読みにくい
  • 地図表示やフォームなどユーザーの操作があるコンポーネントはクライアントコンポーネントのままだが、それ以外のサーバーコンポーネントに置き換えれる部分はサーバーコンポーネントに置き換えた

5. 地図表示の機能追加

  • 検索フォーム、店舗のカードリストを地図内に表示
    • 時間がなかったため最低限動くことを目標に実装
  • 最終的に時間が足りず、UIが見にくいままだったり、バグが修正できなかった

問題点１

  • 挙動
    • 検索を実行するたびに地図全体が消えローディング状態が表示された
    • zoomレベルやパンの位置がリセットされた
  • 原因
    • loading状態によって条件付きレンダリングさせてしまっていたため、検索の度にMapコンポーネントが再マウントされてしまっていた
      {loading ? <Loading /> : <RestaurantMap />}

問題点２

  • 店舗のカードリストが大きすぎて地図が見えない
  • マーカー地点に表示されるInfoWindowと被ってしまっていた

6. 提出後

  • Mapコンポーネントの再マウントを修正