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
Real world es201x and future
Search
Koutarou Chikuba
February 11, 2018
Programming
18
11k
Real world es201x and future
現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2
Koutarou Chikuba
February 11, 2018
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
120
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.3k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.5k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Programming
See All in Programming
🔨 小さなビルドシステムを作る
momeemt
2
580
パッケージ設計の黒魔術/Kyoto.go#63
lufia
1
150
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
920
コーディングエージェント時代のNeovim
key60228
1
110
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
600
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.6k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
930
A Gopher's Guide to Vibe Coding
danicat
0
180
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
110
The State of Fluid (2025)
s2b
0
200
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.2k
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
Featured
See All Featured
The Language of Interfaces
destraynor
160
25k
Building Applications with DynamoDB
mza
96
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Six Lessons from altMBA
skipperchong
28
4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimizing for Happiness
mojombo
379
70k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Building an army of robots
kneath
306
46k
Transcript
ݱͷES201xͱະདྷͷΞʔΩςΫνϟ @mizchi / InsideFrontend 2
ࣗݾհ • @mizchi • ॴଐ: ϑϦʔϥϯε • ઐ: Node.js /
SPA৬ਓ
CAUTION!!! • ྺ࢙ͷͰɺѻͬͯΔൣғ͕͘ͳͬͨͷͰɺݴٴൣғ͕ҙਤ తʹߜ͍ͬͯ·͢ • ͋Β͔͡Ίྃ͝ঝ͍ͩ͘͞
ϑϩϯτΤϯυͷΈͳ͞Μ
ফͯ͠·͔͢ʁ
None
ຊൃදͷΰʔϧ • ΞʔΩςΫνϟͷมભΛཧ • มԽʹڧ͍ઃܭͷͨΊͷಎΛಘͯɺࣗͷίʔυʹඞཁͳ ͷɺΔ෦ɺΒͳ͍෦ͷར͖͕Ͱ͖ΔΑ͏ʹͳͬͯ΄ ͍͠
͍͖ͬͯ·͠ΐ͏
ࠓͷ͓ 1.ϑϨʔϜϫʔΫৼΓฦΓ 1.աڈ 2.ݱࡏ 3.ະདྷ 2.ݱࡏ͔ΒະདྷࢸΔಓ
ϑϨʔϜϫʔΫৼΓฦΓ
None
None
ଠݹ: ηϧϑεΫϨΠϐϯάͷ࣌ • खͰΛॻ͖͍͑ͯͨ࣌ • ෆ҆ఆͳ DOM API Λ jQuery
͕ٵऩ • IE6͕ࢮͶͣظԽ
None
ςϯϓϨʔςΟϯάͷ࣌ • HTMLͷॳظੜ͕ΫϥΠΞϯτଆ • ೋॏςϯϓϨʔτ | SEO Ex. mustache, handlebars,
underscore.template
None
σʔλόΠϯσΟϯάͷ࣌ • จࣈྻΛల։͢Δͷ͔ΒɺߏΛग़ྗ͢Δ ͷ • ޮతͳ෦ॻ͖͑ | Ϧετల։ • MVVMͷ༌ೖ
ex. backbone.stickit / knockout / angularjs / vue
ݱ
Client Side MVC ͷऴᖼ • Rails ༝དྷͷ Backbone ͷ MVC
Ϟσϧഁ • ΫϥαόͰඞཁͳநผ 2 • ղ & ࠶ߏங • ୯ํσʔλϑϩʔ 2 MVC ͱ MVC2 ʹ͍ͭͯվΊͯߟ͑ͯΈΔ http://www.s-arcana.co.jp/tech/2011/07/mvc-mvc2.html
Flux/Obvervable ͷ࣌ • Event ͱ State ͱ View Λશʹ •
EventSource ͱ subscribe ͷܗଶ • FRPͷ֓೦Λ༌ೖ ex: Rx / Elm / Redux
None
None
ߟ͑ํ • Component ͷଆʹӅΕͨ State ͷଘࡏجຊతʹѱ • Event ͷετϦʔϜ͔Β State
ͷεφοϓγϣοτΛੜ
ؓ: Redux Rx ͷ֓೦తͳαϒηοτ const actions$ = Rx.Observable.from([add(1), add(2),
add(3)]) const store = actions$.scan(rootReducer, undefined) store.subscribe(x => { console.log('subscribe', x) }) 1 1 Redux ֓೦తʹ Rx ͷαϒηοτͰ͋Δͱ͍͏ - mizchi's blog http://mizchi.hatenablog.com/entry/2017/09/30/013420
ϑϨʔϜϫʔΫͷτϨϯυ • ϋʔυ/ιϑτ྆ऀͷൃୡʹΑͬͯ… • ϝϞϦ্ʹͨ͘͞ΜσʔλΛஔ͘Α͏ʹͳΔ(ྫ: ԾDOM ʹΑΔόοϑΝϦϯά) • ϒϥβͷػೳΛΑΓݡ࣮͘͢Δ(ྫ: ࣗલͷϨϯμϥʔ)
• ߽తͳઃܭ <=> ϚΠΫϩνϡʔχϯά Λ܁Γฦͯ͠ൃల
None
Webͷ։ൃݴޠͷมԽ
None
։ൃݴޠ • JavaScript • TC39ͰຖਐԽ / ϓϦίϯύΠϥͰ interop • ଞݴޠ͔ΒͷτϥϯεύΠϥܥ
• ϊϋͷӽڥ • WebAssemblyܥ • ࢼߦࡨޡஈ֊
AltJS ͕Ռׂͨͨ͠ • ES2015 ͷจ๏Ճ/ػೳఏҊ • ClassɺArrow Function, etc... •
༷͕͍͔ͭͳ͍ͷϓϦίϯύΠϥͰઌऔΓ͢ΔจԽ
ۙΓ্͕Δݴޠ… • ੩తͳܕڥ͕͋Δ͜ͱ • ॊೈͳܕએݴ͕Ͱ͖Δ͜ͱ • ܕਪ͕͋Δ͜ͱ • ͱʹ͔͘ܕɺܕɺܕ
ϑϩϯτΤϯυͷ੩తܕ͚ͷधཁ • ͱʹ͔͘ςετ͕ॻ͖ͮΒ͍ͷͰ੩తݕࠪͰࡁ·͍ͤͨ • Observable Immutable Λલఏʹ͢Δͱ੩తݕ͕ࠪͳ͍ ͱίʔυ͕ॻ͚ͳ͍
None
None
ͳͥJSʹܕ͕ඞཁͳͷ͔ • ʮςετ͕͍͠GUIڥͰͷʯ৺ཧత҆શੑͷͨΊ • ҠΓมΘΓ͕͍ΤίγεςϜͰɺ੩తղੳͰίʔυΛࣺͯΔ ͨΊ ※ ͜ΕҎ্୯ͳΔݴޠؒͷରཱἤΓʹͳΔͷͰΊ·͢…
ະདྷͷ
WebComponents
None
None
WebComponents ͷޙͷੈք • View ͷ Custom Elements • ঢ়ଶཧͱͯ͠ͷϑϨʔϜϫʔΫ(ͨͿΜ)Δ
• ύϥμΠϜʹదͨ͠৽͍͠ϑϨʔϜϫʔΫग़ͯ͘Δͣ • SkateJSͱ͔ʁ
WebComponents Ͱࢮ͵ͷ • ʙσβΠϯͷʙ࣮ • ϚςϦΞϧσβΠϯ • ϑϥοτσβΠϯ • Bootstrap
Έͳ͞Μߴ·͖ͬͯ·͔ͨ͠ʁ
Ұམͪண͍ͯߟ͑Δ
None
ະདྷͷಓΛ࡞Δ
ݱ • ͦ͏͍ͬͨͬͯݱͷฅίʔυΛΑ • Կ͔ΒखΛ͚Δʁ
ݹ͍ίʔυΛखջ͚Δ • lint Λॻ͘ • ܕΛॻ͘ • ͋Δ͍ܕ͕ͭ͘Α͏ͳίʔυΛॻ͘ • άϩʔόϧม͠
=> ES Modules • Ϗϧυ࣌ʹґଘղੳ • ςετΛॻ͘
ྑ͍ίʔυͱѱ͍ίʔυ • ྑ͍ίʔυ • ੩తݕࠪͰ͖Δ • ΠϯλʔϑΣʔε͕໌Β͔ • ؆୯ʹࣺͯΒΕΔ •
ѱ͍ίʔυ • Ϟδϡʔϧڥք͕໌Β͔Ͱͳ͍
ྫ: Qiita Ͱ͕ࣗͬͨ͜ͱ • Rails Sprockets => Browserify • άϩʔόϧม͠Λ
ESM ʹ • Backbone.View => React • View ͱ State Λ(Flux)
ྫ: freeeࣾͰ͕ࣗͬͯΔ͜ͱ • Rails Sprockets => Webpacker • άϩʔόϧม͠ΛESMʹ •
Backbone.Router Λղମ • ݹ͍ίʔυʹ flow ͷܕΛ͚ͯճΔ
ͱΓ͋͑ͣͬͱ͚ • prettier • eslint: no-unused-vars • eslint: prefer-const
कഁ • OSSΤίγεςϜʹै͏ • Webඪ४ʹै͏ • ϨΠϠʔΛղ͢Δ
ϑϩϯτΤϯυΤϯδχΞͱԿ͔
None
ͦΕͧΕͷΰʔϧͷઃఆ • εϐʔυΛಥ͖٧ΊΔUXͳͷ͔ • ܧଓͯ͠ՁΛಧ͚ΔͨΊͷίʔυ࣭ͳͷ͔
ϑϩϯτΤϯυΞʔΩςΫνϟ: ·ͱΊ • Webಛ༗ͷΞʔΩςΫνϟ͔ΒɺීวతͳGUIઃܭͷ߹ྲྀ • ࠓͷϑϩϯτΤϯυ OOP, FP, GUIઃܭͷݟ͕ͬͨ͝ ࣽͷɺ༷ʑͳࢥΛͿ͚ͭ߹͏ઓ
• ࣗʹඞཁͳநΛબͿ
͓ΘΓ