Vue.jsとFirebaseで作るミニWebサービス を読みました📖

改訂新版　Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ（NextPublishing）)

Firebaseを色々触りたかったので読みました。
Hostingは使ったことあったけど、他のサービスは全然だったのでいいきっかけになりました。
また、Vue.jsも興味があって触って見たかったのでぴったりでした◎

一通りソースコードも書いてpush済みです。

github.com

Vue.js・Firebaseで勉強になったことや気になったことをまとめていきたいと思います💨

目次

• 1章　はじめに
• 2章　サーバーレスシングルページアプリケーションの基本
• 3章　開発環境のセットアップとデプロイまでの流れ
• 4章　Googleアカウントでのユーザー登録と、ログイン状態の判別
• 5章　エディターの作成：データベース作成とデータ保存
• 6章　見た目を整える
• 7章　Webサービスとして後悔するまでの必要な準備

リロードなしで更新される

/src/App.vueを変更する→リロードなしで更新される

Webpackの提供するHot Module Replacementという機能

単一ファイルコンポーネント

英語ではSFC(Single File Components)

https://jp.vuejs.org/v2/guide/single-file-components.html

SFCは

• template
• script
• style

の3つの要素でできている

template

コンポーネントが表示するHTMLを記載 そのHTML要素に紐づいてクリックされたら何を実行するかなどの情報も定義する

script

コンポーネント内で処理するプログラムやtemplateで表示するためのデータを記載する

style

各コンポーネントで利用するCSSを記述する

ボタン押下時の動作

<button @click="googleLogin">Googleアカウントでログインする</button>

(省略)

methods: {
    googleLogin: function() {
      firebase
        .auth()
          .signInWithRedirect(new firebase.auth.GoogleAuthProvider());
    }
}

• @click
  • HTMLのonClickのような形で、その要素をクリックすると実行する命令を記載できる
• methods
  • コンポーネント内で呼び出す関数を記載する

親コンポーネントからデータを受け継ぐ

propsを使う

export default {
  name: "editor",
  props: ["user"],
  data() {
    return {};
  },

フォームのデータを格納

v-modelを使う。
v-modelはinputやtextareaの状態をコンポーネントのデータへ格納する。
textareaに書き込んだテキストが自動的にv-modelで指定した変数に格納される。
→ データバインディングと呼ぶ

<textarea class="markdown" v-model="markdown"></textarea>

配列やリストの表示

v-forに配列・オブジェクトを指定するとそのデータの分要素が生成される。
:key="index"はリストレンダリングなどで繰り返す要素それぞれに、個別のkeyを設定することで要素の再利用と並び替えができるようになる（パフォーマンス向上のために推奨されている）

<div class="memoList" v-for="(memo, index) in memos" :key="index" @click="selectMemo(index)" :data-selected="index == selectedIndex">

デプロイ

Firebaseにデプロイするコマンド

$ npm run build
$ npm deploy --project プロジェクトID

感想

あんまり詰まることなく最後までできました。
Vue.jsとFirebaseでwebサービスを作る大まかなイメージができました。
個人的にはCloud Functionsも触りたかったので、また別の機会に触ろうと思います。

あとは、7章でVue Routerや利用規約の記載のついてなど、
公開するにあたって必要なことが記載してあり個人的にとてもありがたかったです。