Mithril.js 2 ドキュメンテーション

Mithril.js とは？

Mithril.js は、シングルページアプリケーション (SPA) を構築するためのモダンなクライアントサイド JavaScript フレームワークです。軽量（gzip 圧縮で 8.9 KiB）かつ高速であり、ルーティングと XHR ユーティリティを標準で提供します。

ダウンロードサイズ

Mithril.js (8.9 KiB)

Vue + Vue-Router + Vuex + fetch (40 KiB)

React + React-Router + Redux + fetch (64 KiB)

Angular (135 KiB)

パフォーマンス

Mithril.js (6.4 ms)

Vue (9.8 ms)

React (12.1 ms)

Angular (11.5 ms)

Mithril.js は、Vimeo や Nike といった企業、Lichess のようなオープンソースプラットフォームなどで利用されています。

経験豊富な開発者の方で、Mithril.js と他のフレームワークとの比較について知りたい場合は、フレームワークの比較ページを参照してください。

Mithril.js は、IE11、Firefox ESR、および Firefox、Edge、Safari、Chrome の最新 2 バージョンをサポートしています。ポリフィルは不要です。

v1 ドキュメントをお探しですか？こちらをクリック。

入門

Mithril.js を手軽に試すには、CDN から読み込んで、このチュートリアルを進める方法があります。このチュートリアルでは、API サーフェイス（ルーティングや XHR を含む）の大部分をカバーしており、所要時間はわずか 10 分程度です。

HTML ファイルを作成し、以下のコードを参考にしてください。

html

<body>
  <script src="https://unpkg.com/mithril/mithril.js"></script>
  <script>
    var root = document.body;

    // ここにコードを記述します！
  </script>
</body>

さらに手軽に試せる方法として、Mithril.js が事前に読み込まれたライブ実行環境も用意されています。ちなみに、この環境自体も Mithril で構築されています。

var root = document.body;

// ここにコードを記述します

m.mount(root, {
  view: function () {
    return m('h1', 'Try me out');
  },
});

flems.io でサンプルを開くには、ここをクリックしてください

Hello world

できる限りシンプルな例から始めましょう。画面にテキストを表示します。以下のコードをファイルに記述してください。（実際にタイピングすることで、より理解が深まります。）

javascript

var root = document.body;

m.render(root, 'Hello world');

次に、テキストを別のものに変更してみましょう。次のコード行を前のコードの下に追加します。

javascript

m.render(root, 'My first app');

ご覧のとおり、HTML の作成と更新の両方に同じコードを使用します。Mithril.js は、テキストを一から再作成するのではなく、テキストを更新する最も効率的な方法を自動的に判断します。

実行例

var root = document.body;

m.render(root, 'Hello World');

DOM 要素

テキストを <h1> タグで囲んでみましょう。

javascript

m.render(root, m('h1', 'My first app'));

m() 関数を使用すると、必要な HTML 構造を記述できます。例えば、<h1> にクラスを追加する必要がある場合は、次のようになります。

javascript

m('h1', { class: 'title' }, 'My first app');

複数の要素が必要な場合は、次のように記述します。

javascript

[m('h1', { class: 'title' }, 'My first app'), m('button', 'A button')];

あるいは、次のように記述することもできます。

javascript

m('main', [
  m('h1', { class: 'title' }, 'My first app'),
  m('button', 'A button'),
]);

実行例

var root = document.body;

m.render(root, [
  m('main', [
    m('h1', { class: 'title' }, 'My first app'),
    m('button', 'A button'),
  ]),
]);

注: <html> 構文を使用したい場合は、Babel プラグインを介して使用できます。

jsx

// Babel の JSX プラグインによる HTML 構文
<main>
  <h1 class="title">My first app</h1>
  <button>A button</button>
</main>

コンポーネント

Mithril.js のコンポーネントは、view 関数を持つシンプルなオブジェクトです。上記のコードをコンポーネントとして記述すると、次のようになります。

javascript

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'My first app'),
      m('button', 'A button'),
    ]);
  },
};

コンポーネントをマウントするには、m.mount を使用します。

javascript

m.mount(root, Hello);

これにより、予想どおり次のマークアップが生成されます。

html

<main>
  <h1 class="title">My first app</h1>
  <button>A button</button>
</main>

m.mount 関数は m.render と似ていますが、HTML を一度だけレンダリングするのではなく、Mithril.js の自動更新システムを有効にします。この動作を理解するために、いくつかのイベントを追加してみましょう。

javascript

var count = 0; // 変数を追加しました

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'My first app'),
      // 次の行を変更しました
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clicks'
      ),
    ]);
  },
};

m.mount(root, Hello);

ボタンに onclick イベントを定義しました。このイベントは、変数 count をインクリメントします（count は事前に宣言されています）。また、ボタンのラベルに count 変数の値を表示しています。

ボタンをクリックすると、ボタンのラベルが更新されます。m.mount を使用しているため、count 変数の変更を HTML に反映するために m.render を手動で呼び出す必要はありません。Mithril.js が自動的に処理します。

パフォーマンスが気になるかもしれませんが、Mithril.js は非常に高速に更新をレンダリングします。これは、必要最小限の DOM のみを操作するためです。上記の例では、ボタンをクリックすると、ボタン内のテキストだけが Mithril.js によって実際に更新される DOM の部分になります。

実行例

var root = document.body;
var count = 0; // 変数を追加しました

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'My first app'
      ),
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clicks'
      ),
    ]);
  },
};

m.mount(root, Hello);

ルーティング

ルーティングとは、複数の画面を持つアプリケーションにおいて、画面間の遷移を管理する仕組みのことです。

クリックカウンターの前に表示されるスプラッシュページを追加してみましょう。まず、スプラッシュページ用のコンポーネントを作成します。

javascript

var Splash = {
  view: function () {
    return m('a', { href: '#!/hello' }, 'Enter!');
  },
};

このコンポーネントは、#!/hello へのリンクをレンダリングするだけです。#! の部分はハッシュバンとして知られており、シングルページアプリケーションで、その後に続く部分（/hello の部分）がルートパスであることを示すために使用される一般的な規約です。

複数の画面を持つアプリケーションになるため、m.mount の代わりに m.route を使用します。

javascript

m.route(root, '/splash', {
  '/splash': Splash,
  '/hello': Hello,
});

m.route 関数は、m.mount と同様の自動更新機能を備えており、さらに URL の認識も有効にします。つまり、URL に #! が含まれている場合に Mithril.js がどのように動作するかを定義します。

root の直後の "/splash" は、これがデフォルトルートであることを意味します。つまり、URL のハッシュバンが定義されたルート（この場合は /splash と /hello）のいずれも指していない場合、Mithril.js はデフォルトルートにリダイレクトします。したがって、ブラウザでページを開き、URL が https://localhost の場合、https://localhost/#!/splash にリダイレクトされます。

また、予想どおり、スプラッシュページのリンクをクリックすると、以前に作成したクリックカウンター画面に移動します。URL は https://localhost/#!/hello を指すようになります。ブラウザの戻るボタンと進むボタンを使用して、スプラッシュページとクリックカウンター画面を前後に移動できます。

実行例

var root = document.body;
var count = 0;

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'My first app'
      ),
      m(
        'button',
        {
          onclick: function () {
            count++;
          },
        },
        count + ' clicks'
      ),
    ]);
  },
};

var Splash = {
  view: function () {
    return m(
      'a',
      {
        href: '#!/hello',
      },
      'Enter!'
    );
  },
};

m.route(root, '/splash', {
  '/splash': Splash,
  '/hello': Hello,
});

XHR

XHR は、基本的にサーバーと通信するための手段です。

クリックカウンターを修正して、サーバーにデータを保存するようにしましょう。サーバーには、このチュートリアルのような学習用アプリケーション用に設計されたモック REST API である REM を使用します。

まず、m.request を呼び出す関数を作成します。url はリソースを表すエンドポイントを指定し、method は実行するアクションのタイプを指定します（通常、PUT メソッドは更新または挿入 upserts を行います）。body はエンドポイントに送信するデータであり、withCredentials は Cookie を有効にすることを意味します（REM API が機能するために必要です）。

javascript

var count = 0;
var increment = function () {
  m.request({
    method: 'PUT',
    url: '//mithril-rem.fly.dev/api/tutorial/1',
    body: { count: count + 1 },
    withCredentials: true,
  }).then(function (data) {
    count = parseInt(data.count);
  });
};

increment 関数を呼び出すと、オブジェクト {count: 1} が /api/tutorial/1 エンドポイントに登録されます（存在しない場合は新規作成、存在する場合は更新）。このエンドポイントは、送信されたものと同じ count 値を持つオブジェクトを返します。count 変数はリクエストが完了した後にのみ更新され、サーバーからの応答値で更新されることに注意してください。

コンポーネントのイベントハンドラーを置き換えて、count 変数を直接インクリメントする代わりに increment 関数を呼び出すようにしましょう。

javascript

var Hello = {
  view: function () {
    return m('main', [
      m('h1', { class: 'title' }, 'My first app'),
      m('button', { onclick: increment }, count + ' clicks'),
    ]);
  },
};

ボタンをクリックすると、カウントが更新されるはずです。

実行例

var root = document.body;
var count = 0;

var increment = function () {
  m.request({
    method: 'PUT',
    url: '//mithril-rem.fly.dev/api/tutorial/1',
    body: { count: count + 1 },
    withCredentials: true,
  }).then(function (data) {
    count = parseInt(data.count);
  });
};

var Hello = {
  view: function () {
    return m('main', [
      m(
        'h1',
        {
          class: 'title',
        },
        'My first app'
      ),
      m(
        'button',
        {
          onclick: increment,
        },
        count + ' clicks'
      ),
    ]);
  },
};

m.mount(root, Hello);

HTML の作成と更新、コンポーネントの作成、シングルページアプリケーションのルーティング、および XHR を介したサーバーとの通信方法について説明しました。

これで、実際のアプリケーションのフロントエンド開発を開始する準備が整いました。Mithril.js API の基本を理解できたので、シンプルなアプリケーションチュートリアルを必ず確認してください。このチュートリアルでは、実用的なアプリケーションの構築について説明します。

Mithril.js 2 ドキュメンテーション ​

Mithril.js とは？ ​

ダウンロードサイズ

パフォーマンス

入門 ​

Hello world ​

実行例 ​

DOM 要素 ​

実行例 ​

コンポーネント ​

実行例 ​

ルーティング ​

実行例 ​

XHR ​

実行例 ​

Mithril.js 2 ドキュメンテーション

Mithril.js とは？

入門

Hello world

実行例

DOM 要素

実行例

コンポーネント

実行例

ルーティング

実行例

XHR

実行例