用途
新着
履歴
分類

Riot.jsを試してみよう

Riot.jsを試してみよう
Riot.jsを試してみよう
Riot.jsというコンポーネントベースのUIライブラリを試しに使うべく、インブラウザ・コンパイルをやってみました。

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がとても読みやすくかけて、いろんな機能を持たせたコンポーネントを作ることができます。

このサンプルはとても基本なので便利さが伝わりませんが、とっかかりやすさはなんとなくわかるかと思います。

この記事は、それぞれ公式サイトを参考にしています。

Riot.js コンパイラについて

Riot.js コンポーネントについて


公開 2020-04-02 23:11:03
更新 2020-04-03 00:25:45
このページの二次元コード

関連するリンク

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2020 kipure
Top