Ryota Fujisawa

【Webアプリ概要】 お気に入りの場所や行きたい場所を登録できるMapサイトです。 視覚的に位置関係がわかるので、効率よく観光することができます。また、外食の際には、気になっていたお店に忘れずに行けます。 【Webアプリの作成背景】 道中やSNSで見つけた気になるお店に忘れずに行きたかったことと効率よく観光したいと思ったのがきっかけです。 気になるお店にいいねやスクリーンショットはするがそれを探し出すのが手間であることと旅行で行くお店をリストアップすることしかできないことが課題であると考えました。 そして、これら2つのことを解決できるようなものを作りたいと思い作成に着手しました。 【大変だったこと】 MapboxやTypeScript、Next.js、MaterialUIなどのほとんど触れたことのない技術を導入することです。 実際の導入フローとしましては、Googleで「Next.js MaterialUI TypeScript」のように検索し、サイトの記事全体を見渡して自分が理解できる内容かどうかを判断していました。まずは最低限の機能を実装してみることで、とりあえず動く状態を作りました。 例えば、ボタン1つだけ画面上に表示してみるなど。 それに成功すれば、公式ドキュメントを参考にしつつコードを追加・変更したりしてどういう動きをするかを実験して拡張していきました。その中で、よくわからないエラーが出たときは、GitHubで他人のコードをみて関数の使い方などを真似していきました。 新しい技術の導入には基本的にこれらのサイトに多く助けられたと記憶しています。 StackOverflow(https://stackoverflow.com/) Medium(https://medium.com/) LogRocket(https://logrocket.com/) 【工夫したこと】 地図上にマーカーピン画像を表示し、尚且、密集して見えづらくならないようにクラスター化できるようにしたことです。 react-map-glというパッケージを使うと、データに基づいて地図にマーカーピンを表示し、クラスター化してくれるのでそれだけだと簡単だったのですが、どうしても独自のマーカーピンを表示したかったのです。これが冒険の始まりでした。色々いじっていると、決められた選択肢の中から表示したいマーカーを選べるところにたどり着きました。 しかし独自の画像は表示できず、そこから色々模索しました。そもそも使うパッケージを変更してみようと、deck.glやsupercluster、誰かがReact用にパッケージ化したuse-supercluster　色々試しましたができませんでした。そこで再度react-map-glに戻し、GitHubで参考になりそうなコードを探し出し、ようやく独自のマーカーピンを表示することができました。 【使い方】 住所を検索して、その場所の名称やメモを入力し、登録するだけです。 【機能一覧】 ユーザー登録・ログイン・ログアウト パスワードの再設定 Map機能 住所検索 現在地取得 場所の追加・読み込み・更新・削除 密集した場所のクラスター化 【使用技術】 TypeScript @4.8.3 Node.js @16.17.0 Express @4.18.1 MongoDB @5.0.14 React @18.2.0 Next.js @12.3.0 Material-UI @5.10.4 Zustand @4.1.1 Mapbox Render Vercel 【制作物URL】 https://mymap-app.com/ 【テストユーザーログイン】 メールアドレス：　test@test.com パスワード：　test1234