峰江 竜輔

藤澤 諒太

Webアプリ開発

梅澤 愛優香

永田 大一

下 晴己

中村仁

Reactの基礎学習後、MERNスタックを学習

Node.js基礎学習

Webについて学ぶ

コンピュータとモバイルアプリ開発学習

実績

【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

藤澤諒太

藤澤諒太

とにかくやってみる

個人の実績

個人の実績

個人の実績

この先やってみたいこと

株式会社Vitalize1年間

エンジニア現在

株式会社Liac3ヶ月

システム開発（インターン）

プログラミング学習9ヶ月

個人

株式会社ウィルオブ・ワーク1年間

楽天モバイル株式会社

関西学院大学4年間

商学部

実績

言語

藤澤さんと関連する人々

藤澤 諒太

藤澤 諒太

とにかくやってみる

個人の実績

個人の実績

個人の実績

この先やってみたいこと

株式会社Vitalize1年間

エンジニア現在

株式会社Liac3ヶ月

システム開発（インターン）

プログラミング学習9ヶ月

個人

株式会社ウィルオブ・ワーク1年間

楽天モバイル株式会社

関西学院大学4年間

商学部

実績

言語

藤澤さんと関連する人々

藤澤諒太

藤澤諒太