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

初めて技術ブログを書きます！

記念すべき１回目の記事は、データビジュアライゼーション！
DECK.GLというめちゃかっこいいJavaScriptライブラリを使って、GoogleMapのタイムラインをビジュアル化してみたいと思います。

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

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

# DECK.GLってなに？
DECK.GLとは、Uberが作った地理情報に特化したJavaScriptのデータビジュアライゼーションライブラリです。
[https://deck.gl/](https://deck.gl/)
![DECKGL-HP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/8955d801-e8a1-74bb-2f41-2a438727d158.png)

メチャかっこいいですね！:sparkles:

2016年にリリースされてから、今でも進化を続けているオープンソースのライブラリです。
GitHubはこちら → https://github.com/uber/deck.gl

DECK.GLについてもっと語りたいところですが、それは次回に取っておいて、今回はこれを使ってGoogleMapのタイムラインをビジュアル化してみましょう！

# GoogleMapのタイムラインってなに？？
Googleマップの「ロケーション履歴」をオンにすると、Google先生が私たちの行動履歴（訪れた場所・時間・移動手段など）を自動で収集してくれるという、めちゃ凄い（ちょっとコワイ）機能があります。
![GoogleMap-Timeline-2 copy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431109/7e54d122-d148-5486-5656-63d961342fff.png)

※ロケーション履歴の個々のエントリの編集、指定期間内の情報の削除、ロケーション履歴の全エントリの削除などが可能で、タイムラインは非公開なので、本人しか見ることができないみたい:flushed:
詳しくはこちら → [Google マップのタイムライン機能](https://support.google.com/maps/answer/6258979)


今回はこのデータを使って、私のシアトル旅行のタイムラインを可視化してみたいと思います！

# 環境のセットアップ
まずは自分のパソコンに環境をセットアップしましょう。
今回はyarnでパッケージ管理をしつつ、Reactを使ってDECK.GLを使っていきます。


## React開発環境のセットアップ
まず始めにReact開発環境のセットアップ。
Create React App を使って、簡単にReactの環境を作成しましょう。

`npx create-react-app seattle` のコマンドを実行し、`seattle`というフォルダの中でReact環境を作ります。

```
$ npx create-react-app seattle
npx: installed 91 in 10.551s

Creating a new React app in /xxx/xxx/.../seattle.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

...　（いろいろダウンロードしてますが、長いのでカット）

Happy hacking!
$ 
```

無事作成できてますね。
`cd seattle` コマンドで`seattle`フォルダに移動しましょう。

```
$ ls -l
total 0
drwxr-xr-x  9 xxx  staff  288 Dec 13 10:33 seattle
$ cd seattle/
$ ls -l
total 912
-rw-r--r--     1 xxx  staff    2884 Dec 13 10:33 README.md
drwxr-xr-x  1045 xxx  staff   33440 Dec 13 10:33 node_modules
-rw-r--r--     1 xxx  staff     743 Dec 13 10:33 package.json
drwxr-xr-x     8 xxx  staff     256 Dec 13 10:33 public
drwxr-xr-x    10 xxx  staff     320 Dec 13 10:33 src
-rw-r--r--     1 xxx  staff  456939 Dec 13 10:33 yarn.lock
$ 
```
Create React App についての詳細はこちら → https://ja.reactjs.org/docs/create-a-new-react-app.html
GitHubはこちら → https://github.com/facebook/create-react-app


## DECK.GLをインストール
続いて、DECK.GLのインストール！
`yarn add deck.gl` コマンドで DECK.GLをインストールします。

```
$ yarn add deck.gl
yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/user-event@7.1.2" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
...
└─ viewport-mercator-project@6.2.2
✨  Done in 16.04s.

$ 
```

`package.json`を見てみるとちゃんと追加されているのがわかりますね！
Create React App コマンドを実行した時にいろいろ追加されてますが、とりあえず気にせず次に進みましょう！

```package.json
{
  "name": "seattle",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "deck.gl": "^7.3.8",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

# まとめ
環境がセットアップできましたね。
[次回](https://qiita.com/koeri3/items/a245f7cb50e77ebf3167)はいよいよコーディングに入っていきたいと思います！