Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FirebaseとVue.jsでWebアプリモック速攻開発 / Firebase + Vue....
Search
Chinen
May 21, 2019
Technology
0
150
FirebaseとVue.jsでWebアプリモック速攻開発 / Firebase + Vue.js Meetup
Chinen
May 21, 2019
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
110
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
570
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Technology
See All in Technology
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
230
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
4
1.3k
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
300
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
310
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
170
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.6k
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
220
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
500
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
1
110
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
A Tale of Four Properties
chriscoyier
160
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Cult of Friendly URLs
andyhume
79
6.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Designing for humans not robots
tammielis
253
25k
We Have a Design System, Now What?
morganepeng
53
7.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Thoughts on Productivity
jonyablonski
69
4.7k
Transcript
FirebaseとVue.jsで Webアプリモック速攻開発 2019/5/21 知念 昌史
知念 昌史 / Masashi Chinen • フロントエンドエンジニア@株式会社TAM • 技術コミュニティPWA Night
アンバサダー(自称→公式?) • 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 • 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験 からスタートしてフロントエンド8年目 • 来週末に沖縄移住(フルリモートワークになるぞ)
まとめ ・Firebaseは無料枠でも機能が豊富、機能単体でも使用可能 ・DatabaseとHostingの機能だけでも、サーバー側の構築無しで データと連携したWebアプリを公開できる ・フロントエンドの知識(HTML・CSS・JavaScript)があれば十分 ・とにかく作ってみるのが一番!!
事例①
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アプリ 事例③ コスパ計算アプリ