GAミント至上主義

Web Monomaniacal Developer.

個人開発にFirebaseとVue.jsとPWAがおすすめな理由

おかげさまで様々なメディアに取り上げてもらったり、はてブも800超えたりしているyagish。
想像以上の反響の大きさに、勢いがあるうちにもっと良くしようといろいろ施策を考えてます。
が、yagishで使ったVue.js、Firebase、PWAが新規事業だけでなく、個人開発にもすごくいいと感じたので、理由をメモっておきます。
お盆明けぐらいから終業後にまず自分用WEBアプリ作りたい。

rirekisho.yagish.jp

Firebaseの圧倒的低コスト

個人で毎月数千円の固定出費は痛いもの。Firebaseなら低コストで始められ、無料枠と従量性のおかげで忙しくて一時的に開発が止まってそのまま放置しててもお小遣いは安心です。
比較対象はEC2、GCE、GKEやVPSとしています。GAEだとこの点はいい勝負かも。

まずは無料枠で済む

firebase.google.com

fushiroyama.hatenablog.com

この記事にもありますが、Firebaseは無料枠があり、小さなWEBアプリでデータも大きくなければ、ほぼ無料といえる値段で始めることができます。
たとえ大きくなっても他でやるより安い場合が多いですし、困るレベルに利用されたなら、他への載せ替えは余裕だと思います。

ドメインSSLはFirebase Hosting

サービス名とドメインぐらいはちゃんと考えて決めた方がいいとは思いますが、プロトタイプレベルであれば、Firestoreでもらえるサブドメインで問題なく動きます。
しかもSSL証明書も勝手に作成、更新してくれるので、自分でいろいろやる手間が省けます。Let's Encryptでやるにしろ自分で自動化するのは面倒です。
Hostingも開発中なら無料枠で余裕。

DBはFirestore

Firestoreも無料枠超えてからの従量課金なので、使わなければ無料で収まります。ちゃんとしたRDB立てるとなると、Cloud SQLになりますが、これは月5000円程度かかってしまいます。本番利用が推奨されていないmicroなどでも2000円ぐらいはかかるような。GCEやGKEで自分で立てるのはそこまで安くならない上、メンテが面倒すぎて論外です。

サーバーの処理はCloud Functions

サーバー側の処理が必要になったらまずCloud Functionsでなんとかすれば、リクエスト単位の課金なのでよほどの回数、使い方をしなければ安く済みます。
またキャッシュが使えるようなデータであればCache-Controlヘッダーの設定でCDNで返すことができ実行回数が減るので、もっとコストを抑えることができます。

処理に長時間かかったり、動画、ビッグデータなどCPUやメモリを大量に使うようなバッチ処理はプリエンプティブ仮想マシンを使えばいいと思いますが、新規、個人開発でいきなり必要になることはほとんどないと思います

cloud.google.com

これらを活用すれば開発中、公開後アクセスがないうちは月数ドル以下で抑えることが可能です。
が、使い方によっては下記の記事のようにもちろんバカ高くなる可能性もありますので、保証はできません。
無駄な利用は減らし、予算とアラートは必ず設定しましょう。

gigazine.net

圧倒的開発スピード

Vue.jsなどの最新の開発環境と、Firebaseのライブラリを活用して圧倒的スピードで開発できます(個人の感想)

Vue.jsなどの最新のJavaScript開発環境を活用

これは最近活発なnpm、node.js、ライブラリ、フレームワークなどJS界隈のおかげです。

私はVue.jsにしましたがReact、Angularでも状況や好みに合わせて選べば大きな違いにはならないかと思います。

個人的にPythonが読みやすいしコードのブレが減るので好きなんですが、昨今のメリットを考えるとjavascriptを使うほかにないと思います。またES2016とかどんどん便利な機能が追加されているので、JSのストレスはどんどん減っていくと思います。

周りの話を聞くとNuxt.jsがいいよ、と言っている人も多いし、使ってる人も多いんですが、Vue-CLI3でrouter、Vuexなど公式機能は一通り使えるようになるので、私はまだ使わなくてもいいかなという感じがしました。Vue本体の機能を使いこなして不便を感じたら移ろうかな。SSR必須だったり、典型的なWEBサイトであればNuxt.jsの方が楽そうです。

サーバー側のCloud Functionsもjsで

最近Python3も使えるようになったので、それでもいいんですが、やっぱり脳の切り替えや実際の書き換えコストがあるため、同じ言語、パッケージ、ライブラリ等を使って両方書けるのは大きいと思います。

最近Node.js 10が使えるようになったのでasync/awaitも使えます。

デザインフレームワークを活用

デザインフレームワークも充実しており、おなじみのBootstrap,マテリアルデザインなどをVueコンポーネントで使うことができます。

qiita.com

yagishではelement-uiを使い、他の社内システムではVuetify、8月から新しく開発するものはiViewを使用してます。

これらを使うことで、ほとんど自分でCSSを書くことなくレイアウトを組むことができると思います。

ユーザー認証にコード不要

ユーザー認証にはFirebaseのAuthenticationを使い、Google,、FacebookTwitterGitHubなどのソーシャルログインだけにすればログインのフォームUIですら必要ありません。
特に最初はGoogleログインだけにすればアプリ登録も不要なので早いです。
またパスポート不要のメール認証にも対応しており、今後使う予定です。

またDBのFirestoreではその構成単位であるコレクション、ドキュメント単位で上記Authenticationの情報を使ったルールで権限を与えることができるので、アプリ側でいちいちユーザーに権限があるのか、クエリごとにチェックする必要がなく、ルールさえしっかり設計すれば安心してコードを書くことができます。
ルールに沿ってないクエリは実行前にはじかれます。

yagishではuidをつかったコレクション(ディレクトリみたいな感じ)で切り、その下はそのユーザーでしか読み書きできない、というシンプルなルールだけで済んでます。

ユーザーが作ったコンテンツを一般公開したり、ユーザー間で共有、グループ機能などをする場合は結構複雑になってくると思いますが、下記の公式ドキュメントとか参考にいじりまくればなんとかなりそうです。

ユーザーとグループのデータアクセスを保護する  |  Firebase

学習コスト

新しい技術を身に着ける勉強時間を単純にコストとするのに納得がいかないし、Firebaseを学習して損はない。個人的にはコストとは感じないので論外。

[asin:B07F8L6KVS:detail]