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

[前回](https://qiita.com/koeri3/items/8dc468ad9f910bdf244b)に引き続き、DECK.GLを使ってGoogleMapのタイムラインをビジュアル化してみよう！の第２弾の記事です。

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


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

1. [ReactとDECK.GLの環境構築](https://qiita.com/koeri3/items/8dc468ad9f910bdf244b)
2. 基本的なReactのコードをブラウザで確認   **←今回はコレ**
3. [DECK.GLを使った簡単なデータの表示](https://qiita.com/koeri3/items/c4c92408cf7aa0d54b7c)
4. [マップコンポーネントの表示](https://qiita.com/koeri3/items/b1ff402f356a4821f637)
5. [GoogleMapタイムラインデータ表示](https://qiita.com/koeri3/items/3578f1b9269721f27733)



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

これがデフォルトの状態。
なんかいっぱいファイルがありますね。
![Screen Shot 2019-12-13 at 20.05.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/254d116f-e9ae-cb75-fea7-f5a4db238fbe.png)

`src` ディレクトリの中から`index.js`を残してそれ以外は削除しちゃいましょう。
こんな感じ :point_down_tone2:
![Screen Shot 2019-12-13 at 20.08.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/c74d61d8-35f3-e914-2c4b-24590e856d10.png)


# index.jsファイル
初期の`index.js`はこんな感じだと思います。

```jsx:index.js&nbsp;(デフォルト)
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`は下記のような感じ。

```jsx:index.js&nbsp;(修正後)
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
こんな感じ :point_down_tone2:
![Screen Shot 2019-12-13 at 20.37.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/56a92366-28ae-5bdf-c792-8b46f810e0d0.png)

# App.jsxに基本的なコードを書いていこう！
それでは、ようやくコーディングに入ります！
まずは、`index.js`と同じ階層に`App.jsx`を作成しましょう。
![Screen Shot 2019-12-13 at 20.38.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/eee05dfe-fa4b-f344-d157-3b162b12a7ab.png)

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

```jsx: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`でアクセスできるようになります。

ターミナル :point_down_tone2:
![Screen Shot 2019-12-13 at 20.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/60f418c2-9fd4-a2b4-f1c6-cbb4faefa162.png)

ブラウザ :point_down_tone2:
![Screen Shot 2019-12-13 at 21.02.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/712598ec-c57e-73ba-b6de-3c64ff7673b3.png)


動いたー！:clap:


#まとめ
今回もまだDECK.GLに触れることができませんでしたが、[次回](https://qiita.com/koeri3/items/c4c92408cf7aa0d54b7c)こそは本題に入れるといいな・・・！