はじめに

最近、Riot.jsがアツい！
という記事を見かけ、どんなものなのだろうか？
と、フレームワークのフの字も知らないペーペーが使い始めて、既にドハマリしてしまったお話です。
後、Materializeもアツいらしいですが、それはまた別のお話ということで……

Riotの何が良いの？

私はAngularJSなどを使ったことがないので、そっちの良さは分かりません。
しかし、Node.jsを使ったりと、前準備が多そうに見えて、どうも敷居が高そうです…
ですが！
Riot.jsは通常のJavaScriptと同じように、<script>タグで読み出すだけ！
うっひょー！簡単そうじゃないか！！

はい、ちゃんとした方のご意見は
- フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話
などをご覧ください。

使う準備をする

とりあえず、ダウンロードから始めましょう。
もう済んでる方は、次の項目へ！

http://riotjs.com/ja/download/へアクセスします。
そして、riot+compiler.min.jsを保存してください。

とりあえず、使ってみる

Riotはいろんなことができますが……
とりあえず使ってみましょうか。

まずは環境をこんな感じにしてみます。

カスタムタグを使ってみる

カスタムタグでは、自分の好きなHTMLのタグを作ることができます。
まあ、やってみましょう！

<myTag></myTag>
というHTMLタグを作ってみます。

まずは、全体像。
全コピペで動きます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>JSフレームワークにRiotする！</title>
    <meta charset="utf-8">
</head>

<script src="./riot+compiler.min.js"></script>

<body>
    <myTag></myTag>

    <script type="riot/tag">
    <myTag>

    <ul each='{items}'>
        <li>{info || "No data"}</li>
    </ul>

    this.items = [ {"info":"text1"}, {"info":"text2"}, {"info":"text3"}, {"info":"text4"}, {"info":"text5"} ];

    </myTag>
    </script>


    <script>
    // Riot.jsをマウント（利用開始！）
    riot.mount('*');
    </script>


</body>

</html>

↓

このように、JSONを一気にループし、タグ内に表示させることができます。
このコードのキモは以下の様な感じです。

カスタムタグを外部ファイルに定義する

カスタムタグを1つのファイル内で連発すると、やはり汚くなってしまいます。
なので、外部ファイルに保存して使ってみましょう。

Riotのカスタムタグを定義するファイルの拡張子は、.tagになります。
では今回は、mytag.tagという名前でファイルを作ります。

では、外部ファイルには先程定義したカスタムタグの処理を記述します。

mytag.tag

<myTag>

<ul each='{items}'>
    <li>{info || "No data"}</li>
</ul>

this.items = [ {"info":"text1"}, {"info":"text2"}, {"info":"text3"}, {"info":"text4"}, {"info":"text5"} ];

</myTag>

それに伴い、index.htmlも修正します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>JSフレームワークにRiotする！</title>
    <meta charset="utf-8">
</head>

<!-- Riot.jsを読み込む -->
<script src="./riot+compiler.min.js"></script>

<!-- Riot Tag のロード -->
<script src="./mytag.tag" type="riot/tag"></script>

<body>
    <myTag></myTag>


    <script>
    // Riot.jsをマウント（利用開始！）
    riot.mount('*');
    </script>


</body>

</html>

<script src="./mytag.tag" type="riot/tag"></script>
これで、定義したカスタムタグをロードします。

結果は同じですね！

便利便利！
とりあえず、今回はここまで！

【Riot.js超入門】JSフレームワークにRiotする！！