仮想DOMの登場によって、フロントエンド開発時に状態(ステート)を管理する必要がなくなりました。変数を更新さえればすれば、後は仮想DOMの方で表示を更新してくれます。この画期的な考えにより、多くのフロントエンドフレームワークが仮想DOMを利用しています。 今回紹介するMarkoもそんなフレームワークの一つです。特徴は他と比べて軽量、かつ高速に動作することでしょう。

Markoの使い方

Markoのコードです。シンプルで分かりやすい印象です。

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment() {
    this.state.count++;
  }
}

style {
  .count {
    color: #09c;
    font-size: 3em;
  }
  .example-button {
    font-size: 1em;
    padding: 0.5em;
  }
}

<div .count>
  ${state.count}
</div>
<button .example-button on-click("increment")>
  Click me!
</button>

Markoの特徴はまず軽量であることです。Gzip圧縮して10KB以下となっています。シンプルなHTMLとスタイル、JavaScriptの構成になっているのもよさそうです。アニメーションであっても60FPSでこなすくらい快適に動作します。Inferno/Preact/React/Vueと比べても高速です。eBayでも使われており、安定性も申し分なさそうです。

MarkoはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Marko marko-js/marko: A declarative, HTML-based language that makes building web apps fun