Mithril

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
meetup app tokyo@1
Web MVC+SPAフレームワーク
Mithril
2016/06/24
GDI 渋川よしき

お前だれよ？
 前職
⁃ 自動車会社の社内SE
 現職
⁃ 社内ゲームエンジン用のフレームワーク
(クライアント用もサーバ用も)作ったり、
開発支援ツール作ったりいわゆる社内SE
⁃ 最近はQt(C++)を毎日書いてます
渋川よしき
 プログラミング
 C++とかPythonとかGolangとかJavaScriptとか
 本
 つまみぐい勉強法、アート・オブ・コミュニティ(翻訳)、
Mobageを支える技術、オブジェクト指向JavaScript(翻訳)、
ポモドーロ・テクニック入門(翻訳)、etc

昨年出しました！
 JavaScriptの、最速クライアント用MVCフレームワークの本です！
⁃ 速いのが好きな人や、変化が多いブラウザ周辺技術に疲れた人に
オススメ
⁃ 古くなってません！
 電子書籍のみです
 表紙は黒ムツの仲間
⁃ 南オセアニアの深海魚
⁃ 最大75cm
⁃ 確認された最高齢は
100歳を超えるとか

かんたん/Easy/Simpleについて

 かんたん/Easy/Simpleといった言葉がよく使われる
 ソフトウェアのライブラリ・フレームワーク・言語は特定の問題の解決
をしやすくするために作られる
→対象を限定すればどのソフトウェアも「かんたん」で説明できる
→つまり何も説明していないのと同じ
 例えば
⁃ Qt/Xamarin
• 1度GUI作成を学べば、同じ知識で他のOSのアプリも「かんたんに」作れる
⁃ Angular
• 束縛が強いため、レールに乗って「かんたんに」MVCアプリが作れる
⁃ Electron
• ブラウザの知識があれば「かんたんに」デスクトップアプリが作れる
⁃ C++
• ゼロオーバーヘッドでC言語よりも遅くないコードが「かんたんに」作れる

 かんたん/Easy/Simpleといった言葉がよく使われる
 ソフトウェアのライブラリ・フレームワーク・言語は特定の問題の解決
をしやすくするために作られる
→対象を限定すればどのソフトウェアも「かんたん」で説明できる
→つまり何も説明していないのと同じ
 例えば
⁃ Qt/Xamarin
• 1度GUI作成を学べば、同じ知識で他のOSのアプリも「かんたんに」作れる
⁃ Angular
• 束縛が強いため、レールに乗って「かんたんに」MVCアプリが作れる
⁃ Electron
• ブラウザの知識があれば「かんたんに」デスクトップアプリが作れる
⁃ C++
• ゼロオーバーヘッドでC言語よりも遅くないコードが「かんたんに」作れる
かんたん/Easy/Simpleは今日のNGワード

Mithrilとは

Mithrilとは
 ドキュメントの日本語翻訳あります！
 http://mithril-ja.js.org

Mithrilの守備範囲
V-DOM
Router (SPA)
Component XHR
サーバへの通信コード含めて
Mithrilで完結
ビジュアル層は好きなCSS
フレームワーク等が利用可能
(ただしPolymerはChrome限定)
その他、既存のUIライブラリも
使える(jQuery UI系など)

Mithrilのコア
 機能が絞りこまれたアトミックなWebのMVC+SPAフレームワーク
⁃ 他のライブラリに依存せずにアプリが作れる
• サーバ通信、非同期処理(promise)、モデル作成、SPAサポート(ラウター)
仮想DOM、コンポーネント
⁃ gzipされた状態で7.8KBほどの大きさ
• リファレンスに乗っている関数は16個ほど
• そのうちよく使うのは半分ぐらい？
• 本を書き始めてから1年以上、バグ修正等で更新は頻繁にあるが、
ほとんどAPIに変更がない
 内部では仮想DOMという仕組みを使っていて比較的高速
⁃ 詳細は「最速MVCフレームワークMithril.jsの速度の秘密」(Qiita)
⁃ 速度チューニングも可能だが、そこまで頑張る必要性が低い

Mithrilアプリケーションの構造
実際に作ったアプリケーションを参考に紹介します。

 戦魂 –SENTAMA-
戦国時代がモチーフの戦略シミュレーションRPG
開発の目線での紹介はこちら
(http://www.slideshare.net/dena_study/unityrpg)にまとまって
います

戦魂チーム向けの運用改善
 マスターデータ運用は、昨年のFINAL FANTASY Record Keeperのマ
スターデータ運用改善で発表したのと同じ仕組みは導入済みだった
 スプレッドシートでは表現が難しく入力⇔確認に手間がかかるデータが
2つほどあったのでElectronを使って入力補助ツールを作成した
⁃ 戦場マップ
⁃ 列伝(キャンペーンモード)のオープニングシーケンス
 これらを題材に、Mithrilアプリケーションの構造を紹介します

できあがったもの
 今までのワークフローに手を入れることはなく入力高速化にフォーカス
⁃ Mithril同様、アトミックな部分に割りきって、費用対効果最大化
⁃ コピペ・ツールチェーン(後工程のスプレッドシートにコピペで
データを移せるように、整形した表を表示)
⁃ 試行錯誤の時間が増えて、よりユーザに楽しんでもらえる演出、
マップづくりに時間が使えるようになった

Mithrilアプリケーションの基本設計 (1)
 HTMLの一部をMithrilの仮想DOM管理下にする
⁃ m.mount(): １つのコンポーネントに描画を任せる
⁃ m.route(): 現在のURLに応じてコンポーネントを切り替える
 全部を仮想DOMにまかせてしまうのも可だが、ヘッダー、フッターな
ど変化しない部分は静的HTMLのままの方が楽
 複数パートに分割適用もできる(した)
m.route()
m.mount()
m.mount()

できあがった構造
main.js
application
context.js
script/index.j
s
script/
xxx page.js
script/
xxx page.js
script/
xxx page.js
script/viewm
odel.js
script/model
.jswindow
open
undo/redo
script/
canvasmap.js

Mithrilアプリケーションの基本設計(2)
 コンポーネント、ビューモデル、モデルでアプリを組み立てる
⁃ コンポーネントはコントローラとビューで構成
• どちらも状態は持たない
• コンポーネントは入れ子にできる
⁃ ビューモデルは編集中のデータなど永続化しないデータ持つ
⁃ モデルは永続化するべき大事なデータを持つ
• VMとMの機能分けは規約でそうなっているだけでAPI上は1つにまとめるこ
とも不可能ではない
• それどころか、コントローラ==モデルにすることもAPI上は不可能ではな
いが、上記の規約に従う方がよい
• クラス継承等でコード的にルール強制されるわけではないので、自分で
Mithril Wayに従ってコードを整理しなければいけない点は要注意

戦場マップエディタのコンポーネント・ビュー(1)
 各ページのトップはコンポーネント
 よく使うマップ部分もコンポーネント化した
⁃ <canvas>タグをm()で作り、ビューのconfigから、
requestAnimationFrame()の再帰的呼び出しでcanvas更新
⁃ 引数でモード切り替え
• モードによって要素のフィルタリング・サイズ変更など

戦場マップエディタのコンポーネント・ビュー(2)
 ビューの一部に、仮想DOM以外のライブラリを併用することが可能
⁃ 既存のUI部品資産があれば、それを利用できる
 表はMITライセンス版のhandsontableを使用
⁃ ビューのconfigの機能を使って適用
⁃ 行・列のどちらの方向もExcelっぽく選択でき、コピペでExcelにそ
のまま貼れる

シングルページアプリケーションのサポート
 画面の完全リロードやリセットが起きなくなり、レスポンスがよくなる
 Mithrilの場合は、フルリロードの従来型ウェブアプリケーションも、
SPAにする場合も、コードは特に変わらないので対応しない理由はない
 URLのスタイルがいくつか選べる
 今回はデフォルトのまま利用
スタイル例デメリット
“search” (デフォルト) http://server/?/path/to/page history.pushStateがないIE8ではリフレッシュ
してしまう
“hash” http://server/#/path/to/page どのブラウザでもOKだが、名前付きアン
カーが使えなくなる
“pathname” http://server/path/to/page URLは一番きれいだが、サーバ側の設定が必
要
history.pushStateがないIE8ではリフレッシュ
してしまう

おまけ: Electron側の描画側ではない方のプロセス
 ブラウザ/レンダラプロセス間のインタラクションを疎にしつつ、普通
のデスクトップアプリの使い勝手を再現した
⁃ Electronのブラウザプロセス側のコードはモデルの履歴管理と、
ファイル入出力に特化する。
⁃ ブラウザがXHRでサーバ通信する代わりに、編集(モデル変更)時に
レンダラープロセスがJSONをブラウザプロセスに送る
⁃ ファイル読み込み、アンドゥ・リドゥ実行時にブラウザプロセスか
ら、今表示すべきモデルを
レンダラープロセスに送り、
Mithrilのモデルをリセット
⁃ 詳しくはQiitaの「Electron+
Mithrilで、ふつうのデスク
トップアプリを作る」参照

ちなみに
 餃子声優橘田いずみさん(@izugyoza)の餃子本

Mithrilのアプリの構造と完全に一致

橘田いずみさんの餃子のコア
 アトミックな餃子フレームワーク
⁃ 限界まで絞りこまれたシンプルな材料
• 豚肉・青ネギ・生姜のみ
• ニンニクもニラも使わず、豚肉を混ぜるときは箸で行う
⁃ 夕食以外も安心して食べられる
⁃ 爪の手入れをしている女性にも優しそう
⁃ これに、各種野菜などをアドオンして餡を仕上げる
• 単に混ぜるだけなので、肉餡をたくさん作ってから小分けにして、一度に
数種類の餃子を仕上げることも可能
 高いポータビリティ
⁃ 肉餡の状態の状態でも保存ができるし、餃子にしても保存が可能

まとめ
 MithrilはアトミックなMVC+SPAフレームワーク
⁃ 関数の数が少なく、余計な機能がないため、APIの変更もほぼない
⁃ デスクトップGUI開発者も勉強になりますよ！
 CSSフレームワークは自由に切り替えられる
⁃ 僕のお気に入りはMaterial Design Lite (mithril-mdl)
⁃ ShadowDOMが来たらPolymerが・・・
 コンポーネントの分割、ビューモデル、モデルの責務分割が勝利の鍵
⁃ データの流れを整流
 既存のUIライブラリと一緒に使ったり、canvas
を組み込んだりもできます
 Electronと一緒に使うのも簡単
⁃ 社内ツールを作ってみた
 餃子と同じぐらいMithrilもいいよ

Mithril

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Mithril (20)

More from Yoshiki Shibukawa (20)

Mithril