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
120
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
530
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.3k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
280
APIs for VJ-ing
fand
1
6.9k
Other Decks in Technology
See All in Technology
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
370
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
860
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1k
テストを軸にした生き残り術
kworkdev
PRO
0
210
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
150
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
For a Future-Friendly Web
brad_frost
180
9.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
GitHub's CSS Performance
jonrohan
1032
460k
Optimizing for Happiness
mojombo
379
70k
A Tale of Four Properties
chriscoyier
160
23k
Practical Orchestrator
shlominoach
190
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Producing Creativity
orderedlist
PRO
347
40k
Unsuck your backbone
ammeep
671
58k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
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 αʔόଆݴޠͱͷઃܭͷڞ༗ ·ͩ·ͩ ൃల్্
Ί͛ͣʹ վળ͢Δ εϐϦοτ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ ࠷ߴͷΞʔΩςΫνϟΛࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ