VueとFirebaseの公式ドキュメントを読みながらアプリをつくる（開発前の準備まで）

いろいろなQiita記事を読みながら「なんとなく理解した」レベルを超えられなさそうだったので、一念発起してちゃんとドキュメントを見ようと決意。

Vueを使うので、「Firebase を JavaScript プロジェクトに追加する」スタートガイドを読むことにする。
<https://firebase.google.com/docs/web/setup>

## アプリに Firebase を追加する

まずはFirebaseのプロジェクトを追加する必要がある。なのでFirebaseコンソールでプロジェクトを追加した。

作成したプロジェクトの概要ページで、firebaseをアプリに追加するために必須の設定コードのスニペットを取得する。

```
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>
```

このあと、利用したいコンポーネントごとにjsファイルをCDNからインクルードしてくる。
たとえば認証系の処理をやりたいならfirebase-auth.jsとか。

## 開発用ローカル ウェブサーバーを実行する

FirebaseのCLI（firebase-tools）を利用して、firebaseのローカルサーバを実行することができる。
まずはCLIをインストールする。

```
$ npm install --global firebase-tools
$ firebase --verison
> 4.2.1
$ firebase login
> ? Allow Firebase to collect anonymous CLI usage and error reporting information? # 匿名の情報収集を許可するかどうか

> Visit this URL on any device to log in: # 下記URLに飛んでログインする
> https://accounts.google.com/o/oauth2/auth?client_id=******
```

つぎにinitコマンドを打って、開発中のアプリケーションをFirebaseに関連づける。

FIrebaseのどの機能を利用するか聞かれるので、今回は4番目の「Hosting」を選択（spaceで有効）してEnterをクリック。  
なおinitコマンドは、カレントディレクトリ上で実行されるので、あらかじめアプリのプロジェクトに移動しておくこと。

```
$ cd {アプリのディレクトリ}
$ firebase init    # Generate a firebase.json (REQUIRED)
$ $ firebase init
> ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
>  ◯ Database: Deploy Firebase Realtime Database Rules
>  ◯ Firestore: Deploy rules and create indexes for Firestore
>  ◯ Functions: Configure and deploy Cloud Functions
> ❯● Hosting: Configure and deploy Firebase Hosting sites
>  ◯ Storage: Deploy Cloud Storage security rules
```

つぎにこのアプリケーションに割り当てるFirebaseプロジェクトを選択する。  
今回はすでにコンソール上から作っているので、追加したFirebaseプロジェクトを選択する

```
> ? Select a default Firebase project for this directory: (Use arrow keys)
>   [don't setup a default project]
>   Firebase Demo Project (fir-demo-project)
> ❯ {追加されたFirebaseプロジェクト}
>   [create a new project]**strong text**
```

つぎに公開ディレクトリを指定することができる。  
未指定のままEnterを押すと、シングルページアプリケーションとして、すべてのアクセスがpublic/index.htmlにrewriteされるように設定される。

```
> Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

> ? What do you want to use as your public directory? (public)
> ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
```

ここまで終わると、いよいよローカルサーバを開始できる。  
オプション未指定の場合はlocalhost:5000で開始されるよう。

```
firebase serve
```

<http://localhost:5000>にアクセスすると、次のようなページになるはず。

<img width="421" alt="スクリーンショット 2018-09-08 16.46.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/144277/474f80ca-7d1b-42f2-6fc7-e40c51538480.png">

なお`Ctrl + C`で、サイト停止が可能。

## 初期設定の追加

public/index.htmlの`</style`>直下に、さきほど取得した設定コードのスニペットを貼り付ける。  

ちなみにindex.htmlにAPI Keyなどを貼り付けてしまっていいのか不安に思ったが、どうやらcredentials（認証情報）が知られないかぎりは安全なよう。このあたりは、ちゃんと個々で調べるべきだろう。  
関連記事: [FirebaseのApiKeyとAppIDはHTMLソースにコピペしてもセキュア](http://testpy.hatenablog.com/entry/2016/09/18/093000)

## このあと

このindex.htmlを修正しながらFirebaseの機能群を利用していってみようと思います。