electronを使ってmithril.js 超入門
はじめに
前回の記事からの続き。 mithril.jsのhelloworldのパターンを書いていく。
準備
electronの環境を作る。
過去の記事を参照。 helloworldが出来ていれば、OK。
heimdal.hatenablog.commithril.jsのファイルをダウンロード
2016/11/13時点では、
日本語サイトは0.2.4
本家サイトは0.2.5
となっているため、本家サイトからダウンロードする。
使うファイルは、mithril.min.jsのみ。
mithril.jsのファイルとの違いは、機能を落とさず、
ファイルサイズを削減したものになる。
ソースコードをカスタムしなければ、軽量版のmithril.min.jsを、
ソースコードを読んだり、カスタムするのではれば、
mithril.jsを使うようにすれば良いかも。フォルダ構成
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についての記事が今後増えることを期待して。。。