こちらは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)
流石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