Riot初歩の初歩

Riot初歩の初歩

Posted at August 29,2018 12:03 AM
Tag:[Riot]

Riot(ライオット)は、HTMLの中にJavaScriptやCSSを書くことができる、シンプルで洗練されたコンポーネントベースのUIライブラリです。

riot

が一度も触れたことがないのでまったくわからず、ネットで調べても頭にスッと入ってくる情報がなかなかみつかりません。

ということで、簡単なサンプルを使って、Riotの機能について紹介してみます。

1.サンプル

サンプルは、h1要素に「Hello World!!」を表示します。

riot

用意するのは、カスタムタグ(後述)を記述するためのtest.tagと、ウェブページを表示するindex.htmlの2つです。

test.tag

<test>
  <h1>{ opts.title }<h1>
</test>

index.html

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <test></test>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js'></script>
  <script type="riot/tag" src="test.tag"></script>
  <script>riot.mount('test', { title: "Hello World!!" });</script>
</body>
</html>

2つのファイルは同じディレクトリに配置します。

index.htmlをブラウザで表示すると、前の画像のように「Hello World!!」が表示されます。

以下、Riotの主な機能である「カスタムタグ」と「マウント」の解説です。

2.カスタムタグ

test.tagに書かれた<test>~</test>は、「カスタムタグ」と呼ばれるもので、ユーザインターフェースの構成要素です。ここがアプリケーションの「ビュー」部分を担います。

<test>
  <h1>{ opts.title }<h1>
</test>

カスタムタグの中にscriptタグを書くことができます(サンプルのように省略も可能)。script(ロジック)はHTMLよりも後に記述します。

<test>
  <h1>{ opts.title }<h1>
  <script>
    this.title = opts.title
    console.log(this.title)
  </script>
</test>

scriptタグは省略も可能です。省略した場合、JavaScriptは最後のHTMLタグの直後から始まるものとみなされます。

<test>
  <h1>{ opts.title }<h1>
  this.title = opts.title
  console.log(this.title)
</test>

カスタムタグの中にstyleタグを含めることもできます。

<test>
  <h1>{ opts.title }<h1>
  <style>
    h1 { font-size: 150% }
  </style>
</test>

カスタムタグに標準のHTMLタグを使うこともできますが、方法として推奨されていないようです。

3.マウント

作成したタグは、ページ上(ここではindex.html)でマウントします。マウントすることでカスタムタグの内容がページに反映されます。

まず、カスタムタグと同じタグをページ上の任意の位置に記述します。

<body>
<test></test>
</body>

次に、riot.jsおよび、カスタムタグが書かれたファイルをscriptタグでインクルードします。

<body>
<test></test>
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js'></script>
<script type="riot/tag" src="test.tag"></script>
</body>

そして最後にsrciptタグでmount()を記述します。

<body>
<test></test>
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js'></script>
<script type="riot/tag" src="test.tag"></script>
<script>riot.mount('test', { title: "Hello World!!" });</script>
</body>

mount()の第1パラメータには、マウントしたいカスタムタグ(要素)を記述します。サンプルのカスタムタグは"test"なので、"test"を記述します。

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

mount()の第2パラメータには、ページに渡したいデータを渡すことができます。サンプルではjsonデータを渡しています。

<script>riot.mount('test', { title: "Hello World!!" });</script>

オプションで渡したデータは、カスタムタグ内の変数optsで参照することができます。Riotの処理はこのようにカーリーブラケットで括るお作法になっているようです。

<h1>{ opts.title }<h1>

これでh1要素の値に「Hello World!!」が埋め込まれます。

chromeでソースを見ると、次のように展開されたカスタムタグがindex.htmlに埋め込まれているのが分かります。

<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css"></style>
  </head>
  <body>
    <test><h1>Hello World!!</h1></test>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.11.1/riot+compiler.js"></script>
    <script type="riot/tag" src="test.tag"></script>
    <script>riot.mount('test', { title: "Hello World!!" });</script>
  </body>
</html>
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)