
コロナマップの開発者が教える React + Express で地図サービス作り (Typescript)
donghunee
¥4,350
初級 / MongoDB, Express, React, Node.js, TypeScript
5.0
(4)
MERNスタック(feat. TypeScript)を活用した地図サービスを一から作り上げる講座です。APIの公式ドキュメントを見ながら、一歩ずつ着実に作っていきましょう。
初級
MongoDB, Express, React
受講生 337名
難易度 中級以上
受講期間 無制限
学習した受講者のレビュー
5.0
이호진
以前の講義と同様にわかりやすく説明してくれる講義でした~! 字幕があり、従うのが楽です。
5.0
유경식
ネイバー、カカオマップを使いやすく教えてくれて、学習に多くのお役に立ちました。サービスを作成するだけに、Javascript、jQuery、ajax、DBなどの基本概念は必要です。
5.0
로빈(Robin)
Maps APIを理解し活用するのに非常に役立ちました。
NAVER地図APIを通じたウェブベースの地図サービス構築
基本的な地図サービスに必要なマーカー、情報ウィンドウの生成
カカオAPIを通じた座標アップロードページの構築
MongoDBとmongooseを連携させた地図サービスの構築
地図サービス最適化のためのクラスタリング機能
行政区域(道)の可視化およびイベントの追加
コロナマップの開発者と一緒に、地図サービスを攻略しよう 🧭
「地図サービスを作りたいのですが、どこから始めればいいのか分かりません。」
「場所に関する情報をDBに保存したいのですが、どうすればいいでしょうか?」
「地図上のデータが多くなってきたので最適化が必要なのですが、どうすればいいでしょうか?」
こんにちは、開発者のイ・ドンフンです。
私は1400万人が利用したコロナマップ、そしてマスクマップを企画・開発しました。
サービスを運営しながら最も多く受けた質問の一つが、
「コロナマップのようなサービスを作ってみたいのですが、どこからどう始めればいいか分かりません」でした。
そこで講義の制作を考えるようになり、昨年、地図サービス初心者のための講義を提供しました。
多くの方々の応援と関心のおかげで、初めての講義であるにもかかわらず、多くの良いフィードバックをいただきました。
講義に対するフィードバックの中で、より多様な機能を学びたいという意見が多く、新しい講義を計画することになり、本講義を制作いたしました。
Inflearn <コロナマップ開発者と一緒に作る地図サービス> 講義レビュー
今回の講義では、MongoDB、Mongoose、アップロード機能、マーカークラスター、行政区域の可視化など、より深まった内容を追加しており、コロナマップを現在まで運営しながら得た地図サービス制作のノウハウを盛り込みました。コロナマップで使用した機能、最適化の方法、ライブラリの活用方法などを、できるだけ分かりやすく講義に反映させました。
皆様の地図サービスの実力向上に、大いに役立つことを願っています。
ありがとうございます:)
現在1000万ダウンロードのアプリ「Zenly(ゼンリー)- 親友同士で」をご存知ですか?
いわゆるZ世代が頻繁に利用するサービスで、地図上に友達の現在地、バッテリー残量、移動速度などを表示して共有し合うサービスです。これにより、Zenlyは新しいコミュニケーションスタイルとして急浮上し、人気を集めています。今日のZ世代は、自分の現在地や移動経路を他人と共有することに慣れていると言えるでしょう。
これは現在のトレンドとして定착し、継続しています。
そのため、位置情報と移動経路を視覚化する地図サービスの重要性も大きく高まることが予想されます。
位置情報を視覚化するのに最適なUIは、まさに地図だからです。
現在は新型コロナウイルス(COVID-19)の影響で外出が制限されていますが、もし新型コロナを克服する時期が来れば、必然的にオフライン活動への需要も増加し、関連事業も成長すると考えています。
このようなオフライン活動をサポートするのが、まさに場所や座標を一目で可視化できる地図UIです。
コロナマップも地図UIを採用し、1400万人を超えるユーザーに多大な助けを与えました。このように地図サービスは多様なサービスと結合が可能であり、爆発的な潜在力を持っています。
他の方々と差別化された自分だけの強みを育てたい方に、この講義をおすすめします。
Express / Naver map API / Kakao map API
Q. 授業内容はどの程度のレベルまで扱いますか?
本講義は、地図サービスを作るための基礎的な内容から、より高度な内容まで幅広いスペクトラムを提供する予定です。
そのため、初級〜中級程度の難易度となっています。
Q. ネイバーAPIとカカオAPIの両方を使った理由はありますか?
それぞれの長所があるため、それを最大限に活用したいからです。
ネイバー地図APIは付加機能や最適化が優れていると考えており、カカオAPIの場合はキーワード検索機能の性能が非常に良いため、両方を採用して二つの長所を最大化しようとしています。
Q. 非専門家でも受講できますか?
もちろん可能です。ただ、地図サービスの特性上、JavaScriptを多用するため、基礎的な知識が求められる場合があります。そのため、関連知識が不足している場合は、本講義で提供するロードマップを通じてHTML、CSS、JSに関する基礎知識を習得してから受講することをお勧めします。
Q. 前回の講義との違いは何ですか?
以前の講義 'コロナマップ開発者と一緒に作る地図サービス制作'の場合は、地図サービス制作入門のための講義でした~!! 単純に地図を表示したり、マーカーを表示したりするなどの基本的な機能だけを学びたい場合は、以前の講義を受講することをお勧めします。
本講義は、サーバー通信、MongoDBとMongooseを通じたデータハンドリング、マーカークラスター、Ajax、データレイヤー表示などのように、初級から中級までの内容を盛り込んでいます。そのため、より多くの機能を学習したい方に強くお勧めします。
学習対象は
誰でしょう?
コロナマップのような地図サービスを作ってみたい方へ
地図関連のAPIを使いたいけれど、どうすればいいか分からない方へ
DBと連動した地図サービスを作りたい方へ
地図サービスの様々な機能を学んでみたい方へ
前提知識、
必要でしょうか?
HTML
CSS
Javascript
1,352
受講生
119
受講レビュー
165
回答
4.8
講座評価
3
講座
こんにちは、開発者のイ・ドンフンです。
4,400万回以上の閲覧数を記録した「コロナマップ」を最初に企画・開発し、その後も「マスクマップ」や「コロナミ」を通じて、多くのユーザーの不便を解消するサービスを運営しています。
現在は小さなスタートアップを創業し、CTOとして精力的に開発に取り組んでいます。
ありがとうございます。
全体
33件 ∙ (3時間 14分)
1. 講座およびプロジェクト紹介
01:41
6. Express サーバー起動
05:36
8. 地図サービスへのCSS適用
05:22
9. ナビゲーションバーの作り方
06:29
10. アップロードページを作る
07:35
全体
24件
4.5
24件の受講レビュー
受講レビュー 2
∙
平均評価 5.0
受講レビュー 2
∙
平均評価 5.0
5
以前の講義と同様にわかりやすく説明してくれる講義でした~! 字幕があり、従うのが楽です。
ありがとうホジン:) 今後より良いコンテンツでお返しさせていただきます~!
受講レビュー 3
∙
平均評価 5.0
受講レビュー 3
∙
平均評価 3.7
2
率直な後期執筆が恐れるほどに…追いつく終わる講義… ㅠㅠ。他の受講者の選択のためにこの後期を残す。本当に.. お金と時間がもったいない.. 結局だからこそ、みんな聞くしかない。 (講師様、むしろ価格を下げてください。無料で切り替えていただきました。他の指導関連の講義を比較してみると…私がひどいとは思えません。 https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%ED%8F%B4%EB%A6%AC%EC%9B%80- %EC%A7%80%EB%8F%84%EC%84%9C%EB%B9%84%EC%8A%A4#curriculum)
受講レビュー 22
∙
平均評価 4.5
2
講義のコンセプトは本当によかったです〜 Map APIに関する詳細な講義内容がほとんどないので〜 コードに従うほどの講義になったようです。 不足している部分は個人的にMap公式文書に従います ある程度自分で補うことができる部分でしたが〜 公式文書にもJqueryが含まれていて… このレッスンに書かれたコードを完全に理解して使用するには ネイバー、カカオが提供するMAP API 自分で時間を投資して勉強しなければフォローできないようです。 そしてコロナマップだから〜 私はコロナ関連のDATAを地図に表示する講義になると思います わかりました。 単に地図を検索し、マーカーを作成して地図に表示する 基本的なMAP講義でした。 頑張ってみました〜 タイトルが^^コロナマップ開発者と一緒にする~~これでしたね。 コロナマップサービスの作成ではありません〜
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
新規会員登録で25%OFF
¥5,713
25%
¥7,613