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.7k
ブラウザで一緒に音楽をつくる
オンライン同期可能なシーケンサーを作る話
nishaya
March 30, 2018
Tweet
Share
More Decks by nishaya
See All by nishaya
Webで音楽を奏でる
nishaya
0
5.7k
そのSPA、本当に必要ですか?
nishaya
0
3.1k
ES.next — 20年目のECMAScriptに向けて
nishaya
0
1.1k
Other Decks in Technology
See All in Technology
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
210
Vos logs méritent mieux que la config par défaut
lyrixx
2
410
OpenTelemetry実践 はじめの一歩
taxin
0
330
期待しすぎずに取り組む両面 TypeScript
shozawa
4
540
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
340
任意コード実行の原理
ffri
0
190
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
290
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
870
オブジェクト指向宗教史
tanakahisateru
14
12k
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
17
3.2k
業務で使えるかもしれない…!?GitHub Actions の Tips 集 / CI/CD Test Night #7
ponkio_o
PRO
24
7.2k
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
1
700
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
91
13k
Typedesign – Prime Four
hannesfritz
36
2k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
For a Future-Friendly Web
brad_frost
170
8.9k
Music & Morning Musume
bryan
39
5.5k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
How to name files
jennybc
62
92k
Scaling GitHub
holman
456
140k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
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