記事の概要💁♀️
- ちょっぴりVue.jsの特徴がわかる
- ちょっぴりFirebaseの特徴がわかる
- ちょっぴりcodesandbox（今回使った開発環境）が触れる
-
Vue.jsとFirebaseのコンボがみれる- この記事ではコンボ発動厳しいので、別記事にしますー💪！
誰向けか😗
- Vue.jsが何者かよくわからない人
- Firebaseが何者かよくわからない人
- Twitter風アプリケーションが気になる人
今回作ったのはコレ🔻
サクッと勉強会の復習✏️
1. Vue.jsで覚えておきたいこと
1. FireBaseで使う機能
1. codesandboxの使い方
1. Vue.jsで覚えておきたいこと
まず、Vue.jsとは何だろう🤔
と思った方は、別の記事のリンクを貼っておきますので、ご参照ください。
その上で覚えておきたい３つの特徴をあげておきます
- SPA
- 仮想DOM
- コンポーネント指向
SPA
- Single Page Applicationの略称
- 名前の通り、SPAは1ページで作られます
- その代わり、更新したい部分をパーツ化して、1枚のページ上でパーツを読み込みを行い、動きをつけています
- （通常はページ毎にページ全体を読み込むため、読み込みスピードがSPAに比べて遅い場合が多いです）
- 下図はReactの例になっていますが、Vue.jsでも同様です
仮想DOM
- 従来ページ読み込み毎に構築されるDOMを、変更があった部分（差分）だけを更新することができる
- Vue.js以外でもReactでも使われている
- 下図が非常にわかりやすいので、引用させていただきます
-
VirtualDOMの仕事ってなに？(Reactの表示速度がはやい理由)
コンポーネント指向
- パーツごと（役割毎）にファイルを作りましょう（1ファイル1ページじゃないよ！）
- Vue.js自体がSPAの特徴があるため、そもそも複数ページを想定していないというのもあり、1ページに対して複数のパーツを散りばめましょう。ファイルもコンポーネント化（各機能毎にパッケージ化）して使おうという思想です
- これはあくまで思想なので、絶対にそうでなきゃいけない！というわけではありません
- ただ、上記ルールを破ってまでVue.jsを使う意味はありません。
- Vue.jsを使う場合は、このコンポーネント指向に則ってファイルを構成していくべきです
- 参考
2. FireBaseで使う機能
今回は主に3つの機能を使っています。
各説明については、下記記事の内容を引用させていただきます。
Firebaseの各機能を3行で説明する
(出典：@shibukk 2018年09月26日時点)
- Firebase Authentication
- Cloud Firestore
- Cloud Storage for Firebase
Firebase Authentication
メールアドレスとパスワードを利用したユーザー認証だけでなく、Google / Facebook / GitHub / Twitter などのアカウントを利用した認証も簡単に実装できる。無料。
→ 認証機能が簡単に作れます。バリデーション処理などもやってくれるはず！
Cloud Firestore
NoSQL データベース
→ そのままですが、ここにユーザーデータや投稿記事のデータが格納されます
Cloud Storage for Firebase
写真や動画などのコンテンツを保管、取得することができる。
格納先は Google Cloud Storage なので、mruby で動的に画像変換をしてから取得するといったことも可能。
料金は保存データ量・ダウンロードデータ量・アップロード/ダウンロード回数によって決まるが、無料枠もある。
ただし BLAZE プランでは、使用量に応じて料金が変化するので注意が必要。
→ 実際の画像ファイルなどが保存される場所です。データベースと混同しないように注意。
→ データベースに格納されているのは、画像ファイルが保存されているURLになります。
FireBaseのところのまとめ
- 認証機能を使って、サインイン・サインアップを実装
- データベースを使って、ユーザデータ、ポストデータを保存
- ストレージを使って、画像などアップロードできるようにする
3. codesandboxの使い方
そもそも、codesandboxって何という方・・簡単に説明いたします。
内容については、下記記事の内容を引用させていただきます。
君は2クリックでVue appを立ち上げたことがあるか
(出典：Studio Andy)
CodeSandboxとはオンラインで動くコードエディターで、ReactやVue、Angularなどのフレームワークですぐにアプリケーションを作成できるのが特徴です。
- よし、Vue書くぞ！と思った時、必ずつまずくのが、「環境構築」です。
- その「環境構築」を省いた状態、できるだけ簡単に開発に取り組める状態にしているのがCodeSandboxです
ちなみにCodeSandbox自体の開発プロジェクトリーダーは、2018年時点で２１歳の学生さんだそうです
ivesさん。やばいっすね。
横道をそれて環境構築について
もしこれを読んでいるあなたが、
- いやクラウド上の開発環境はちょっと・・・
- チームで取り入れたいけど、クラウド上の開発環境はちょっと・・
と思っている場合は、「Vue CLI」を調べてみてください。
npmやyarnでインストールして使う雛形作成のツールなのですが、
webpackの設定やvueのコンパイルなどをやってくれるツールになります。
おそらく、このツールを使って開発環境の構築をするのが現時点では一般的かもしれません。
記事のまとめ🍵
- 今回はそれぞれの特徴や機能の概要となりました。
- アプリのソースまとめは別記事に書きたいと思います🙏（長くなりすぎたので）
- もしかしたら、VueとFirebaseで分けて学んだ方がいいかもしれません。（ボリュームがすご）
- ほとんど引用みたいな記事になってしまいましたが、異議申し立てがあれば言ってください、すぐに葬ります✝️