vuexfire で Firebase と Vuex をサクッと試してみる

最近　Firebase　を触ってみて便利だったのと Vuex で何か作りたいなと思って検索すると `vuexfire` なる便利そうなものがあったので使い方をざっくりまとめてみました。　アプリの起動とデモを試すだけで Vuex の解説などは行いません。

# 準備と Example のデモ
今回利用するライブラリはこちら。 https://github.com/posva/vuexfire
データは Firebase の Realtime Database を利用し、クライアント側に vue.js と Vuex を利用し、API通信することで動作します。 

## ライブラリのダウンロードと Example の実行
ライブラリをダウンロードします。

```
$ git clone https://github.com/posva/vuexfire.git
```

ライブラリをダウンロードしたら、以下の `index.html` ファイルをブラウザで開くと早速試せます。

```
$ open /vuexfire/examples/TodoApp/index.html
```
サーバーは必要ありません、ブラウザだけで動作します。

## Realtime Database の動作
todo アプリのデモです。入力と削除ができます。

すでに誰かが入れたデータがリアルタイムに共有されています|
---|
![record4.gif](https://qiita-image-store.s3.amazonaws.com/0/26095/b71047a1-e59d-b488-22b3-86c38f070570.gif)|

2つのブラウザで　index.html を同時に立ち上げると、リアルタイムに変更が反映|
---|
![record4.gif](https://qiita-image-store.s3.amazonaws.com/0/26095/66a27e71-37e9-c270-b1f5-9ee98d842c1b.gif)|

何が起こっているかというと、Firebase の Realtime Database と言う機能を利用しており、 「Add」ボタンの押下でデータベースを更新しています。Firebase の Realtime Database は
>データが変更されるたびに、接続されているあらゆるデバイスがその更新を数ミリ秒以内に受信します

そのため、ブラウザの変更が即時に反映されます。
Realtime Database については、[FirebaseのRealtime Databaseのざっくり概要](https://qiita.com/seiya1121/items/1436fde30752843daa47)の記事がわかりやすいです。
では、vuexfire のサンプルのデータではなく、自分の firebase アプリにしてみましょう。
# Firebase の設定
## firebase へ新しいプロジェクトを登録
https://firebase.google.com/?hl=ja にアクセスします。利用には google のアカウントが必要です。
https://console.firebase.google.com/?hl=ja コンソールにアクセスします。


「プロジェクトを追加」をクリック
<img src="https://qiita-image-store.s3.amazonaws.com/0/26095/db99abf0-d614-f45a-6291-3ce4a9d0beef.png" width="200">

プロジェクトに名前をつけて「プロジェクトを作成します」
<img width="200" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f32363039352f34346438383835342d373636352d323937662d303761352d6235373163333836643063362e706e67__938×1016_.png" src="https://qiita-image-store.s3.amazonaws.com/0/26095/04f95499-cbc2-9563-ef0c-e0d2972905f5.png">


## データベースへのアクセス権限の設定
デフォルトの設定だと、ログインが必要になります。今回はデモのためパブリックにしてみます。
左のバーの `Database` -> `ルール` を以下のように変更します。

```json:データベースの読み込み書き込みルール
{
  "rules": {
    ".read": true,
    ".write": true
  }
}
```
変更前|変更後
---|---
 <img alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f32363039352f33333164326364622d363861332d383765342d613838352d3231376131366433333961372e706e67__1504×968_.png" src="https://qiita-image-store.s3.amazonaws.com/0/26095/bd820019-736d-71b3-2cb9-f40f5a5ff559.png">|<img alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f32363039352f32613565366231322d656634632d336230382d363837372d3733356161326163356238652e706e67__1552×964_.png" src="https://qiita-image-store.s3.amazonaws.com/0/26095/7cf492a0-e693-3d92-3e18-c2f31778923f.png">


## データベースを更新してみる

index.html の config を更新します。
Realtime Databse のデータのリンクをコピーして databaseURL にセットします。
<img width="488" alt="vuexfire-test_–_Realtime_Database_–_Firebase_console.png" src="https://qiita-image-store.s3.amazonaws.com/0/26095/cb5f8e67-467e-f60a-2012-76ce87c1340b.png">


```js:index.html
    /* global Vue, Vuex, firebase, VuexFire */
    var config = {
      databaseURL: 'データベースに表示されている値',
    }
```

ついでに、 vuexfire をライブラリ内から読み出しているところを、自身のプロジェクトで利用するときのために、 cdn から呼び出すように変えておきます。

```diff:index.html
- <script src="../../dist/vuexfire.js"></script>
+ <script src="https://unpkg.com/vuexfire"></script>
```

index.html をブラウザで開き、入力してみると、まっさらなページが開き、値を入力できます

自分で作った firebase に接続してアプリを実行する|
---|
![record4.gif](https://qiita-image-store.s3.amazonaws.com/0/26095/a58efd24-17f7-33cf-d7eb-b1433570d21f.gif)|

データベースを見ると、入力された文字が Firebase 側にも反映されているのがわかります。
<img width="468" alt="vuexfire-test_–_Realtime_Database_–_Firebase_console.png" src="https://qiita-image-store.s3.amazonaws.com/0/26095/c9789687-2fde-3313-ea73-7b851eda42b5.png">

これだけで、 Firebase と通信するアプリができました。

# 所感
思ったより簡単にTODOアプリなど単純なものが作れそうです。また、 index.html 内に、Vuex のコードが100行以内で書かれているので、Vuex のことはじめとしてはちょうど良いのではないでしょうか。
https://github.com/posva/vuexfire/blob/5f12fd66a602f8e97c48beaddcb56372cb3dc55c/examples/TodoApp/index.html