Riot.js入門-1 #入門

Riot.jsはWEBの次世代仕様として期待される Web Components ライクなUIライブラリです。
コンポーネントとは、関連するHTMLとJavaScript（+ CSS）をくっつけて再利用可能なHTMLタグとしてまとめてくれたものを指します。

基本的には公式ドキュメントに書いてある以上のことはありませんが、気持ち補足やTipsを交えた内容でRiot.jsを解説していきます。

兎にも角にも何が良い？

まずは、Riot.js（などのコンポーネント思考のライブラリ）でない場合に挙げられる問題として、従来のテンプレートエンジンやフロントエンドライブラリではView（HTML）部分とLogic（Javascript）部分の記述が複数のファイルに跨ってしまい

どこでこのdivを追加しているんだろう
どこでこのアニメーションを制御しているんだろう
DOMを操作したら、別のロジックでもそこを操作していた

など、管理する側とされる側の連携の見通しが煩雑になりがちでした。

todo.html

<div class="todo">
    <p></p>
    <button type="button">完了</button>
</div>

todo.js

var $todo = $('.todo');

// テキスト挿入
$todo.find('p').text('牛乳を買う');

// 完了のクリックイベント
$todo.find('button').on('click', function(e) {
    // 完了ボタンを削除
    $(e.currentTarget).remove();

    // テキスト更新
    $todo.find('p').text('牛乳を買った');
});

コンポーネントは、その「ViewとLogic」を1つのファイル（コンポーネント）にまとめることで、連携の見通し向上と予期せぬ場所からの越権操作を制御する役割を果たしてくれます。

todo.tag

<todo>
    <p>{title}</p>

    <!-- HTMLの方でどういうイベントを割り当てられてるか明示される -->
    <button if={!isComplete} type="button" onclick={handleClick}>完了</button>

    <script>
        // テキストの挿入
        this.title = '牛乳を買う';

        // 完了のクリックイベント
        handleClick() {
            this.title = '牛乳を買った';
            this.isComplete = true;
        }

        /********************************************
         * ここがポイント！！
         * ロジック内で直接DOMをいじっていない。
         * DOMの更新はライブラリに委ねることで
         * 手動更新によるパフォーマンスの低下などを防ぐ
         *******************************************/
    </script>
</todo>

コンポーネント思考のメリット

HTMLのマークアップがスッキリする

汚い内部構造を外から見えなくする

内部のスタイルが外部に漏れないと同時に、外部のスタイルも内部に染み込まない

一度新しい要素を作ってしまえば、至る所で再利用できる

コンポーネントの流用だけなら、わざわざJavaScriptを書く必要がなくなる

引用：Web開発者に革命をもたらす！「Web Components」超入門

上記に加えて、そのコンポーネント思考のライブラリの中でも筆者がRiot.jsを推すメリットは

少ない学習コストで利用できる

もちろん後述するRiot.js独自の仕様や最低限覚えるべきプロパティなどはあるのですが、基本的にはHTML,CSSの知識だけで8割はいけるので、JSに強くないコーダーの方などもその恩恵を受けやすいと思います。

ライブラリとしての容量が軽い

reactや他の類似ライブラリに比べて約1/5と軽量なため（圧縮版で10KBを切ります）、ネットワーク環境などを気にせず気軽に取り込めます。

はじめる前に

Riot.jsを利用する際、riot.min.js と riot+compiler.min.js のどちらかを読み込みます。

違いは riot.min.js はコア部分の実装のみで、riot+compiler.min.js はそれに加えてリアルタイムコンパイラー機能がついています。

Riot.jsは、次世代仕様の Web Components を仮想的にエミュレートしているだけで、2016年9月現在の一般的なブラウザで実際に動かすには、書いたコンポーネントを生のJavascriptに変換（コンパイル）する必要があります。

なので、本番環境などでパフォーマンスを気にする必要がある場合は、事前にプリコンパイルしておいて riot.min.js を使うのが最良です。

筆者は普段、 webpack を使った riot（ならびにes2015）のプリコンパイル環境を利用していますが、今回はさくっと始められるように riot+compiler.min.js を使って進めていきます。

Hello world

というわけで、まずは以下のHTMLをご用意ください。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Riot.js入門</title>
    </head> 
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot+compiler.min.js"></script>
    </body> 
</html>

コンポーネントの作成と読み込み

以下のように .tagファイル を新たに作成に、中にHTMLの要領で <ファイル名></ファイル名> のタグから始まるコードを記述します。

sample.tag

<sample>
    <h1>hello world</h1>
</sample>

これをindex.htmlに <script src="sample.tag" type="riot/tag"></script> と記述して読み込ませます。

この時に気をつけるのは type="riot/tag" と忘れず記述すること。そうすることでコンパイラーが自動的に「これはRiotのファイルだな」と識別してくれます。

コンポーネントの使用

index.htmlのbodyタグの直後に <sample /> 、
Riot.jsを読み込むscriptタグの後ろに<script>riot.mount('sample');</script> と記述します。

以上で、完成です。

最終的には以下のようになりました。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Riot.js入門</title>
    </head> 
    <body>
        <sample />

        <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot+compiler.min.js"></script>
        <script src="sample.tag" type="riot/tag"></script>
        <script>riot.mount('sample');</script>
    </body> 
</html>

これをブラウザを見ると、以下のような HTMLになるはずです。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Riot.js入門</title>
    </head> 
    <body>
        <sample>
            <h1>hello world</h1>
        </sample>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot+compiler.min.js"></script>
        <script src="sample.tag" type="riot/tag"></script>
        <script>riot.mount('sample');</script>
    </body> 
</html>

無事、コンポーネントの内容が反映されてますね。