最近めっきり話を聞かなくなったJSフレームワーク、 Mithril.js に関する Tips をつらつらと書いていきます。
決して下火になったわけじゃあないんです。
Mithril.js とは
いわゆる仮想DOMフレームワークの一つ。メジャーな React や Angular と比べ、軽量・シンプル・高速なことを謳う。
フレームワークの機能としては、React, Vue と比べても決して不足していないうえ、実際のプロダクトにも採用例があり十分ポテンシャルはある。はずです。
前述の通りバズってはいないですが、現在も活発に開発が続けられており、Ver.2のリリースも予定されています。
Mithril 情報を集めるために
重要な点として、Mithril は v0.2 系と v1.x 系で大きくAPIが異なっています。 v1.xの方が正式となり、v2でも大きな変更は入らないようなので、この点だけは覚えておいてください。
早い話が、 Controller あるいは m.props が話題に出る記事は 古いです。これからは参考にしてはいけません。
じゃあどうなったかと言うと、現在はよりシンプルかつ賢くなって、m.props を使わずとも変更が検知されるし、controller を使わずともライフサイクルに応じたフック処理を実行できます。より簡単かつ高速になった純粋な上位互換と言えるものなので、この点でも今から v0.2 系の知識を仕入れる意味はありません。
ここまで分かればあとは公式サイトなり、新し目の記事なりを漁って導入は出来るかと思うので、そのフェーズは他の記事に譲ります 手抜きともいう 。
以下は使っていく上で気づいたポイントを書き連ねたものです。
vdom.state は使わない
基本的に view に state をもたせるのは99%アンチパターンです。状態に類するものは model のオブジェクトとして分離し、 view 側ではそれを読みに行くだけにしましょう。
例: テーブルの各列コンポーネントに状態をもたせるのではなく、元データにその状態をもたせて、コンポーネントは filter をかけるなどして出し分ける。
arrow function 最強説
arrow function はどんどん活用しましょう。
// 普通に書いてみる
const Component = {
view: function(vdom) {
// ...
}
}
// arrow function で書いてみる
const Component = {
view: vdom => {
// ...
}
}
// 値を返すだけのfunctionはもっと短くできる
const Component = {
view: v => m("button", { onclick: model.incCount }, "+1"),
}
これに加えて map
filter
reduce
などのメソッドや、三項演算子を組み合わせることでよりコンポーネントをスマートに書けます。楽しくかっこよくコーディングしましょう。
form の取扱い
結論から言うと、 formは使わずformっぽいスタイルを使って実現します 。 (bootstrap なら .form-group
が使えます)
const FormLikeComponent = {
view: v => [
m(".form-group", [
m("input[type=text]", { value: model.textData, oninput: e => model.textData = e.target.value }),
m("button", { onclick: model.submit }, "送信"),
]),
],
}
let model = {
submit: e => {
m.request({
url: someUrl,
data: {text: model.textData},
})
.then( /* some handling */ );
},
}
form が使えないとはいえ十分シンプルに書けます。ポイントは、
-
oninput
イベントなどを用いて入力値を補足します。入力値を得るには、イベントオブジェクトのtarget.value
を参照します。ここで得た値は例によって state ではなく model のどこかに持たせるべきです。 - form 内の button なりなんなりで、submit 相当のイベントを発火します。そこでは Mithril らしく
m.request
を使います。要は普通のリクエストですね。フォームだからと特別な処理は必要ありません。
input 要素を見てもらえれば分かる通り、こんな感じで双方向バインディングな処理が簡単に書けるのが Mithril の素敵ポイントですね。formっぽいスタイルがないときは頑張ってください。
request まわり
request について書きたかったけど力尽きたので一旦ここまでで。
TypeScript まわり
TypeScript について (ry