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
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.5k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
170
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
200
AIエージェント入門
minorun365
PRO
31
17k
分解して理解する Aspire
nenonaninu
2
1k
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
610
Amazon Aurora のバージョンアップ手法について
smt7174
2
140
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
82k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
630
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Navigating Team Friction
lara
183
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Designing Experiences People Love
moore
140
23k
A Philosophy of Restraint
colly
203
16k
How to Ace a Technical Interview
jacobian
276
23k
Visualization
eitanlees
146
15k
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ʹ͚͍ۙͮͯ͘ॴଘɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ