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

# はじめに
最近、[Riot.js](http://riotjs.com/ja/)がアツい！
という[記事を見かけ](http://phiary.me/frontend-riot-js-no1/)、どんなものなのだろうか？
と、フレームワークのフの字も知らないペーペーが使い始めて、既にドハマリしてしまったお話です。
後、[Materialize](http://materializecss.com/)もアツいらしいですが、それはまた別のお話ということで……


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

はい、ちゃんとした方のご意見は
- [フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話](http://phiary.me/frontend-riot-js-no1/)
などをご覧ください。

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

---

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

<img width="786" alt="スクリーンショット 2016-11-18 22.23.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/adb0b1b1-8e95-0c7b-92cc-9885e515c19f.png">



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

まずは環境をこんな感じにしてみます。
<img width="635" alt="スクリーンショット 2016-11-18 22.31.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/b497c86d-904d-9fbe-eff1-7317525d4b3a.png">


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

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

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

```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>

```

↓

<img width="404" alt="スクリーンショット 2016-11-18 22.44.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/4eb52e41-b4c4-dc4a-870c-6bd1935d2249.png">


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

<img width="914" alt="スクリーンショット 2016-11-18 22.48.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/7cd32f15-c93c-1734-c250-a53c10ec9211.png">


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

---

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

<img width="447" alt="スクリーンショット 2016-11-18 22.58.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/497a652f-044b-308f-314c-9e1a7696f1fd.png">

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

```html: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も修正します。

```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>`
これで、定義したカスタムタグをロードします。

---

結果は同じですね！
<img width="404" alt="スクリーンショット 2016-11-18 22.44.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/061f59ce-fc98-dc6c-0b91-08fb2ee3cde8.png">

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