【勉強会ポエム】Vue.js×Firebaseで簡単なTwitter風アプリケーションを作ろう

記事の概要💁‍♀️

• ちょっぴりVue.jsの特徴がわかる
• ちょっぴりFirebaseの特徴がわかる
• ちょっぴりcodesandbox（今回使った開発環境）が触れる
• Vue.jsとFirebaseのコンボがみれる
  • この記事ではコンボ発動厳しいので、別記事にしますー💪！

誰向けか😗

• Vue.jsが何者かよくわからない人
• Firebaseが何者かよくわからない人
• Twitter風アプリケーションが気になる人

今回作ったのはコレ🔻

　

サクッと勉強会の復習✏️

　

1. Vue.jsで覚えておきたいこと
2. FireBaseで使う機能
3. codesandboxの使い方

1. Vue.jsで覚えておきたいこと

まず、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で分けて学んだ方がいいかもしれません。（ボリュームがすご）
• ほとんど引用みたいな記事になってしまいましたが、異議申し立てがあれば言ってください、すぐに葬ります✝️