初めてのFirebaseを触ってみる(Functions)

#はじめに
おはようございます。こんにちは。こんばんは。
今回はFirebaseのFunctionsについて見てきます。
では、早速行って見ましょう。
※今回もwebベース(Vue.js)の解説です。
#Functions(Cloud Functions)とは
[https://firebase.google.com/docs/functions?hl=ja](https://firebase.google.com/docs/functions?hl=ja)
Firebase 機能や HTTPS リクエストによってトリガーされたイベントに応じて、バックエンド コードを自動的に実行できます。
#Cloud Functionsの使い方
##準備
まずは、CLIでfirebaseコマンドを使えるようにします。

以下のコマンドで、firebase-toolsをインストールします。

```console
$ npm install -g firebase-tools
```
インストールできたら、正常にインストールされているか以下のコマンドでバージョンを確認してみます。

```console
$ firebase --version
```
firebaseにログインする
まず、CLIからfirebaseにloginします。

理由は、CLI上からアプリケーションのデプロイをしたいためです。

ログインは以下コマンドで出来ます。

```console
$ firebase login
```
##Cloud Functionsの使い方
適当なディレクトリを作成して移動し、以下を叩きます。

```console
$ firebase init
```
<img width="570" alt="1__node.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/afffb5c3-ad8c-8a9f-cecf-162ae405936f.png">

次に紐ずけるプロジェクトを聞かれるので選択する。

次にFunctionsを書く言語を聞かれるので選択する。
※JavascriptとTypescriptが選べます。
※今回はjavascriptを選択するのでjavascriptを使った解説をします。
次にESLintを使うか聞かれますが特にこだわりがないのでエンターを押します。（指定しないでエンターをするとNoになります）
最後にnpmで依存関係のインストールをするか聞かれます。（指定しないでエンターするとYesになります）
``Firebase initialization complete!``と出れば準備終了。

因みにみなさんが触るファイルです。

```js:funstions/index.js

const functions = require('firebase-functions');

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions

exports.helloWorld = functions.https.onRequest((request, response) => {
 response.send("Hello from Firebase!");
});
```
##ローカル環境での実行
```console
$ cd functions
$ npm run serve
```
##デプロイ

```console
$ firebase deploy
```
##コレクションを取得するAPI

```js

const functions = require('firebase-functions');

// cloud functionでfirestoreを使うのに必要な設定は以下の３行
const admin = require('firebase-admin')
admin.initializeApp(functions.config().firebase)
const db = admin.firestore();

exports.helloWorld = functions.https.onRequest((request, response) => {
 //response.send("Hello from Firebase!");
    db.collection("users")
    .get()
    .then((query) => {
        var buff = [];
        query.forEach((doc) => {
            var data = doc.data();
            buff.push({
                "id": doc.id,
                "name": data.name, 
                "age":data.age
            });
        });
        response.json(buff);
    })
    .catch((error)=>{
        response.send(error);
    });
});
```
まずここで解説することはCloud FunctionsでFireStoreなどの
Firebaseの機能を使いたいと思ったら、コメントでも書いてあるのですが、
下記のコードを加えてください。

```js

const admin = require('firebase-admin')
admin.initializeApp(functions.config().firebase)
const db = admin.firestore();
```

ただここで問題が・・・

Firebase上にデプロイすればデータは取れるがローカルではデータが取れません。
開発中にわざわざデプロイしてインターネット上に公開してから動作確認しなければなりません。
はっきり言ってめんどくさいです。
次はローカルでもデータを取得し確認する方法です。
以下の手順を行なってください。
<img width="1377" alt="marknote_-_Firebase_コンソール-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/4a509856-fa99-bc4c-4892-2b1f2229c8ed.png">

③をクリック後jsonファイルができるので``serviceAccountKey.json``に名前を変え、プロジェクトに追加してください。
<font color="red">**このファイルは絶対に後悔しないで下さい**</font>

念のためにGitの管理に含めないファイルを指定するため``gitignore ``の一番下に以下を追加ください。

```
functions/serviceAccountKey.json
```

<img width="250" alt="index_js_—_test-2_png.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/cbe59e31-8004-7c2b-3c42-e1ee3c22bd23.png">

最後にこのようにコードを編集するとローカル環境でも動くようになります。

```js

const functions = require('firebase-functions');
// cloud functionでfirestoreを使うのに必要な設定は以下の２行
const admin = require('firebase-admin')
//admin.initializeApp(functions.config().firebase)
const serviceAccount = require("../functions/serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "*********************"
});


// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions

const db = admin.firestore();
exports.helloWorld = functions.https.onRequest((request, response) => {
 //response.send("Hello from Firebase!");
    db.collection("users")
    .get()
    .then((query) => {
        var buff = [];
        query.forEach((doc) => {
            var data = doc.data();
            buff.push({
                "id": doc.id,
                "name": data.name, 
                "age":data.age
            });
        });
        response.json(buff);
    })
    .catch((error)=>{
        response.send(error);
    });
});
```


#感想

- これを機に本気でTypeScriptやろうと思った。
- expressを使ってREST APIを作りたい。

ということで**緊急クエスト!**
expressを使ってのREST API作成方法をやっていきます。

以上。
解説が浅いところとか、間違い等があれば教えてください。
最後まで読んでいただきありがとうございました。

[Twitter](https://twitter.com/watataku9)やってます。良ければチェックして見てください。:point_up::point_up::point_up:


#リンク
- [初めてのFirebaseを触ってみる(導入編)](https://qiita.com/watataku/items/94274031a4e49c9cc9a0)
- [初めてのFirebaseを触ってみる(Authentication)](https://qiita.com/watataku/items/9f134b44ead087abe68b)
- [初めてのFirebaseを触ってみる(Database)](https://qiita.com/watataku/items/ac040f4671c0f9a62bd4)
- [初めてのFirebaseを触ってみる(Storage)](https://qiita.com/watataku/items/7292a04590aad5b4dd19)