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
16
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
8
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Programming
See All in Programming
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
iOS開発スターターキットの作り方
akidon0000
0
240
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
460
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
490
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
280
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
450
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
350
kiroでゲームを作ってみた
iriikeita
0
140
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
構文解析器入門
ydah
7
2k
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
140
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
280
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
4 Signs Your Business is Dying
shpigford
184
22k
The Cult of Friendly URLs
andyhume
79
6.5k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
A better future with KSS
kneath
239
17k
Building Applications with DynamoDB
mza
95
6.5k
Producing Creativity
orderedlist
PRO
346
40k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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ઃܭͷݟ͕ͬͨ͝ ࣽͷɺ༷ʑͳࢥΛͿ͚ͭ߹͏ઓ
• ࣗʹඞཁͳநΛબͿ
͓ΘΓ