はじめに
最近、Riot.jsがアツい！
という記事を見かけ、どんなものなのだろうか？
と、フレームワークのフの字も知らないペーペーが使い始めて、既にドハマリしてしまったお話です。
後、Materializeもアツいらしいですが、それはまた別のお話ということで……
Riotの何が良いの？
私はAngularJSなどを使ったことがないので、そっちの良さは分かりません。
しかし、Node.jsを使ったりと、前準備が多そうに見えて、どうも敷居が高そうです…
ですが！
Riot.jsは通常のJavaScriptと同じように、<script>タグで読み出すだけ！
うっひょー！簡単そうじゃないか！！
はい、ちゃんとした方のご意見は
使う準備をする
とりあえず、ダウンロードから始めましょう。
もう済んでる方は、次の項目へ！
http://riotjs.com/ja/download/へアクセスします。
そして、riot+compiler.min.jsを保存してください。
とりあえず、使ってみる
Riotはいろんなことができますが……
とりあえず使ってみましょうか。
まずは環境をこんな感じにしてみます。
カスタムタグを使ってみる
カスタムタグでは、自分の好きなHTMLのタグを作ることができます。
まあ、やってみましょう！
<myTag></myTag>
という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>
<ul each='{items}'>
<li>{info || "No data"}</li>
</ul>
this.items = [ {"info":"text1"}, {"info":"text2"}, {"info":"text3"}, {"info":"text4"}, {"info":"text5"} ];
</myTag>
それに伴い、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>
これで、定義したカスタムタグをロードします。
結果は同じですね！
便利便利！
とりあえず、今回はここまで！