コロナマップ開発者と一緒に地図サービスを作る2
donghunee
コロナマップ開発者が知らせるマップサービス制作深化講義です。
중급이상
Node.js, MongoDB, Express
コロナマップ開発者が教えるReact + Expressで地図サービスを作る (Typescript)
MERN stack (feat. TypeScript) を活用して、地図サービスを最初から最後まで作成する講義です。API 公式ドキュメントを見ながら、一つずつ順を追って作成してみましょう。
（5.0）受講レビュー 4件
受講生 112名
難易度 初級
受講期間 無制限
MongoDB
MongoDB
Express
Express
React
React
Node.js
Node.js
TypeScript
TypeScript
MongoDB
MongoDB
Express
Express
React
React
Node.js
Node.js
TypeScript
TypeScript
学習した受講者のレビュー
学習した受講者のレビュー
5.0
5.0
ksh990913
100% 受講後に作成
タイプスクリプトの文法について学び、リアクトと一緒に使ってみたかったのですが、ちょうど更新された暖かい最新の講義があって聞くようになりました。従来は複数のapiを使用していましたが、ほとんど腹が立つようにしました。しかし、このレッスンでは、apiの公式文書をどのように使用するべきかを知り、今後は私が必要な機能を見つけて使用できるような自信を得ました。そして、タイプスクリプトについてのことも難しい内容ではなく、説明も上手くしてくれて初めて始める人たちも簡単についていけるようですね。良い講義ありがとうございます:)
5.0
ACACIA
100% 受講後に作成
真…あいまいですね。苦労しました。
5.0
baby4
100% 受講後に作成
地図apiは難しい感じで試してみませんでしたが、楽しく受講しました
受講後に得られること
React + TypeScript 開発
Express + TypeScript 開発
MongoDB + Mongoose の活用
Kakao Map API の使い方
Naver Map API の使い方
4,400万視聴数のコロナマップ開発者と共に
マップサービスの開発に挑戦してください💻
マップサービス開発、MERNスタックと一緒に🗺️
こんにちは、開発者イ・ドンフンです。
私は今回1,600万人が利用し、4,400万視聴数を超えたコロナマップとマスクリアルタイム在庫現況を示すマスクマップを企画して開発しました。現在はスタートアップでGIS関連プロダクトを製作しています。
地図サービスは、位置情報が重要になるにつれて、将来不可欠な技術スタックの1つだと思います。しかし、初めて地図サービス開発をするには、どうやら進入障壁が高いのが事実です。今回の講義を通じて受講生の方々が少し簡単に指導サービスを制作し、さらに進んで指導サービスの魅力を感じてほしいです。
本講義は、React、Express、MongoDBなどを活用して、直接初期環境設定から地図サービスの実装までお知らせする講義です。サービスを直接作成し、フロントエンドバックエンド、つまりフルスタックの制作プロセスを体験できます。
ネイバーマップ、カカオマップAPIの場合、単にコードを書くのではなく、公式ドキュメントを活用してなぜこのように使用するのかを学んでいく講義です。受講生の皆さんが公式文書と少し親しくなるようにしてくれます。
その講義には、実務で使用する指導関連の知識が含まれています。もちろん、初心者が理解しやすく講義の難易度を設定し、すべての講義に字幕を追加したので、気軽に聞くことができます。受講生分の初期設定負担を軽減するためのボイラープレートソースコードを提供します。
Inflearnには私が制作した地図サービス講義の2つが発売されています。多くの方々の応援と関心のおかげで、指導サービスという限定されたテーマでも良いフィードバックをたくさんいただきました。講義へのフィードバックの中、実務で使われる技術スタックでサービスを制作したいという意見が多く、今回の講義を制作することになりました。 （以下は、以前にオープンしていた「コロナマップ開発者と一緒にマップサービスを作成する」講義の受講評価です。）
★★★★★
少しずつ組んで聞きやすく、字幕があって音なしでも聞けるというメリットがあります。そして最初から最後まで一緒に進んで説明してくださったので理解して追いやすかったです。
★★★★★
説明が本当にとても好きで、本当に最高です。他の受講生の方々にヒントを差し上げれば講義だけを聞いて同じように完成した立場として、大小文字区分だけうまくいけば問題なく完成することができるでしょう。本当にありがとうございます。
★★★★★
全体的に指導サービスをどのように作って活用するかを学べた講義でした。印象深かったのは、Q&Aへの回答速度と細かく見てくださる親切さでした。有益な講義を作ってくれてありがとう。
こんな方におすすめですよ🙆♀️
React、Expressでマップサービスを作ってみたい方
プロジェクトを最初から最後まで作ってみたい方
公式ドキュメントを活用してAPIを使用したい人
講義の特徴✨
今回の講義では、React、Expres、MongoDB、mongoose、TypeScript、アップロード機能、照会機能、検索機能などを取り上げています。講義では以下のプロジェクトを作成する予定です。
データを照会し、マーカーとインフォウィンドウを地図上に表示する機能
カカオキーワード検索APIを利用した位置情報検索機能
位置情報アップロード機能
- 公式ドキュメントを活用して、ネイバー、カカオマップAPIをどのように使用するかを知ることができます。
- React、Express、MongoDB、TypeScriptを活用してプロジェクトを作成する方法を理解できます。
- プロジェクトを作成するとき、フロント、バックエンド、DBの役割を理解して構築できます。
こんなことを学びます📚
#0.
講義の紹介と
初期環境の構築
本講義と今後作るプロジェクトの紹介と講義進行のための初期環境構築を説明しています
#1.
フロントエンド。
ナビゲーションバーの作成
プロジェクトの進行に必要なナビゲーションバーを作成する講義です。 ButtonやInputを含む基本的なコンポーネントを最初に作成し、ナビゲーションバーを作成する方法で進みます。
#2.
フロントエンド。
ネイバーの地図を立てる
マップサービスの中核であるマップapiを設定して適用する講義を盛り込んだ。本講義ではネイバーマップapiを使用しており、application生成およびapi key発行、そしてReactでネイバーマップapiを浮かべる方法について説明しています。また、公式ドキュメントを参照してマップクリックイベントを追加する方法を学びます。
#3.
フロントエンド。 Jotai
グローバルステータスライブラリであるJotaiの紹介と活用方法について説明する講義です。
#4.
フロントエンド。
マーカーを作成する
マップサービスでデータを表示する方法の1つであるマーカーについて説明するセクション。複数のマーカーを作成し、地図上に表示し、クリックイベントを追加する方法を説明するレッスンです。マーカーをクリックしたときにインフォウィンドウを表示して消える機能を作成し、地図にクリックイベントを追加する方法について説明します。
#5.
フロントエンド。
インフォウィンドウを作成する
地図サービスで最も活用され、基本となる現在位置を受け取り、それを地図上にマーカーを通じて表示する方法について説明するセクションです。
#6.
フロントエンド。
SearchBoard
検索ボックスを作成
検索結果を表示するためのSearchBoardを作成し、フックを活用して検索ボックスを作成する講義です。カカオが提供するキーワード検索apiを活用して、ユーザーに目的地を入力して地図上に表示する機能を実装します。その目的地の緯度と経度を決値として受け取った後にこれを処理する方法について学ぶことができ、地図上に一つのマーカーだけ浮かせるエラーハンドリングについても取り上げています。
#7.
データベース。 MongoDB
NoSQL DatabaseであるMongoDBをインストールして設定する講義です。 docker-composeを利用してローカル環境でDBサーバーを実行し、MongoDB GUIツールであるCompassを接続します。
#8.
Backend。 Express
Expressを活用して位置データの保存、完全な位置データの照会、検索結果の照会APIを作成する講義です。以前に設定した MongoDB で mongoose を活用してデータを管理します。
#9.
フロントエンド）
React-Query
React Queryを活用して位置データや検索結果の照会、位置データ生成API通信を行う方法について説明する講義です。
予想される質問 Q&A 💬
Q. React、Express、MongoDB、Nodeを学ぶのに良い点は何ですか？
最大の利点は、1つの言語でフロントエンドとバックエンドを同時に作成できることです。 ReactとExpressはNode環境で最もよく使われるライブラリやフレームワークであり、MongoDBはNoSQLデータベースでNodeとの相性がよく、mongooseというパッケージを通じて簡単に使用できます。
Q. 初心者が聞くことで講義の難易度はどうでしょうか？
プロジェクトを最初から最後まで作ってみるので、ゆっくりついてくるとみんなが完璧に作れる難易度です。ただし、講義の特性上、基本知識（TypeScript、React hooks、Express構造など）については扱いませんので、あらかじめ学習する必要があります。
Q. ネイバーマップ、カカオマップAPIを使用するのに費用がかかりますか？
講義のプロジェクトを作成するには費用がかからないので、心配しないでください。 :)ネイバーマップAPIは月10,000,000件を無料で提供しており、カカオマップAPIは日300,000件を無料で提供しています。多くのトラフィックが発生しない限り、無料で使用できます。
こんな方に
おすすめです
学習対象は
誰でしょう？
React で地図サービスを作成したい人
公式文書の活用方法を知りたい方
前提知識、
必要でしょうか？
React の基本構文 (hooks、jsx)
Express の基本構造 (router)
TypeScript 文法
yarn または npm
1,345
受講生
119
受講レビュー
165
回答
4.8
講座評価
3
講座
こんにちは、開発者のイ・ドンフンです。
4,400万回以上の閲覧数を記録した「コロナマップ」を最初に企画・開発し、その後も「マスクマップ」や「コロナミ」を通じて、多くのユーザーの不便を解消するサービスを運営しています。
現在は小さなスタートアップを創業し、CTOとして精力的に開発に取り組んでいます。
ありがとうございます。
カリキュラム
全体
45件 ∙ (4時間 24分)
講座資料（こうぎしりょう）:
授業資料
1. 講義紹介
01:35
2. プロジェクト紹介
01:14
3. ボイラープレートコードの紹介
06:36
4. React Routerの設定
06:57
5. ナビゲーションバーを分解してみる
01:42
7. 共通コンポーネント - Button 作成
07:38
13. ナビゲーションバーの作成
04:51
14. グローバルCSS設定
03:48
15. ネイバーマップを表示する
11:18
17. マップクリックイベントを追加
03:23
講座掲載日:
最終更新日:
受講レビュー
全体
4件
5.0
4件の受講レビュー
ksh9909138319受講レビュー 3
∙
平均評価 5.0
- songhajun6485378
受講レビュー 6
∙
平均評価 4.7
- vsakurav07
受講レビュー 66
∙
平均評価 5.0
- kafmjy5012
受講レビュー 3
∙
平均評価 5.0
￥4,190
donghuneeの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
開発者のためのJavaScript강의 썸네일](https://cdn.inflearn.com/public/files/courses/337877/cover/01jyvwkxfmyxtq5ny0e5fmwmqp?f=avif&w=420)
![[コードファクトリー] [初級] 8時間で終わるコードファクトリのTypescript完全征服フルコース강의 썸네일](https://cdn.inflearn.com/public/courses/330970/cover/3c24c2b8-9dc1-44ed-af4e-2b58542a6504/330970-eng.png?f=avif&w=420)
![[リニューアル] グルメマップアプリ作成 (React Native & NestJS)강의 썸네일](https://cdn.inflearn.com/public/files/courses/332375/cover/01k3x8ecea6jym1d28qcc6zcds?f=avif&w=420)
![GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]강의 썸네일](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?f=avif&w=420)
