Web Developer's Struggle Memories

日々の業務から思ったこと、学んだことを書き連ねていきます。

Riot.jsに触れてみた話　Riot.jsとは～導入まで

JavaScript Riot.js プログラミング 備忘録

Riot.js

名前に「js」が入ってるから、JavaScriptのフレームワークかライブラリの1つ、とは想像が付くと思う。
Riot.jsとは、

A React-like user interface micro-library

ですわ（公式より）。簡単に訳すとReact.jsに似せて作られた超軽量なUIライブラリくらいだろうか。
特徴としては以下の二点。

  1. Custom tags
  2. Simple and minimalistic

個人的にこの2点ともヒットしたので使ってみた。
ただ日本語のドキュメントや記事が少なく、探しても大抵この方のQiitaの記事ばかりである。（大変参考にさせて頂きました！）
なので、頑張って英語を翻訳しながら試行錯誤しつつRiot.jsの世界へ入った。

※2016/08/04　追記

現在は公式ページの各言語への翻訳もされ、かつ沢山の方がエントリを書かれているので、結構ドキュメントは増えてきてます！

サイズの比較とか

上でも書いたけど、そんなに軽量なの？と思ったので、有名どころのフレームワークとライブラリをダウンロードして比較してみた。
結果は以下。

Framework Version Size
Angular2 2.0.0-beta.17 125.29KB
Ember 2.6.1 112.94KB
Angular 1.5.7 56.02KB
React 15.2.0 45.49KB
Vue 1.0.26 26.66KB
Riot 2.5.0 9.25KB

※バージョンなどの点は無視して、～.min.jsファイルで比較した。見て分かるように桁違いの小ささだった。

また、サイズが小さい分APIも少ないため、学習コストも低いのは利点。

仕様とか

いろいろ書いてあったけど、いくつか抜粋する形で列挙する。（順番は公式とは一致しないです）

  • Riot.jsはhtmlタグ（レイアウト）とJavaScript（ロジック）の組み合わせ

  • まずhtmlが定義されていて、その後にJavaScriptを記述する
    ※外部タグファイルを読み込む場合、bodyタグ内で読み込まないと使用できない

  • htmlタグが終了した後ならば、scriptタグ無しでJavaScriptの記述が可能

  • クラス名は省略して記述できる 　例）class={ completed: done } ⇒ class="completed"

  • 全ての属性名は小文字でなければならない（ブラウザの仕様）

  • 独自タグは必ず閉じる必要がある

  • 独自タグはJavaScriptだけでも良い

  • thisは独自タグのインスタンスを指す

  • 式の値がfalseなら属性は無視 　例）<input checked={ undefined }> ⇒ <input>

全て見たい人は公式ページ Custom tags · Riot.js を参照ください。

※私の英語レベルが低いので間違ったこと書いてあればご指摘いただけますと幸いです！*1

コンポーネント（独自タグ）

基本的には、コンポーネント（独自タグ）を作成していく形となる。以下は例。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="demo.css" rel="stylesheet">
        <title>Riot.jsの勉強用</title>
    </head>
    <body>
        <!-- コンポーネントの配置 -->
        <app></app>

        <!-- コンポーネントの中身 -->
        <script src="./app.tag" type="riot/tag"></script>
        <!-- コンパイラ -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.5.0/riot.min.js"></script>
        <script>riot.mount('app', { title: 'Hello Riot.js!' })</script>
    </body>
</html>

例ではappというコンポーネント（独自タグ）を作成。そして、その下に実際にこのコンポーネントの実装ファイルをscriptタグで読んでいる（例ではapp.tag）。 読み込むファイルの拡張子が.tagとなっているが、これだとテキストエディタでシンタックスカラーが効かないため、.htmlで書いても機能する。

コンパイラ

tagファイルのままだとhtmlでは解読不能なため、JavaScriptにコンパイルする必要がある。

Riot.jsにはコンパイルの方法が以下の二通りある。

実際にhtmlで記述する場合は下記のようになる（公式より）。

<!-- <inner-tag/> is specified on external file -->
<script src="path/to/javascript/with-tags.js" type="riot/tag"></script>

<!-- include riot.js and the compiler -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.5.0/riot.min.js"></script>

事前にコンパイルしたものを読み込んだほうがパフォーマンスは上がるらしいが、トランスコンパイルでも十分だと思う。
※実際のコンポーネントの中身を記述したtagファイルを読み込む際、type属性は必ずriot/tagにすること。（こうしないとコンパイルされない）

マウント

index.htmlファイルに以下のような記述があるが、これがマウント部分。

<script>riot.mount('app', { title: 'Hello Riot.js!' })</script>

上記のriot.mount()メソッドが呼び出されたときに、htmlに定義した独自タグに、対応するコンポーネントの実装がマウントされる。 また、マウント時にオプションを渡すことができ、それはoptsという変数でアクセスできる。（後ほど再度記載します）
今回は、appコンポーネントにHello Riot!という文言をtitleというキーで渡している。

このriot.mount()メソッドは、

しており、コンポーネントの指定はカンマ区切りで、渡す値はオブジェクト化して複数渡すことも可能。以下例。

<!-- コンポーネントを複数指定-->
<script>
   riot.mount('app, todo, dummy', {
      title: 'Hello Riot.js!'
   })
</script>

<!-- 値を複数指定 -->
<script>
   riot.mount('app', {
      title: 'Hello Riot.js!',
      items: [1, 2, 3],
      text: 'foo'
   })
</script>

使用イメージは、初期化用といった感じ。

tagファイル

先ほどのindex.htmlファイルで定義したappタグの実装部分を記載したtagファイルを作成してみた。
app.tag

<app>
    <!-- layout -->
    <h2>{ opts.title} </h2>

    <!-- javascript -->
    // 実際はここでロジック（処理）の内容を書く

</app>

ここで{ opts.title }というのを記載しているが、Riot.jsでは、タグの属性の値（例: <todo title='todoアプリ'>など）や、html内でriot.mount()メソッドでマウントされた値は、コンポーネント内でopts変数を用いてアクセスできるようになっている。また上記では、scriptタグを省略している。

おわりに

今回はあくまで導入部分までを備忘録として書いたので、次回は実際に書いてみたいと思う。
また、公式のDEMO（todoアプリ）のソースを見ながら勉強していく。
もし興味がある人は、ぜひRiot.jsをご賞味あれ～。

※もしよろしければ手前味噌ですがデモを書いたので、見てみてください。

github.com

*1:公式サイトの日本語訳版が出ていましたのでそちらをご参照ください。