DECK.GLを使ってGoogleMapタイムラインをビジュアライズしてみよう！#2

前回に引き続き、DECK.GLを使ってGoogleMapのタイムラインをビジュアル化してみよう！の第２弾の記事です。

前回はPCにReactとDECK.GLの環境構築まで終わりました。
今回は実際にコーディングに入っていきます！

目次

本記事は全５回に渡り説明していきます。

1. ReactとDECK.GLの環境構築
2. 基本的なReactのコードをブラウザで確認 ←今回はコレ
3. DECK.GLを使った簡単なデータの表示
4. マップコンポーネントの表示
5. GoogleMapタイムラインデータ表示

不要なファイルを削除しよう！

前回、create-react-app コマンドを使ってReactの環境を作成しましたが、まずはシンプルに作りたいので不要なファイルを削除したいと思います。

これがデフォルトの状態。
なんかいっぱいファイルがありますね。

src ディレクトリの中からindex.jsを残してそれ以外は削除しちゃいましょう。
こんな感じ

index.jsファイル

初期のindex.jsはこんな感じだと思います。

index.js (デフォルト)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ここにも不要な記述がいっぱいあるので削除しちゃいましょう。
削除後のindex.jsは下記のような感じ。

index.js (修正後)

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.jsx";

ReactDOM.render(<App />, document.getElementById("root"));

これからApp.jsxにコードを書いていきます。
※拡張子は .jsでもいいのですが、.jsxにするとvscodeにReactのアイコンが表示されて気分が上がるので、私はいつもこっちで書いてますw
こんな感じ

App.jsxに基本的なコードを書いていこう！

それでは、ようやくコーディングに入ります！
まずは、index.jsと同じ階層にApp.jsxを作成しましょう。

できたら、下記のコードをApp.jsx に書きます。（まだDECK.GLは全く関係ないです ）
まずは基本的なReactのコードを書いて動くのを確認してみましょう！

App.jsx

import React from "react";

export default class App extends React.Component {
  render() {
    return <div>Hello, DECK.GL!!</div>;
  }
}

動作確認はyarn startのコマンドを実行するだけでOK！
create-react-appで作成したプロジェクトは、babelやwebpack、ESLintの設定が済んでおり、このコマンドを実行だけでサーバを起動しhttp://localhost:3000でアクセスできるようになります。

ターミナル

ブラウザ

動いたー！

まとめ

今回もまだDECK.GLに触れることができませんでしたが、次回こそは本題に入れるといいな・・・！