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
チームをCQRS
Search
boiyama
March 30, 2018
Programming
1
1.6k
チームをCQRS
We Are JavaScripters! @17th
https://wajs.connpass.com/event/81022/
の発表資料です。
boiyama
March 30, 2018
Tweet
Share
More Decks by boiyama
See All by boiyama
Reproのビジネスサイドを支えるJS
boiyama
0
180
バックオフィスに行ったソフトウェアエンジニアの業務効率化事例
boiyama
1
270
2018年、IE6対応サイトを作る
boiyama
4
990
ヤバいESLint/TSLintルール作っちゃったかもしれない
boiyama
0
1.5k
フロントエンドのサーバーレス SSR編
boiyama
0
700
Serverless for Front-end Server-Side Rendering
boiyama
1
110
Learning Elm in JS
boiyama
1
550
JSでElmを学ぶ
boiyama
0
100
フロントエンドのサーバーレス SPA編
boiyama
1
1.1k
Other Decks in Programming
See All in Programming
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
izumin5210
6
1.8k
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
組織で育むオブザーバビリティ
ryota_hnk
0
170
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
230
15年続くIoTサービスのSREエンジニアが挑む分散トレーシング導入
melonps
2
200
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
690
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
3.9k
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
7.4k
Oxlintはいいぞ
yug1224
5
1.3k
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
450
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
50
14k
The SEO identity crisis: Don't let AI make you average
varn
0
240
Believing is Seeing
oripsolob
1
54
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
52k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.6k
Faster Mobile Websites
deanohume
310
31k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
Building Adaptive Systems
keathley
44
2.9k
Skip the Path - Find Your Career Trail
mkilby
0
55
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
49k
Transcript
ν ʔϜ Λ C Q R S 2 0 1
8 . 3 . 3 0 We A re J a v a S c r i p t e r s # 1 7
P ro f i l e • ϑϩϯτΤϯυΤϯδχΞ at PERSOL
• GitHub: boiyaa Twitter: boiyaaaaaa
C Q R S ίϚϯυΫΤϦ શͯͷॲཧίϚϯυʢߋ৽ʣ͔ΫΤϦʢࢀরʣͰɺͦΕͧΕඞཁͳͷ͕ҧ͏͔Β͚ͯߏ͢Δͱ ͍͏ύλʔϯ ߋ৽ॲཧɿ υϝΠϯϩδοΫ༗ σʔλ߹ੑ
ࢀরॲཧɿ υϝΠϯϩδοΫແ ύϑΥʔϚϯεͱ͔ݕࡧͷ͢͠͞ͱ͔
• αʔόʔαΠυͰΑ͘ΘΕΔύλʔϯ • Akka͕༗໊ ߋ৽ ࢀর EventʢߴՄ༻ͳDBʣ Stateʢ߹ͳDBʣ Command
• αʔόʔαΠυ͚ͩͰͷߟ͑ํͰͳ͍ • ReduxͳΜ͔CQRSνοΫͳϑϨʔϜϫʔΫ Event Props Action State ʢAPIͱ͔ ɹLocalStorageͱ͔ʣ
Reducer ߋ৽ ࢀর
ਓͷׂ͜Μͳײ͡Ͱ͚͍ͨͱ͍͏
ϑϩϯτΤϯυͱόοΫΤϯυͷ৬Λ ϑϩϯτΤϯυɿը໘Λ࡞Δ όοΫΤϯυɿσʔλΛ࡞Δ ͱఆٛ͢Δͱɺ
࣮ࡍͷݱͷׂ୲͜͏ͳ͍ͬͯΔ ϑϩϯτΤϯυ୲ऀɿϑϩϯτΤϯυʴΫϥΠΞϯτ αΠυόοΫΤϯυ όοΫΤϯυ୲ऀɿαʔόʔαΠυόοΫΤϯυ
ͱ͍͏ͷ ϑϩϯτΤϯυɹˠɹϑϩϯτΤϯυΤϯδχΞ όοΫΤϯυɹˠɹαʔόʔαΠυΤϯδχΞ ͳΜͰ͜͏ͳͬͯΔʁ
FirebaseͳͲΛ࠾༻ͯ͠ΫϥΠΞϯταΠυʹ΄ͱΜͲ ͷϩδοΫΛ͖࣋ͬͯͨΓ͢Δ ͰͦΕΛαʔόʔαΠυϨϯμϦϯάͨ͠Γ͢Δ ΫϥΠΞϯτͱαʔόʔͰࣄΛ͚Δͷ࣌ʹ ϑΟοτͯ͠ͳ͍ͷͰ
ࠓҰ ϑϩϯτΤϯυɿը໘Λ࡞Δ όοΫΤϯυɿσʔλΛ࡞Δ ʹཱͪฦׂͬͯΛఆ͍ٛͨ͠͠
ը໘Λߏ͢ΔͷࢀরॲཧͱͷΈ߹ΘͤͰɺ ߋ৽ॲཧΠϕϯτϋϯυϥͰߦΘΕΔͱ͍͏͜ͱΛ౿ ·͑Δͱɺ • ը໘ͱɺը໘Λߏ͢ΔͨΊͷࢀরॲཧΛ࡞Δ • ը໘ͷΠϕϯτϋϯυϥͱߋ৽ॲཧΛ࡞Δ ͱ͍͏ײ͡Ͱࣄߋ৽ܥͱࢀরܥͰͰ͖ͦ͏
Event State Event State ը໘ ΫϥΠΞϯτ αʔόʔ όοΫΤϯυ ΤϯδχΞ ϑϩϯτΤϯυ
ΤϯδχΞ ຊདྷͷը໘Λ࡞ΔɾσʔλΛ࡞Δ৬ʹूத
JavaScriptΫϥΠΞϯτɾαʔόʔͲͪΒ࡞ΕΔݴ ޠͳ͚ͩ͋ͬͯɺ JavaScripter྆ଆ͚ͳ͍͜ͱʹ߅͕ແ͍ਓ͕ଟ͍ ͱࢥ͏ ͨͩɺԣஅ͢ΔͷͰɺ֤ͷपลࣝΛநԽ͠ ͨπʔϧαʔϏεΛ׆༻͍ͨ͠
αʔόʔαΠυാͷਓ͚ େͳϑϩϯτΤϯυΤίγεϜͷΩϟονΞοϓͷखؒΛ͔͚ͣʹࡁΉͷ • Nuxt.js: VueϕʔεͰɺΕΔࣄͷଟ͞ͱԱ͑Δࣄͷগͳ͞ͷόϥϯε͕͍͍ • Next.js: Reactϕʔεʹ͔ͯ͠ͳΓԱ͑Δࣄগͳ͘Ͱ͖͍ͯΔ
• Redux: αʔόʔαΠυͰCQRS͍ͬͯΔਓʹೃછΈ͍͢ͱࢥ͏͠ɺӬଓԽ͍ͨ͠σʔλΛ ѻ͏ϑϨʔϜϫʔΫͱͯ͠ • AMP: ΕΔࣄগͳ͍͚ͲԱ͑Δࣄ͕Ұ൪গͳ͍ɻSPAͰͳ͍ͷͰαʔόʔαΠυతʹςϯϓ ϨʔτΤϯδϯʹॻ͚͍͍ͷͰϋʔυϧ͍
ϑϩϯτΤϯυാͷਓ͚ αʔόʔαΠυͷՄ༻ੑύϑΥʔϚϯεΛࣗྗͰ୲อ͢Δͷ͍͠ͷͰɺӡ༻ϋʔυϧͷ͍ͷ • Cloud Firestore: σʔλΛΫϥΠΞϯταʔόʔؒͰಉظ͢Δεέʔϥϒϧͳ NoSQLσʔλϕʔεɻ ͦͦ͜͜ͷΫΤϦػೳʢ!=ͱ͔orͱ͔ͳ͍ʣɻ·ͩϕʔλ •
Cloud Functions for Firebase: Firestore ͷߋ৽ΛτϦΨʔʹ Node.js ͷؔΛ࣮ߦͰ͖ΔͷͰɺෳࡶͳϩδοΫΛॻ͘ॴʹ͑Δɻ • Firebase Hosting: ͱͯ؆୯ʹ੩తϑΝΠϧΛFastlyͷڧྗͳCDNͰ৴Ͱ͖ΔɻυϝΠϯূ໌ॻஶ͘͠؆୯ɻ Cloud FunctionsͷϓϩΩγͰ͖ͯɺαʔόʔαΠυϨϯμϦϯάͨ͠ը໘৴Ͱ͖Δɻ • AWS AppSync: GraphQLͰDynamoDBʢεέʔϥϒϧͳ NoSQLσʔλϕʔεʣElasticsearch ServiceʢϑϧϚωʔδυͳݕ ࡧΤϯδϯʣ͔ΒσʔλऔಘͰ͖ΔαʔϏεͳͷͰɺΫΤϦͱ૬ੑ͕ྑͦ͞͏ɻ Lambda Ͱ Node.js ͷؔΛ࣮ߦͰ͖ΔͷͰɺෳࡶͳϩδοΫॻ͚Δɻ·ͩύϒϦοΫϓϨϏϡʔ
ͱ͍͏ໝ