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
93
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
520
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
270
APIs for VJ-ing
fand
1
6.9k
Other Decks in Technology
See All in Technology
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
nnstt1
1
130
AIとSREの未来 / AI and SRE
ymotongpoo
2
1.2k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
“⾞が通れるほど⼤きな”セキュリティーホールを抑えながらログインしたい
taiseiue
0
160
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
cohalz
1
490
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
360
継続戦闘能⼒
sansantech
PRO
0
220
MCP Clientを活用するための設計と実装上の工夫
yudai00
1
800
CloudBruteによる外部からのS3バケットの探索・公開の発見について / 20250605 Kumiko Hennmi
shift_evolve
3
160
Scale Security Programs with Scorecarding
ramimac
0
430
令和最新版TypeScriptでのnpmパッケージ開発
lycorptech_jp
PRO
0
110
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.2k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Done Done
chrislema
184
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Visualization
eitanlees
146
16k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Speed Design
sergeychernyshev
30
970
Raft: Consensus for Rubyists
vanstee
137
7k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Become a Pro
speakerdeck
PRO
28
5.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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
Ί͛ͣʹ վળ͢Δ εϐϦοτ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ ࠷ߴͷΞʔΩςΫνϟΛࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ