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
89
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
510
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.2k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
260
APIs for VJ-ing
fand
1
6.9k
Other Decks in Technology
See All in Technology
encoding/json v2を予習しよう!
yuyu_hf
PRO
1
190
分解し、導き、託す ログラスにおける“技術でリードする” 実践の記録
hryushm
0
240
Serverlessだからこそコードと設計にはこだわろう
kenichirokimura
3
1.1k
LangfuseではじめるAIアプリのLLMトレーシング
codenote
0
170
Sleep-time Compute: LLM推論コスト削減のための事前推論
sergicalsix
1
130
計測による継続的なCI/CDの改善
sansantech
PRO
2
690
Simplify! 10 ways to reduce complexity in software development
ufried
2
260
Как мы автоматизировали интеграционное тестирование с Gonkey и не пожалели. Паша Егорычев, Кирилл Поляков
lamodatech
0
2.1k
名単体テスト 禁断の傀儡(モック)
iwamot
PRO
1
270
Cursorを全エンジニアに配布 その先に見据えるAI駆動開発の未来 / 2025-05-13-forkwell-ai-study-1-cursor-at-loglass
itohiro73
2
590
Azure & DevSecOps
kkamegawa
2
180
Ruby on Rails の楽しみ方
morihirok
5
1.9k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
A designer walks into a library…
pauljervisheath
205
24k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
Done Done
chrislema
184
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Writing Fast Ruby
sferik
628
61k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
800
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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
Ί͛ͣʹ վળ͢Δ εϐϦοτ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ ࠷ߴͷΞʔΩςΫνϟΛࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ