かとのぼのマイコード・マイライフ

ウェブサービス開発とプログラミングと雑記ブログ

「Firebase」と「Vue.js」でアンケートアプリ「男女別アンケートメーカー」を作った話

FirebaseとVue.jsでアンケートアプリを作りました。

loveq.site

ユーザーが質問を作成し、男性と女性の性別でアンケート結果を表示するアプリとなっています。

ツイッターのアンケート機能の男女別に質問と集計ができるアプリをイメージしてもらうとわかりやすいと思います。

使っている技術は、フロントエンド(見える部分)は「Vue.js」、サーバーサイド(データの保存や取得)は「Firebase」を使っています。

Vue.jsは、Javascriptのフレームワークであり、学習がしやすく、開発規模によって柔軟に対応できるため、とても人気のある技術です。

「Firebase」は、Googleが運営しているBaas(Backend as a Service)です。最近人気のサーバレスアプリケーションが簡単に作れることで有名で、こちらもスタートアップなどで多く採用されている人気のサービスです。

Vue.jsとFirebaseの相性は非常によく、いわゆる爆速での開発とサービスリリースが可能となります。ちなみに私のこのサービスも実際に作り出してから2週間でリリースができています。このように、とにかくスピードを重視してサービスを開発したい場合には大変オススメできる組み合わせです。

技術的なイメージ図をみてみる

では、今回のアプリが、どのような仕組みなのかを図で説明します。

f:id:katonobo:20190212193221j:plain

今回はフロント側からの命令方向のみを矢印で示しています。

まず、ユーザーがアンケートを作成し登録ボタンを押すと、Firebaseの機能である「Firestore」にデータを登録します。Firestoreは、Firebaseの、データを保存や取り出しを行うサービスのことを言います。いわゆるデータベースです。

また、今回のアプリではそれと同時に、「Firebase Function」という機能で、登録したデータを全文検索ができるサービスの「Algolia」に登録する処理をさせています。Functionは、ユーザーから受けたデータに何らかの処理をこちら側で行いたいときに使います。

Firebaseのデータベースは、全文検索が苦手であるため、Algoliaという外部のサービスを利用しているため、その処理を行うためにFunctionを利用しています。

これで、アンケートの情報が登録できました。

次に、アンケートの回答ですが、アンケートの投票を行うと、投票数が増えます。その数値をFirestoreに登録します。

これが今回のサービスの概要です。非常にシンプルであり、色々拡張もしやすい設計です。

Vue.jsとFirebaseの組み合わせは個人開発者と相性抜群

Vue.jsとFirebaseの相性の良さは実際に触っていただければわかると思います。どちらも比較的に学習コストが低く、firebaseなら無料枠が有り、サーバーは使ったぶんだけの費用が発生する仕組みなので作るだけなら無料です。せっかくお金をかけてサーバーを立てたのに…といったことを防げます。ですから、これから何か作りたい個人開発者の方や、スピードや修正重視スタートアップには相性抜群だと思います。

Firebaseの学習をする場合は、公式ドキュメントをまず一読するといいと思います。

ドキュメント  |  Firebase

 

Javascriptの経験がある方で、Vue.jsの学習をするならこちらの書籍がオススメです。

基礎から学ぶ Vue.js

基礎からしっかり学べます。また、この書籍の素晴らしい点は、チュートリアルサイトがあり、そこでサンプルコードの実際の動きを学べる点です。

 

もしVue.jsとFirebaseの組み合わせ両方で学習したい場合はこちらがオススメです。 

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

 Vue.jsとFirebaseの入門に最適です。

まとめ

Vue.jsとFirebaseの組み合わせは、スピード重視であり、とにかくプロダクトを作りたいという人にとって非常に強力な武器になると思います。また、比較的新しい技術ではありますが、この技術でサービスを作る企業も今後増えてくると予想しています。自分のエンジニアの市場価値を高めるという意味でも身につける意味があると思いますので、チャレンジしていただきたいと思います。