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
vuexを使ってみなかった話
Search
atsushiss15
March 17, 2017
Technology
2
1.3k
vuexを使ってみなかった話
atsushiss15
March 17, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
JavaにおけるNull非許容性
skrb
2
2.6k
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
380
OPENLOGI Company Profile for engineer
hr01
1
20k
AIエージェント入門
minorun365
PRO
32
18k
クラウド食堂とは?
hiyanger
0
120
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
190
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
690
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
220
php-conference-nagoya-2025
fuwasegu
0
150
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
100
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Raft: Consensus for Rubyists
vanstee
137
6.8k
It's Worth the Effort
3n
184
28k
Become a Pro
speakerdeck
PRO
26
5.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Agile that works and the tools we love
rasmusluckow
328
21k
Transcript
WVFYΛͬͯΈͳ͔ͬͨ
ࣗݾհ !BUTVTIJTTʢ;͔͡Θ͋ͭ͠ʣ גࣜձࣾϓϨΠυΤϯδχΞ ৽ଔ̍
ࠓ͓͢͠Δ͜ͱ ϑϩϯτΤϯυͷঢ়ଶཧʹWVFYͳΜ͔Θͣ ࣗલͰ؆қ'MVYతͳ࣮Λͨ͠ํ͕ྑ͔ͬͨ
ϑϩϯτΤϯυͷঢ়ଶཧʹWVFYͳΜ͔Θͣ ࣗલͰ؆қ'MVYతͳ࣮Λͨ͠ํ͕ྑ͔ͬͨ ࠓ͓͢͠Δ͜ͱ
ϑϩϯτΤϯυͷঢ়ଶཧʹWVFYͳΜ͔Θͣ ࣗલͰ؆қ'MVYతͳ࣮Λͨ͠ํ͕ྑ͔ͬͨ ࠓ͓͢͠Δ͜ͱ ঢ়ଶཧʹWVFYʢ'MVYʣ͕͍͍͚ͨͲɺ աڈͷࢿ࢈͋Δ͠ɺ͍͖ͳΓಋೖ͢ΔͷେมͳͷͰ ࣗલͰ؆қ'MVYతͳ࣮Λͯ͠Έͨ
ܦҢ ܥͷ͔࣌Β7VFKTͰϓϩμΫτΛ࡞͍ͬͯ·͢ IUUQTLBSUFJP
ܦҢ ։ൃॳظػೳগͳ͔ͬͨͷͰ ঢ়ଶཧϩδοΫ֤ίϯϙʔωϯτͰ͍݁ͯͨ͠
ܦҢ ͱ͜Ζ͕ߴػೳԽʹͬͯίϯϙʔωϯτؒͰ ঢ়ଶΛڞ༗͠ͳ͚Ε͍͚ͳ͍έʔε͕૿͖͑ͯͨ
ܦҢ ࠷ॳQSPQT&WFOU&NJUUFSͰؤு͍ͬͯͨ ʢ࣌ܥΛ͍ͬͯͨͷͰEJTQBUDICSPBEDBTUͳͲۦʣ
ܦҢ ͔͠͠ɺવͷΑ͏ʹ ঢ়ଶཧͷෳࡶԽɺίϯϙʔωϯτಉ࢜ͷີ݁߹ ͱ͍͕ͬͨੜ࢝͡ΊΔ
ܦҢ ԿʹΑͬͯঢ়ଶ͕มߋ͞Εͨͷ͔͔ΓͮΒ͍ Өڹൣғ͕ෆಁ໌ͳͷͰվम͘͠
ܦҢ ԿʹΑͬͯঢ়ଶ͕มߋ͞Εͨͷ͔͔ΓͮΒ͍ Өڹൣғ͕ෆಁ໌ͳͷͰվम͘͠ Ͳ͏͢Ε͍͍ͷʁ
ܦҢ ͦ͏ͩɺ4UPSFύλʔϯΛऔΓೖΕΑ͏
Γ͍ͨ͜ͱ w ෳίϯϙʔωϯτͰঢ়ଶΛڞ༗͢Δ͜ͱ w 7JFXͱσʔλपΓͷϩδοΫΛ͢Δ͜ͱ
Γ͍ͨ͜ͱ w ෳίϯϙʔωϯτͰঢ়ଶΛڞ༗͢Δ͜ͱ w 7JFXͱσʔλपΓͷϩδοΫΛ͢Δ͜ͱ 'MVYΞʔΩςΫνϟ
'MVYΞʔΩςΫνϟͱ ࠷େͷಛσʔλͷྲྀΕΔํΛ୯Ұํ ʹݶఆ͍ͯ͠Δͱ͜Ζ 3FEVYͳͲΠϯεύΠΞͷϥΠϒϥϦ͕ز͔ͭ͋Δ
7VFKTʹWVFYͳΔͷ͕Ͱ͖͍ͯͨʂ
WVFYͱ ొਓ̏ͭ "DUJPOTɿ ඇಉظॲཧ .VUBUJPOΛίϛοτ .VUBUJPOTɿ 4UPSFͷঢ়ଶʢTUBUFʣΛมߋ 4UBUFɿ ৴པͰ͖Δ།Ұͷใݯͱͯ͠ͷঢ়ଶ 'MVYͷࢥΛ౿ऻͨ͠7VFKTಛԽͷঢ়ଶཧύλʔϯ
IUUQTWVFYWVFKTPSHKBJOUSPIUNM WVFYͱ
WVFYͱ
WVFYͱ ίϯϙʔωϯτ͔ΒTUBUFΛ͏
WVFYͱ ΞΫγϣϯΛEJTQBUDI
WVFYͰͰ͖Δ͜ͱ w ঢ়ଶͷڞ༗ w 7JFXͱϩδοΫͷ w ঢ়ଶͷมߋΛ࣮֬ʹ͍͔͚Δ͜ͱ͕Ͱ͖Δ ʢWVFEFWUPPMT͕͑Δɻศརʂʣ w 'MVY࣮ΛϥΠϒϥϦ͕ڧ੍ͯ͘͠ΕΔͷͰ
σόοάɾίʔυϨϏϡʔͳͲ৭ʑָʹͳΔ
WVFYͰͰ͖Δ͜ͱ WVFEFWUPPMT
ੋඇͱಋೖ͍ͨ͠ʂ
͔͠͠ʜ
WVFYΛಋೖ͢Δࡍͷো w طଘͷࢿ࢈ͷஔ͖͕͑ࠔ w ঢ়ଶΛ࣋ͬͨEJSFDUJWFVUJM͕େྔʹ͋ͬͨ w ෳࡶԽ͍ͯͨ͠ίϯϙʔωϯτͷϩδοΫͱঢ়ଶ w ֶशίετతͳଆ໘ w
ϑϩϯτΤϯυͷઐՈҎ֎։ൃʹՃΘΔͷͰഅ ࣛʹͳΒͳ͍ʜ
ͦ͜Ͱ·ͣϓϨʔϯͳ+BWBTDSJQUͰ 'MVYϥΠΫͳͷΛ࣮ͯ͠ΈΔ͜ͱʹ
IUUQTKQWVFKTPSHWHVJEFTUBUFNBOBHFNFOUIUNM l7VFΠϯελϯε୯७ʹEBUBΦϒδΣΫτͷΞΫηεΛϓϩ Ωγ͠·͢ɻͦΕΏ͑ʹɺෳͷΠϯελϯεʹΑͬͯڞ༗͞Ε͏Δ ঢ়ଶ͕͋Δ߹ɺγϯϓϧʹಉҰͷঢ়ଶΛڞ༗͢Δ͜ͱ͕Ͱ͖·͢z ʢ7VFKTެࣜΑΓҾ༻ʣ Ͳ͏ͬͯ࡞͔ͬͨ
IUUQTKQWVFKTPSHWHVJEFTUBUFNBOBHFNFOUIUNM 7VFΠϯελϯε୯७ʹEBUBΦϒδΣΫτͷΞΫηεΛϓϩ Ωγ͠·͢ɻͦΕΏ͑ʹɺෳͷΠϯελϯεʹΑͬͯڞ༗͞Ε͏Δ ঢ়ଶ͕͋Δ߹ɺγϯϓϧʹಉҰͷঢ়ଶΛڞ༗͢Δ͜ͱ͕Ͱ͖·͢ ͜ͷߟ͑ํΛ֦ு͍͚ͯͩ͘͠ Ͳ͏ͬͯ࡞͔ͬͨ
ొਓ4UBUFͱ"DUJPOͷ̎छྨ Ͳ͏ͬͯ࡞͔ͬͨ
͜ͷ4UPSFΛ֤ίϯϙʔωϯτͷEBUBϓϩύςΟʹ࣋ͨͤΔ Ͳ͏ͬͯ࡞͔ͬͨ
͜ΕͰ४උྃ
ϢʔβʔͷೖྗͰ4UBUFΛߋ৽͢Δ Ͳ͏ͬͯ࡞͔ͬͨ
4UBUFͷมߋΛ7JFXʹөͤ͞Δ Ͳ͏ͬͯ࡞͔ͬͨ
4UBUFͷมߋΛτϦΨʹผͷॲཧΛߦ͏ Ͳ͏ͬͯ࡞͔ͬͨ
ਤʹͯ͠ΈΔ
Shared State Actions Store Component Component $BMM"DUJPO 5SJHHFS6QEBUF $IBOHF4UBUF Ͳ͏ͬͯ࡞͔ͬͨ
ʢ0QUJPOBMʣ&WFOU&NJUUFSͰΠϕϯτΛڞ༗ 5SJHHFS6QEBUF Shared State Actions Store Component Component $BMM"DUJPO $IBOHF4UBUF
Events &NJU&WFOU Ͳ͏ͬͯ࡞͔ͬͨ
ӡ༻ϧʔϧ ͳΔ͘ίϯϙʔωϯτ͔Β4UPSFͷঢ়ଶΛߋ৽͠ͳ͍ Ͳ͏ͬͯ࡞͔ͬͨ
طଘͷࢿ࢈ͷ߹্ ʮͳΔ͘ʯʹͱͲΊ͟ΔΛಘͳ͔ͬͨ
࣮ࡍ͜Μͳײ͡ʹʜ
͜ͷύλʔϯͰ͖Δ͜ͱ w ঢ়ଶʢ4UBUFʣͷڞ༗ w 7JFXͱϩδοΫͷ
͜ͷύλʔϯͰͰ͖ͳ͍͜ͱ w σʔλߋ৽ϑϩʔͷڧ੍ w ঢ়ଶͷมߋΛ࣮֬ʹ͏ ʢWVFEFWUPPMT͑ͳ͍ʣ
࣮ࡍʹಠࣗͰ'MVYϥΠΫͳ ঢ়ଶཧύλʔϯΛ࣮ͯ͠ΈͯͲ͏͔ͩͬͨ
࣮ࡍͲ͏͔ͩͬͨ ॳΓ͔ͨͬͨ͜ͱ֓Ͷ࣮ݱͰ͖ͨ
࣮ݱͰ͖ͳ͔ͬͨ෦ӡ༻ͰΧόʔ ࣮ࡍͲ͏͔ͩͬͨ
ࢥͬͨ͜ͱᶃ ϝϯςφϯεੑΛߟ͑Ε'MVYత Ͱ͋Δ͜ͱॏཁɻ ͨͩ͠ɺͦΕΛϥΠϒϥϦͰ࣮ݱ ͢Δ͔։ൃνʔϜͷจԽͰ࣮ݱ͢ Δ͔ʹɺେࠩͳ͍ͷͰʁ
ϝϯςφϯεੑΛߟ͑Ε'MVYత Ͱ͋Δ͜ͱॏཁɻ ͨͩ͠ɺͦΕΛϥΠϒϥϦͰ࣮ݱ ͢Δ͔։ൃνʔϜͷจԽͰ࣮ݱ͢ Δ͔ʹɺେࠩͳ͍ͷͰʁ EJTQBUDIͯ͠ɺDPNNJUͯ͠ʜ Έ͍ͨͳͷUPPNVDI͔ ࢥͬͨ͜ͱᶃ
7VFKTͷख͕͖ܰ͞ ࢥͬͨ͜ͱᶄ
ࢥͬͨ͜ͱᶅ اۀจԽ ૣ͍։ൃεϐʔυ յ͢લఏͰ࡞Δ ਐḿͷϓϩμΫτ ʢٕज़ελοΫ༷େ͖͘มΘΓಘΔʣ ϛχϚϜͰ൚༻తͳͷΛ࡞ΕͨͷͰ ͜͏͍ͬͨͰྑ͔͔ͬͨʁ
ಠࣗύλʔϯͰ͠Β͘։ൃͯ͠Έͨॴײ w ࠓͷͱ͜Ζී௨ʹυϥΠϒ͍ͯ͠Δ w ֶशίετ͕͔͔Βͳ͍ͷ(PPE w ϥΠϒϥϦΛհ͞ͳ͍ͷͰݟ௨͠ྑ w ٯʹֶͼΛಘΒΕΔ͜ͱ w
WVFEFWUPPMTͬͯ4UPSFΛσόοάͰ͖ͳ͍ w ࣮ϨϏϡʔ͕ਓʹґଘ w ίϯϙʔωϯτ͔Β4UPSFͷTUBUFΛॻ͖͑ͯ ͠·͍ͬͯΔίʔυ͕૿͖͑ͯͯσόοάͮ͠Β͘ 1SPT $POT
݁ طଘͷࢿ࢈Λߟྀ͠ͳ͍͍ͯ͘ͷͰ͋ΕɺWVFY ಋೖ͍ͯͬͨ͠ํ͕͍͍ͱࢥ͏ɻ ͱֶ͍͑शίετΛׂ͔ͣʹϛχϚϜͷ࣮͕͋Ε ेͱ͍͏߹ɺಠࣗͰ࡞ͬͯΈΔͷ͋Γɻ
݁ ͪͳΈʹʜ ,"35&ܥ͔ΒܥҠߦ͍ͯ͠Δ࠷தͳͷͰɺ ৽͘͠࡞Δ෦͔ΒWVFYʹ͚͍ۙͮͯ͘ॴଘɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ