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
2k
ブラウザで一緒に音楽をつくる
オンライン同期可能なシーケンサーを作る話
nishaya
March 30, 2018
Tweet
Share
More Decks by nishaya
See All by nishaya
Webで音楽を奏でる
nishaya
0
6.1k
そのSPA、本当に必要ですか?
nishaya
0
3.4k
ES.next — 20年目のECMAScriptに向けて
nishaya
0
1.3k
Other Decks in Technology
See All in Technology
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
22k
LLM時代の検索
shibuiwilliam
2
170
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
360
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
Claude Code に プロジェクト管理やらせたみた
unson
6
4.1k
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
MobileActOsaka_250704.pdf
akaitadaaki
0
130
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
110
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Site-Speed That Sticks
csswizardry
10
690
The Cult of Friendly URLs
andyhume
79
6.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
We Have a Design System, Now What?
morganepeng
53
7.7k
4 Signs Your Business is Dying
shpigford
184
22k
BBQ
matthewcrist
89
9.7k
A Tale of Four Properties
chriscoyier
160
23k
Embracing the Ebb and Flow
colly
86
4.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Music & Morning Musume
bryan
46
6.6k
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