Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

モバイル向けシングルページアプリに最適! 軽量JSフレームワーク【Mithril】 - 基礎編

LINEフロントエンドレンジャーのWeb開発術 第6回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/07/14 14:00

 本連載はLINEのフロントエンドエンジニアのチームがWeb開発において注目・活用している技術を紹介します。今回は海外で少し話題になったJavaScript Framework「Mithril」の使い方について簡単にご説明します。

目次

 本稿は日本語記事がまだ少ないMithrilの基本機能の紹介を目的とした「基礎編」として、簡単なサンプルアプリを基に導入方法や主要メソッドを解説していきます。執筆時点のバージョンであるv0.2.0の内容です。

Mithrilとは

 Mithrilは、VirtualDOMを採用したデータバインディング型JavaScriptフレームワークです。軽量、高速をコンセプトに作られているため、モバイル向けのシングルページアプリケーションに最適なフレームワークと言えます。

VirtualDOMとは

 データバインディング型フレームワークで生じる、DOMの更新を最小限にとどめるための仕組みです。JSオブジェクトなどを使い仮想的にDOMのツリー構造を作成し、変更差分を算出する仕様のため、高度なDOMの処理を自前で行わなくても、最適化された差分計算の仕組みによりDOMが更新されます。細かい実装方法はフレームワークによって異なりますが、レンダリングパフォーマンスが向上するメリットがあります。

 

 日本ではVirtualDOM Advent Calendar 2014がキッカケとなり、「VirtualDOM」対応のJavaScript Frameworkが一般的にも注目され始めてきました。代表的なフレームワークはReactmercuryElmです。2015年5月現在ではReactが人気です。

Mithrilの特徴

  • 軽量(minifyで19KB)
  • 高速(mercury-perfで高いパフォーマンスはでている)
  • APIがシンプル(APIは15個と少なめ。主要APIは5つ)
  • レンダリング後にサードパーティ製ライブラリを適応可能
  • JSXのようにDOM形式でViewを書ける、MSXというコンパイラも用意されている
  • コンポーネント形式でのViewの管理が可能
  • 対象ブラウザはIE9以上

Mithrilのパフォーマンス

図1
図1

 Mithril公式サイトで発表されているパフォーマンステスト結果は上記となっています。mercury-perfでも高いパフォーマンスが出ています。

 ただし、フレームワークごとに実装方法が異なる都合上、得意な処理と不得意な処理があるため、環境や処理内容によってはMithrilが遅いこともあります。そのため、総合点としては優秀な部類であるという認識程度でとどめていただいたほうが良いと言えます。

Mithrilの実装例

 今回は、簡単なサンプルコードをもとに各メソッドについて説明します。下記のようなTodoアプリケーションを作成するためのサンプルコードです。

図2
図2
<!DOCTYPE html>
<html dir="ltr" prefix="fb: http://www.facebook.com/2008/fbml">
<head>
<meta charset="UTF-8">
<script src="mithril.js"></script>
</head>
<body>
<div id="contents"></div>

<script>

/*
 * Modelを定義
 * ページ内の文言データを管理
 */
var PageModel = function() {

    this.data = m.prop({});

    this.fetch = function(){
        var that = this;
        m.request({method: "GET", url: "page.json"}).then(function(resp){
            that.data(resp);
        });
        return this;
    };

    this.get = function(){
        return this.data;
    };
};

/*
 * Modelを定義
 * Todoのアイテムデータ管理
 */
var ItemModel = function() {

    this.data = m.prop({});

    this.get = function(){
        return this.data;
    };

    this.update = function(data){
        this.data(data);
        return this;
    };
};

/*
 * Modelを定義
 * Todoのリストデータを管理
 */
var ListModel = function() {

    this.data = [];

    this.get = function(){
        return this.data;
    };

    this.add = function(item){
        if(!item.text && item.text === ""){
            return false;
        }
        this.get().push(item);
    };
};

/*
 * controller定義
 */
var myCtrl = function() {
    var that = this;

    //pageModel
    var pageModel = new PageModel().fetch();
    this.pageData = pageModel.get();

    //listModel
    var listModel = new ListModel();
    this.listData = listModel.get();

    //itemModel
    var itemModel = new ItemModel();
    this.itemData = itemModel.get();

    //inputの"onchange"時に実行する関数
    this.onChangeInput = function(value){
        itemModel.update({ text: value });
    };

    //追加ボタンの"onclick"時に実行する関数
    this.onSubmit = function(){
        listModel.add(that.itemData());
    };
};

/*
 * viewを定義
 */
var myView = function(ctrl) {
    return [
        m("h1", ctrl.pageData().title),
        m("p", ctrl.pageData().description),
        m("br"),
        m("hr"),
        m("h2", "Todo登録"),
        m("div",[
            m("input", {onchange: m.withAttr("value", ctrl.onChangeInput)}),
            m("button", {onclick: m.withAttr("value", ctrl.onSubmit)}, "追加")
        ]),
        m("br"),
        m("hr"),
        m("h2", "Todo一覧"),
        m('ul', [
            ctrl.listData.map(function(item, index) {
                return m("li", item.text);
            })
        ])
    ];
};

//レンダリング開始
m.mount(document.getElementById("contents"), {
    controller: myCtrl,
    view: myView
});

</script>
</body>
</html>

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 姜 勝陽(LINE株式会社)(キョウ ショウヨウ)

    LINE株式会社に在籍しているフロントエンドエンジニア。NAVERまとめやLINE内Webアプリを担当。2002年からSEOの情報を趣味の一環として収集している。 最近はシングルページアプリケーションにおけるGoogle Analyticsを使ったデータの集計手法の策定に力を入れている。

バックナンバー

連載:LINEフロントエンドレンジャーのWeb開発術

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5