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
フロントエンドに秩序は戻ったか?
Search
Amagi
January 21, 2017
Technology
15
6.9k
フロントエンドに秩序は戻ったか?
Kyoto.js 12発表スライドです。
https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa
の続編です。
Amagi
January 21, 2017
Tweet
Share
More Decks by Amagi
See All by Amagi
Enchant your website with VFX-JS
fand
0
110
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
530
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.3k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
270
APIs for VJ-ing
fand
1
6.9k
Other Decks in Technology
See All in Technology
Frontier Airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
frontierairlineswithflyagent
0
110
How do i Get in Touch With QuickBooks Payroll Support®️ USA Contact Numbers: Complete 2025 Support Guide
connectquickbooks
0
110
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
810
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
210
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
390
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
220
地図と生成AI
nakasho
0
560
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
370
"Découvrir le Liberland"
rlifchitz
0
130
Digitization部 紹介資料
sansan33
PRO
1
4.6k
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
2
1.1k
Introduction to Bill One Development Engineer
sansan33
PRO
0
270
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
A designer walks into a library…
pauljervisheath
207
24k
It's Worth the Effort
3n
185
28k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Designing Experiences People Love
moore
142
24k
Visualization
eitanlees
146
16k
Producing Creativity
orderedlist
PRO
346
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
IS THE ORDER RESTORED? IS THE ORDER RESTORED? IS THE
ORDER RESTORED? IS THE ORDER RESTORED? IS THE ORDER RESTORED? IS THE ORDER RESTORED? ϑϩϯτΤϯυʹடং͔ͬͨʁ @amagitakayosi
@amagitakayosi
http://developer.hatenastaff.com/entry/2016/12/16/120000 1PEDBTUͬͯ·͢
None
IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!! ࠓ͙͢ొʂ !!!!!!!!!!! !!!!!!!!!! !!!!!!!!!! !!!!!!!!!!! !!!!!!!!!!
None
͜͜ʹ4पͷਤΛషΔ 2016-11-07 ͯͳϒϩά प
ͷ ྺ࢙͋Δ ιʔείʔυ܊
/PEFֶԂࡇͰ͠·ͨ͠
લճͷ͋Β͢͡
+ ॳͷٕज़ελοΫ
ཱ͔ͪͩΔͨͪ
ಓʹվળ w ίʔυׂϦϑΝΫλϦϯά w ϑϨʔϜϫʔΫಋೖ w ςετڥߏங
ίʔυׂ w ैདྷ໊લۭؒͰׂͯ͠ DPODBUͯͨ͠ w $PNNPO+4ܗࣜʹॻ͖͠ CSPXTFSJGZͰϞδϡʔϧԽ
໊લۭؒͰׂͯͨ͠ w ैདྷ໊લۭؒͰׂͯ͠ DPODBUͯͨ͠ w CSPXTFSJGZͰϞδϡʔϧԽ ໊લۭؒʹΑΔϞδϡʔϧཧ
CSPXTFSJGZͰϞδϡʔϧԽ
DPODBUͭͭ͠CVOEMF
Reactಋೖ w ΦϨΦϨ'MVYڥΛ࡞ w ͍ͭͰʹ#BCFMಋೖ
ςετڥߏங w ,BSNB 1IBOUPN+4 w ϒϥβґଘͷίϯϙʔωϯτ ςετՄೳ w MPDBM4UPSBHFΑ͘͏
None
͜ͷτʔΫͰ /PEFGFTUൃදͷ ͦͷޙͬͨ͜ͱΛ հ͠·͢ʂʂʂʂ
·Ͱʹ ͬͨ͜ͱ
20171݄·Ͱʹͬͨ͜ͱ w ίʔυׂ͖ͭͮ w ςετվળ w σϓϩΠϏϧυϓϩηεվળ w ϥΠϒϥϦ·ΘΓඋ w
ΦϨΦϨ'MVYඋ
ͦΕͧΕʹ͍ͭͯ ղઆ͠·͢
Mission 1: SPLIT THE CODE
201511݄·Ͱͷάϥϑ
browserifyཧԼͷ ϑΝΠϧ ϕλॻ͖ϑΝΠϧ
None
20171݄·Ͱͷάϥϑ
৽ن։ൃʹΑΓ ૿͍͑ͯ͘ϑΝΠϧ ׂ͍͍ͩͨྃ
None
TEST THE COMPONENT Mission 2:
JSςετCI·Θ͢Α͏ʹ w ݩʑ1FSMଆ͔͠$*ͯ͠ͳ͔ͬͨ w खݩͰςετ௨Ε0,ͯͨ͠ w +FOLJOTͰ+4ςετ͢ΔΑ͏ʹ
Commit Statusʹ݁ՌΛදࣔ +4ςετ࣮ߦ݁Ռ
ͦͷଞͷςετ w ͪΌΜͱϏϧυͰ͖Δ͔ςετ w &4-JOUςετ w มͳίʔυॻ͍ͯͨΒམͱ͢ w evalͱ͔withͱ͔
&4-JOUςετͷ༷ࢠ
&4-JOUςετͷ༷ࢠ
CIͰຊ൪JS/CSSΛϏϧυ w Ϗϧυ݁ՌΛHJUJHOPSFͨ͠ w EJ⒎ಡΉͷָ͕ʹ w खݩͱຊ൪ͰϏϧυڥม͑Δ w NJOJGZ֎ͯ͠Ϗϧυ࣌ؒॖ w
TPVSDFNBQ͚Δ
bowerग़ w OQNʹ͋ΔͭOQNʹҠ w OQNʹͳ͍߹ w (JU)VC͔ΒΠϯετʔϧ 4)"Ͱόʔδϣϯࢦఆ w
༗ࢤʹΑΔҠ২൛ΛΠϯετʔϧ
None
jQueryUIग़ w EBUFQJDLFSΛQJLBEBZʹ w UBCT BVUPDPNQMFUFΛ ࣗͰ࣮ w ·ͩTPSUBCMF͕ͬͯΔʜʜ
None
yarnಋೖ w OQNͷόάͰ OQNTISJOLXSBQ͕͑ͳ͘ͳΓ ํͳ͘ZBSOʹʜʜ w ݱࡏOQNͬͯΔΒ͍͠
ఆظΞοϓσʔτσʔ w ຖ݄ୈҰ݄༵Λ OQNΞοϓσʔτσʔʹ w HSFFOLFFQFS͍͍ͨʜʜ
SlackͰप
Mission 3: MVVM OR FLUX?
2015࣌ͰͷReactઃܭ w খن.77.ͬΆ͘ w େن'MVYͬΆ͘
None
None
ΦϨΦϨFlux w %JTQBUDIFS&WFOU&NJUUFS w 4UPSF&WFOU&NJUUFS w this.stateʹঢ়ଶΛอଘ
4UPSF γϯάϧτϯ "DUJPO$SFBUPS
ஈʑਏ͘ͳ͖ͬͯͨ w ॴʹΑͬͯॻ͖ํ͕ҧ͏ w 3FBDUͷ׳Ε w ίϯϙʔωϯτͷن w աڈͷ࣮ͷল
ઃܭํͷڞ༗Ή͍ͣ w 3FBDU'MVYք۾ͷ͕ࣝඞཁ w νʔϜͷΤϯδχΞօ ϑϩϯτɾαʔό݉ۀ
࠷ۙͬͯͨ͜ͱ w ॳظͷΦϨΦϨ'MVY࣮Λ ϦϑΝΫλϦϯά w 3FEVYΞʔΩςΫνϟʹ͚ۙͮΔ
Ұ൪ਓؾͷ'MVYϑϨʔϜϫʔΫ ✔υΩϡϝϯτɺπʔϧ͕ॆ࣮ ✗ඇಉظॲཧͷํ๏͕͍Ζ͍Ζ͋Δ
Reduxʹ͚ۙͮΔ w ඇಉظॲཧ෭࡞༻͋ΔॲཧΛ "DUJPO$SFBUPSʹҠಈ w 4UPSFͷߋ৽ॲཧΛSFEVDFSʹ w 4UPSFΛ౷߹
ྫࣸਅαΠυόʔ
ඇಉظॲཧ/෭࡞༻ w ඇಉظॲཧࣸਅҰཡͷऔಘ w ෭࡞༻هࣄຊจͷૠೖ w هࣄຊจੜ%0.ʹΛอଘ͢Δ w ੜ%0.ͷߋ৽ॲཧ αΠυόʔͷ4UPSFͱؔͳ͍ͷͰɺ
෭࡞༻ͱΈͳ͢
Storeͷߋ৽ॲཧΛreducerʹ w SFEVDFS TUBUF BDUJPO TUBUF w ෳͷTUPSFΛ߹Ͱ͖ΔΑ͏ʹ w ςετ͍͢͠
͚ͬ͜͏͔͔࣌ؒͬͨ……
IS THE ORDER RESTORED? IS THE ORDER RESTORED? IS THE
ORDER RESTORED? IS THE ORDER RESTORED? IS THE ORDER RESTORED? IS THE ORDER RESTORED? ϑϩϯτΤϯυʹடং͔ͬͨʁ @amagitakayosi
·ͩ·ͩ ൃల్্
վળʹ ΰʔϧ ແ͍ʂʂ
ࠓޙͷվળʹඞཁͳͷ w νʔϜϝϯόʔͱͷ૬ஊ w ࣮ํͷυΩϡϝϯτԽ w
Ί͛ͣʹ վળ͢Δ εϐϦοτ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ ࠷ߴͷΞʔΩςΫνϟΛࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ