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
130
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
540
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
280
APIs for VJ-ing
fand
1
7k
Other Decks in Technology
See All in Technology
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
150
20251024_TROCCO/COMETAアップデート紹介といくつかデモもやります!_#p_UG 東京:データ活用が進む組織の作り方
soysoysoyb
0
120
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
300
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
700
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
160
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
450
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
650
オブザーバビリティが育むシステム理解と好奇心
maruloop
3
1.4k
abema-trace-sampling-observability-cost-optimization
tetsuya28
0
230
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
130
serverless team topology
_kensh
3
240
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
490
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Become a Pro
speakerdeck
PRO
29
5.6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Git: the NoSQL Database
bkeepers
PRO
431
66k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
91
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Scaling GitHub
holman
463
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
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
Ί͛ͣʹ վળ͢Δ εϐϦοτ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ ࠷ߴͷΞʔΩςΫνϟΛࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ