軽量なコンポーネント指向フレームワーク「Riot.js」

Riot.jsは、冒頭でも述べた通りReactに近いJavaScriptのフレームワークです。コンポーネント指向であり、仮想DOMがあり、それでいてファイルサイズが軽量であったり、コンポーネントは独自タグを使うものの、その中では普段使うHTML、CSS、JavaScriptがそのまま書けるということで学習コストが少なかったり、さらに日本語の公式ドキュメントが用意されていたりするという理由で、特に日本ではRiotを推す人が増えてきているのではないかと思っています。

• Riot.js — Simple and elegant component-based UI library · Riot.js
• riot/riot – GitHub

私は普段はReactをメインに書いており、今回この記事を書くにあたって初めてRiotでコードを書いてみたのですが、ドキュメントをさっと流し読みしただけで、さわりの部分だけとなりますがある程度理解することができました。

• ガイド · Riot.js

ドキュメントが日本語なので、さわりの部分だけでも試してみたいと思う方もいるかと思います。そこでオススメしたいのが、「Riot live editor」です。Riotの公式のオンラインエディタとなります。このエディタ自体がRiotで書かれています。オンラインで気軽にRiotのコードを書いて試すことができます。

• Riot live editor – Riot.js

Riot Live EditorでRiotを書いてみる

「Riot Live Editor」は以下よりアクセスしてください。

• Riot live editor – Riot.js

「Riot Live Editor」は、オンラインエディタ上でコードを書いたら、リアルタイムで結果が表示されるようになっています。余計な開発環境構築を行わずとも、Riotの機能が気軽に試せます。

さっそくですが、基本的な構文でコンポーネントを複数用意し、opts（データの受け渡しを行うための変数）を使ったデーターの受け渡しを伴うちょっとだけ複雑にした「Hello World」を書いてみました。

<sample>
  <div>
    <helloworld data={items} />
    <sample-button handleclick={handleClick} />
  </div>
  
  <style>
    div {
      text-align: center;
    }
  </style>

  <script>
    // テンプレート変数（State）
    this.items = {
      hello: 'Hello',
      world: 'World',
    };
    // ボタンがクリックされた時の処理
    this.handleClick = () => {
      if (this.items.world === 'World') {
        this.items.world = 'Riot';
      } else {
        this.items.world = 'World';
      }
      // ページ上のタグとテンプレート変数を更新
      this.update();
    }
  </script>
</sample>

<helloworld>
  <h1>
    {opts.data.hello} {opts.data.world}
  </h1>
  
  <style>
    h1 {
      font-size: 56px;
    }
  </style>

  <script>
    this.data = opts.data;
  </script>
</helloworld>

<sample-button>
  <button onclick={click}>Click</button>
  
  <style>
    button {
      font-size: 24px;
      padding: 16px 0;
      width: 240px;
      border: none;
      color: #fff;
      background-color: #ff0044;
    }
  </style>
  
  <script>
    click(e) {
      e.preventUpdate = true;
      return opts.handleclick();
    }
  </script>
</sample-button>

面白いことに、「Riot Live Editor」で書いたコードは、そのままURLで共有できます。私が「Riot Live Editor」で書いたサンプルコードです。上記のコードの結果がこちらで確認できますので、実際にアクセスしてご確認してみてください。

• 「Riot Live Editor」で書いたサンプルコード

またRiotでは、オンラインコンパイラというのも公式で用意されています。Web上でRoitで書いたコードをコンパイルできるといことです。RiotのタグがどのようにJavaScriptで実装されているのかわかるので、とても参考になるかと思います。ちなみに、こちらのオンラインコンパイラもRiotで書かれているようです。

• Riot JS Tag Compiler

まとめ

普段からコンポーネント指向のフレームワークでコードを書かれている方であれば、同じような感覚でRiotのコードを書けるのではないかと思います。基本的に作法的なものは同じだと思います。今回紹介した「Riot Live Editor」は、ちょっとしたコードを試してみたい時に役に立つツールです。今年は「Vue」が伸びそうな予感がしており、「Riot」が流行るかは正直わかりませんが、どんなものか試しておいても損はないと思います。