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
ブラウザで一緒に音楽をつくる
Search
nishaya
March 30, 2018
Technology
0
1.9k
ブラウザで一緒に音楽をつくる
オンライン同期可能なシーケンサーを作る話
nishaya
March 30, 2018
Tweet
Share
More Decks by nishaya
See All by nishaya
Webで音楽を奏でる
nishaya
0
5.9k
そのSPA、本当に必要ですか?
nishaya
0
3.3k
ES.next — 20年目のECMAScriptに向けて
nishaya
0
1.2k
Other Decks in Technology
See All in Technology
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
540
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
150
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
160
レンジャーシステムズ | 会社紹介(採用ピッチ)
rssytems
0
150
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
320
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
200
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
110
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
150
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す!?~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
1
110
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
Rails Girls Zürich Keynote
gr2m
94
13k
KATA
mclloyd
29
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Scaling GitHub
holman
458
140k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Code Reviewing Like a Champion
maltzj
520
39k
Bash Introduction
62gerente
608
210k
Music & Morning Musume
bryan
46
6.2k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Six Lessons from altMBA
skipperchong
27
3.5k
Gamification - CAS2011
davidbonilla
80
5.1k
Transcript
ϒϥβͰ(Ұॹʹ)ԻָΛͭ͘Δ ɹ SpeeeKaigi 2018/03/30 ೋࣾ୩ ߉༎ @nishaya 1
ࣗݾհ • ೋࣾ୩ ߉༎ • GitHub: @nishaya • WebΞϓϦέʔγϣϯΤϯδχΞ •
(ג) Speee ϓϩδΣΫτਪਐࣨ/LM 2
લճ·Ͱͷ͋Β͢͡ γϯηαΠβʔΛ࡞ͬͨ1-1 - ϒϥβͰԻΛ໐Β͢ - ՝: Web Audio APIͷ੍ޚʹReact/ ReduxΛ͏
1-1 ReactͰγϯηαΠβʔΛ࡞ͬͨ - Speee DEVELOPER BLOG h4p:/ /tech.speee.jp/entry/2017/04/06/100000 3
લճ·Ͱͷ͋Β͢͡ ύλʔϯγʔέϯα࡞ͬͨ1-2 - ϒϥβʹԻָΛԋ͍ͤͨ͞ - ͍ͭͰʹαϯϓϥʔΛଂͨ͠ - ՝: λΠϛϯά੍ޚ 1-2
ReactͰύλʔϯγʔέϯαΛ࡞ͬͨ - Speee DEVELOPER BLOG h5p:/ /tech.speee.jp/entry/2017/10/26/105100 4
લճ·Ͱͷ͋Β͢͡ FMԻݯ࡞ͬͨ1-3 1-3 ࡞ΕΘ͔ΔɺFMԻݯ - Իָ͕Ͱ͖ͳ͍ h(p:/ /nomusiclife.hatenablog.jp/entry/2017/12/14/194428 5
ࠓճղܾ͍ͨ͠՝ • ը໘্ͰۂΛΤσΟοτͰ͖ΔΑ͏ʹ͍ͨ͠ • ࡞ͬͨۂΛΫϥυ্ʹࣗಈอଘ͍ͨ͠ 6
Ͱ͖ͨ 7
DEMO 8
༻ٕͨ͠ज़ • React/Redux • TypeScript • Firebase(Cluod Firestore/Auth/Hos<ng) • άϦουSVG
as JSX 9
͓͓·͔ͳߏ • ۂσʔλΛReduxͷstateʹஔ͖ɺmapStateToPropsͰReact componentʹ͢ • ϊʔτͷฤू(ՃɾআͳͲ)ac6onΛdispatch͠ɺreducerͰ Redux stateΛॻ͖͑Δ 10
11
Cluod Firestore • ۂσʔλͷอଘઌCloud Firestore(2018/03/30࣌Ͱϕʔ λ൛) • ࠷ۙFirebaseʹՃ͞ΕͨɺReal9me DatabaseʹΘΔ৽͍͠ σʔλϕʔε2-1
2-1 σʔλϕʔεΛબ: Cloud Firestore ·ͨ Real3me Database | Firebase h9ps:/ /firebase.google.com/docs/database/rtdb-vs-firestore 12
Firestoreͷσʔλಉظ • Reduxͷstateʹ͋Δۂσʔλʹมߋ͕͋ͬͨΒߋ৽͠Α͏ͱࢥ ͍͕ͬͯͨ... 13
Snapshot Listener • υΩϡϝϯτͷߋ৽Λɺσʔλ͕όοΫΤϯυʹૹ৴͞ΕΔ લʹݕ͢ΔͨΊͷΈ2-2 • Op&mis&c Updates(ָ؍తߋ৽)Λ࣮ݱͰ͖Δ • DBͷอଘ͕ޭ͢Δͱ͍͏લఏͷͱɺUIΛߋ৽͢Δ
2-2 Cloud Firestore ͰϦΞϧλΠϜ ΞοϓσʔτΛೖख͢Δ | Firebase h3ps:/ /firebase.google.com/docs/firestore/query-data/listen 14
• listenerΛઃఆ • ߋ৽͞ΕͨυΩϡϝϯτΛReduxͷstoreʹอଘ 15
• UI͔ΒτϦΨʔ͞ΕͨมߋΛ·ͣϩʔΧϧʹ͋ΔυΩϡϝϯτ ʹө • มߋόοΫΤϯυʹૹ৴͞ΕΔલʹϩʔΧϧͷυΩϡϝϯτ ʹରͯ͠ߦΘΕɺଈ࣌݁Ռ͕onSnapshotͷίʔϧόοΫʹΑͬ ͯ௨͞ΕΔ 16
Op#mis#c Updates • Firestore documentʹsnapshot listener Ληοτ • UIૢ࡞ΛىʹdocumentΛߋ৽ •
onSnapshotͷίʔϧόοΫͰReduxͷ stateΛߋ৽ • componentͷpropsʹมߋ͕ • શ͕ͯऴΘͬͨޙɺඇಉظʹόοΫΤ ϯυ͕update͞ΕΔ 17
෭࣍తʹΫϥΠΞϯτؒͷಉظ͕Ͱ͖ΔΑ͏ʹͳͬͨ • onSnapshotsnapshot listenerΛઃఆͨ͠υΩϡϝϯτʹϦϞ ʔτͰߋ৽͕ߦΘΕͨ߹ʹτϦΨʔ͞ΕΔ • ผΫϥΠΞϯτ͕listen͍ͯ͠ΔυΩϡϝϯτʹมߋΛߦ͏ͱɺ όοΫΤϯυʹมߋ͕౸ୡͨ͠ࡍʹߋ৽͞ΕͨυΩϡϝϯτͷ ༰͕ͦͷΫϥΠΞϯτʹ௨͞ΕΔ •
ಉظํɺ·ͨෳΫϥΠΞϯτؒͰՄೳ 18
19
DEMO 20
ࠓޙͷల։ • ϒϩοΫΛΈ߹ΘͤͯΞϨϯδͰ͖ΔΑ͏ʹ͢Δ • ΠϯτϩɺAϝϩɺBϝϩɺαϏ... • બͰ͖ΔԻݯํࣜΛՃ • όοΫΤϯυΛGraphQLͰ࣮͢Δ 21
ॴײ • FirestoreΛ͏͜ͱͰɺಛผͳ࣮ͳ͠ʹϚϧνΫϥΠΞϯτ ؒಉظ͕࣮Ͱ͖Δ • ͨͩ͠ɺஅଓతͳมߋͷಉظͰrate limitʹҙ͢Δඞཁ͋ Γ 22
ॴײ • ۂσʔλͷߏ͕ͦΕͳΓʹෳࡶͩͬͨͷͰɺTypeScriptͷܕ ͚͕ޮԽʹҰങͬͨ • ReactͰάϥϑΟΧϧ͔ͭΠϯλϥΫςΟϒͳදݱΛ͢Δ߹ɺ SVG as JSXඇৗʹ͍উख͕Α͍ 23
!͓·͚! • Ӆ͠ίϚϯυೖΕͨͷͰ୳ͯ͠Έ͍ͯͩ͘͞ 24