SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本稿は日本語記事がまだ少ない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>

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
サンプルコードの説明

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
LINEフロントエンドレンジャーのWeb開発術連載記事一覧

もっと読む

この記事の著者

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

LINE株式会社に在籍しているフロントエンドエンジニア。LINE内Webアプリを担当。2002年からSEOの情報を趣味の一環として収集している。最近はサーバーサイドレンダリング無しで、Single Page ApplicationをGoogleに認識させる為の検証を進めている。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8815 2015/07/14 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング