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

改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ(NextPublishing))
- 作者: 渡邊達明
- 出版社/メーカー: インプレスR&D
- 発売日: 2018/10/05
- メディア: オンデマンド (ペーパーバック)
- この商品を含むブログを見る
Firebaseを色々触りたかったので読みました。
Hostingは使ったことあったけど、他のサービスは全然だったのでいいきっかけになりました。
また、Vue.jsも興味があって触って見たかったのでぴったりでした◎
一通りソースコードも書いてpush済みです。
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
ボタン押下時の動作
<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や利用規約の記載のついてなど、
公開するにあたって必要なことが記載してあり個人的にとてもありがたかったです。