FirebaseとVue.jsで Webアプリモック速攻開発 2020/01/21　知念 昌史 

知念 昌史 / Masashi Chinen ● フロントエンドエンジニア＠株式会社TAM ● 技術コミュニティ運営　沖縄：v-okinawa / 東京：PWA Night ● 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 ● 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験 からスタートしてフロントエンド8年くらい ● ポケモン剣盾が欲しすぎる生活 

事例① 

365日貯金って知ってますか？ 

365日貯金とは・・・ 1～365までの数字の書いた表を作って、一日一回、好きな数字を選んでその金額を貯 金するという方法。 例）5という数字を選んだ場合、5円を貯金箱に入れる 一日の負担は1円〜最大でも365円！ クリアすると、なんと66,795円！！！ 

そもそも表を作るのめんどいw 表をチェックするだけの作業つまらん 

Webアプリ作った！！ 制作時間：3時間くらい ● ブラウザで操作できる ● タップするとその数字がアクティブになる ● 数字のステータスはFirebaseに保存される 

事例② 

トイレIoT、流行りましたね（遠い目 

会社のトイレ空き状況を席にいながら知りたい！！ 光センサーの情報をFirebaseに保存、ブラウザで確認できるようにする！ 光センサー MESH - Sony データベース Vue.jsを使ってブラウザに表示 リアルタイムで切り替わる 

こんなやつ 制作時間：1日〜2日くらい 空いているとき・・・◎ 誰かが入っているとき・・・✕ ブラウザをリロードしなくても リアルタイムで切り替わる 

事例③ 

コスパが良いのは（お得）どっち？ 398円の マヨネーズ 内容量：450g 298円の マヨネーズ 内容量：340g A　　　　　　　　　B 

計算めんどくさいので Webアプリ作った 

こんなやつ 

一緒に計算してみよう 398円の マヨネーズ 内容量：450g 298円の マヨネーズ 内容量：340g A　　　　　　　　　B 

ちなみに・・・ このコスパ計算アプリはPWA対応！！（A2HS） 制作時間：3時間くらい PWA対応：プラス半日〜1日くらい、今後も追加改修予定 FirebaseのHostingを使うと、デフォルトでHTTPSのURLとなるため、証明書を用意する 手間がはぶける FirebaseはPWAのサンプル環境としてもオススメ！ 

iOSの人 Androidの人 

まとめ ・Firebaseは無料枠でも機能が豊富、機能単体でも使用可能 ・DatabaseとHostingの機能だけでも、サーバー側の構築無しで データと連携したWebアプリを公開できる ・フロントエンドの知識（HTML・CSS・JavaScript）があれば十分 ・とにかく作ってみるのが一番！！作ったら僕にも教えて！ 

ご清聴ありがとうございました！！！ Twitter @chocodogmagic まぁし 見本が見たい方は 声かけてください！ 実践PWAもあります！ 良かったらフォローしてね！ 今日のサンプルたち 事例① 365日貯金アプリ 事例② トイレIoTアプリ 事例③ コスパ計算アプリ