Recommended
More Related Content
What's hot
What's hot (19)
Similar to JavaScript MVC入門
Similar to JavaScript MVC入門 (20)
JavaScript MVC入門
- 2. Modern JavaScript Dev The Beginners' Course Ecosystem Node, npm, glup…… jshint Lint, Style Format Modularize Rule StyleTool 前回のあらすじ
- 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. JSHint •detect errors and potential problems •enforce your team's coding conventions •very flexible No check, No commit!
- 5. The History and Future そして、次のバージョンであるECMAScript6には 言語の機能そのものにモジュールの仕組みが……！ 当初のJavaScriptにはモジュールや名前空間にあたる仕組みがなかった それを補うためにいくつかのツールやライブラリが考案された 代表的な仕様がCommonJSである CommonJSとはサーバ、クライアント、その他環境での標準的な仕様を定めるもの その中でモジュールの仕様も策定された
- 6. JavaScript Moduleまとめ • ES6が標準化するまでの辛抱（IE？） • 中規模以上ならモジュール化は必須、小規模でも必須 • 規模感や求めるクオリティが標準程度なら学習コストはペイする（はず） • 複数環境や高圧縮Minifierに耐えるコードを書く場合はさらに大変 • もっとよく知りたい人はgithubのリポジトリやuupa氏のドキュメントを読む ここまでやりました
- 10. Live Coding…
- 12. Observer Pattern 総括 使われている例： • JavaScriptのaddEventListener • Node.jsのEventEmitter • C#のevent • Objective-CのKVO ! とか色々
- 14. 派生が色々ある MVC, MTV, MVP, PM, MVVM, MVX…… それぞれなんか色々言ってるし、お互いに批判してるしそもそもよくわかんない… なんか全般的にフワッとしてる…
- 16. MVC Architecture M V C Notify ControlProject Control Observe 概観 Independently Not Only ORM So Fat, So Complex Thin
- 17. MVVM ViewModelViewModel ViewModel Two-way Data Binding Event Observe 中核となる考え方はMVCと変わらないし、 フレームワークごとに実装が違ったりするので こまけぇこたぁいいんだよの精神が大事。
- 18. View - ViewModel View ViewModel 同期 状態の表示 状態の保持 Modelへの伝達
- 19. Two-way Databinding Shinji Ikari Male 14 …… …… View ViewModel Pilot { “name”: “Shinji Ikari”, “sex”: Male, “age”: 14, “…”: …… } Binded 疑似コード
- 20. Event Observe Shinji Ikari Male 14 更新 View ViewModel Pilot { // properties } Pilot .updateButton .onClick = (self) => { $m.save(self.props); } Binded ・ ・ ・ 疑似コード
- 22. MVVM ViewModelとViewの双方向データバインディングは フレームワークの機構に頼ることになる。 Backbone.js, Ember.js, knockout.js, AngularJS, Vue.js…… 状態の管理とその反映をより宣言的に行えるパラダイム。 React.jsはちょっと違う新しいライブラリ。 jQueryでDOMをゴチャゴチャいじる時代ではない。
- 24. ややこしい……けど MVCとかその派生とか、さらに新しいFluxアーキテクチャとか色々あるけど 根底にあるのは • Observerパターンを使い • 各イベントを処理して • 状態をちゃんと管理 すること。 それだけのことだけども、大規模化しても破綻しないための方法論やライブラリが 今色々あるアレとかソレとかです。 仕組みは大体Observerパターン jQueryだけで頑張るより便利楽最高
- 25. おしまい