まだまだ戦えるweb！mithril.js最初の１歩

Copyright © DeNA Co.,Ltd. All Rights Reserved.Copyright © DeNA Co.,Ltd. All Rights Reserved.
まだまだ戦えるweb！
Mithril.js 最初の１歩
株式会社 DeNA Games Osaka
技術編成部
森啓介 keisuke.a.mori@dena.com

Copyright © DeNA Co.,Ltd. All Rights Reserved.
まずは自己紹介
■ 森啓介 (もりけいすけ) keisuke mori
■ 株式会社 DeNA Games Osaka 2016年 5月入社
■ 元コミュニティ系 Webアプリケーションエンジニア
■ 5歳の男の子と３歳の女の子、２児のパパさん
■ 今は某450万人ユーザー超えブラウザゲームの開発・運用をメインでやっ
てます
■ 一応FaceBook (https://www.facebook.com/milksoap777)
■ IT勉強会、初登壇です← (ここ大事)

ブラウザゲームの
開発・運用を
メインでやってます

え？

ブラウザゲームって
まだ稼働してるの？

DeNAでは、まだまだブラウザタイトルも現役で稼働中！
※2016年度第1四半期決算説明会資料より

アプリのゲーム技術も日々進化していますが、
ブラウザ（Web）ゲームの技術もまだまだ進化しています！
今日はそんなWeb技術の中から、１つだけご紹介！

Mithril.js
(みすりるじぇいえす）
http://mithril-ja.js.org/

Mithril.js とは
■ クライアントサイドMVCフレームワーク
■ 軽量
■ 高い堅牢性
■ 非常に高速かつ、高いパフォーマンス
■ Route機能もありSPAにも最適！

Mithril.jsの特徴 - 1
■ クライアントサイドMVCフレームワーク
-> フレームワークでコードや構造をきれいに構成、
メンテナンスしやすいソースコードに
-> MVCモデルの詳細については割愛
■ 軽量
-> gzip圧縮したもので、たったの 7.8KB！ (jquery-2.1.0.min.js で 82KB)
-> 他のライブラリへの依存がない
■ 高い堅牢性
-> Mithrilのテンプレートはデフォルトで安全な動作をするようになっており、
セキュリティホールが作られにくい設計となっている

■ Virtual DOM 差分更新
-> 現在流行りの仮想DOM (最近で言うとReactとかmercuryとか有名)
-> 高速化
-> view関数が実行され、その関数が返すJavaScriptのオブジェクトを
キャッシュし、差分検知して表示する事で高速化を行っている
-> Reactとは違い、完全なMVCフレームワークとして提供されるので、
システム的に仮想DOMエンジンの効率が良い設計となっている
■ コンパイル可能なテンプレート
非常に高速

■ 現存するクライアントサイドMVCフレームワークで最速級
-> イベントハンドラが完了したタイミングで再描画を仕掛けるという仕組み
-> なるべく再描画自体の回数や頻度を最小にすることで高速化
-> 必要であればController側から強制的に再描画をしかけることもできる
高いパフォーマンス
( ※公式サイトベンチマークテスト結果より )

■ 充実したドキュメンテーション
-> この手のフレームワークには珍しいちゃんとした公式の日本語翻訳サイト
■ 小さくシンプルなAPI
-> 関数はわずか23個、主要なAPIは4個程度
-> ソースコードは1500行くらい、困った時にソースを追っても苦にならない
■ オライリーからも本が出てるよ！
-> http://www.oreilly.co.jp/books/9784873117447/
学習が容易

そんな Mithril.js ですが、
DeNA Osakaでは……！

現在運用中の
ブラウザタイトルの
新イベントに採用！
現在
鋭意開発中！！

さらに！

DeNAが運営している
mobage Developers blog にも
大阪から記事を寄稿してます！
(http://developers.mobage.jp/blog/mithril-introduction)

では、実際のコードを少しだけご紹介

Mithril.jsの書き方 - 1

■ Modelの定義
-> m.request ( http://mithril-ja.js.org/mithril.request.html )
ちなみに json の中身はこんな感じ

m()

Mithrilでは、[ m ]という
予めmithrilが用意した関数を使用して
全てのAPIを操作します！！

■ ControllerとViewの定義

■ Viewをもうちょっと詳しく
<a href="getting-started.html">Getting Started</a>
これが
こう出力される

■ 初期化
m.mountで指定したDOMに対して、初期化を行う
<div id="example"></div>

簡単！！

その他 - 1
jQueryとの相性はあまり良くない
-> 仮想DOMを扱うMithril.jsと生DOMを扱うjQueryは相性が悪い
実際に実装して詰まったところ！
-> JQueryのプラグインと組み合わせるときに、
最初のレンダリング時だけ初期化処理を走らせたい！！
↓ (何も考えずに書くと)
DOMの生成タイミングが不明！何か変更する度に初期化処理が走る！
生DOMの操作が必要になる場合は「config擬似属性」というものを使って、
初回レンダリング時に色々とよしなに出来る！

その他 - 2
そもそもDOMの構築が面倒くさい！
-> マークアップするのに、m(“ほにゃらら”)とか書いてもよくわかんない！
公式のHTML→Mithrilテンプレート変換ツールもあります
-> m() を手で書きまくらないと駄目かというとそんなことはない (安心)
http://mithril.js.org/tools/template-converter.html
また、React.jsのJSXツールをカスタマイズしてMithrilの内部DSL形式の
テンプレートに変換するように改造されたMSXというものもある（らしい）
Returnで直接DOMを書く事も出来る！

Mithril.js

引き続きDeNAでは、
アプリタイトルも
ブラウザタイトルも、
盛り上げてまいります！！

DeNA Osakaでは
一緒にゲームを創る仲間も
募集中！！

ご清聴ありがとうございました！

まだまだ戦えるweb！mithril.js最初の１歩

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (12)

Similar to まだまだ戦えるweb！mithril.js最初の１歩

Similar to まだまだ戦えるweb！mithril.js最初の１歩 (20)

Recently uploaded

Recently uploaded (15)

まだまだ戦えるweb！mithril.js最初の１歩