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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
boiyama
March 30, 2018
Programming
1.7k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
チームをCQRS
We Are JavaScripters! @17th
https://wajs.connpass.com/event/81022/
の発表資料です。
boiyama
March 30, 2018
More Decks by boiyama
See All by boiyama
Reproのビジネスサイドを支えるJS
boiyama
0
190
バックオフィスに行ったソフトウェアエンジニアの業務効率化事例
boiyama
1
290
2018年、IE6対応サイトを作る
boiyama
4
1k
ヤバいESLint/TSLintルール作っちゃったかもしれない
boiyama
0
1.5k
フロントエンドのサーバーレス SSR編
boiyama
0
730
Serverless for Front-end Server-Side Rendering
boiyama
1
140
Learning Elm in JS
boiyama
1
570
JSでElmを学ぶ
boiyama
0
120
フロントエンドのサーバーレス SPA編
boiyama
1
1.1k
Other Decks in Programming
See All in Programming
React本体のコードリーディング
high_g_engineer
1
160
片田舎のおっさん、 Swift Buildのダイアモンド問題解決の不具合修正PRを出すが、解決方法がキャッシュをしないようにすることであり、ビルド時間が伸びると言われてマージされないので高速化もする/swiftbuild
yimajo
0
320
AI駆動開発にグラフDBを重ねてみた
satoshi256kbyte
2
410
My Marp Sample
sinoue0108
0
130
AIの中の人になってみる
htkym
0
140
「人を評価する AI」の設計と実装
ryoyanara
0
260
私のClaude Code活用法 (個人開発編) - PHPerKaigi mini #4(2026/08/24)
panda_program
1
190
「寝てても仕事が進む」Claude Codeで組む第二の脳
tomoyafujita2016
0
370
業務時間外もAIに働いてもらう話
colorful12
2
9k
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
freee
PRO
0
530
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
1
2k
Gmail/Google DriveをトリガーにAIエージェントを動かそう! / Run AI agents with Gmail/Google Drive as triggers!
har1101
3
460
Featured
See All Featured
The Language of Interfaces
destraynor
162
27k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
550
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Facilitating Awesome Meetings
lara
57
7.1k
Rails Girls Zürich Keynote
gr2m
96
14k
A better future with KSS
kneath
240
18k
Are puppies a ranking factor?
jonoalderson
2
3.9k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
67
57k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.6k
From π to Pie charts
rasagy
0
330
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.8k
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 ͷؔΛ࣮ߦͰ͖ΔͷͰɺෳࡶͳϩδοΫॻ͚Δɻ·ͩύϒϦοΫϓϨϏϡʔ
ͱ͍͏ໝ