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がとても読みやすくかけて、いろんな機能を持たせたコンポーネントを作ることができます。
このサンプルはとても基本なので便利さが伝わりませんが、とっかかりやすさはなんとなくわかるかと思います。
この記事は、それぞれ公式サイトを参考にしています。