javascript mvc入門

第参回 JavaScript勉強会

小倉 大樹

Modern JavaScript Dev The Beginners' CourseEcosystem Node, npm, glup……

jshint Lint, Style Format

Modularize Rule Style Tool

前回のあらすじ

Server-side JavaScriptProcessor Node.js (fork: io.js) and others PackageManager npm, bower

BuildTool Grunt or Gulp Module DependencyManagement RequireJS, browserify, component, WebPack

ecosystem on

JSHint

• detect errors and potential problems

• enforce your team's coding conventions

• very flexible

No check, No commit!

The History and Future

そして、次のバージョンであるECMAScript6には

言語の機能そのものにモジュールの仕組みが……！

当初のJavaScriptにはモジュールや名前空間にあたる仕組みがなかった

それを補うためにいくつかのツールやライブラリが考案された 代表的な仕様がCommonJSである

CommonJSとはサーバ、クライアント、その他環境での標準的な仕様を定めるもの その中でモジュールの仕様も策定された

JavaScript Moduleまとめ• ES6が標準化するまでの辛抱（IE？）

• 中規模以上ならモジュール化は必須、小規模でも必須

• 規模感や求めるクオリティが標準程度なら学習コストはペイする（はず）

• 複数環境や高圧縮Minifierに耐えるコードを書く場合はさらに大変

• もっとよく知りたい人はgithubのリポジトリやuupa氏のドキュメントを読むここまでやりました

アーキテクチャMMVM

入門

MVC モ

ナ

ド

の

価

値

Promiseパターン

Shadow DOMObserver

リアクティブプログラミング

今回予定していた内容

ECMAScriptStudy

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 CNotify

ControlProject

Control

Observe

概観IndependentlyNot Only ORM

So Fat, So Complex

Thin

MVVMViewModelViewModel

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, “…”: …… }

Binded

疑似コード

Event Observe

Shinji Ikari

Male

14

更新

View ViewModel

Pilot { // properties } Pilot .updateButton .onClick = (self) => { $m.save(self.props); }

Binded

・・・

疑似コード

MVC on JavaScript

実演

MVVM

ViewModelとViewの双方向データバインディングは フレームワークの機構に頼ることになる。

Backbone.js, Ember.js, knockout.js, AngularJS, Vue.js……

状態の管理とその反映をより宣言的に行えるパラダイム。

React.jsはちょっと違う新しいライブラリ。

jQueryでDOMをゴチャゴチャいじる時代ではない。

Frameworks

フレームワークは超乱立してるけど、 Backboneとかの有名大手も枯れているし全然現役。

面白そうなんで僕はReactでFlux使っていきます。

ややこしい……けど

MVCとかその派生とか、さらに新しいFluxアーキテクチャとか色々あるけど 根底にあるのは

• Observerパターンを使い • 各イベントを処理して • 状態をちゃんと管理

すること。

それだけのことだけども、大規模化しても破綻しないための方法論やライブラリが

今色々あるアレとかソレとかです。

仕組みは大体Observerパターン

jQueryだけで頑張るより便利楽最高

おしまい