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
5分でわかるMarionette.jsのいいところ
Search
koba04
July 11, 2014
Programming
7
14k
5分でわかるMarionette.jsのいいところ
天下一クライアントサイドJS MV*フレームワーク武道会 (2014/07/11)のLTの資料です。
koba04
July 11, 2014
Tweet
Share
More Decks by koba04
See All by koba04
フロントエンドの現在地とこれから
koba04
10
5.2k
Standing on the shoulders of giants
koba04
0
2.9k
React/Next によるアプリケーション開発のこれから
koba04
61
17k
フロントエンド刷新をプロジェクトとして進める際に気をつけていること
koba04
3
1.9k
How useEvent would change our applications
koba04
1
3.1k
kintoneフロントエンド刷新によるモノリスからの脱却とその先に目指す未来
koba04
3
15k
Make it Declarative with React
koba04
0
1.8k
Ready for React in 2019
koba04
2
1.7k
Algorithms in React
koba04
14
17k
Other Decks in Programming
See All in Programming
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
1.9k
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
130
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
2
480
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
130
JetBrainsのAI機能の紹介 #jjug
yusuke
0
210
コンテキストエンジニアリング Cursor編
kinopeee
1
590
TanStack DB ~状態管理の新しい考え方~
bmthd
2
160
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
コンテキストエンジニアリングで変わるAI活用 リファクタリングワークフローの実践から学んだ形式知
leveragestech
0
100
令和最新版手のひらコンピュータ
koba789
14
7.8k
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
620
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How GitHub (no longer) Works
holman
314
140k
A Tale of Four Properties
chriscoyier
160
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Designing Experiences People Love
moore
142
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
ͰΘ͔Δ.BSJPOFUUFKTͷ͍͍ͱ͜Ζ ఱԼҰΫϥΠΞϯταΠυ+4.7 ϑϨʔϜϫʔΫಓձ !LPCB
8IBUJT.BSJPOFUUFKT
8IBUJT.BSJPOFUUFKT w #BDLCPOFKTΛ֦ுͨ͠ϑϨʔϜϫʔΫ w େنΞϓϦέʔγϣϯʹ͑͏Δઃܭ w 7JFXपΓͷศརͳ֦ுͳͲ w ࠷ۙWʹͳͬͨ
8IZDIPPTF
8IZDIPPTF 4JOHMF1BHF"QQMJDBUJPOΛ࠷ॳ#BDLCPOFKT͚ͩͰ࣮ ωετͨ͠7JFXߏͷαϙʔτ͕ඞཁ ࣗྗͰ࣮ʜ It’s very similar
to Marionette.js!!
͍͍ͱ͜Ζ
7JFXΛ͍͍ײ͡ʹߏԽͯ͘͠ΕΔ
4VQQPSU/FTUFE7JFX w #BDLCPOFKT͚ͩͩͱࣗͰ7JFXͷআ WJFXSFNPWF Λ͢Δඞ ཁ͕͋Δ w .BSJPOFUUFKTͰ3FHJPOͱ3FHJPO.BOBHFS "QQMJDBUJPOͱ -BZPVU7JFX͕͍࣋ͬͯΔ
͕7JFXͷΓସ͑࣌ͷॾʑΛͬͯ͘ ΕΔ var app = new Marionette.Application();! app.addRegions({ main: "#main" });! ! # render()͢Δඞཁͳ͍!!! app.main.show(new MyView());! app.main.show(new MyOtherView()); ˠ;PNCJF7JFX͕࡞ΒΕʹ͍͘
7JFX.BOBHFNFOU Application LayoutView ItemView CollectionView ItemView (in CollectionView)
7JFX.BOBHFNFOU var TopView = Backbone.Marionette.LayoutView.extend({! template: template,! regions: {! artistSearch:
“.js-artist-search",! topTracks: “.js-top-tracks"! },! onRender: function() {! this.artistSearch.show(! ! ! new ArtistSearchView(model: new Artist())! );! ! this.listenTo(tracks, 'reset', this.showTracks);! },! showTracks: function() {! this.topTracks.show(! new TracksView(collection: tracks)! );! }! });! ! ɿ! ɿ! App.content.show(new TopView());! RegionΛఆٛ ೖྗΤϦΞΛදࣔ collection͕reset͞ΕͨΒ ۂҰཡͷCollectionViewΛ දࣔ ApplicationͷRegionʹදࣔ
ओઓ+BWB4DSJQU
-PHJDMFTTUFNQMBUF w ֤$PNQPOFOUຖʹ7JFXΛ࡞ΔͨΊɺςϯϓϨʔτͰͷذΛ࠷ খݶʹग़དྷΔ w զʑςϯϓϨʔτ͕ແ๏ଳʹͳΔͷΛԿݟ͖ͯͨͣʜ
ಡΈ͍͢
:PVEPO`UOFFEUPHPPHMF w ͱͯಡΈ͍͢ίʔυͱͱͯಡΈ͍͢υΩϡϝϯτ w ͕ͬͭΓ͓͏ͱ͢Δͱ݁ہ࣮ݟΔ͜ͱʹͳΔͷͰɺϑϨʔϜϫʔ ΫͷͰιʔε͕ಡΊͳ͍ͱπϥ͍ w (PPHMFͷτϨϯυʁͦΕͬͯʜ
ͦͷଞ
.PSF w #FIBWJPSTʹΑΔ7JFXͷৼΔ͍ͷڞ௨Խ w "QQMJDBUJPOͷ.PEVMFʹΑΔׂ w ༷ʑͳλΠϛϯάͰͷΠϕϯτൃߦͱUSJHHFS.FUIPE w VJUSJHHFSTͳͲͪΐͬͱͨ͠ศརػೳ
·ͱΊ
4VNNBSZ w #BDLCPOFKT͔ΒͷҠߦίετ͕͍ w େنͳ4JOHMF1BHF"QQMJDBUJPOΛ࡞Δͷʹͱͯద͍ͯ͠Δ w $PNQPOFOUࢦͰ7JFXΛׂग़དྷΔ w ϩδοΫΛ+BWB4DSJQUଆʹدͤΔ͜ͱ͕ग़དྷΔ
.BLFZPVS#BDLCPOFBQQMJDBUJPOTEBODF speakerdeck.com/koba04