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
November 07, 2015
Technology
95
42k
フロントエンドに秩序を取り戻す方法
東京Node学園祭2015
Amagi
November 07, 2015
Tweet
Share
More Decks by Amagi
See All by Amagi
Enchant your website with VFX-JS
fand
0
110
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
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
210
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
130
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
550
フィンテック養成勉強会#54
finengine
0
180
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
110
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
340
AI導入の理想と現実~コストと浸透〜
oprstchn
0
120
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
170
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
660
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
210
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
290
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Scaling GitHub
holman
459
140k
The Invisible Side of Design
smashingmag
300
51k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Being A Developer After 40
akosma
90
590k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Ace a Technical Interview
jacobian
277
23k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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 αʔόଆݴޠͱͷઃܭͷڞ༗ ·ͩ·ͩ ൃల్্
Ί͛ͣʹ վળ͢Δ εϐϦοτ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ ࠷ߴͷΞʔΩςΫνϟΛࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ