コロナマップ開発者と一緒に作る地図サービス 1
donghunee
¥4,254
初級 / Node.js, Web Application, Express, VSCode
4.8
(91)
コロナマップの開発者が教える地図サービス作り講座です。
初級
Node.js, Web Application, Express
MERNスタック(feat. TypeScript)を活用した地図サービスを一から作り上げる講座です。APIの公式ドキュメントを見ながら、一歩ずつ着実に作っていきましょう。
受講生 114名
難易度 初級
受講期間 無制限

学習した受講者のレビュー
5.0
ksh990913
タイプスクリプトの文法について学び、リアクトと一緒に使ってみたかったのですが、ちょうど更新された暖かい最新の講義があって聞くようになりました。従来は複数のapiを使用していましたが、ほとんど腹が立つようにしました。しかし、このレッスンでは、apiの公式文書をどのように使用するべきかを知り、今後は私が必要な機能を見つけて使用できるような自信を得ました。そして、タイプスクリプトについてのことも難しい内容ではなく、説明も上手くしてくれて初めて始める人たちも簡単についていけるようですね。良い講義ありがとうございます:)
5.0
ACACIA
真…あいまいですね。苦労しました。
5.0
baby4
地図apiは難しい感じで試してみませんでしたが、楽しく受講しました
React + TypeScript 開発
Express + TypeScript 開発
MongoDB + Mongooseの活用
カカオマップAPIの使用方法
ネイバーマップAPIの使用方法
4,400万PVのコロナマップ開発者と一緒に
地図サービス開発に挑戦しましょう 💻
こんにちは、開発者のイ・ドンフンです。
私は今回、1,600万人が利用し、4,400万PVを超えた「コロナマップ」と、マスクのリアルタイム在庫状況を表示する「マスクマップ」を企画・開発しました。現在はスタートアップでGIS関連のプロダクトを制作しています。
地図サービスは位置情報の重要性が高まるにつれ、今後必須となる技術スタックの一つだと考えています。しかし、初めて地図サービスを開発しようとすると、どうしても参入障壁が高いのが事実です。今回の講義を通じて、受講生の皆さんがより簡単に地図サービスを制作し、さらには地図サービスの魅力を感じていただければ幸いです。. However, it is true that the barrier to entry is quite high when first developing a map service. Through this course, I hope students can create map services more easily and, furthermore, experience the true appeal of map services.
本講義は、React、Express、MongoDBなどを活用して、初期環境の設定から地図サービスの実装までを直接お教えする講義です。サービスを自ら作りながら、フロントエンドとバックエンド、つまりフルスタックの制作過程を経験することができます。
ネイバーマップ、カカオマップAPIの場合、単にコードを書くのではなく、公式ドキュメントを活用して「なぜこのように使うのか」を共に学んでいく講義です。受講生の皆さんが公式ドキュメントともっと親しくなれるように導きます。
本講義は、実務で使用する地図関連の知識を盛り込みました。もちろん、初心者の方でも理解しやすいように講義の難易度を設定し、すべての講義に字幕を追加しているため、負担なく受講いただけます。受講生の皆様の初期設定の負担を軽減するため、ボイラープレートのソースコードを提供します。
インフロンでは私が制作した地図サービス講座が2つリリースされています。多くの方々の応援と関心のおかげで、地図サービスという限られたテーマであるにもかかわらず、たくさんの良いフィードバックをいただきました。講座に対するフィードバックの中で、実務で使用される技術スタックでサービスを制作したいという意見が多く、今回の講座を制作することになりました。(以下は、以前オープンした「コロナマップ開発者と一緒に作る地図サービス」講座に対する受講レビューです。)
★★★★★
少しずつ時間を作って聞きやすく、字幕があるので音なしでも聞けるというメリットがあります。そして、最初から最後まで一緒に進めながら説明してくださるので、理解してついていくのも簡単でした。
★★★★★
説明が本当にとても素晴らしくて、本当に最高です。他の受講生の方々にアドバイスを差し上げるとすれば、講義を聞いてそのまま完成させた立場として、大文字と小文字の区別さえしっかり行えば、問題なく完成させることができると思います。本当にありがとうございました。
★★★★★
全体的に地図サービスをどのように作り、活用するのかを学べる講義でした。印象深かった点は、Q&Aに対する回答の早さと、細かく見てくださる親切さでした。有益な講義を作ってくださり、心から感謝いたします。
React、Expressで地図サービスを作ってみたい方
プロジェクトを最初から最後まで作ってみたい方
公式ドキュメントを活用してAPIを使用したい方
今回の講義では、React、Express、MongoDB、mongoose、TypeScript、アップロード機能、照会機能、検索機能などを扱っています。講義では、以下のようなプロジェクトを作成する予定です。
データを照会し、マーカーとインフォウィンドウを地図上に表示する機能
カカオキーワード検索APIを活用した位置情報検索機能
位置情報アップロード機能
本講義とこれから作成するプロジェクトの紹介、および講義を進めるための初期環境構築について説明しています。
プロジェクトの進行に必要なナビゲーションバーを作成する講義です。ButtonやInputをはじめとする基本コンポーネントを先に作成し、ナビゲーションバーを作るという流れで進められます。
地図サービスの核心である地図APIを設定し、適用する講義を収録しました。本講義ではNaver地図APIを使用しており、アプリケーションの作成およびAPIキーの発行、そしてReactでNaver地図APIを表示する方法を説明しています。また、公式ドキュメントを参考にして、マップクリックイベントを追加する方法を学びます。
グローバル状態管理ライブラリであるJotaiを紹介し、活用する方法について扱う講義です。
地図サービスでデータを表示する方法の一つであるマーカーについて説明するセクションです。複数のマーカーを生成して地図上に表示し、クリックイベントを追加する方法を説明する講義です。マーカーをクリックした際にインフォウィンドウを表示・非表示にする機能を実装し、地図にもクリックイベントを追加する方法を説明します。
地図サービスで最も多く活用され、基本となる現在地を取得し、それを地図上にマーカーで表示する方法について説明するセクションです。
検索結果を表示するためのSearchBoardを作成し、hookを活用して検索窓を作る講義です。カカオが提供するkeyword search apiを活用して、ユーザーから目的地を入力してもらい、地図上に表示する機能を実装します。該当する目的地の緯度と経度を結果値として受け取った後、それを処理する方法について学ぶことができ、地図上に1つのマーカーだけを表示させるエラーハンドリングについても扱っています。
NoSQL DatabaseであるMongoDBをインストールし、設定する講義です。docker-composeを活用してローカル環境でDBサーバーを実行し、MongoDBのGUIツールであるCompassを接続します。
Expressを活用して位置データの保存、全位置データの照会、検索結果の照会APIを作成する講義です。以前に設定したMongoDBにmongooseを活用してデータを管理します。
React Queryを活用して、位置データおよび検索結果の照会、位置データ生成API通信を行う方法について扱う講義です。
Q. React、Express、MongoDB、Nodeを学ぶと良い点は何ですか?
最大のメリットは、一つの言語でフロントエンドとバックエンドを同時に作れることです。ReactとExpressはNode環境で最も多く使われているライブラリとフレームワークであり、MongoDBはNoSQLデータベースとしてNodeとの相性が良く、mongooseというパッケージを通じて簡単に使用することができます。
Q. 初心者が受講するには、講義の難易度はどのくらいですか?
プロジェクトを最初から最後まで作ってみるため、ゆっくりついてきていただければ、誰もが完璧に作り上げることができる難易度です。ただし、講義の特性上、基礎知識(TypeScript、React hooks、Expressの構造など)については扱わないため、事前に学習しておく必要があります。
Q. NAVERマップ、カカオマップAPIを使用するのに費用は発生しますか?
講義のプロジェクトを作成するのに費用はかかりませんので、ご安心ください。 :) ネイバーマップAPIは月10,000,000件、カカオマップAPIは1日300,000件まで無料で提供されています。 膨大なトラフィックが発生しない限り、無料で利用可能です。
学習対象は
誰でしょう?
Reactで地図サービスを作りたい人
公式ドキュメントの活用方法を学びたい人
前提知識、
必要でしょうか?
Reactの基本文法 (hooks, jsx)
Express 基本構造 (router)
TypeScriptの文法
yarn または npm
1,351
受講生
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件の受講レビュー
受講レビュー 6
∙
平均評価 4.7
受講レビュー 66
∙
平均評価 5.0
受講レビュー 3
∙
平均評価 5.0
受講レビュー 3
∙
平均評価 5.0
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
新規会員登録で25%OFF
¥3,194
25%
¥4,254