Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
170
バックオフィスに行ったソフトウェアエンジニアの業務効率化事例
boiyama
1
260
2018年、IE6対応サイトを作る
boiyama
4
980
ヤバい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
97
フロントエンドのサーバーレス SPA編
boiyama
1
1.1k
Other Decks in Programming
See All in Programming
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
cloverrose
2
350
ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party
k0kubun
0
260
Findy AI+の開発、運用におけるMCP活用事例
starfish719
0
1.7k
Context is King? 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
rkaga
10
1.4k
AIコーディングエージェント(Manus)
kondai24
0
210
perlをWebAssembly上で動かすと何が嬉しいの??? / Where does Perl-on-Wasm actually make sense?
mackee
0
120
AIの誤りが許されない業務システムにおいて“信頼されるAI” を目指す / building-trusted-ai-systems
yuya4
6
3.9k
認証・認可の基本を学ぼう後編
kouyuume
0
250
Canon EOS R50 V と R5 Mark II 購入でみえてきた最近のデジイチ VR180 事情、そして VR180 静止画に活路を見出すまで
karad
0
130
ゆくKotlin くるRust
exoego
1
150
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
tomokon
0
140
Developing static sites with Ruby
okuramasafumi
0
320
Featured
See All Featured
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
190
My Coaching Mixtape
mlcsv
0
13
Google's AI Overviews - The New Search
badams
0
870
Building the Perfect Custom Keyboard
takai
1
660
Paper Plane
katiecoart
PRO
0
44k
We Are The Robots
honzajavorek
0
120
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
43
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
0
75
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Automating Front-end Workflow
addyosmani
1371
200k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
710
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 ͷؔΛ࣮ߦͰ͖ΔͷͰɺෳࡶͳϩδοΫॻ͚Δɻ·ͩύϒϦοΫϓϨϏϡʔ
ͱ͍͏ໝ