Riot.jsはHTMLライクな構文で書いてコンパイルするJSのUIライブラリです。
ファイル名は任意で、今回はmy-tag.riotという外部ファイルを作りました。
ファイルの内容はこちら
<my-tag>
<p>{ state.message }</p>
<script>
export default {
state: {
message: 'Hello! Riot.js'
}
}
</script>
<style>
p { color: #F66 }
</style>
</my-tag>
（「state」はRiot.js特有のオブジェクトプロパティです）
コンパイル結果はこちら
本来コンパイルしたファイルを公開するものですが、トライアルなのでブラウザ上で展開する例が以下になります。
これを例えばindex.htmlとして保存します。
<!-- マウントされる先のタグ -->
<my-tag></my-tag>
<!-- マウントされる中身を書く.riotファイル -->
<script src="/trial/riotjs/article/289/my-tag.riot" type="riot"></script>
<!-- riot.js とコンパイラが一緒になっているriot4のインブラウザコンパイラ -->
<script src="https://unpkg.com/riot@4/riot+compiler.min.js"></script>
<!-- コンパイルとマウントのおまじない -->
<script>
(async function main() {
await riot.compile()
riot.mount('my-tag')
}())
</script>
HTMLとJSとCSSがとても読みやすくかけて、いろんな機能を持たせたコンポーネントを作ることができます。
このサンプルはとても基本なので便利さが伝わりませんが、とっかかりやすさはなんとなくわかるかと思います。
この記事は、それぞれ公式サイトを参考にしています。
