inflearn logo
知識共有
inflearn logo

コロナマップの開発者が教える React + Express で地図サービス作り (Typescript)

MERNスタック(feat. TypeScript)を活用した地図サービスを一から作り上げる講座です。APIの公式ドキュメントを見ながら、一歩ずつ着実に作っていきましょう。

難易度 初級

受講期間 無制限

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の活用

  • カカオマップAPIの使用方法

  • ネイバーマップAPIの使用方法

4,400万PVのコロナマップ開発者と一緒に
地図サービス開発に挑戦しましょう 💻

<출처: KTV>
<출처: EBS>

地図サービス開発、MERNスタックと共に 🗺️

こんにちは、開発者のイ・ドンフンです。
私は今回、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を活用した位置情報検索機能

位置情報アップロード機能

  • 公式ドキュメントを活用して、NAVER、カカオマップAPIをどのように使用するのかを知ることができます。
  • React, Express, MongoDB, TypeScriptを活用してプロジェクトを作成する方法を理解できます。
  • プロジェクトを作成する際、フロントエンド、バックエンド、DBの役割を理解し、構築することができます。

こんなことを学びます 📚

#0.
講義紹介および
初期環境構築

本講義とこれから作成するプロジェクトの紹介、および講義を進めるための初期環境構築について説明しています。

#1.
Frontend.
ナビゲーションバーの作成

プロジェクトの進行に必要なナビゲーションバーを作成する講義です。ButtonやInputをはじめとする基本コンポーネントを先に作成し、ナビゲーションバーを作るという流れで進められます。

#2.
Frontend.
NAVERマップを表示する

地図サービスの核心である地図APIを設定し、適用する講義を収録しました。本講義ではNaver地図APIを使用しており、アプリケーションの作成およびAPIキーの発行、そしてReactでNaver地図APIを表示する方法を説明しています。また、公式ドキュメントを参考にして、マップクリックイベントを追加する方法を学びます。

#3.
Frontend. Jotai

グローバル状態管理ライブラリであるJotaiを紹介し、活用する方法について扱う講義です。

#4.
Frontend.
マーカーを作成する

地図サービスでデータを表示する方法の一つであるマーカーについて説明するセクションです。複数のマーカーを生成して地図上に表示し、クリックイベントを追加する方法を説明する講義です。マーカーをクリックした際にインフォウィンドウを表示・非表示にする機能を実装し、地図にもクリックイベントを追加する方法を説明します。

#5.
Frontend.
情報ウィンドウの作成

地図サービスで最も多く活用され、基本となる現在地を取得し、それを地図上にマーカーで表示する方法について説明するセクションです。

#6.
Frontend.
SearchBoard
検索バーの作成

検索結果を表示するためのSearchBoardを作成し、hookを活用して検索窓を作る講義です。カカオが提供するkeyword search apiを活用して、ユーザーから目的地を入力してもらい、地図上に表示する機能を実装します。該当する目的地の緯度と経度を結果値として受け取った後、それを処理する方法について学ぶことができ、地図上に1つのマーカーだけを表示させるエラーハンドリングについても扱っています。

#7.
Database. MongoDB

NoSQL DatabaseであるMongoDBをインストールし、設定する講義です。docker-composeを活用してローカル環境でDBサーバーを実行し、MongoDBのGUIツールであるCompassを接続します。

#8.
Backend. Express

Expressを活用して位置データの保存、全位置データの照会、検索結果の照会APIを作成する講義です。以前に設定したMongoDBにmongooseを活用してデータを管理します。

#9.
Frontend )
React-Query

React Queryを活用して、位置データおよび検索結果の照会、位置データ生成API通信を行う方法について扱う講義です。


予想質問 Q&A 💬

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

こんにちは
donghuneeです。

1,351

受講生

119

受講レビュー

165

回答

4.8

講座評価

3

講座

こんにちは、開発者のイ・ドンフンです。

4,400万回以上の閲覧数を記録した「コロナマップ」を最初に企画・開発し、その後も「マスクマップ」や「コロナミ」を通じて、多くのユーザーの不便を解消するサービスを運営しています。

現在は小さなスタートアップを創業し、CTOとして精力的に開発に取り組んでいます。

ありがとうございます。

もっと見る

カリキュラム

全体

45件 ∙ (4時間 24分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

4件

5.0

4件の受講レビュー

  • songhajun6485378님의 프로필 이미지
    songhajun6485378

    受講レビュー 6

    平均評価 4.7

    5

    100% 受講後に作成

    真…あいまいですね。苦労しました。

    • vsakurav07님의 프로필 이미지
      vsakurav07

      受講レビュー 66

      平均評価 5.0

      5

      100% 受講後に作成

      地図apiは難しい感じで試してみませんでしたが、楽しく受講しました

      • kafmjy5012님의 프로필 이미지
        kafmjy5012

        受講レビュー 3

        平均評価 5.0

        5

        100% 受講後に作成

        本当に助けがたくさんありました。

        • ksh9909138319님의 프로필 이미지
          ksh9909138319

          受講レビュー 3

          平均評価 5.0

          5

          100% 受講後に作成

          タイプスクリプトの文法について学び、リアクトと一緒に使ってみたかったのですが、ちょうど更新された暖かい最新の講義があって聞くようになりました。従来は複数のapiを使用していましたが、ほとんど腹が立つようにしました。しかし、このレッスンでは、apiの公式文書をどのように使用するべきかを知り、今後は私が必要な機能を見つけて使用できるような自信を得ました。そして、タイプスクリプトについてのことも難しい内容ではなく、説明も上手くしてくれて初めて始める人たちも簡単についていけるようですね。良い講義ありがとうございます:)

          似ている講座

          同じ分野の他の講座を見てみましょう!

          新規会員登録で25%OFF

          ¥3,194

          25%

          ¥4,254