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