riot-js_001_01


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

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

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

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


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

riot-js_001_02


今回は、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_001_03


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フレームワークよりわかりやすいです。





book


Q&A