Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
フロントエンドに秩序を取り戻す方法
fand/amagitakayosi
November 07, 2015
Technology
94
40k
フロントエンドに秩序を取り戻す方法
東京Node学園祭2015
fand/amagitakayosi
November 07, 2015
Tweet
Share
More Decks by fand/amagitakayosi
See All by fand/amagitakayosi
How to hack VS Code: evil ways (Japanese)
fand
5
3k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
400
GLSL PostEffect in TouchDesigner
fand
2
1.7k
VEDA GLSL Livecoding workshop
fand
2
4.5k
PWA 方法 無料 今すぐ
fand
3
1.2k
Have you ever heard GPUs cry?
fand
2
3.2k
Real World GLSL
fand
0
160
APIs for VJ-ing
fand
1
6k
Style your Components with styled-component!
fand
1
390
Other Decks in Technology
See All in Technology
Microsoft Build 2022 - Azure のデータ & 分析サービス 最新アップデート / Microsoft Build 2022 Updates on Azure Data and Analytics Services
nakazax
1
180
Poolにおける足を止めないシステム基盤構築
winebarrel
3
1.1k
街じゅうを"駅前化"する電動マイクロモビリティのシェアサービス「LUUP」のIoTとSRE
0gm
1
940
5分で完全理解するGoのiota
uji
3
2.1k
事業の成長と共に歩む、ABEMA SRE探求の歴史 / SRE-Next 2022
nagaa052
0
430
Whats new in Android Media?
myolwin00
2
120
toilを解消した話
asumaywy
0
210
⚡Lightdashを試してみた
k_data_analyst
0
220
Spotify物理コントローラーがほしい
miso
0
170
E2E自動テスト導入・運用をめぐる先入観と実際に起きたこと / Preconceptions and What Happened with E2E Testing
ak1210
5
1.3k
Steps toward self-service operations in eureka
fukubaka0825
0
880
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
3
3.9k
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Producing Creativity
orderedlist
PRO
333
37k
Code Review Best Practice
trishagee
41
6.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
How STYLIGHT went responsive
nonsquared
85
3.9k
GitHub's CSS Performance
jonrohan
1020
410k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Embracing the Ebb and Flow
colly
73
3.3k
In The Pink: A Labor of Love
frogandcode
130
21k
How to train your dragon (web standard)
notwaldorf
57
3.8k
Transcript
RESTORE THE ORDER ϑϩϯτΤϯυʹடংΛऔΓ͢ํ๏ @amagitakayosi
None
ૣޱͰ͍͖·͢
ࠓ͞ͳ͍͜ͱ
࠷৽ϥΠϒϥϦͷ͍ํ ࠷ߴʹඒ͍͠ઃܭ /PEFKTͷ
ࠓ͢͜ͱ
ϦϑΝΫλϦϯά ίʔυنͱΞʔΩςΫνϟ ϑϨʔϜϫʔΫಋೖ ςετڥߏங
εϐϦοτ
@amagitakayosi
None
IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!! ࠓ͙͢ొʂ !!!!!!!!!!! !!!!!!!!!! !!!!!!!!!! !!!!!!!!!!! !!!!!!!!!!
None
͜͜ʹ4पͷਤΛషΔ 2015-11-07 ͯͳϒϩά प
None
None
None
͜ͷτʔΫͰ ฤूը໘ϦχϡʔΞϧʹ͏ +4େվͷ༰Λ հ͠·͢ʂʂʂʂ
ͯͳϒϩάͷ ઃܭࢥ
first commitͷը૾ΛషΔ ։ൃ։࢝
ͳΔ͘ബ͘ w 1FSM w 1MBDLϕʔε03.ͳ͠ w +4 w 7BOJMMB+4
http://www.slideshare.net/cho45/yapc-asia-2011 ࢀߟݩઃܭऀͷεϥΠυ
https://speakerdeck.com/hitode909/perlfalseshang- nimosan-nian-zututoiketerusabisuwozuo-risok-keruji-shu ࢀߟαʔόαΠυઃܭͷ
+
+ ͦͯ͠4͕ܦաͨ͠……
ൃੜ
1 ڊେͳ ϑΝΠϧ
2 ౷Ұײͷͳ͍ ελΠϧ
3 ςετෆՄ
ಓʹվળ ͍ͯͧ͘͠ ʂʂʂʂʂ
SPLIT THE CODE Mission 1:
ͯͳϒϩάͷJS w 5PUBMMJOFT ࣌ w ͦΜͳʹڊେͰͳ͍͕ʜʜ
admin-user-blog-edit.js ߦ ࣌
None
ฤूը໘ͷJS w GPSNΛཧ͢ΔΫϥε w ه๏͝ͱͷػೳ 8:4*8:( .BSLEPXO ͯͳه๏ w
αΠυόʔͷίϯϙʔωϯτ
ैདྷͷJSׂ w ໊લۭؒͰϞδϡʔϧԽ w ϑΝΠϧΛDPODBUͯ͠৴
໊લۭؒ in JS w ϞδϡʔϧΛ0CKFDUʹ·ͱΊΔ w άϩʔόϧมͷཞ༻Λආ͚Δ ݹͷϕετϓϥΫςΟε
໊લۭؒΛ༻ҙͯ͠
໊લۭؒʹಥͬࠐΜͰ
JOEFYKT 'PPKT #BSKT
ฤूը໘ͷ+4 ׂ͍ͨ͠ʜʜ
ൃੜ
ґଘؔΉ͔͍ͣ͠ w DPODBUͷॱ൪ม͑ͨΒյΕΔ w ม໊Λม͑ΔͱյΕΔ
Foo͕ະఆٛͩͱ Τϥʔ
JOEFYKT 'PPKT #BSKT
JOEFYKT #BSKT 'PPKT
JOEFYKT #BSKT 'PPKT
ະఆٛͷมΛݕग़Ͱ͖ͳ͍
ະఆٛͷglobalม lintͰνΣοΫͰ͖Δ͚Ͳ…… ະఆٛͷมΛݕग़Ͱ͖ͳ͍
໊લۭؒͷத lintͰνΣοΫͰ͖ͳ͍ʂ ະఆٛͷมΛݕग़Ͱ͖ͳ͍
࣮ߦ͢Δ·Ͱ όά͕Θ͔Βͳ͍ʂ
DPODBUͭΒ͍ʜʜ
None
browserify w $PNNPO+4ܗࣜͰϞδϡʔϧΛཧ w ڝ߹ͱൺɺγϯϓϧʹ͑Δ w 3FRVJSF+4ॻ͖ํ͕໘ w 8FCQBDLେ؋ڊ๒ओٛ
ґଘཧָ͕ʹͳΔ w DPODBUॱΛߟ͑ͳ͍Ͱྑ͍ w ଘࡏ͠ͳ͍ϑΝΠϧΛϩʔυ͢Δͱ Τϥʔు͍ͯ͘ΕΔ
Ϗϧυ࣌ʹΤϥʔग़ͯ͘͠ΕΔʂ
browserifyಋೖ w ಋೖ։࢝ w গͣͭ͠$PNNPO+4ʹม w Ϗϧυͨ͠+4Λ طଘͷ+4ͱDPODBU
$PNNPO+4ܗࣜʹ ॻ͖ͯ͠
໊લۭؒʹͭͬ͜ΜͰ
ઓུ Ϗϧυͨ͠+4Λ ͜Ε·Ͱͷ+4ͱDPODBU Ϗϧυͨ͠+4 ͜Ε·Ͱͷ+4
མͱ݀͠
ڞ௨Խਖ਼͘͠ߦ͏
ڞ௨Խਖ਼͘͠ߦ͏
ڞ௨Խਖ਼͘͠ߦ͏ w ଞͷ໊લۭؒΛࢀরͯ͠Δͱ ׂͮ͠Β͍ w ઌʹϦϑΝΫλϦϯά͢͠
ݱࡏͷঢ়گ
admin-user-blog-edit.js ߦ ߦ
ʙʙ
None
browserifyཧԼͷ ϑΝΠϧ concatͯ͠ΔϑΝΠϧ
browserifyཧԼͷ ϑΝΠϧ concatͯ͠ΔϑΝΠϧ ࡉ͔͘ϞδϡʔϧԽ͢Δͱ ݩϑΝΠϧΑΓଟ͘ͳΔ
None
browserifyཧԼͷ ϑΝΠϧ concatͯ͠ΔϑΝΠϧ ࡉ͔͘ϞδϡʔϧԽ͢Δͱ ݩϑΝΠϧΑΓଟ͘ͳΔ Զୡͷઓ͍ ͜Ε͔Βͩ ʂʂʂʂʂʂʂ
KEEP THE STYLE Mission 2:
ઃܭελΠϧ ίʔσΟϯάελΠϧ
Vanilla Architecture VanillaJSͰͷίϯϙʔωϯτઃܭ
طଘJSͷ w σʔλͱ%0.͕ີ݁߹ w ίϯϙʔωϯτؒͷ࿈ܞ͕Ϝζ͍ w αʔόͱͷ࿈ܞ͕μϧ͍
σʔλͱDOM͕ີ݁߹ w %0.ଐੑʹσʔλΛอଘ w ͋ͪͪ͜Ͱ%0.ૢ࡞ w σʔλؒͷ߹ੑ͕յΕ͍͢
ίϯϙʔωϯτؒͷ࿈ܞ w σʔλϑϩʔʹܾ·Γ͕ͳ͍ w ॥ࢀরͰݺͼ߹ͬͨΓ w ࠷ѱ%0.ΠϕϯτΛ͏
αʔόͱͷ࿈ܞ w )5.-ߏ͔ΒσʔλΛ࡞Δ w +40/ͱ͔Ͱͳ͍ w %#ߋ৽ͷʹαʔόଆͰඳը
None
͜͜ΛΫϦοΫ͢Δͱ %#͕ߋ৽͞Εͯ
αʔόͰ)5.-Λඳը͠ BKBYͰड͚औͬͯ SFQMBDF8JUI ͢Δ
εςʔτϨεͰ ඒ͍͠ઃܭ
+4Ͱඳը͢Ε ຊདྷෆཁ
None
VanillaJSͷ··࠶ઃܭ w σʔλͱ%0.Λ w ػೳຖʹ7JFX.PEFMΛ࡞Δ w ػೳಉ࢜ΠϕϯτͰΓͱΓ
σʔλͱDOMΛ w ॳظԽ࣌ʹσʔλΛશͯ༻ҙ w %0.ૢ࡞ઐ༻ϝιουͰߦ͏
%0.Λ͞ΘΒͣʹ
%0.Λ͞ΘΒͣʹ
ॳظԽ࣌ʹσʔλΛ༻ҙ
None
DOMૢ࡞ઐ༻ϝιουͰ w +4ͰϨϯμϦϯά w σʔλมߋͷʹશ෦࠶ඳը w ߹ੑɺϝϯς͢͠͞Λ༏ઌ w ύϑΥʔϚϯε֎ࢹ
None
ػೳຖʹViewModel w ίϯϙʔωϯτΛͱࢠʹׂ w 4NBSU%VNC$PNQPOFOU
ίϯϙʔωϯτ w σʔλɺϏδωεϩδοΫΛཧ w &WFOU&NJUUFSΛܧঝ w %0.&WFOUΛۃྗ͔ͭΘͳ͍ʂ
ࢠίϯϙʔωϯτ w ͷࢀরΛ࣋ͭ w σʔλͷඳըͱΠϕϯτൃߦͷΈ
ྫ4JEFCBS
None
Sidebar SidebarButtons Config
4JEFCBS #VUUPOT $POpH
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλมߋ + emit(‘change’)
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλө σʔλมߋ + emit(‘change’)
ίϯϙʔωϯτؒͷΓͱΓ Fotolife MarkdownEditor
ίϯϙʔωϯτؒͷΓͱΓ w ্Ґͷ7JFX.PEFMΛͭͬͯ͘ ΠϕϯτΛൃੜͤ͞Δ w ·ͨ$window.trigger()
্Ґͷ7JFX.PEFMΛ࡞ Fotolife MarkdownEditor Editor
&EJUPS .BSLEPXO 'PUPMJGF 'PUP-JTU 'PPUFS ϘλϯΫϦοΫ ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε 5FYU"SFB <img>ૠೖ
நతͳΠϕϯτ໊ʹ͢Δ ' buttonClicked ( insertImage
.BSLEPXO 'PUPMJGF 'PUP-JTU 'PPUFS ϘλϯΫϦοΫ ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε 5FYU"SFB <img>ૠೖ &EJUPS
&EJUPS .BSLEPXO 'PUPMJGF 'PUP-JTU 'PPUFS ϘλϯΫϦοΫ ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε 5FYU"SFB <img>ૠೖ
நతͳΠϕϯτ .BSLEPXO 'PUPMJGF ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε &EJUPS
σʔλͱ%0.ͷ ෆ߹ ى͖ʹ͘͘ͳͬͨʂ
͕
͚ͬ͜͏େม w ઃܭͷ߹ҙͱΔͷ͕େม w %0.ૢ࡞μϧ͍ w ϥΠϒϥϦʹͬͯ΄͍͠
7JFXϑϨʔϜϫʔΫ ͍͍ͨʜʜʂ
WT
Vue.js ✔ݹ͖ྑ͖7JFX.PEFM ✔ຊޠυΩϡϝϯτ ✗͍ΖΜͳॻ͖ํͰ͖Δ
React ✔֮͑Δ͜ͱ͕গͳ͍ ✔ใ͕๛ ✗+49
1ϲ݄΄Ͳٞ w ֶशίετʁ w ඞཁͳ࣌ʹࣺͯΒΕΔ͔ʁ w ৽ػೳΛ྆ํͰ࣮ͨ͠Γ
None
None
ReactΛ࠾༻ w ΑΓγϯϓϧʹॻ͚Δ w 3FBDUˠ7VF؆୯ͦ͏
σβΠφʔ͕৮Εͳ͍ʁ w +49͘Β͍৮ΕΔͣ w $44ͰࣗࡏʹελΠϧͰ͖Δ Α͍ઃܭΛࢦ͢
ಋೖ w +49ͷͨΊʹಋೖͱ͍͏ޱ࣮ w TUBHFҎԼ༻ېࢭ w ษڧձ JTTVFͰݟΛγΣΞ
http://azu.github.io/slide-what-is-ecmascript/ ࢀߟ&$."4DSJQUͱԿ͔ CZ!B[V͞Μ
ࣾษڧձͷΑ͏͢
None
JTTVFͰݟΛूΊΔ
React Architecture React༻࣌ͷίϯϙʔωϯτઃܭ
جຊతͳߟ͑ํ w 'MVYϑϨʔϜϫʔΫ͍ͨ͘ͳ͍ w &WFOU&NJUUFS͚ͩͰؤுΔ w نʹΑͬͯɺஈ֊తʹ 'MVYͬΆ͍ͯ͘͘͠
খ͞ͳػೳͷͱ͖ w 7JFX.PEFM͚ͩͰ݁ w ҎલͷίʔυͷSFOEFS Λ ஔ͖͑Δ͚ͩ
େ͖ͳػೳͷͱ͖ w &WFOU&NJUUFSͰ෦తʹ'MVY w 4UPSF "DUJPO$SFBUPS͕ෳͳΒ %JTQBUDIFSΛಋೖ
.PEFM খن : ViewModel 7JFX.PEFM Πϕϯτ ө σʔλมߋ
"DUJPO $SFBUPS தن : Flux෩ Πϕϯτ ө 4UPSF Action σʔλมߋ
େن : DispatcherΛಋೖ Πϕϯτ ө Action σʔλมߋ %JTQBUDIFS
Coding Convention ίʔσΟϯάελΠϧͷνΣοΫ
ैདྷJSHintͰνΣοΫ ಠࣗϧʔϧ1FSMͰॻ͍ͯͨ ✗ϧʔϧΛඍௐ͠ʹ͍͘ ✗+49&4ʹඇରԠ
None
✔ඪ४ϧʔϧ͕ॆ࣮ ✔ઃఆ͕ΧελϚΠζ͍͢͠ ✔ಠࣗϧʔϧ͕؆୯ʹॻ͚Δ
https://gist.github.com/fand/c13213f81bfce11f4132 ࢀߟಠࣗϧʔϧྫ
ಋೖͷํ w શͯͷඪ४ϧʔϧͰ Τϥʔ͕ग़ΔΑ͏ʹઃఆ w طଘίʔυͰΤϥʔফ͑Δ·Ͱ ϧʔϧΛ؇ΊΔ
˔ͷ͍ͭͨߦ શ෦ܯࠂ
None
ౖΒΕͯศརʂ
TEST THE COMPONENT Mission 3:
4݄·ͰͷJSςετ w $BTQFS+4ͷ&&ͷΈ w هࣄߘɺࠂͷද͚ࣔͩ
JS͕յΕ͍͢ w ϦϑΝΫλϦϯάͰΤϯόά w ϦϦʔεޙΤϥʔͰ·ͬͯ͘ 3FWFSUͨ͠ࣄʜʜ
http://0-9.sakura.ne.jp/pub/frontrend/start.html
ʮE2E͔Β࢝ΊΖʯͱݴ͏͚ΕͲ…… w γφϦΦ͕ෳࡶ ʮ͋ΔॱংͰϖʔδભҠͨ࣌͠ʹ উखʹλϒ͕ดͯ͡͠·͏ʯ όάͷςετͨ͘͠ͳ͍ʜʜ
ςετ͍ͨ͠ʂ
୯ମςετ͔Β͡ΊΑ͏
Unit Test ୯ମςετڥߏங
http://0-9.sakura.ne.jp/pub/frontrend/start.html
ཧ
ςετॻ͘ ςετམͪͳ͍Α͏ʹ ϦϑΝΫλϦϯά
ݱ࣮
ςελϒϧͳઃܭͰ ϦϑΝΫλϦϯά ςετॻ͘
ςελϒϧͳઃܭΛ৺͕͚Δ w ίʔυׂେલఏ w 7JFXૢ࡞͢Δ w %0.৮ΔϞδϡʔϧ ςετͮ͠Β͍
w ݩ"OHVMBS༻ͷςετϥϯφʔ w ϒϥβΛͬͯςετͰ͖Δ w ୯ମςετ͚ w ϒϥβૢ࡞ॆ࣮͍ͯ͠ͳ͍
গͣͭ͠ςετ૿͢ w ৽͍͠Ϟδϡʔϧςετඞਢ w ϦϑΝΫλϦϯάˠςετՃ w 6UJMܥϞδϡʔϧΛ༏ઌ
Viewͷςετ w &WFOU&NJUUFSͷ͓͔͛Ͱ ςετ͘͢͠ͳͬͨʂ w Πϕϯτൃߦ͞ΕΔ͔ʁ w %0.ཁૉ͕ඳը͞ΕͯΔ͔ʁ
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλө σʔλมߋ + emit(‘change’)
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλө σʔλมߋ + emit(‘change’) $POpH ϘλϯΫϦοΫ
Πϕϯτ͕ ਖ਼͘͠ൃߦ͞ΕΔ͔ʁ
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλө σʔλมߋ + emit(‘change’) 4JEFCBS σʔλมߋ
+ emit(‘change’) Πϕϯτʹର͠ σʔλ͕มߋ͞ΕΔ͔ʁ
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλө σʔλมߋ + emit(‘change’) σʔλ ਖ਼͘͠ඳը͞ΕΔ͔ʁ
#VUUPOT σʔλө
ςετॻ͚Δ
ςετϑΝΠϧ
None
·ͩ·ͩ ൃల్্
E2E Test E2EςετڥͷϦχϡʔΞϧ
CasperJS w 3FBDUΛ͏ͱ 1IBOUPN+4ͰΤϥʔग़Δʂ w 1IBOUPN+4ɺ͍͠
ଞͷखஈΛݕ౼
&MFDUSPOϕʔεͷεΫϨΠύʔ ✔γϯϓϧͳ"1* ✗ࡉ͔͍"1*͕Γͳ͍ ✗ϝιουνΣʔϯ͕໘
ݩ"OHVMBS+4ͷςετ༻ ✔Ϣʔβʔɺใ͕ଟ͍ ✔ಉظతʹॻ͚Δ ✗"OHVMBSઐ༻"1*ෆཁ Protractor
4FMFOJVNͷόΠϯσΟϯά ✔ಉظతʹॻ͚Δ ✔ׂͱ υΩϡϝϯτॆ࣮ ♨$-*ςετϥϯφʔ͖
4FMFOJVNͷόΠϯσΟϯά ✔ಉظతʹॻ͚Δ ✔ׂͱ υΩϡϝϯτॆ࣮ ♨$-*ςετϥϯφʔ͖ ࠾༻
Ұ൪ͷཧ༝ w 4FMFOJVNܥͳͷͰ ଞϥΠϒϥϦʹΓ͍͑ͣ͢ w 1SPUSBDUPS UFTUJVN
&4HFOFSBUPSͰ ςετΛॻ͘
&4HFOFSBUPSͰ ςετΛॻ͘
None
ςετಈ͍ͨʂ
http://amagitakayosi.hatenablog.com/entry/2015/10/30/083000 ࢀߟ͓͠ΖΤϐιʔυ
RESTORE THE ORDER ϑϩϯτΤϯυʹடংΛऔΓ͢ํ๏ @amagitakayosi
͔ͯ͘͠ டং कΒΕͨ
ࠓͨ͜͠ͱ w ϦϑΝΫλϦϯάצॴ w ਐతʹΞʔΩςΫνϟΛਐԽͤ͞Δ w ϑϨʔϜϫʔΫಋೖ w ςετڥߏங
ࠓͨ͜͠ͱ w ϦϑΝΫλϦϯάצॴ w ਐతʹΞʔΩςΫνϟΛਐԽͤ͞Δ w ϑϨʔϜϫʔΫಋೖ w ςετڥߏங ྑ͍ઃܭΛ
ࢦͨ͢Ίͷ ࡞Γ
ࠓ͞ͳ͔ͬͨ͜ͱ w ඒ͍͠ϥΠϒϥϦઃܭͷڞ༗ w ඇΤϯδχΞͱͷઃܭ w രͰαʔϏεͭ͘Δ։ൃϑϩʔ
ࠓ͞ͳ͔ͬͨ͜ͱ w ͯͳϒϩάνʔϜͷ։ൃϑϩʔ w ࣾϥΠϒϥϦͷઃܭํ๏ w αʔόଆݴޠͱͷઃܭͷڞ༗ ·ͩ·ͩ ൃల్্
Ί͛ͣʹ վળ͢Δ εϐϦοτ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ ࠷ߴͷΞʔΩςΫνϟΛࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ