はじめに

GoogleMapを使った何らかのWebサービスできないかな。と考えたので、GoogleMapPlatformを触ってみたくなった。

Webサービス作る方法として、React以外よく知らないので、Reactで開発できればなぁと思っている。

本題

リポジトリ作成

いつも通り、GitLabでリポジトリ作成してから、
「Reactの雛形作成」というissueを立てて作業開始。

記録を残すためにmasterブランチに直接プッシュせずに、MRを使ってマージしていく開発を遵守している。

だいたい個人開発って長く細く続けるので、記録を残していかないと、あの時何したかとか、あの時何でそうしたのかとか辿れないので。

Reactの雛形作成

npx create-react-app wanderlust --template typescript

を叩いてtypescriptのReact雛形を作成する。

.gitignoreファイルがなかったので
どこからか拾ってきたもの+αをとりあえず当てておく

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.idea
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.firebase

npm-debug.log*
yarn-debug.log*
yarn-error.log*
firebase-debug.log*
firestore-debug.log*
pubsub-debug.log*
ui-debug.log*

自動作成されたREADME.mdを編集して、諸々メモ書きしておく。
これも、作業と同時に変更しないと、よくわかんなくなるので。

READMEのテンプレはググると色々出てくるので、そちらを参考に。

書いた方が良いと思うのは、入れたライブラリの情報とか
もし後悔する予定ならライセンスとかかな

Google Map Platform

公式を参考に実施する。
https://developers.google.com/maps/gmp-get-started?hl=ja

をみながら

請求先アカウントを作成する
Google Cloud Platform（GCP）にプロジェクトを作成
請求先アカウントを作成したGCPプロジェクトにリンクする
Maps JavaScriptAPIを有効にする
APIキーを取得する

を実施。

その後、コードは、
https://developers.google.com/maps/documentation/javascript/overview?hl=ja#all
を参考に書いていく。

一旦、動作確認したいので
public/index.htmlに直接書く。

  <head>
    ...
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      let map;

      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
      }
    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>

そのままだとReactのアイコンがグルグル画面出てきてしまうので、
src/index.tsxのAppをコメントアウトする。

ReactDOM.render(
  <React.StrictMode>
    {/*<App />*/}
  </React.StrictMode>,
  document.getElementById('root')
);

これで表示されるはず。

ちなみに、APIキーを忘れると表示されない。

React用に書き換えていく

流石にこのままだとReactって何。となるので、書き換えていく。

公式より
https://developers.google.com/maps/documentation/javascript/using-typescript
yarn add -D @types/google.maps でライブラリをインストールする。

Google Map PlatformのAPI読み込みのために便利なライブラリを見つけたので利用する。
https://www.npmjs.com/package/@googlemaps/js-api-loader
yarn add @googlemaps/js-api-loader

このライブラリを使ってReactコンポーネントを作成する。

import React, { useEffect } from 'react'
import { Loader } from '@googlemaps/js-api-loader'

const HelloMap: React.FC = () => {
  useEffect(() => {
    const loader = new Loader({
      apiKey: 'apiKey',
      version: 'weekly',
      libraries: []
    })
    const mapOptions = {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    }

    loader
      .load()
      .then(() => {
        const ele = document.getElementById("map")
        if (ele) {
          new google.maps.Map(ele, mapOptions)
        }
      })
      .catch(e => {
        console.error(e)
      })

  }, [])
  return (
    <div id="map" style={{ height: '100vh' }} />
  )
}

height: '100vh'にしているのは、ちょっとサボり。
もしheight: '100%'にしたいんだ！って人がいたら、
src/index.cssに

#root,
.App {
  height: 100%;
}

を書き込もう。
何でって人は、height100%の計算方法についてググって。

App.tsx側で先ほど作ったHelloMapコンポーネントを呼び出すように書き換える。

import React from 'react'
import './App.css'
import HelloMap from './components/HelloMap'

function App() {
  return (
    <div className="App">
      <HelloMap />
    </div>
  )
}

export default App

この後、とりあえず表示するために変更した
public/index.htmlとsrc/index.tsxを元に戻して、動作確認。

変わらずGoogleMapが表示されることを確認する。

心残り

Redux導入して、API読み込んだかフラグを保持するようにする
eslint導入
JS in CSS導入
etc...

とか実施しておきたい。。

まとめ

一番面倒なのは、Googleのアカウントを作って、APIキーを取得するところだと思う。
そうは言っても、ドキュメント充実しているので、読みながら進めればなんとかなる。

実作業時間は2時間あればハローワールドできますよ。

GoogleMapPlatformのハローワールド with React

はじめに

本題

リポジトリ作成

Reactの雛形作成

Google Map Platform

React用に書き換えていく

心残り

まとめ