2019年の今 Mithril.js を使うためのTips #JavaScript

最近めっきり話を聞かなくなった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