Riot初歩の初歩
Riot（ライオット）は、HTMLの中にJavaScriptやCSSを書くことができる、シンプルで洗練されたコンポーネントベースのUIライブラリです。
が一度も触れたことがないのでまったくわからず、ネットで調べても頭にスッと入ってくる情報がなかなかみつかりません。
ということで、簡単なサンプルを使って、Riotの機能について紹介してみます。
１．サンプル
サンプルは、h1要素に「Hello World!!」を表示します。
用意するのは、カスタムタグ（後述）を記述するためのtest.tagと、ウェブページを表示するindex.htmlの2つです。
test.tag
<test>
<h1>{ opts.title }<h1>
</test>index.html
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<test></test>
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js'></script>
<script type="riot/tag" src="test.tag"></script>
<script>riot.mount('test', { title: "Hello World!!" });</script>
</body>
</html>
2つのファイルは同じディレクトリに配置します。
index.htmlをブラウザで表示すると、前の画像のように「Hello World!!」が表示されます。
以下、Riotの主な機能である「カスタムタグ」と「マウント」の解説です。
２．カスタムタグ
test.tagに書かれた<test>～</test>は、「カスタムタグ」と呼ばれるもので、ユーザインターフェースの構成要素です。ここがアプリケーションの「ビュー」部分を担います。
<test>
<h1>{ opts.title }<h1>
</test>カスタムタグの中にscriptタグを書くことができます（サンプルのように省略も可能）。script（ロジック）はHTMLよりも後に記述します。
<test>
<h1>{ opts.title }<h1>
<script>
this.title = opts.title
console.log(this.title)
</script>
</test>scriptタグは省略も可能です。省略した場合、JavaScriptは最後のHTMLタグの直後から始まるものとみなされます。
<test>
<h1>{ opts.title }<h1>
this.title = opts.title
console.log(this.title)
</test>カスタムタグの中にstyleタグを含めることもできます。
<test>
<h1>{ opts.title }<h1>
<style>
h1 { font-size: 150% }
</style>
</test>カスタムタグに標準のHTMLタグを使うこともできますが、方法として推奨されていないようです。
３．マウント
作成したタグは、ページ上（ここではindex.html）でマウントします。マウントすることでカスタムタグの内容がページに反映されます。
まず、カスタムタグと同じタグをページ上の任意の位置に記述します。
<body>
<test></test>
</body>次に、riot.jsおよび、カスタムタグが書かれたファイルをscriptタグでインクルードします。
<body>
<test></test>
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js'></script>
<script type="riot/tag" src="test.tag"></script>
</body>そして最後にsrciptタグでmount()を記述します。
<body>
<test></test>
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js'></script>
<script type="riot/tag" src="test.tag"></script>
<script>riot.mount('test', { title: "Hello World!!" });</script>
</body>mount()の第1パラメータには、マウントしたいカスタムタグ（要素）を記述します。サンプルのカスタムタグは"test"なので、"test"を記述します。
<script>riot.mount('test');</script>mount()の第2パラメータには、ページに渡したいデータを渡すことができます。サンプルではjsonデータを渡しています。
<script>riot.mount('test', { title: "Hello World!!" });</script>オプションで渡したデータは、カスタムタグ内の変数optsで参照することができます。Riotの処理はこのようにカーリーブラケットで括るお作法になっているようです。
<h1>{ opts.title }<h1>これでh1要素の値に「Hello World!!」が埋め込まれます。
chromeでソースを見ると、次のように展開されたカスタムタグがindex.htmlに埋め込まれているのが分かります。
<html>
<head>
<meta charset="utf-8">
<style type="text/css"></style>
</head>
<body>
<test><h1>Hello World!!</h1></test>
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js"></script>
<script type="riot/tag" src="test.tag"></script>
<script>riot.mount('test', { title: "Hello World!!" });</script>
</body>
</html>
