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
95
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.4k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.2k
V8 as a container on CDN Edge worker
mizchi
6
2.2k
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
36k
Other Decks in Programming
See All in Programming
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
430
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
WindowInsetsだってテストしたい
ryunen344
1
190
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
210
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.2k
Select API from Kotlin Coroutine
jmatsu
1
190
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
340
GoのGenericsによるslice操作との付き合い方
syumai
3
680
Team operations that are not burdened by SRE
kazatohiei
1
180
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
GraphQLとの向き合い方2022年版
quramy
47
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Adaptive Systems
keathley
43
2.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Six Lessons from altMBA
skipperchong
28
3.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
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ઃܭͷݟ͕ͬͨ͝ ࣽͷɺ༷ʑͳࢥΛͿ͚ͭ߹͏ઓ
• ࣗʹඞཁͳநΛબͿ
͓ΘΓ