インストール

チュートリアル
リソース
- JSX
- ES6
- CSS
- アニメーション
- テスト
- サンプル
重要なコンセプト
ソーシャル
その他
- フレームワークの比較
- 変更履歴/移行

CDN

もし、JavaScriptにまだ不慣れであったり、セットアップの作業をなるべく簡単に終わらせたいのであればCDNからMithrilを取得できます:

<script src="https://unpkg.com/mithril/mithril.js"></script>

NPM

WebPackを使ったクイックスタート

# 1) インストール
npm install mithril --save

npm install webpack --save

# 2) package.jsonのscriptsセクションに次の行を足す
#    "scripts": {
#        "start": "webpack src/index.js bin/app.js --watch"
#    }

# 3) `src/index.js` ファイルを作成する

# 4) `<script src="bin/app.js"></script>` という内容を含む `index.html` ファイルを作成する 

# 5) バンドラーを実行
npm start

# 6) ブラウザで `index.html` を開く
open index.html

ステップ・バイ・ステップ

プロダクションのためのプロジェクトであれば、推奨はNPMを使ってMithrilをインストールする方法です。

NPM (Node package manager)はNode.jsにバンドルされているデフォルトのパッケージマネージャーです。NPMは、JavaScriptのエコシステム内で、クライアントサイド、サーバーサイドの両方のライブラリのパッケージマネージャーとして使われています。Node.jsをダウンロードしてインストールすると、NPMも自動的にインストールされます。

NPM経由でMithrilを使うには、プロジェクトフォルダに行きコマンドラインから、npm init --yesを実行します。package.jsonという名前のファイルができます。

npm init --yes
# package.jsonという名前のファイルができる

次のコマンドを実行するとMithrilがインストールされます:

npm install mithril --save

このコマンドを実行すると、node_modulesというフォルダができ、その中にmithrilフォルダができます。package.jsonファイル内のdependenciesにも、エントリーが追加されます。

これでMithrilを使う準備ができました。CommonJSのモジュール形式を使ってコードを構成するスタイルが推奨です:

// index.js
var m = require("mithril")

m.render(document.body, "hello world")

モジュール化はコードを複数のファイルに分割するための方法です。モジュール化を行うことでコードを探しやすくなったり、コードの依存関係が分かりやすくなったり、テストしやすくなります。

CommonJSはJavaScriptのコードをモジュール化するためのデファクトスタンダードです。Node.js、Browserify、WebPackといったツールでサポートされています。この方法はES6モジュールのさきがけとして、他のモジュール化の方式との競争で勝ち残ってきた信頼できる方式です。ECMAScript 6でES6モジュールの文法が策定されましたが、実際のモジュールロードのメカニズムとしてはまだ使えません。もしまだ標準的な実装として使用できる段階にないES6モジュールを使いたい場合は、Rollup, Babel, Traceurといったツールを使います。

今日のほとんどのブラウザはネイティブではモジュールシステム(CommonJSあるいはES6)をサポートしていません。そのため、実行前にバンドル化して1つのJavaScriptファイルにする必要があります。

バンドルを作成する方法として一般的なWebPackを使うNPMスクリプトのセットアップをしましょう。WebPackをインストールするには、次のようにコマンドラインから実行します:

npm install webpack --save-dev

以前作成したpackage.jsonファイルを開き、scriptsセクションに次の内容を追加します:

{
    "name": "my-project",
    "scripts": {
        "start": "webpack src/index.js bin/app.js -d --watch"
    }
}

このファイルはJSONファイルなので、"scripts"や"start"といったキー名はダブルクオートで括る必要があります。

-dフラグを使うと、WebPackに開発者モードで実行するように指示できます。ソースマップが生成されて、デバッグがやりやすくなります。

--watchフラグを使うと、ファイルシステムの変更を監視し、変更を検知するとapp.jsが自動生成されるようになります。

コマンドラインウインドウでnpm startと入力するとこのスクリプトが実行できます。NPMのパスにあるwebpackコマンドが実行され、index.jsファイルを読み込んでapp.jsファイルが生成されます。このファイルには、Mithrilと上記のhello worldの両方のコードが含まれます。コマンドラインから直接webpackコマンドを実行するには、node_modules/.binをパスに追加するか、npm install webpack -gを使ってWebPackをグローバルにインストールする必要があります。しかし、ローカルにインストールして、npmスクリプトを使って実行する方法が推奨です。この方法であれば、他のコンピューターでも同じ環境を再現して実行しやすいからです。

npm start

バンドルファイルが作成されると、HTMLファイルからbin/app.jsというパスで参照できます。

<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <script src="bin/app.js"></script>
  </body>
</html>

すでに説明したとおり、CommonJSではrequire関数を使うとモジュールのインポートが行えます。NPMモジュールはライブラリ名（例えば、require("mithril")、require("jquery")）で参照できます。また、自分自身のモジュールは、拡張子なしの現在のパスからの相対パス（例えば、同じフォルダにあるmycomponent.jsというファイルであれば、require("./mycomponent")呼び出しで）参照できます。

モジュールの要素をエクスポートするには、特別なmodule.exportsオブジェクトにアサインします。

// mycomponent.js
module.exports = {
    view: function() {return "hello from a module"}
}

index.jsでは、次のようなコードを書いて、エクスポートされた要素をインポートします:

// index.js
var m = require("mithril")

var MyComponent = require("./mycomponent")

m.mount(document.body, MyComponent)

このサンプルではm.mountを使っています。この関数を使うとMithrilの自動再描画システムが有効化されます。ほとんどのMithrilアプリケーションでは、m.mount（複数スクリーンを扱うときはm.route）を使うことになります。これらの関数を使うと、変更が必要な時に手動で再描画を実行しなくても、自動再描画システムのメリットが享受できます。

本番ビルド

bin/app.jsを開くと、WebPackが生成したバンドルファイルがミニファイされていないことが分かります。これはアプリケーションをこのまま実際にリリースするには最適化の余地があります。ミニファイしたファイルを生成するには、package.jsonを開いて新しいnpmスクリプトを追加します:

{
    "name": "my-project",
    "scripts": {
        "start": "webpack src/index.js bin/app.js -d --watch",
        "build": "webpack src/index.js bin/app.js -p",
    }
}

本番環境ではフックを使ってスクリプトの本番ビルドを自動でビルドさせることができます。次のコードはHerokuを使うサンプルです:

{
    "name": "my-project",
    "scripts": {
        "start": "webpack -d --watch",
        "build": "webpack -p",
        "heroku-postbuild": "webpack -p"
    }
}

Mithrilを使う別の方法

ライブリロードを行う開発環境

ライブリロードは、コードの変更時に自動で画面のリロードを行う機能です。Budoはライブリロードを可能にしてくれるツールの１つです。

# 1) インストール
npm install mithril --save
npm install budo -g

# 2) 次の行をpackage.jsonのscriptsセクションに追加する
#    "scripts": {
#        "start": "budo --live --open index.js"
#    }

# 3) `index.js` ファイルを作成する

# 4) budoを実行する
npm start

index.jsがコンパイル（バンドル化）されて、ブラウザウィンドウが開いてそのファイルが表示されます。ソースファイルが変更されると再コンパイルされて、ブラウザがリフレッシュし、その変更が表示されます。

Mithrilバンドラー

Mithrilにはバンドラーツールが添付されています。これはMithril以外に依存を持たないES5ベースのプロジェクトでのみ使えますが、他のNPMの依存が必要な場合にはまだexperimentalです。このツールはWebPackよりも小さいバンドルを生成しますが、まだ本番環境では使わないでください。

もし、このツールを試用してみてフィードバックをコミュニティに提供していただけるのであれば、package.jsonファイルを開き、WebPackを使うスクリプトの部分を次のように変更します:

{
    "name": "my-project",
    "scripts": {
        "build": "bundle index.js --output app.js --watch"
    }
}

バニラJS

会社のセキュリティポリシーが理由でバンドルスクリプトを実行できない場合は、モジュールシステムをまったく使用しないで使うこともできます:

<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <script src="https://cdn.rawgit.com/lhorie/mithril.js/rewrite/mithril.js"></script>
    <script src="index.js"></script>
  </body>
</html>

// index.js

// もしCommonJS環境外でロードされると、Mithrilはグローバルスコープに登録されます
m.render(document.body, "hello world")