Firebase使ってみた

# Firebaseとは？
Googleが提供しているBaaS(Backend as a Service)です。
BaaSとは、その名の通り、バックグラウンドを提供してくれるサービスです。
リアルタイムデータベース、バグ検出、ユーザー認証、ストレージ、テスト、Analytics・・・などなど様々なプロダクトを組み合わせて、アプリを素早く開発できるサービスです。

もちろん、インフラの管理は不要です。

# Firebase使ってみた
## コンソールでプロジェクトの作成
まずは、Firebaseのプロジェクトを作成します。
[Firebaseのサイト](https://firebase.google.com/?hl=ja)から「使ってみる」をクリックします。

<img width="1342" alt="スクリーンショット 2017-12-20 10.05.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/3003/f500ecd3-268c-52a1-1853-c8e7d68583f3.png">

「プロジェクトを追加」をクリックして、プロジェクト名、国/地域を入力します。
<img width="520" alt="スクリーンショット 2017-12-20 10.06.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/3003/ad9b3c0f-c950-97c3-d53a-2eb896f7afed.png">

ここでは「FirebaseSample」の名前でプロジェクトを作成しています。

Firebaseのコンソールが開きます。
<img width="1170" alt="スクリーンショット 2017-12-20 10.08.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/3003/48071c25-3a28-91f0-ab12-da050e888c1e.png">

# FirebaseでWebアプリ開発
ローカル環境にFirebaseツールをインストールします。

```
npm install -g firebase-tools
```

Firebaseプロジェクトを初期化します。例として、~/firebaseに作成します。

```
cd ~/firebase
firebase init
```

<img width="838" alt="スクリーンショット 2017-12-20 10.14.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/3003/9e7cad27-ca96-8456-07e8-c896c8410b08.png">
Hostingを選択します。

```
? Select a default Firebase project for this directory: 
```

先ほど作成したFirebaseプロジェクトを選択します。
ここでは「FirebaseSample」を選択します。

アプリを作成します。
今回は<a href="https://qiita.com/_takeshi_24/items/224d00e5a026dbb76716">Nuxt.js</a>のテンプレートを使ってWebアプリを作成します。

作成されたfirebase.jsonファイルと同じディレクトリで、以下のコマンドを実行します。

```
cd ~/firebase
vue init nuxt-community/starter-template sample
```
## とりあえず公開してみる
Nuxtプロジェクトをビルドします。

```
cd ~/firebase/sample
npm run generate
```

distにビルドされたアプリが出力されるので、firebase.jsonを以下のように修正します。

```
{
  "hosting": {
    "public": "sample/dist"
  }
}
```

Firebaseサーバーに公開します。

```
$ cd ~/firebase
$ firebase deploy

=== Deploying to 'fir-sample-fac8b'...

i  deploying hosting
i  hosting: preparing sample/dist directory for upload...
✔  hosting: 16 files uploaded successfully

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/xxxxxxxxxx/overview
Hosting URL: https://xxxxxxxxxx.firebaseapp.com
```

Hosting URLにアクセスすると、テンプレートから作成したNuxtのページが表示されます。
<img width="1440" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f333030332f35643737623239312d346134342d363634662d316661302d3032636633313062343838612e706e67.png" src="https://qiita-image-store.s3.amazonaws.com/0/3003/d8117ca5-0035-0be0-a0ed-cb99ccf6af4e.png">

## Cloud Firestoreにデータ保存
npmでFirebase SDKをインストールします。

```
$ cd ~/firebase/sample
$ npm install firebase --save
```

grpcのエラーが出る場合は、grpcもインストールします。

```
$ npm install grpc --save
```

~/firebase/sample/plugins/firebase.jsを以下の内容で作成します。configの内容はFirebaseコンソールの「ウェブアプリに Firebase を追加」から確認できます。

```firebase.js
import firebase from 'firebase'

var config = {
  apiKey: 'xxxxxxxxxx',
  authDomain: 'xxxxxxxxxx.firebaseapp.com',
  databaseURL: 'https://xxxxxxxxxx.firebaseio.com',
  projectId: 'xxxxxxxxxx',
  storageBucket: 'xxxxxxxxxx.appspot.com',
  messagingSenderId: 'xxxxxxxxxx'
}
if (!firebase.apps.length) {
  firebase.initializeApp(config)
}

export default firebase
```

### Firestoreにデータを書き込む
FirestoreはFirebaseで提供されているNoSQLクラウドデータベースです。
まずは、Firebaseコンソールで、Firestoreを有効にします。
- Firebase コンソールを開き、新しいプロジェクトを作成します。
- 左のメニューから「Database」を選択し、「Firestore ベータ版を試してみる」をクリックします。
- 「有効にする」をクリックします。

Firestoreにデータを書き込みます。

itemsコレクションに{name: 'テスト'}のデータを書き込む例は以下の通り。

```
import firebase from '~/plugins/firebase'
import 'firebase/firestore'

const db = firebase.firestore()

db.collection('items').add({name: 'テスト'})
```

Firebaseコンソールでデータが追加されたことが確認できます。
<img width="1174" alt="スクリーンショット 2017-12-23 18.06.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/3003/7deb5be5-3dcd-367a-2f24-3f5901cff725.png">

### Firestoreのデータを読み込む
次に先ほどFirestoreに書き込んだデータを読み込みます。

```
import firebase from '~/plugins/firebase'
import 'firebase/firestore'

const db = firebase.firestore()
var names = []

db.collection('items').get().then(function (querySnapshot) {
  querySnapshot.forEach(function (doc) {
    names.push(doc.data().name)
  })
})
```

この例ではitemsコレクションの全てのデータをnames配列に格納しています。

[Firestoreのドキュメント](https://firebase.google.com/docs/firestore/query-data/get-data)にあるように、whereによる絞り込み、orderByによるソートも可能です。

#まとめ
簡単なFirestoreの読み書きだけでしたが、バックエンドはFirebaseにお任せできますので、簡単なWebシステムであればフロントエンドの開発だけで、アプリの開発が可能です。

今回はWebアプリでしたが、iOS、Androidアプリのバックエンドとしてももちろん使えます。


# 2018/10/13追記
2018年9月21日にNuxt v2がリリースされました。
Nuxt v2とFirebaseを使ったPWA対応Webアプリケーション開発について、こちらにまとめました。
[Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発](https://qiita.com/_takeshi_24/items/3ee051e1db1b3e8da106)