JavaScript MVC フレームワーク Mithril をプロダクト導入した時の話

この記事はDeNA Advent Calendar 2016 5日目の記事です。

はじめに

初めまして、DeNA Games Osaka 技術編成部のさい(@sairoutine)です。DeNA Games Osaka は DeNA の大阪拠点です。今後ともよろしくおねがいしますね。

本記事では、JavaScript MVC フレームワーク Mithril を導入した際のお話をさせていただこうかと思います。

Mithril とは

Mithril とはクライアントサイドのMVCフレームワークです。2014年にLeo Horie氏によって公開され、現在も絶賛開発が進められています。(2016/12 現在、バージョンは0.2.5 です)

特徴として React と同様にレンダリングに仮想DOMを採用していること、またファイルサイズが軽く、処理速度/描画共に他フレームワークより速いことが挙げられます。

Mithril フレームワークについての詳細は手前味噌ですが、 Mobage Developers Blog にも記事がございますので、そちらも確認頂ければと思います。

最速フレームワーク Mithril 入門

採用経緯

ブラウザゲームにおけるレイドボスバトル(1つのボスを複数プレイヤーで攻撃する形式のバトル)において使用しました。このようなバトル画面では、下記の項目のように、変動する数値(一般に状態と呼ばれる)が多く、またバトルの攻撃演出を行う上で、CSSアニメーションを多用する特徴があります。

レイドボスバトルにおける状態の例一覧
1. ボスのHP
2. ボスの各種パラメータ(攻撃力/防御力etc...)
3. プレイヤーのデッキ
4. デッキの各ユニットのHP
5. 各ユニットの各種パラメータ
6. ユニットのスキル使用状況
etc...

担当プロジェクトでは、これまで tt.js という jQuery like な DOM 操作 JavaScript ライブラリを使って、ブラウザ上でのリッチなUXを提供してきましたが、今回の要件のように、多様な状態を管理するには、 DOM操作ライブラリ及び素の JavaScript では、状態を管理するコードを書くのは大変なため、JavaScript フレームワークを導入する運びになりました。

JavaScript フレームワークと言っても、BackboneAngular, React 等、多種多用なフレームワークが存在します。 その中でも Mithril は、処理速度が速くて CSS アニメーションを多用しても問題になりにくいこと、ブラウザ依存が少ないこと、そしてMithril フレームワーク自体のコード行数が2000行程度と少ないため、何らかのバグを踏んでも調査及びモンキーパッチを当てることが容易であることから、採用をしました。

Mithrilを採用して良かったこと

msx という HTML と親和性の高い View コンパイラ

React における jsx と同様に、Mithril においても msx という HTML like に仮想DOMを記述するためのコンパイラが存在します。 msx のおかげで、普段から HTML に慣れ親しんでいるマークアップエンジニアが View 周りを触ることが容易にできました。

MVC + 仮想 DOM がサーバーサイドエンジニアにとって親しみやすい

チーム体制として、専業のフロントエンドエンジニアがおらず、サーバーサイドエンジニアと マークアップエンジニア、そしてデザイナーによる開発でした。

元々 MVC というアーキテクチャに精通しているサーバーサイドエンジニアにとって、Mithril の MVC を習得することは容易でした。 また、仮想 DOM のおかげで、DOM の追加/変更/削除がロジック内に散らばらずに、View に DOM のあるべき姿を書くことができ、 これは、View 周りを PHP における Smarty テンプレートや、Node.js における Jade と同じような概念で書けるため、これも サーバーサイドエンジニアにとって習得が容易でした。

学習コスト低め

Mithril 自身が ES5 で記述されていることもあり、アプリケーションコードを ES5 or ES6 どちらでも記述することができます。 View については、msx という仮想DOM 記述のための独自構文を使用しましたが、それ以外については、 素の JavaScript で書けるため、例えば Angular のように独自の構文を覚えなくて済む点で、 本職のフロントエンドエンジニアでなくとも、学習が容易でした。

CSS アニメーションとの相性の良さ

バトル周りのアニメーションを実装するに当たって、HTML5 Canvas を使用する方法と、DOM を CSS3 Animation を使用する方法があります。 今回は、CSS を使ってアニメーションする方法を採用しました。CSS を使ったアニメーションは、基本的に DOM に css を適用することで アニメーションの実行が発生します。DOM の操作でアニメーションが行えるため、仮想 DOM の恩恵を最大限に受けることができました。

ブラウザ互換性の高さ

Mithril はブラウザ互換性が高く、es5-shim を併用することで、モバイル端末では、 iOS 4.x 系、Android 2.x 系などの古い端末でも動くことが確認できています。

課題点

msx の独自構文を覚えなくてはいけない点

良かった点として、msx が HTML like な点を挙げましたが、逆に言うと、あくまで HTML like であり、 HTML とまったく同じように記述できるわけではありません。

例えば、HTML の class 属性については、javaScript の予約語と重複するため、className 属性で記述する必要があります。また例えば br タグのような閉じタグのないタグについては、<br /> のように XHTML と同様に最後に / をつけないと msx のコンパイルに失敗する等といった HTML との差異があります。

仮想DOM という概念の難しさ

仮想DOMから実DOM へのレンダリングは全て Mithril が担当してくれます。このおかげで、 我々は仮想DOMを記述するだけで、実DOMをレンダリングすることができます。 しかしCSS アニメーションを多用する関係上、仮想DOMから実DOMへいつどのタイミングでレンダリングされるのか、 どのDOMが更新され、どのDOMが更新されないのか、というのをきちんと把握しながら実装する必要があるのですが、 このあたりは Mithril フレームワークのコードを読み解いていく必要がありました。

終わりに

以上、Mithril を導入した際のお話をさせていただきました。 ブラウザゲームにおける採用であったり、本業のフロントエンドエンジニアがいない中での実装であったり、 となかなか特殊な要件での採用でしたが、Mithril は要件とチームの現状に即した採用だったと思います。

仮想DOM といえば、React がある程度の立ち位置を確保してきた感じがありますが、 もし機会ございましたら、ぜひ Mithril も検討してみてください!

ツイート
シェア
あとで読む
ブックマーク
送る
メールで送る