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
Next Generation Web Application Architecture
Search
Koji SHIMADA
PRO
February 23, 2012
Technology
1
730
Next Generation Web Application Architecture
Ruby Sapporo Night vol.14
Koji SHIMADA
PRO
February 23, 2012
Tweet
Share
More Decks by Koji SHIMADA
See All by Koji SHIMADA
ソフトウェアアーキテクトのための意思決定術: Software Architecture and Decision-Making
snoozer05
PRO
25
7.2k
WHOLENESS, REPAIRING, AND TO HAVE FUN: 全体性、修復、そして楽しむこと
snoozer05
PRO
7
17k
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
55
19k
ソフトウェアアーキテクチャメトリクスの基礎: Software architecture metrics in a nutshell
snoozer05
PRO
34
14k
これから学ぶ人のための ソフトウェアアーキテクチャ入門: Software architecture is a tool to enhance our humanity
snoozer05
PRO
43
27k
ソフトウェアアーキテクチャ・ ハードパーツ: Software Architecture The Hard Parts
snoozer05
PRO
11
6.1k
ソフトウェアアーキテクチャの基礎: Software Architecture in a Nutshell
snoozer05
PRO
69
43k
Ready Player One: 『ユニコーン企業のひみつ』に学べること
snoozer05
PRO
10
12k
Continuous Architecting and Rails: From rails new to Your Own Architecture
snoozer05
PRO
16
4.2k
Other Decks in Technology
See All in Technology
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
160
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
710
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
230
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.4k
GitHub Copilot の概要
tomokusaba
1
130
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
330
Prox Industries株式会社 会社紹介資料
proxindustries
0
270
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
210
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
300
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
170
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
10k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Speed Design
sergeychernyshev
32
1k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
The Pragmatic Product Professional
lauravandoore
35
6.7k
What's in a price? How to price your products and services
michaelherold
246
12k
KATA
mclloyd
29
14k
Documentation Writing (for coders)
carmenintech
71
4.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Transcript
͠·ͩ͜͏͡ SHIMADA Koji ຊRubyͷձ Rubyࡳຈ Next Generation Web Application Architecture.
2012-02-21 Ruby Sapporo Night vol.14 ΞοϓϧετΞࡳຈ ϦονΫϥΠΞϯτ ࣌ͷ8FCΞϓϦέʔγϣϯ ΞʔΩςΫνϟ ύλʔϯʹ͍ͭͯߟ͑Δ ɹ 20122݄23༵
l Δ͔ͳ൴ํͷੲɺ͋ΔॴͰɺԿͳ͘ແەঢ়ଶͷۭؒ Λඬ͍ͬͯͨɺͰͨΒΊʹू·ͬͨݪࢠͷখ͞ͳू߹ʹɺͦ Εਂࠁͳ֎ইΛ༩͑ͨɻͦͯ͠ɺҟৗͳɺͱͯ͋Γͦ͏ ͳ͍ύλʔϯͰݪࢠͨͪΛΕͳ͍Α͏ʹ݁ͼ͚ͭͯ͠ ·ͬͨɻ͜ͷΑ͏ͳύλʔϯࣗࣗΛίϐʔ͢Δͱ͍͏ ͜ͱΛૣ͍͏ͪʹ֮͑ͯ͠·͍ ͜Εύλʔϯ͕ඇຌͳͷ Ͱ͋Δ͜ͱͷҰ໘Λ͍ࣔͯ͠Δ ɺύλʔϯ͕ඬ͏ͯ͢ͷ
Ͱɺմঢ়ͷࡂ͕Ҿ͖ى͜͞Εଓ͚ͨɻ͜ͷΑ͏ʹͯ͠ Ӊʹੜ໋͕ੜͨ͠ͷͰ͋Δɻ ʰۜՏώονϋΠΫɾΨΠυʱ 20122݄23༵
͠·ͩ͜͏͡ ౡాߒೋ Photo by tmaeda 20122݄23༵
ຊ3VCZͷձ 20122݄23༵
Ұൠࣾஂ๏ਓ-0$"- 20122݄23༵
20122݄23༵
20122݄23༵
20122݄23༵
20122݄23༵
20122݄23༵
20122݄23༵
ΑΖ͘͠ ͓ئ͍͠·͢ 20122݄23༵
͠·ͩ͜͏͡ SHIMADA Koji ຊRubyͷձ Rubyࡳຈ Next Generation Web Application Architecture.
2012-02-21 Ruby Sapporo Night vol.14 ΞοϓϧετΞࡳຈ ϦονΫϥΠΞϯτ ࣌ͷ8FCΞϓϦέʔγϣϯ ΞʔΩςΫνϟ ύλʔϯʹ͍ͭͯߟ͑Δ ɹ 20122݄23༵
͓ॻ͖ ✓ ΫϥΠΞϯτ.7$ͬͯԿͩΖ͏ ✓ ͏͍ͪͲ.7$ ✓ .7$ܥͷύλʔϯͷܥේʹ͍ͭͯ ✓ ͏͍ͪͲΫϥΠΞϯτ.7$ 20122݄23༵
20122݄23༵
Backbone.js gives structure to web applications by providing models with
key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. 20122݄23༵
Demo https://github.com/snoozer05/backbone-tiny-example 20122݄23༵
ΫϥΠΞϯτ.7$ 20122݄23༵
.BSUJO'PXMFSTBJE photo by pragdave 20122݄23༵
l .7$͞·͟·ͳղऍΛ͞Εͯ͠·ͬ ͍ͯΔʹؔΘΒͣɺͦΕΒશ͕ͯ b.7$`ͱ͍͏໊લͰهड़͞Ε͍ͯΔɻ ͦ͠ΕͰࠞཚ͠ͳ͍Α͏ͳΒɺ͋ͳ ͨݴήʔϜʹΑΔ.7$ͷޡղͷ٘ ਜ਼ऀͷՄೳੑ͕͋Δɻ http://martinfowler.com/eaaDev/uiArchs.html 20122݄23༵
ݱࡏͷ8FCΞϓϦέʔγϣϯ ։ൃͰΑࣖ͘ʹ͢Δ.7$ http://www.flickr.com/photos/indigoskies/6523275513/ 20122݄23༵
http://www.flickr.com/photos/indigoskies/6523275513/ .7$.PEFM l࣌zͷ8FCΞϓϦέʔγϣϯʹ .7$ΞʔΩςΫνϟΛͯΊͨͷ 20122݄23༵
.7$ͷΦϦδφϧ Ͱͳ͍ 20122݄23༵
͏͍ͪͲ.7$ 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai ╙30࿁Smalltalkീᒝળ 䉅䈉䈇䈤䈬MVC 2011ᐕ330ᣣ 㒙ㇱᐢ 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai MVC • Model-View-Controller • XEROX PARC LRG䈱Trygve Mikkjel Heyerdahl
Reenskaug䈮䉋䈦䈩1978-1979䈮ឭ᩺ – MODELS - VIEWS – CONTROLLERS • http://d.hatena.ne.jp/digitalsoul/20100913/1284330448 – DynaBookⷐ᳞᭽䈱৻ㇱ • 䊝䊂䊦䈲⍮⼂䈱⽎ • 䊎䊠䊷䈲䊝䊂䊦䈱䋨ⷞⷡ⊛䈭䋩⽎ • 䉮䊮䊃䊨䊷䊤䈲䊡䊷䉱䈫䉲䉴䊁䊛䈫䉕⚌䈨䈔䉎䉅䈱 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䉒䈭䈇䈫៊䉕䈜䉎Model-View- Controller • 㕍ᧁᷕ䈘䉖 • 1987ᐕ㗃 • ን჻䉷䊨䉾䉪䉴ᖱႎ䉲䉴䊁䊛(FXIS)䈱␠ౝᢥ ᦠ
• ዋ䈭䈒䈫䉅3䊋䊷䉳䊢䊮䈅䉎 • ⑳䈲␠䈚䈢1988ᐕ䈮OJT䉕ฃ䈔䈢 20122݄23༵
http://www.jac-net.com/~tarzan/smalltalkers/mvc/mvc.html 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䉒䈭䈇䈫៊䉕䈜䉎Model-View- Controller • MVC䈫䈲 – Smalltalk䉲䉴䊁䊛ో䉕⽾䈇䈩䈇䉎⸳⸘ᜰ㊎ – ήℂ䈮ᓥ䈉ᔅⷐ䈲䈭䈇䈏䇮䈖䉏䉕↪䈚䈭䈇䈫៊䉕䈜䉎 •
䊝䊂䊦䈲䇮↹㕙䈮␜䈚䈢䈇䉥䊑䉳䉢䉪䊃䈠䈱䉅䈱 • 䊎䊠䊷䈲䇮䊝䊂䊦䉕䇸䈇䈧䇮䈬䈖䈮䇮䈬䈱䈱ᄢ䈐䈘 䈪䇮䈬䈱䉋䈉䈮␜䈘䉏䉎䈱䈎䇹䉕⍮䈦䈩䈇䉎 • 䉮䊮䊃䊨䊷䊤䈲䇮䊝䊂䊦䉇䊎䊠䊷䉕ᠲ䈜䉎䈢䉄䈱 䊡䊷䉱䈎䉌䈱ⷐ᳞䉕ฃ䈔ઃ䈔䇮ో䉕ᓮ䈜䉎 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai MVC䈱ಽ㘃 • 䉮䊮䊃䊨䊷䊤䈏㗎ᒛ䉎MVC • ଐሽᕈ䉕↪䈜䉎MVC • 䊒䊤䉧䊑䊦䉕↪䈜䉎MVC 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䉮䊮䊃䊨䊷䊤䈏㗎ᒛ䉎MVC • 䊝䊂䊦䈏න⚐䈠䈱䉅䈱䈪䇮䊎䊠䊷䈲␜䈜䉎䈣䈔䇮 䈭䉖䈪䉅䈎䉖䈪䉅䉮䊮䊃䊨䊷䊤䈏䈵䈫䉍䈪㗎ᒛ䉎 • 䊝䊂䊦䈲䇮䊂䊷䉺▤ℂ䈣䈔䉕ኾ㐷䈮ⴕ䈉䉥䊑䉳䉢䉪䊃 䈪䈅䉎䈲䈝䈭䈱䈮䇮䉮䊮䊃䊨䊷䊤䈮ᡰ㈩䈘䉏䉎䊂䊷䉺 䈮ᚑ䉍ਅ䈏䈦䈩䈇䉎 •
䊝䊂䊦䈱ᖱႎ㓝⭁䈏⎕䉌䉏䉎 • 䊝䊂䊦䈫䊎䊠䊷䈏ኒធ䈮㑐ଥ䈚䈩䈇䉎 • ᄌᦝ䉇ᒛ䈮ᒙ䈇 • 䊝䊂䊦䉕ⶄᢙ䈱䊎䊠䊷䈎䉌䉂䉌䉏䈭䈇 20122݄23༵
ଐሽᕈ䉕↪䈜䉎MVC • 䈵䈫䈧䈱䊝䊂䊦䉕ⶄᢙ䈱䊎䊠䊷䈎䉌ⷰ䉎䈖䈫䈮ኻᔕ • ଐሽᕈ䈱ዉ – 䊝䊂䊦䈏ᄌൻ䈜䉎䈫䇮䊝䊂䊦䈲⥄ಽ䈮䇸changed:䇹䈱䊜䉾 䉶䊷䉳䉕ㅍ䉎 – 䈜䉎䈫䊝䊂䊦䉕ⷰ䈩䈇䉎䈜䈼䈩䈱䊎䊠䊷䈮䇸update:䇹䈫䈇
䈉䊜䉾䉶䊷䉳䈏ㅍା䈘䉏䉎 – 䊑䊨䊷䊄䉨䊞䉴䊁䉞䊮䉫ᯏ᭴ – ଐሽᕈㄉᦠ䈱䉨䊷䈮䊝䊂䊦䇮୯䈮䊎䊠䊷䈱㓸ว • 䊝䊂䊦䈱ᖱႎ㓝⭁䈏⏕┙ • 䉮䊮䊃䊨䊷䊤䈲䉁䈣䊜䊆䊠䊷䉕ᜬ䈦䈩䈇䉎 http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 20122݄23༵
http://www.smalltalk-users.jp/Home/gao-zhi/dai30kaismalltalkbenkyoukai 䊒䊤䉧䊑䊦䉕↪䈜䉎MVC • 䊎䊠䊷䈫䉮䊮䊃䊨䊷䊤䈱䊕䉝(VC)䈲䇮䊝䊂䊦䈎 䉌⁛┙ • M䉕VC䈮Ꮕ䈚ㄟ䉖䈪䈉 – 䊎䊠䊷䈱Ꮕ䈚ㄟ䉂(䊒䊤䉫䉟䊮䊜䉾䉶䊷䉳)䈲䊝䊂䊦 䈫䉶䊧䉪䉺(䊜䉸䉾䊄ฬ)䉕ᒁᢙ䈮ᜬ䈧
• on:aspect:menu: • 䊎䊠䊷䈲䊝䊂䊦䈏⥄り䈱ᖱႎ䉕ෳᾖ䈜䉎䉶䊧䉪䉺䈣䈔 䉕⍮䈦䈩䈇䉎 • 䊎䊠䊷䈲䊝䊂䊦䈏⥄り䈱䊜䊆䊠䊷䉕ෳᾖ䈜䉎䉶䊧䉪䉺 䈣䈔䉕⍮䈦䈩䈇䉎 20122݄23༵
.BSUJO'PXMFSTBJE photo by pragdave 20122݄23༵
l ʹݴͬͯɺݹయతͳ.7$ ࠓͷϦονΫϥΠΞϯτʹରͯ͠ ͋·Γ༻Λͳ͠·ͤΜɻ http://martinfowler.com/eaaDev/uiArchs.html 20122݄23༵
ରܕγεςϜͷ.7$ܥ ΞʔΩςΫνϟͷܥේ 20122݄23༵
.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 20122݄23༵
.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 20122݄23༵
1SFTFOUBUJPO.PEFM ✓ υϝΠϯϩδοΫͱϓϨθϯςʔ γϣϯϩδοΫΛϞσϧͷͰ ✓ 7JFX.PEFMͷखલʹஔ͔Ε ͨ1SFTFOUBUJPO.PEFMΛ ࢹ͢Δ 20122݄23༵
1SFTFOUBUJPO.PEFM View Model Controller Presentation Model ࢹ 20122݄23༵
ݹయతͳ.7$͕ ͍࣋ͬͯͨΛ ղܾ͠Α͏ͱͨ͠ͷ 20122݄23༵
ݹయతͳ.7$͕͍࣋ͬͯͨ ✓ γεςϜʹଘࡏ͢ΔϩδοΫ ϏδωεϩδοΫ͚ͩ͡Όͳ͍ ✓ ϓϨθϯςʔγϣϯϩδοΫͷ ஔ͖͕ ✓ .7$Ͱ7JFX͔.PEFM ʹ͓͔͘͠ແ͍
20122݄23༵
1SFTFOUBUJPO.PEFM View Model Controller Presentation Model ࢹ 20122݄23༵
1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ 7JTVBM8PSLTͰͷΞϓϩʔν ✓ .PEFM7JFX7JFX.PEFM ✓ 81'ͰͷΞϓϩʔν 20122݄23༵
.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 20122݄23༵
.PEFM7JFX1SFTFOUFS ✓ ೖྗ੍ޚ04͞Μ͕ͬͯ͘ΕΔ ͷͰίϯτϩʔϥ͞Μ͕ୀ ✓ 7JFXଆΛૢ࡞͍ͨ͠ϓϨθ ϯςʔγϣϯϩδοΫ͋ͬͨ ✓ ϩδοΫΛ࣋ͭଆͰ͍͡ΕΔ ਓ͕ඞཁ
20122݄23༵
.PEFM7JFX1SFTFOUFS View (V/C) Model Presenter ࢹ ૢ࡞Մ 20122݄23༵
ϙΠϯτ 20122݄23༵
$POUSPMMFSͱ 1SFTFOUFS ੜཱ͍ͪͷҟͳΔͷ 20122݄23༵
ཧ 20122݄23༵
.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 20122݄23༵
υϝΠϯϩδοΫҎ֎ͷϩδοΫ ΛͲ͜ʹஔ͍ͯɺͦΕͱଞͷίϯ ϙʔωϯτΛͲ͏͏·͘ڠௐͤ͞ Δ͔ͷ࣮ફͷྺ࢙ .7$ܥΞʔΩςΫνϟύλʔϯ 20122݄23༵
࠷ۙͷ+BWB4DSJQUϥΠϒϥϦ ✓ #BDLCPOFKT ✓ ,OPDLPVUKT ✓ +BWB4DSJQU.7$ ✓ #BUNBOKT 20122݄23༵
3BJMTͷੈքͰ ✓ $FMMT ✓ %SBQFS ✓ 20122݄23༵
8FCΞϓϦέʔγϣϯͷ ੈքʹɺϦονΫϥΠΞ ϯτͱେنԽʹΑͬͯϓ ϨθϯςʔγϣϯϩδοΫ ͱͷઓ͍͕ຊ֨Խͭ͠ ͭ͋Δ 20122݄23༵
.BSUJO'PXMFSTBJE photo by pragdave 20122݄23༵
l .7$͞·͟·ͳղऍΛ͞Εͯ͠·ͬ ͍ͯΔʹؔΘΒͣɺͦΕΒશ͕ͯ b.7$bͱ͍͏໊લͰهड़͞Ε͍ͯΔɻ ͦ͠ΕͰࠞཚ͠ͳ͍Α͏ͳΒɺ͋ͳ ͨݴήʔϜʹΑΔ.7$ͷޡղͷ٘ ਜ਼ऀͷՄೳੑ͕͋Δɻ http://martinfowler.com/eaaDev/uiArchs.html 20122݄23༵
ΫϥΠΞϯτ.7$ 20122݄23༵
http://www.flickr.com/photos/indigoskies/6523275513/ .7$.PEFM l࣌zͷ8FCΞϓϦέʔγϣϯʹ .7$ΞʔΩςΫνϟΛͯΊͨͷ 20122݄23༵
http://www.flickr.com/photos/indigoskies/6523275513/ .7$.PEFM l࣌zͷ8FCΞϓϦέʔγϣϯʹ .7$ΞʔΩςΫνϟΛͯΊͨͷ Ͱͳ͘ 20122݄23༵
.7$ܥΞʔΩςΫνϟύλʔϯ ✓ 1SFTFOUBUJPO.PEFM ✓ "QQMJDBUJPO.PEFM ✓ .77. ✓ .71 20122݄23༵
·ͩ ͕ ͬ͘͠Γ͖͍ͯͳ͍͜ͱ ✓ ϓϨθϯςʔγϣϯϩδοΫʹυ ϝΠϯϩδοΫʹ͏·͓͚͘ͳ͍ Α͏ͳϩδοΫ͋ΔΑ͏ͳ ✓ ΫϥΠΞϯτଆʹԿΛஔ͍ͯαʔό ଆʹԿΛஔ͍ͯͦΕΒ͕Ͳ͏ڠௐ͢
͖͔ 20122݄23༵
*TUIJTBOTXFS https://gist.github.com/1362110 20122݄23༵
ઌਓͷܙʹֶͼͭͭ ͞ΒͳΔ࣮ફͱ͕ٞ ඞཁͦ͏ 20122݄23༵
ଓ͘ 20122݄23༵
ͦͷଞͷใͷϙΠϯλ ✓ 81'͚ͷϞσϧϏϡʔϓϨθϯ λʔϏϡʔϞσϧઃܭύλʔϯ http://msdn.microsoft.com/ja-jp/magazine/hh580734.aspx ✓ ։ൃऀ͕͓͖ͬͯ͘ɺͭͷ6*Ξʔ ΩςΫνϟɾύλʔϯ http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_10/ greatblogentry_10_01.html
20122݄23༵
͠·ͩ͜͏͡ SHIMADA Koji ຊRubyͷձ Rubyࡳຈ Next Generation Web Application Architecture.
2012-02-21 Ruby Sapporo Night vol.14 ΞοϓϧετΞࡳຈ ϦονΫϥΠΞϯτ ࣌ͷ8FCΞϓϦέʔγϣϯ ΞʔΩςΫνϟ ύλʔϯʹ͍ͭͯߟ͑Δ ɹ 20122݄23༵
͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ 20122݄23༵
Ruby Sapporo Night vol.14 2012-02-23 Thu Apple Store, Sapporo 20122݄23༵