React like な UI ライブラリ(と公式 Web ページに書いてある) Riot を試してみます。

インストール

読み込む Riot は bower でインストールします。加えて riot コマンドを使うため npm で -g をつけてインストールします。

$ npm install -g riot
$ bower install --save riot

Hello, World!

Hello, World! とだけ表示するコンポーネントを作ってみます。 Riot では .tag という拡張子のファイルに HTML っぽい文法で独自タグを定義できるみたいです。

<!-- my-tag.tag -->

<my-tag>
    Hello, World!
</my-tag>

この my-tag.tag で my-tag というカスタム要素が定義できます。このままだと HTML から使えないのでコンパイルします。

$ riot my-tag.tag

このコマンドで my-tag.js ができます。 -w オプションでファイルを監視してくれて、変更があると自動で変換してくれます。開発中は -w をつけて実行し続ける感じでしょうか。

コンパイル後の JavaScript を HTML から読み込んで使います。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <my-tag></my-tag>
    <script src="bower_components/riot/riot.min.js"></script>
    <script src="my-tag.js"></script>
    <script>
        riot.mount('my-tag');
    </script>
</body>
</html>

この HTML を Web ブラウザで表示すると Hello, World! と無事表示されました。

riot.mount('my-tag') とすることで実際に <my-tag> に Hello, World! というテキストが展開されるようです。

カウンター

Hello, World! だけだとあれなので、カウンターを作ってみます。さきほどの <my-tag> の中身を書き換えます。

{ count }
<button onclick={ onClick }>+1</button>

<script>
    this.count = 0;

    this.onClick = function() {
        this.count++;
    };
</script>

{ count } という書き方をするとその場所に count プロパティの内容が埋め込まれます。 count は下の <script> タグの中で定義しています。

onclick={ onClick } で <button> の click イベントを監視します。 Riot 独自の表記ですね。

<script> タグにロジックを書いていきます。この場所に書かれた JavaScript はカスタムタグが作られるたびに呼び出されるようです。 this に値を生やすと上のように { ... } と埋め込めるようになるみたいです。今回は数字を記録するプロパティを定義してイベントハンドラを定義しているだけです。

コンパイルして Web ページを更新するとカウンタが表示されました。

まとめ

  • Riot は React ライクな UI ライブラリ
  • .tag という HTML 風のファイルでコンポーネントを定義する
  • { abc } のように JavaScript で用意した値を埋め込める
  • コンポーネントの中で <script> タグを書くと、そのコンポーネントと紐付けられる