Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
第参回
JavaScript勉強会
小倉 大樹
Modern	

JavaScript Dev	

The Beginners' Course
Ecosystem	

	

 Node, npm, glup……	

jshint	

	

 Lint, Style Format	

Modu...
Server-side JavaScript
Processor	

Node.js (fork: io.js) and others	

PackageManager	

	

 npm, bower	

BuildTool	

	

 Gr...
JSHint
•detect errors and potential problems	

•enforce your team's coding conventions	

•very flexible
No check, No commit!
The History and Future
そして、次のバージョンであるECMAScript6には

言語の機能そのものにモジュールの仕組みが……!
当初のJavaScriptにはモジュールや名前空間にあたる仕組みがなかった
それを補うために...
JavaScript Moduleまとめ
• ES6が標準化するまでの辛抱(IE?)
• 中規模以上ならモジュール化は必須、小規模でも必須
• 規模感や求めるクオリティが標準程度なら学習コストはペイする(はず)
• 複数環境や高圧縮Minifie...
アーキテクチャ
MMVM
入門
MVC モ
ナ
ド
の
価
値
Promiseパターン
Shadow DOM
Observer
リアクティブプログラミング
今回予定していた内容
ECMAScript
Study
episode: 3
Architecture
Observer Pattern
観察
状態の変化を観察し、通知する。
イベント駆動モデルを理解するための基礎。
GUIを組み上げる為のプログラミングに
不可欠なデザインパターンである。
Live Coding…
Observer Pattern
総括
状態の変化を観察し、イベントを通知する。
汎用性を持たせつつ、オブジェクトの
相互依存
を排除できる。
通知されたイベントに対する振る舞いを
Callbackで登録する。
Observer Pattern
総括
使われている例:
• JavaScriptのaddEventListener
• Node.jsのEventEmitter
• C#のevent
• Objective-CのKVO
!
とか色々
MVC
Model:データ、ビジネスロジック、なんか色々
ControllerViewModel
View:ユーザの為にモデルを表示する
Controller:モデルの操作、Viewへの命令
GUIアプリケーションの為に作られた設計指針
派生が色々ある
MVC, MTV, MVP, PM, MVVM, MVX……
それぞれなんか色々言ってるし、お互いに批判してるしそもそもよくわかんない…
なんか全般的にフワッとしてる…
MVC
世の中に広く知られたのはRailsの功績が大きい。
が、Webアプリが世界の全てではない。むしろ亜流。
ControllerViewModel
セントラルドグマみたいなもの。
ステートレスなHTTPに乗っかる実装と
ステートフルなクライ...
MVC Architecture
M
V C
Notify
ControlProject
Control
Observe
概観
Independently
Not Only ORM
So Fat, So Complex
Thin
MVVM
ViewModelViewModel
ViewModel
Two-way Data Binding
Event Observe
中核となる考え方はMVCと変わらないし、
フレームワークごとに実装が違ったりするので
こまけぇこたぁいいん...
View - ViewModel
View ViewModel
同期
状態の表示
状態の保持
Modelへの伝達
Two-way Databinding
Shinji Ikari
Male
14
……
……
View ViewModel
Pilot {
“name”: “Shinji Ikari”,
“sex”: Male,
“age”: 14,
“…”:...
Event Observe
Shinji Ikari
Male
14
更新
View ViewModel
Pilot {
// properties
}
Pilot
.updateButton
.onClick = (self) => {
$m...
MVC on JavaScript
実演
MVVM
ViewModelとViewの双方向データバインディングは
フレームワークの機構に頼ることになる。
Backbone.js, Ember.js, knockout.js, AngularJS, Vue.js……
状態の管理とその反映を...
Frameworks
フレームワークは超乱立してるけど、
Backboneとかの有名大手も枯れているし全然現役。
面白そうなんで僕はReactでFlux使っていきます。
ややこしい……けど
MVCとかその派生とか、さらに新しいFluxアーキテクチャとか色々あるけど
根底にあるのは
• Observerパターンを使い
• 各イベントを処理して
• 状態をちゃんと管理
すること。
それだけのことだけども、大規模化し...
おしまい
Upcoming SlideShare
Loading in …5
×

JavaScript MVC入門

3,191 views

Published on

社内勉強会3回目。
Observerパターンの説明から、イベント駆動、MVC、MVVMなどについてやりました。

Published in: Software
  • Be the first to comment

JavaScript MVC入門

  1. 1. 第参回 JavaScript勉強会 小倉 大樹
  2. 2. Modern JavaScript Dev The Beginners' Course Ecosystem Node, npm, glup…… jshint Lint, Style Format Modularize Rule StyleTool 前回のあらすじ
  3. 3. Server-side JavaScript Processor Node.js (fork: io.js) and others PackageManager npm, bower BuildTool Grunt or Gulp Module DependencyManagement RequireJS, browserify, component,WebPack ecosystem on
  4. 4. JSHint •detect errors and potential problems •enforce your team's coding conventions •very flexible No check, No commit!
  5. 5. The History and Future そして、次のバージョンであるECMAScript6には
 言語の機能そのものにモジュールの仕組みが……! 当初のJavaScriptにはモジュールや名前空間にあたる仕組みがなかった それを補うためにいくつかのツールやライブラリが考案された 代表的な仕様がCommonJSである CommonJSとはサーバ、クライアント、その他環境での標準的な仕様を定めるもの その中でモジュールの仕様も策定された
  6. 6. JavaScript Moduleまとめ • ES6が標準化するまでの辛抱(IE?) • 中規模以上ならモジュール化は必須、小規模でも必須 • 規模感や求めるクオリティが標準程度なら学習コストはペイする(はず) • 複数環境や高圧縮Minifierに耐えるコードを書く場合はさらに大変 • もっとよく知りたい人はgithubのリポジトリやuupa氏のドキュメントを読む ここまでやりました
  7. 7. アーキテクチャ MMVM 入門 MVC モ ナ ド の 価 値 Promiseパターン Shadow DOM Observer リアクティブプログラミング 今回予定していた内容
  8. 8. ECMAScript Study episode: 3 Architecture
  9. 9. Observer Pattern 観察 状態の変化を観察し、通知する。 イベント駆動モデルを理解するための基礎。 GUIを組み上げる為のプログラミングに 不可欠なデザインパターンである。
  10. 10. Live Coding…
  11. 11. Observer Pattern 総括 状態の変化を観察し、イベントを通知する。 汎用性を持たせつつ、オブジェクトの 相互依存 を排除できる。 通知されたイベントに対する振る舞いを Callbackで登録する。
  12. 12. Observer Pattern 総括 使われている例: • JavaScriptのaddEventListener • Node.jsのEventEmitter • C#のevent • Objective-CのKVO ! とか色々
  13. 13. MVC Model:データ、ビジネスロジック、なんか色々 ControllerViewModel View:ユーザの為にモデルを表示する Controller:モデルの操作、Viewへの命令 GUIアプリケーションの為に作られた設計指針
  14. 14. 派生が色々ある MVC, MTV, MVP, PM, MVVM, MVX…… それぞれなんか色々言ってるし、お互いに批判してるしそもそもよくわかんない… なんか全般的にフワッとしてる…
  15. 15. MVC 世の中に広く知られたのはRailsの功績が大きい。 が、Webアプリが世界の全てではない。むしろ亜流。 ControllerViewModel セントラルドグマみたいなもの。 ステートレスなHTTPに乗っかる実装と ステートフルなクライアントアプリケーション の方針が異なるのは当たり前。 思想と基本方針を理解するのが大事。
  16. 16. MVC Architecture M V C Notify ControlProject Control Observe 概観 Independently Not Only ORM So Fat, So Complex Thin
  17. 17. MVVM ViewModelViewModel ViewModel Two-way Data Binding Event Observe 中核となる考え方はMVCと変わらないし、 フレームワークごとに実装が違ったりするので こまけぇこたぁいいんだよの精神が大事。
  18. 18. View - ViewModel View ViewModel 同期 状態の表示 状態の保持 Modelへの伝達
  19. 19. Two-way Databinding Shinji Ikari Male 14 …… …… View ViewModel Pilot { “name”: “Shinji Ikari”, “sex”: Male, “age”: 14, “…”: …… } Binded 疑似コード
  20. 20. Event Observe Shinji Ikari Male 14 更新 View ViewModel Pilot { // properties } Pilot .updateButton .onClick = (self) => { $m.save(self.props); } Binded ・ ・ ・ 疑似コード
  21. 21. MVC on JavaScript 実演
  22. 22. MVVM ViewModelとViewの双方向データバインディングは フレームワークの機構に頼ることになる。 Backbone.js, Ember.js, knockout.js, AngularJS, Vue.js…… 状態の管理とその反映をより宣言的に行えるパラダイム。 React.jsはちょっと違う新しいライブラリ。 jQueryでDOMをゴチャゴチャいじる時代ではない。
  23. 23. Frameworks フレームワークは超乱立してるけど、 Backboneとかの有名大手も枯れているし全然現役。 面白そうなんで僕はReactでFlux使っていきます。
  24. 24. ややこしい……けど MVCとかその派生とか、さらに新しいFluxアーキテクチャとか色々あるけど 根底にあるのは • Observerパターンを使い • 各イベントを処理して • 状態をちゃんと管理 すること。 それだけのことだけども、大規模化しても破綻しないための方法論やライブラリが 今色々あるアレとかソレとかです。 仕組みは大体Observerパターン jQueryだけで頑張るより便利楽最高
  25. 25. おしまい

×