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
「にゃーん」となくWebアプリを作った話 #ゆるWeb札幌
Search
Kihara, Takuya
PRO
May 17, 2019
Technology
1
420
「にゃーん」となくWebアプリを作った話 #ゆるWeb札幌
Vue.js + Firebase で作った個人サービスの話。
https://nyan3.tacck.net/
Kihara, Takuya
PRO
May 17, 2019
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
Flutter を始めよう! - Flutter の開発現場から
tacck
PRO
0
66
GitHub Actions で Flutter アプリの CI/CD をやってます #ゆるWeb札幌
tacck
PRO
0
110
ゆるWeb勉強会@札幌 #29 #ゆるWeb札幌
tacck
PRO
0
120
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
420
はじめまして GoLang #cm_sapporo_study
tacck
PRO
0
120
ゆるWeb勉強会@札幌 #28 #ゆるWeb札幌
tacck
PRO
0
76
AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌
tacck
PRO
0
110
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
1
850
Amplify Gen2 Deep Dive / How to convey backend types to the frontend #30DaysOfAmplify
tacck
PRO
0
66
Other Decks in Technology
See All in Technology
With Devin -AIの自律とメンバーの自立
kotanin0
2
790
Kiro Hookを Terraformで検証
ao_inoue
0
140
AI工学特論: MLOps・継続的評価
asei
10
2k
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
180
新規事業におけるAIリサーチの活用例
ranxxx
0
170
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
120
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
4
1.7k
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
280
今日からあなたもGeminiを好きになる
subaruhello
1
650
[MIRU2025]Preference Optimization for Multimodal Large Language Models for Image Captioning Tasks
keio_smilab
PRO
0
100
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.8k
生成AIを活用した野球データ分析 - メジャーリーグ編 / Baseball Analytics for Gen AI
shinyorke
PRO
1
230
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Building a Scalable Design System with Sketch
lauravandoore
462
33k
BBQ
matthewcrist
89
9.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Speed Design
sergeychernyshev
32
1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Bash Introduction
62gerente
613
210k
Transcript
ΏΔ8FCษڧձ!ࡳຈ @tacck ʮʹΌʔΜʯͱͳ͘ 8FCΞϓϦΛ࡞ͬͨ 2019/05/11 7VFKT 'JSFCBTF
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ୭ • ໊લ tacck • ࣄ Vue.jsΛʮͬͯͶʯͱ ؙ͛͢Δਓ
• ͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBO
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBO • ࡞ͬͨͷͷհ • Firebaseͷͬ͘͟Γ֓ཁ • ίʔυͷհ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBOը໘
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBOը໘
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'JSFCBTFͱ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ͦͦ • FirebaseΛฉ͍ͨ͜ͱ͋Δਓ? ✋
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ͦͦ • FirebaseΛͬͨ͜ͱ͋Δਓ?
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'JSFCBTFͱ • mBaaSͱݺΕΔαʔϏε • ϞόΠϧ͚ͷόοΫΤϯυػೳΛఏڙͯ͘͠ΕΔͷɻ ( Mobile Backend
as a Service ) • ϞόΠϧ͚ͱ͋Δ͕ɺJavaScriptͰར༻Ͱ͖Δػೳ͍͔ͭ͋͘Δɻ • ແྉར༻ͦͦ͑͜͜Δɻ (ࠓճઆ໌͢ΔϑϩϯτΤϯυ͚ͷػೳɺແྉར༻͕͋Δɻ)
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL N#BB4ͷΧόʔൣғ Πϯϑϥ όοΫΤϯυ ϑϩϯτΤϯυ ϞόΠϧΞϓϦ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL Πϯϑϥ όοΫΤϯυ N#BB4ͷΧόʔൣғ ϑϩϯτΤϯυ ϞόΠϧΞϓϦ ͜ͷ͘Β͍໘Λݟͯ͘ΕΔ (όοΫΤϯυͷҰ෦ ࣗͰ࣮Մೳ)
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'JSFCBTFͰͰ͖Δ͜ͱ ओʹϑϩϯτΤϯυͰ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ओͳ'JSFCBTFͷػೳ • Πϯϑϥ • Hosting / WebαʔόͱσΟεΫྖҬ •
HTMLɺCSSɺJSͳͲͷ੩తϑΝΠϧΛ͙͢ʹσϓϩΠՄೳɻ • Functions / όοΫΤϯυػೳ • Node.jsͰόοΫΤϯυػೳΛ࣮Մೳɻ • ࣗͰ࣮͢ΔͷͰΠϯϑϥଆͷػೳͱͳΔɻ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ओͳ'JSFCBTFͷػೳ • όοΫΤϯυ • Authentication / ೝূ •
EmailɺTwitterɺGoogle AccountɺͳͲ͑Δೝূػೳɻ • Cloud Firestore / σʔλϕʔε • NoSQLܕͷσʔλϕʔεͱͯ͠ར༻Մೳɻ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL Hosting Functions Firebase Local Hosting Functions Authentication Firestore
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL Hosting Functions Firebase Local Hosting Functions σϓϩΠ Authentication
Firestore
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL Hosting Functions Firebase WebαΠτ API Authentication Firestore SDKͰར༻
σϓϩΠྃͨ͠Β ͙͢ʹར༻Մೳ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBOͷ߹ • FirebaseػೳͰ͍ͬͯΔ͜ͱ • Hosting • Functions (GCPͷײੳͱͷΓͱΓ)
• Cloud Firestore (ੳ݁ՌͷΈอ࣋) • ֎෦ • GCP Cloud Natural Language API (Functionsܦ༝ͷײੳ) ※ແྉͷ߹FunctionsGoogleͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍ • Google Analytics • Google AdSense
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBO ɹͷத
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL /ZBO/ZBO/ZBOͷ߹ • FirebaseػೳͰ͍ͬͯΔ͜ͱ • Hosting • Functions (GCPͷײੳͱͷΓͱΓ)
• Cloud Firestore (ੳ݁ՌͷΈอ࣋) • ֎෦ • GCP Cloud Natural Language API (Functionsܦ༝ͷײੳ) • Google Analytics • Google AdSense ※ແྉͷ߹FunctionsGoogleͷαʔϏεͱ͔͠௨৴Ͱ͖ͳ͍ ͜ͷ͋ͨΓͷ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL )PTUJOH 7VFKT • ίʔυΛͬ͘͟Γ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'VODUJPOT /PEFKT • ίʔυΛͬ͘͟Γ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ڥ • ։ൃ൛ →खݩͰಈ͔͠ͳ͕Βਵ࣌֬ೝ • εςʔδϯά൛ →Firebase্Ͱఆ௨Γʹಈ͔͘ͷ֬ೝ •
ϦϦʔε൛ →ϦϦʔε!
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL )PTUJOH 7VFKT • ڥΛຯʹ͍͚ • “config/dev.env.js”, “build/webpack.dev.conf.js” /
։ൃ൛ • “config/stg.env.js”, “build/webpack.stg.conf.js” / εςʔδϯά൛ • “config/prod.env.js”, “build/webpack.prod.conf.js” / ϦϦʔε൛ • ։ൃ൛Λ͏߹ →ϩʔΧϧͰ “yarn dev” ࣮ߦ • εςʔδϯά൛Λ͏߹ →ϩʔΧϧͰ “yarn build && yarn deploy” ࣮ߦ • ϦϦʔε൛Λ͏߹ →ϩʔΧϧͰ “yarn rel-build && yarn rel-deploy” ࣮ߦ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 'VODUJPOT /PEFKT • ڥมΛຯʹ͍͚ …͔͕ͨͬͨɺएׯ໘ɻ • ։ൃ൛Λ͏߹ →ϩʔΧϧͰ
“npm run serve” ࣮ߦ • εςʔδϯά൛Λ͏߹ →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn deploy” ࣮ߦ • ϦϦʔε൛Λ͏߹ →Functionsͷ “config”ઃఆ && ϩʔΧϧͰ “yarn rel-deploy” ࣮ߦ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ·ͱΊ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ·ͱΊ • Vue.js + Firebase Ͱ ʮʹΌʔΜʯͱͳ͘WebΞϓϦΛ࡞ͬͨɻ •
Firebase Λ͏ͱɺ ؆୯ʹϑϩϯτΤϯυத৺ͷαʔϏεΛ࡞ΕΔɻ • ڥͷ͍͚ Vue.js + Firebase ͰͰ͖Δɻ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ·ͱΊ • Vue.js ͷίϯϙʔωϯτͳͲͷߏɺ ϦϑΝΫλͷ༨͋Γɻ • ͦͦɺVue CLI
3 Ͱ࡞Γ͍ͨ͠ɻ • ڥͷઃఆ͍͚ɺ ͪΌΜͱཧɾखॱԽ͓͖͍ͯͨ͠ɻ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL 13
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP 20195݄30 () ։࠵ܾఆ!!!
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP Monaca ͱ? → HTML/CSS/JavaScriptͰ ɹεϚϗΞϓϦΛ࡞ΕΔ ɹϓϥοτϑΥʔϜ
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP ڵຯͷ͋Δํ ӈͷQRίʔυΛνΣοΫ!!
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL ΏΔ8FCษڧձ XJUI.POBDB6(JO4BQQPSP ٸื: ɹ͜ͷษڧձͰ ɹൃදͯ͘͠ΕΔਓ! 20 1໊ /
LT(5) 1໊
ΏΔ8FCษڧձ!ࡳຈΏΔ8FCࡳຈ !UBDDL FOE