Riot.js入門-2

今回はRiot.jsの基本構造の紹介です。

基本構造

sample.tag

<sample>
	<!-- HTML:Template -->
	<h1>hello world</h1>
	
	<!-- CSS:Style -->	
	<style>
		h1 {
			color: #f00;
		}
	</style>
	
	<!-- Javascript:Logic -->
	<script>
		console.log('Riot.js入門');
	</script>
</sample>

コンポーネントは、このように上から順にテンプレート→スタイル→ロジックと定義していきます（この順番は厳密なものではありません）。

何も珍しいことはないですね。見慣れたHTMLそのものです。

スコープ

これで問題なく動くのですが、このままだとスタイルがページ全体に適応されてしまいます。

コンポーネントは 『内部で完結していて、外部に影響を与えないこと』 が大事なので、影響範囲をコンポーネントの内部のみに適応する書き方をします。

<style scoped>
	:scope {
		display: block;
	}
	
	h1 {
		color: #f00;
	}
</style>

この scoped アトリビュートを記述することで、同一ページにある他の h1 タグには影響を与えず、sample.tag の中の h1 にのみスタイルを適応できます。

ついでに :scope は <sample /> 自身のスタイルを定義できます（この場合は <sample /> はブロック要素になる）。

プリプロセッサ

デフォルトのままだと style の中にはCSS、script の中にはes5標準のJavascriptしか書けませんが、

type アトリビュートを用いることで、好きなプリプロセッサを利用することができます。

<style type="text/scss">
	.hogehoge {
		.fugafuga {
			/* hogehoge */
		}
	}
</style>

<script type="text/babel">
	const TITLE = 'Riot.js入門';
</script>

Rito.jsが公表でサポートしているのは以下の通りです。

CSS

• less
• sass
• scss
• stylus

JS

• livescript
• typescript
• es6 - (babel-coreまたはbabelを使用)
• babel - (babel-core v6.x またはes2015プリセットを使用)
• coffee または coffeescript