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.8k
フロントエンドに秩序は戻ったか?
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
61
How to hack VS Code: evil ways (Japanese)
fand
5
3.5k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
480
GLSL PostEffect in TouchDesigner
fand
2
1.9k
VEDA GLSL Livecoding workshop
fand
2
5.1k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.7k
Real World GLSL
fand
0
250
APIs for VJ-ing
fand
1
6.8k
Other Decks in Technology
See All in Technology
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
550
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
470
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
210
Snowflake女子会#3 Snowpipeの良さを5分で語るよ
lana2548
0
220
UI State設計とテスト方針
rmakiyama
2
440
MLOps の現場から
asei
6
630
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
AIのコンプラは何故しんどい?
shujisado
1
190
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
140
オプトインカメラ:UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
170
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Become a Pro
speakerdeck
PRO
26
5k
Bash Introduction
62gerente
608
210k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
A designer walks into a library…
pauljervisheath
204
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Optimising Largest Contentful Paint
csswizardry
33
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
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
Ί͛ͣʹ վળ͢Δ εϐϦοτ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ ࠷ߴͷΞʔΩςΫνϟΛࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ