3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Reactでマップを作りたいと思った時の備忘録

Posted at

はじめに

今、Reactを使ってMapアプリを作ろうとしています。
どうやら、ReactにはUberが作っているReact-map-glというライブラリがあるとのことなので、それを使っています。

こちらがReact-map-glです
公式ドキュメント

この記事は、ライブラリを使ってMapのサンプルを開くところまでを備忘録的に書き込んだメモです。
基本的に、いろんな記事をそのままなぞっていったらできたので、新規性ゼロです。

流れ

今回の大まかな流れはこちらの記事通りに進めました。
[React.js]REACT-MAP-GL入門(リンク)

手順

「Reactてどんな物か」を掴む

まずは、Reactがどんな物かの感覚を掴んで行きます。

これは、公式ドキュメントがわかりやすかったです。
公式ドキュメント(リンク)

Webpackの環境を構築する

JSのモジュールハンドラであるWebpackを使っていくそうです。
環境構築はこちらを元に行いました。
Reactとwebpack2での環境構築

この時、「.babelrc」ってファイルの意味が分からなかったのでこちらで学びました。
Babelの基本的な使い方(リンク)

Mapboxのアカウントを作り、トークンを取得する

ゼンリンが作っているMapboxのトークンが必要なので、準備します。
Mapboxのサイト(リンク)

記事の手順をもとにクローンしていく。

最後にクローンしていきます。
↓の記事の後半の手順の通り進めたらできました!
[React.js]REACT-MAP-GL入門(リンク)

結果を確認

結果はこんな感じ
めちゃ綺麗!!!!

スクリーンショット 2020-01-09 20.14.37.png

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?