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

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

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

目次

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

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

DECK.GLってなに？

DECK.GLとは、Uberが作った地理情報に特化したJavaScriptのデータビジュアライゼーションライブラリです。
https://deck.gl/

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

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

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

GoogleMapのタイムラインってなに？？

Googleマップの「ロケーション履歴」をオンにすると、Google先生が私たちの行動履歴（訪れた場所・時間・移動手段など）を自動で収集してくれるという、めちゃ凄い（ちょっとコワイ）機能があります。

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

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

環境のセットアップ

まずは自分のパソコンに環境をセットアップしましょう。
今回は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"
    ]
  }
}

まとめ

環境がセットアップできましたね。
次回はいよいよコーディングに入っていきたいと思います！