GraphCMS & React & mapbox, Here, Leaflet, Google Map 

React #2 Advent Calendar 2019 25日目の記事です。
普段は、ElixirばかりQiitaにあげていますが、ReactでGraphCMSを利用した地図アプリを作る為のチート用のサンプルコードを作ったので、せっかくなのでエントリーさせて頂きました。

2020年には、総務省が主催するG空間エンジニア育成プログラムが2月の１週目から４週目にかけて、各４箇所で開催されるものもあり、地図を扱うサービスやシステムを構築する場面があると思うので、ぜひ紹介するサンプルコードが役立てば幸いです。

<img width="1076" alt="スクリーンショット 2019-12-25 11.20.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/b3283b60-8048-a9f1-8c2b-e33de7f5e837.png">
https://ghp.connpass.com/

> 多方面で注目を集める高需要スキル 「G空間技術」 をイチから学び、エンジニアの方ももそうでない方も、地域課題の解決や新規ビジネス創出に活かせる力を手にいれる2日間の集中プログラムです。 プログラムの詳細は、各地のイベントページをチェック！
※Geospatial Hackers Programは、総務省が主催するG空間人材の育成事業です。

僕が今年のAdvent Calendar書いたものもリンクを載せておくので、良ければみて下さい。

Advent Calendar fukuoka.ex 1日目
https://qiita.com/advent-calendar/2019/fukuokaex
[GraphCMS から Absinthe を利用して作る Elixir で体験的に GraphQLSever を作る「ポエム」](https://qiita.com/Yoosuke/items/2346137ac39715b19cde)

Advent Calendar NervesJP 6日目
https://qiita.com/advent-calendar/2019/nervesjp
[Nerves と GraphQLsever の組み合わせを考える「ポエム」](https://qiita.com/Yoosuke/items/50fc77bf8230109cfa88)

Advent Calendar Elixir 24日目
https://qiita.com/advent-calendar/2019/elixir
[GraphCMS から入り、Absintheを利用して作って動かす「チュートリアル」](https://qiita.com/Yoosuke/items/a21d0556ee39c321c79a)




## 環境構築
### 自分の環境を調べる
* コンソールを立ち上げる
    * コマンドプロンプト (windows)
    * ターミナル      (macOS)

コンソールを立ち上げたら確認する

```
node --version
```

次の```v12.13.1```ようにバージョン番号が表示されていたらインストールされています。

### NodeJSのインストール
https://nodejs.org/ja/

LTS版と最新版があります。 LTS版をインストール

### インストールの確認

コンソールを再起動します。

```
node --version
```
次の```v12.13.1```ようにバージョン番号が表示されていたらインストール完了です。

```
npm --version
```

次の```v6.12.1```ようにバージョン番号が表示されていたら成功です。

## Yarn install
https://yarnpkg.com/ja/docs/install#mac-stable

Windowsの場合は、yarn のインストーラーをダウンロードできるボタンが表示されるので
それをダウンロードしてインストールして下さい。

### Sample Code Download

```
git clone https://github.com/Yoosuke/grahcms_maps.git && cd grahcms_maps/react-apollo-blog 
```

## 

## GraphCMS　準備
1. アカウントを作成する

https://graphcms.com/

<img width="720" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/330af3a7-3a8c-52e5-1b79-e6fcb62fcfcd.png">

### GraphCMS SetUp

1. Projectの作成
<img width="720" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/ae4f442c-2688-af08-0376-f60b318c919e.png">

2. From Scrachを選択する
<img width="720" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/bdd26e33-0720-7b54-77a6-f598b079e763.png">

3. Asia Eastを選択する

<img width="720" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/f7a63dbe-f92b-c924-2d71-4d8b5c8938e9.png">

４. Personal を選択する
<img width="720" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/9536e393-68dc-62a2-e802-5a82154136f0.png">

5. Modelを作成する

<img width="720" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/f109de0f-aeae-aa14-37ac-8d633a176c7f.png">

<img width="720" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/743a34b0-4370-1bb9-150b-43d4d9820eb0.png">

<img width="720" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/0e2b3e5b-5235-cd3f-2968-0b4c4211518c.png">

６. Schemaの作成

<img width="720" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/c781f204-fc61-5ae0-fa5a-19a6bb89127b.png">

<img width="720" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/9423fd1c-d442-ae67-c120-ffd0e32319c2.png">

<img width="720" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/88bbaeed-7744-3e01-3e32-9d5bd197eb52.png">

<img width="720" alt="13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/b855a074-78fc-af15-7912-7861cda50ee8.png">

<img width="720" alt="14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/14faa8e8-bb32-7ea6-6d1a-51bdcb519029.png">

7, Enum の作成

<img width="720" alt="16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/07da8938-58a8-ba76-a41a-a7d45f66e68a.png">

<img width="720" alt="17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/788344a2-b276-8fca-e0bc-bf78a641cd92.png">

<img width="720" alt="18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/4957573e-acff-8521-fb31-a6c8a6c46550.png">

8. Postのスキーマを作成する。
基本的には、６の要領で作成するが、２つ特殊ケースがあるのでその方法を紹介します。

slugのフィールドはAdbancedをクリックして、以下２つを有効にする

<img width="720" alt="１９.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/517ba9c4-0393-916e-aa3f-01f4972e0e6c.png">

developのフィールドはCheckBoxを選択し、先ほど作ったEnumを選択する

<img width="720" alt="２０.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/d83e7227-1fd3-97eb-dfe5-4ba96b2d6250.png">

以下、フィールドを追加する要領で以下のようなSchemaを設計する
<img width="779" alt="Post.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/cb7bc9b7-8ed4-4b2a-b3f8-b170c1b5962b.png">

9. サンプルデータを入力する

<img width="720" alt="２１.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/8b68b47c-796b-ea5d-ec50-3df51c1a0bd3.png">

<img width="965" alt="Post_back.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/50ab21d2-f936-f2eb-5af3-44819f1b91a0.png">
<img width="956" alt="Post_back_map.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/8b5dcda8-45b7-feab-3a3f-80dc336d60bc.png">

## 入力を終えたら、DraftをPABLISHEDに変更して SAVEします。

10. 公開準備する

<img width="720" alt="22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/6a26f050-2f84-d9e2-e1b0-616a9c2d9524.png">

11. Endpointをコピーしてdotenvファイルに書き込む

<img width="720" alt="23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/f479d63b-f984-6898-2730-7afc559ac066.png">

## .env.sampleに書きこむ

.env.sampleファイルは、最初にダウンロードした```grahcms_maps/react-apollo-blog```のフォルダの中に入っています。

<img width="1035" alt="２４.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/edbdd83b-c2ad-4945-4108-87de96859e2d.png">

### .env.sample -> .envに rename する

## MapboxやHereのAPIを取得する

<img width="720" alt="25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/0a5fbb74-b5be-4ab1-8f65-14e52752b6ae.png">

### .envにAPI KEYを書きこむ

## コンソールからYarnをインストールして起動する

このフォルダにいることを確認して```grahcms_maps/react-apollo-blog```以下のコマンドを打って下さい。

```
yarn && yarn strart

```

ブラウザの ```localhost:3000``` に無事に画像が表示されていたら成功です。