frontend fantasy 〜ミスリルの戦士たち〜
TRANSCRIPT
![Page 1: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/1.jpg)
NDS IN NIIGATA MEETUP #8
ミスリルの戦士たちFRONTEND FANTASY
![Page 2: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/2.jpg)
Friday the 13th
![Page 3: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/3.jpg)
// me.json
{
“name”: “松井 正志”,
“kana”: “まつい まさし”,
“company”: “water-cell inc.”,
“role”: [
“フロントエンドエンジニア”,
“サーバーサイドエンジニア”
],
“twitter”: [“@circled9”, “@ma_2_i”]
} 33
![Page 4: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/4.jpg)
Agenda• Introduction
• Feature
• Architecture
• Tutorial
• Etcetera
• Conclusion4
![Page 5: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/5.jpg)
Introduction
5
![Page 6: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/6.jpg)
みなさんがお使いの フレームワークは何ですか?
6
![Page 7: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/7.jpg)
Backbone.js
7
![Page 8: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/8.jpg)
AngularJS
8
![Page 9: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/9.jpg)
React & Flux
9
![Page 10: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/10.jpg)
どれもすばらしい フレームワーク
10
![Page 11: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/11.jpg)
どれを使うべき?
11
![Page 12: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/12.jpg)
RailsとSinatra
12
![Page 13: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/13.jpg)
djangoとTornado
13
![Page 14: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/14.jpg)
フレームワークは 使い分けるべき
14
![Page 15: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/15.jpg)
15
Mithril
![Page 16: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/16.jpg)
Feature
16
![Page 17: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/17.jpg)
かるい Light-weight
17
![Page 18: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/18.jpg)
たった12KB (gzip)
18
![Page 19: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/19.jpg)
小さなAPI、小さな学習曲線
• 用意されているAPIは全部で16個
• 毎日1個ずつ覚えれば2週間ちょっとでマスターできますね!(極論)
19
![Page 20: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/20.jpg)
けんじつ Robust
20
![Page 21: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/21.jpg)
デフォルトで安全
21
![Page 22: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/22.jpg)
コンポーネントによる分割
• Reactみたいに部品を組み合わせてViewを作る
• 部品の再利用がしやすい
• Fluxみたいな仕組みはなので、極力子コンポーネントはステートレスにするとよい
22
![Page 23: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/23.jpg)
割と堅実な方針
• しっかりとしたドキュメント
• 今のところ互換性無視の破壊的なアップデートもない模様
• 実装面でも、例えばRouterはIE8でも動くようなモードが用意されている
23
![Page 24: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/24.jpg)
はやい Fast
24
![Page 25: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/25.jpg)
Virtual DOM
• Reactなどと同じ仮想DOMによる差分更新
• 実装の仕方も仮想DOMありきの実装になる
25
![Page 26: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/26.jpg)
頭のいい再描画
• いろいろなイベントをトリガーにして更新をする
• クリックとか通信終了とか
• データに変更がおきるタイミングは大体その辺という考え方
26
![Page 27: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/27.jpg)
速度の比較
27
![Page 28: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/28.jpg)
Architecture
28
![Page 29: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/29.jpg)
Architecture
• Model
• View Model
• View
• Controller
29
![Page 30: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/30.jpg)
Architecture
30
Component
Controller
View View Model
ModelComponent
Controller
View View Model
30
![Page 31: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/31.jpg)
Architecture
• クラス継承などはせず、すべて普通の関数、普通のJavaScripオブジェクトとして実装する
• 割と実装は自由にできる
31
![Page 32: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/32.jpg)
Model
• 普通のJavaScriptオブジェクト
• 責務はビジネスモデルのカプセル化
• m.prop()でgetter-setterを作る
32
![Page 33: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/33.jpg)
Model View
• 普通のJavaScriptオブジェクト
• 責務はビューに関するロジックなどのカプセル化
• ビューのステートを保持したり、変更内容をモデルに反映したりする
33
![Page 34: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/34.jpg)
View
• ビューは関数として実装する
• 責務は表示とモデルのバインディング
• function() { return m(“div”) } みたいな感じで定義していく。
34
![Page 35: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/35.jpg)
Controller
• コントローラーは関数として実装する
• 責務は各レイヤーの初期化など
• 一般的なMVCのコントローラーのように、ユーザーの入力の取り扱いなどはしない
35
![Page 36: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/36.jpg)
Architecture (再掲)
36
Component
Controller
View View Model
ModelComponent
Controller
View View Model
36
![Page 37: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/37.jpg)
Tutorial
37
![Page 38: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/38.jpg)
前準備 MithrilをDLする
38
![Page 39: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/39.jpg)
(CDNでもいいです)
39
![Page 40: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/40.jpg)
HTMLを作る
40
![Page 41: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/41.jpg)
41
![Page 42: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/42.jpg)
コンポーネントを作る
42
![Page 43: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/43.jpg)
43
![Page 44: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/44.jpg)
44
![Page 45: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/45.jpg)
ビューのモックを作る
45
![Page 46: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/46.jpg)
46
![Page 47: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/47.jpg)
ビューモデルを作る
47
![Page 48: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/48.jpg)
48
![Page 49: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/49.jpg)
49
![Page 50: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/50.jpg)
ビューの動作を作る
50
![Page 51: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/51.jpg)
51
![Page 52: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/52.jpg)
52
![Page 53: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/53.jpg)
おまけ モデルの永続化をしてみる
53
![Page 54: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/54.jpg)
54
![Page 55: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/55.jpg)
55
![Page 56: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/56.jpg)
56
![Page 57: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/57.jpg)
Etcetera
57
![Page 58: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/58.jpg)
Routing
• Routerも用意されている
• URL表記が違う3つのモードがある
• search / hash / pathname
58
![Page 59: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/59.jpg)
Ajax
• m.request()で非同期でデータを取得する
• m.request()は、指定したモデルのクラスにキャストしてデータを返す
59
![Page 60: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/60.jpg)
他のライブラリとの共存
• config属性で実際のDOMを扱うライブラリを組み込むことができる
60
![Page 61: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/61.jpg)
MSX
• ビューを書くのがつらいときは、JSXライクなMSXがる
• 普通に変換することもできるし、実行時に変換することもできる
61
![Page 62: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/62.jpg)
Conclusion
62
![Page 63: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/63.jpg)
ミスリルはミニマム
63
![Page 64: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/64.jpg)
手軽に書きたい時に すごくおすすめ
64
![Page 65: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/65.jpg)
JSあるある
65
![Page 66: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/66.jpg)
よーしJS書くぞー ↓
(開発環境構築で力尽きる)
66
![Page 67: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/67.jpg)
どうしてこうなった
67
![Page 68: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/68.jpg)
68
![Page 69: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/69.jpg)
いっぱい めんどい むずかしい
69
![Page 70: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/70.jpg)
まだビルドで 消耗してるの?
70
![Page 71: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/71.jpg)
もうビルドやめよう?
71
![Page 72: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/72.jpg)
もうES5で書こうよ
72
![Page 73: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/73.jpg)
73
しゅみだもの
びるどしなくても
いいじゃない
![Page 74: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/74.jpg)
(異論は認める)
74
![Page 75: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/75.jpg)
たまにはES5で JSを書いてみよう
75
![Page 76: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/76.jpg)
76
Mithril
![Page 77: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/77.jpg)
ミスリルでミニマムなスタイル
77
![Page 78: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/78.jpg)
References
78
![Page 79: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/79.jpg)
公式サイト
79
![Page 80: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/80.jpg)
オライリーのミスリル本
80
![Page 81: Frontend Fantasy 〜ミスリルの戦士たち〜](https://reader030.vdocuments.net/reader030/viewer/2022020213/587284611a28abc7068b6d53/html5/thumbnails/81.jpg)
81
おしまい