heimdalの技術ノート

IT全般、Linux、Windows、プログラミング開発など、何でもござれ

electronを使ってmithril.js 超入門

はじめに

heimdal.hatenablog.com

前回の記事からの続き。 mithril.jsのhelloworldのパターンを書いていく。

準備

  1. electronの環境を作る。
    過去の記事を参照。 helloworldが出来ていれば、OK。
    heimdal.hatenablog.com

  2. mithril.jsのファイルをダウンロード
    2016/11/13時点では、
    日本語サイトは0.2.4
    本家サイトは0.2.5
    となっているため、本家サイトからダウンロードする。
    使うファイルは、mithril.min.jsのみ。
    mithril.jsのファイルとの違いは、機能を落とさず、
    ファイルサイズを削減したものになる。
    ソースコードをカスタムしなければ、軽量版のmithril.min.jsを、
    ソースコードを読んだり、カスタムするのではれば、
    mithril.jsを使うようにすれば良いかも。

  3. フォルダ構成

f:id:xheimdal:20161113105948p:plain

app.jsは、今は空ファイルでOKです。

ファイルの中身

過去の記事のElectronのサンプルから変わったのはindex.htmlだけ。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>hello mithril</title>
</head>
<body>
    <div id="root"></div>
    <script>
        window.m = require('./js/mithril.min.js');
    </script>
    <script src="./js/app.js"></script>
</body>
</html>

idがrootの要素を用意しておく。
ここの要素に対して、mithrilが色々描画していく。

<script>
    window.m = require('./js/mithril.min.js');
</script>

これについては、electronの仕様のようで、 使用するフレームワークを登録する際は、このように書く。 mithrilはm()を使うが、それをセットしていると思えば良い。

例として、jqueryを使う場合は、jquery()や
省略形の$()を使ったりするが、その場合は下のようにすればいい。

<script>
    window.$ = window.jQuery = require('./js/jquery.min.js');
</script>

事前知識

パターンを見る前に。

使用するAPIは16個ほど。

http://mithril-ja.js.org/mithril.component.html

その中で、おそらく使用頻度が高いものが、
・m
・m.mount
・m.prop
・m.render
・m.route
・m.request
あたりになる。

m()は、htmlの要素を作成するもの、 m.mount()は、その要素を実際のhtmlへ反映する。

パターン

準備は完了したので、とりあえず、4つほどパターンを書いておく。
書くのは、app.jsになる。
これらを書いた後、コマンドプロンプトを開き、
「electron .」のコマンドを実行すれば、動作する。
もし動作しない場合は、windowsであれば、ctrl+shift+iあたりでデバッグツールを起動して、
エラーログを見ることをお勧めする。

その1

//コンポーネントを宣言
let myApp = {
    //コントローラのプロパティ作成
    controller: function () {},

    //ビューのプロパティ作成
    view: function () {
        //htmlの要素作成
        //<h1>hello world</h1>と同等の要素を作成する
        return m("h1", "hello world!");
    }
};

//idがrootの要素の中に、ビューの要素を追加する。
m.mount(document.getElementById("root"), myApp);

説明

mithrilはコンポーネントという単位で処理を行っている。
コンポーネントには、コントローラとビューのプロパティを持っている。
コントローラとは、コンポーネントが呼ばれる時、一度だけ実行されるもので、
ビューに表示させたい情報を読み込んだりする。要は初期化処理をするところ。

ビューは、m()などで作ったhtml要素をセットしたり、コントローラからの情報を取得したりする。

そのコンポーネントをm.mount()にセットすることで、その結果を描写する。

その2

//コンポーネントのみ宣言
let myApp = {};

//コンポーネントのプロパティ作成
myApp.view = function () {
        //htmlの要素作成
        //<h1>hello world</h1>と同等の要素を作成する
        return m("h1", "hello world!!");
};

//idがrootの要素の中に、ビューの要素を追加する。
m.mount(document.getElementById("root"), myApp);

説明

プロパティのセット方法を少し変えてみたパターン。
今回は、プロパティにコントローラを作成していない。
コントローラはオプショナルになっており、
何も宣言していなければ、空の関数(controller: function() {})が入るため、
ビューのみでも、可能。

その3

//コンポーネントがない。
let appView = function () {
        return m("h1", "hello world!!!");
};

//idがrootの要素の中に、ビューの要素を追加する。
m.mount(document.getElementById("root"), {view:appView});

説明

コンポーネントを作らず、ビューの関数のみを作成する。 それをm.mountに入れているパターン。

その4

//モデルを作成。nameのプロパティを作成
var model = {
    name:'heimdal'
};

var myApp = {
    //モデルから、データをもらう。
    controller: function() {
        return {
            myName:'私の名前は、' + model.name + 'です'
        };
    },
    view: function(ctrl) {
        return m("h1", ctrl.myName);
    }
};

m.mount(document.body, myApp);

説明

モデルにある情報を取得しているパターン。
あまり、うまい例ではないかも。。。orz

最後に

mithrilの簡単な動きが把握できたかと思う。
mithrilは他のフレームワークと比べてAPIこそ少ないだが、奥が深く、面白い。
やりごたえもあると思う。mvcモデルの入門としても良いと思う。
これを見て、興味持ってくれれば、幸いです。
次は、もう少し、詳しく書いていこうと思う。
mithrilについての記事が今後増えることを期待して。。。