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
110
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.5k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.2k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Programming
See All in Programming
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.5k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
3.8k
PipeCDのプラグイン化で目指すところ
warashi
1
300
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Speed Design
sergeychernyshev
32
1k
How to Ace a Technical Interview
jacobian
278
23k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fireside Chat
paigeccino
37
3.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
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ઃܭͷݟ͕ͬͨ͝ ࣽͷɺ༷ʑͳࢥΛͿ͚ͭ߹͏ઓ
• ࣗʹඞཁͳநΛબͿ
͓ΘΓ