Next.js + GoogleMapsApi で Web アプリケーションを作ってみよう！ #1

はじめに

こんにちは、京セラコミュニケーションシステム 福留（@kccs_kazuo_fukudome）です。

今回の記事は、社内研修や地元（高知県）に帰省したり色々あったのがきっかけです。
私は常々、農業関係の事を調べてみたいなという思いがありました。とくに、耕作地、耕作放棄地の把握、作付面積の把握が簡単にできて、その情報が利用できないかな？と考えています。
一方で、ここ数年、Google Maps 等の地図アプリケーションを利用した、 地図情報システムやゲーム等が普及するようになりました。私の会社も、Sigfox 対応の IoT デバイスの位置を管理する「IoT Tracker」というサービスを展開しています。
そうした背景から、Google Maps API を利用した Web アプリケーションを作ろう！！そして、どうせやるなら、TypeScript ベースのフロントエンドプログラムの中でも Next.js を利用してみようと思い、記事を書き始めてみます。
とはいえ、自己紹介でフロントエンドプログラムもやっていたと書いていますが、TypeScript ベースのフロントエンドプログラムの開発経験は、ほぼ皆無です。理想のアプリケーションにどこまで近づけるか解りません。ですが、ゆくゆくは得た知識が DX にも応用できるのではと思い、やってみることにします！
第 1 回目は、Web アプリケーションのメイン画面を作るところまでやってみました。

本記事は 2023 年 3 月ごろに作成しております。
Google Maps API を利用するには、Google アカウントの登録、Google Cloud での設定が必要です。

この記事の対象者

• Google Maps を使った Web アプリケーションを作ってみたい人
• 農業の IT を考えている人、考えてみたい人

今回利用したパッケージ

• Next.js
• Tailwind CSS
• react-google-maps/api

今回は、Next.js 以外に、Tailwind CSS、react-google-maps/api を利用しました。冒頭でも書きましたが、最近のフロントエンドプログラミングの開発経験がありません。調査不足かもしれませんが、Google Maps API が利用できる、Next.js 用のパッケージを見つけることができず、 React 用のパッケージを利用することにしました。そして、 React 用のパッケージの中でも、ダウンロード数、更新履歴、使える機能などをみて、react-google-maps/api のパッケージを選びました。

各モジュール のセットアップ

まず、Next.js のセットアップを実行します。

Next.js のセットアップには、Node.js のセットアップが前提条件となります。セットアップ方法については、いくつか HP がありますので、そちらを参考にしてください。

npx create-next-app sample-app --use-npm

続いて、TailWind CSS のセットアップを実行します。
セットアップの詳細は、次の公式ページのドキュメントを参考にしてください。
https://tailwindcss.com/docs/guides/nextjs

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

最後に、react-google-maps/api のセットアップを実行します。

npm i -S @react-google-maps/api

Google Maps API キーの取得

react-google-maps/api で Google Map を表示するためには、Google Cloud から、Google Maps API キーを取得する必要があります。API キーの取得方法については、いくつか HP がありますので、そちらを参考にしてください。

Google Maps 表示用のコンポーネント作成

Next.js（React）では、コンポーネントという部品を定義し、それらを集めて表示する画面を作ります。
そのため、今回は次のような Google Maps を表示するコンポーネントを作成し、表示する画面に組み込みました。
実際に作成したコードは、"containerStyle"、 "center"、"zoom" の設定値（変数）も Props でコンポーネント外で設定できるようにしましたが、ここでは解りやすいように、コンポーネント内に定義したコードを記載します。

また、Google Maps API キーは、Next.js の環境変数に定義し、取得するようにしました。
Next.js の環境変数の設定方法についても、いくつか HP がありますので、そちらを参考にしてください。

Map.jsx

import React from "react";
import { GoogleMap, LoadScript } from "@react-google-maps/api";

const containerStyle = {
  width: "100%",
  height: "86vh",
};

const center = {
  lat: 34.7293466708865,
  lng: 135.49939605607292,
};

const zoom = 13;

const Map = () => {
  return (
    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}>
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={zoom}
      ></GoogleMap>
    </LoadScript>
  );
};

export default Map;

Google Maps コンポーネントを画面に組み込む

作成した Google Maps コンポーネントを表示画面（index.jsx）に次のように組み込みました。
別途、ヘッダーとフッターを表示する Layout コンポーネントを作成しています。コンポーネントを整理することで、3 行で 1 画面ができる Next.js （React） のすごさを実感しました。

indx.jsx

import Layout from "../components/Layout";
import Map from "../components/Map";

export default function Home() {
  return (
    <Layout title="Google Maps App">
      <Map />
    </Layout>
  );
}

Cloud Run へデプロイ

作成したアプリケーションを Cloud Run へデプロイします。
次のような Docker ファイルで、作成した Web アプリケーションのコンテナイメージを作成し、Cloud Run へデプロイしました。
Cloud Run へのデプロイ方法にもついても、いくつか HP がありますので、そちらを参考にしてください。

ARG NODE_TAG=16-alpine3.13

FROM node:${NODE_TAG}
WORKDIR /app

copy next-app/package*.json ./
RUN npm install

COPY next-app/next.config.js ./
COPY next-app/env.local ./.env.local
COPY next-app/.next ./.next
COPY next-app/public ./public
CMD ["npm", "start"]

実際の画面

アプリエンジニアのため、デザインセンスはありませんが、少しのコードで簡単に画面を作成することができました。Next.js を含め、フロントエンドの技術を習得すれば、もっといい感じの画面が作れると思うので、引き続き勉強していければと思います。

まとめ

今回は、Web アプリケーションのメイン画面を作るところまでやってみました。
この画面をベースに"メニュー 1"や"メニュー 2"の部分へ機能を追加し、それを記事にできればと思っています。