dayjournal | Riot.js #001 – カスタムタグの定義

今回は、JavaScriptフレームワークのRiot.jsを試したいと思います。

Riot.jsとは、React.jsを意識して作られた軽量でかつコンポーネント指向を持ったJavaScriptフレームワークです。JavaScriptフレームワークには、React.js・AngularJS・vue.js・Backbone.jsなど多数のフレームワークが存在しますがRiot.jsもその１つになります。

Riot.jsを利用すると、HTML・CSS・JSをひとまとまりのカスタムタグとして定義することができます。また、React.jsではJS内にHTMLを記述しますが、Riot.jsではHTML内にCSSやJSを記述します。そのため、今までのHTML・CSS・JSに近いイメージで構築できるので他のJavaScriptフレームワークより扱いやすくシンプルです。

情報量については、他のフレームワークよりまだまだ少ないですが、とても利用しやすいフレームワークなのでこれから紹介していければと思います。

現在のバージョンはv3.0みたいなので最新バージョンで試したいと思います。

今回は、Riot.jsでカスタムタグを定義する方法を紹介します。

カスタムタグを定義するためには下記のように記述します。

index.html


<!DOCTYPE html>
<html lang="ja">
<head>

    <meta charset="UTF-8">
    <title>Riot.js sample</title>

    <script src="./library/riot/riot+compiler.js"></script>

    <script src="./tag/sample.tag" type="riot/tag"></script>

</head>
<body>

    <sample></sample>

    <script>riot.mount('sample');</script>

</body>
</html>

sample.tag


<sample>

    <h1>h1タグ表示</h1>
    <h3>h3タグ表示</h3>
    <p>pタグ表示</p>

</sample>

index.htmlを実行すると下記のようにブラウザで表示されます。

Riot.jsでカスタムタグを作成する場合は、「.tag」ファイルを作成します。ちなみに「.js」とかでも実際はカスタムタグとして認識します。カスタムタグを作成し、ファイルをコンポーネント化することによってコードの見通しが良くなり各記述の関連付けがしやすくなります。

Riot.jsのライブラリ読み込み：


<script src="./library/riot/riot+compiler.js"></script>

Riot.jsのライブラリをCDNで読み込む場合：


<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.0.4/riot+compiler.min.js">

カスタムタグを読み込み：


<script src="./js/sample.js" type="riot/tag"></script>

カスタムタグを指定：


<sample></sample>

カスタムタグをマウント：


<script>riot.mount('sample');</script>

Riot.jsでは、カスタムタグを定義してファイルをコンポーネント化することができます。今までのHTML・CSS・JSのイメージで記述できるので、個人的には他のJavaScriptフレームワークよりわかりやすいです。

dayjournal memo

Riot.js #001 – カスタムタグの定義

Yasunori Kirimoto 2017/1/4

index.html

sample.tag