JavaScript
CoffeeScript
Mithril.js
LivesenseDay 14

Mithril.jsにはCoffeeがよく似合う

More than 1 year has passed since last update.

こちらはLivesense Advent Calendar 14日目の記事です。

こんにちは!転職ドラフトプロジェクトを担当しております、raamenです。

今更感もありますが、皆さんはjavascriptフレームワークは何を使っていますか?

当プロダクトはMithril.jsを主に使用しています。

Mithril.jsの良さは既に各所で語られているので、今日は1点だけその良さをご紹介したいと思います。


Mithril.jsってなに?

Mithiril.jsはいわゆる仮想DOMを採用したクライアントサイドjavascript MVCフレームワークです。

MVCとか言ってますがview以外は好きにやれって感じのゆるいフレームワークなので、APIを5個くらい覚えれば動くものが作れます。

細かいことは日本語サイトでも見といて。


Coffeeで書くとviewが書きやすい

Mithril.jsのメリットとして何よりも大きく感じているのはこれです。

「CoffeeScriptでViewが書きやすい。特にRails開発者なら制御構造が直感的に書ける」です。

物は試しで「コメントが投稿できて、そのコメントにいいねをつけたり外せたりする」アプリケーションを書いてみます。

class Comment

constructor: ->
@like = false
@body = m.prop('')
isLike: ->
@like
doLike: ->
@like = true
doUnlike: ->
@like = false
isValidLength: ->
1 <= @body().length && @body().length <= 1000

vm =
init: ->
vm.comments = []
vm.newComment = new Comment
createNewComment: ->
m.request(
# サーバサイドに送信するやつ
).then ->
vm.comments.push @newComment
vm.newComment = new Comment

component =
controller: ->
vm.init()
view: (ctrl) ->
m('.comment-list', [
vm.comments.map (comment) ->
m('.comment', [
m('p', comment.body())
m('.button-group', [
# コメントもこんな感じで書ける
if comment.isLike()
m('button', { onclick: comment.doUnlike.bind(comment) }, 'いいね済み')
else
m('button', { onclick: comment.doLike.bind(comment) }, 'いいね')
])
])
m('.comment-form', [
m('textarea', { oninput: m.withAttr('value', vm.newComment.body), value: vm.newComment.body() })
# 何も書いてなかったり文字数オーバーしてたらボタンを押せなくするぞ
if vm.newComment.isValidLength()
m('button', { onclick: vm.createNewComment.bind(vm) }, '投稿する')
else
m('button', { disabled: 'disabled' }, '投稿する')
])
])

m.mount(document.getElementById('app'), component)

capture.gif

流石Mithril.js。MVCフレームワークと言いつつViewModelが出てきてもなんともないぜ。

さて、モデルとかコントローラとかその辺は置いといて、viewを見て下さい。

普段hamlとかslimでviewを書いてる方なら直感的にどう動くかわかると思います。

仮想DOM系のフレームワークは条件分岐や繰返し等の制御構造が独自のディレクティブで分かりづらく学習コストが高かったり、思いっきりロジックを書かなきゃいけなかったりしてシンドイなーと思っていたのですが、coffeeで書くMithril.jsはとても楽だと思います。

モデル部分はcoffeeで書くメリットあんまりないのでes6併用で書くのをおすすめです。

導入も学習もviewの記述も簡単だけど強力なので、興味をお持ちになられましたら、一度使ってみて下さい。


おまけ

ちなみに使ったAPIは以下の5つだけ。学習コスト低い!


  • m

  • m.mount

  • m.withAttr

  • m.prop

  • m.request