Riot.js v4に対応したルーター、Riot Routerのbeta版がリリースされました！

UI開発者 板垣

本日、すべてのRioterが待ち望んでいた、新しいRiot Routerのbeta版がリリースされました！

今回リリースされたルーターは、以下の機能を備えているようです。

  • history.pushStateおよびhistory APIとの互換性
  • isomorphic functional API
  • erre.js streamsおよびJavaScriptのasync generators
  • rawth.jsのURL解析

※beta版のため、機能の修正や追加などがあるかもしれません。

ものは試しということで、5分でできるインブラウザのデモを作成しました！コピペすれば5分すらかからないので、ぜひみなさんも新しいRiot Routerに触れてみてください。

ディレクトリ構造

root
├ views
｜    ├ About.riot
｜    └ Home.riot
｜
├ App.riot
└ index.html

任意の場所で、上記のディレクトリ構造を作成してください。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Riot Router</title>
  <script src="https://unpkg.com/riot@4/riot+compiler.min.js"></script>
  <script src="https://unpkg.com/@riotjs/route@4.0.0-beta.1/route.js"></script>
  <script src="./App.riot" type="riot"></script>
  <script src="./views/Home.riot" type="riot"></script>
  <script src="./views/About.riot" type="riot"></script>
</head>
<body>
  <app/>
  <script>
    riot.compile().then(() => {
      riot.register('route', route.Route)
      riot.register('router', route.Router)
      riot.mount('app')
    });
  </script>
</body>
</html>

head要素内でRiot.js本体+コンパイラ、ルーター、そして各コンポーネントの読み込みをしています。
また、body要素内にあるscript要素では、routeとrouterタグのグローバル登録と<app/>タグのコンパイルをしています。

App.riot

<app>
  <router>
    <nav>
      <ul>
        <li><a href="/">home</a></li>
        <li><a href="/about">about</a></li>
      </ul>
    </nav>

    <route path="/"><home/></route>
    <route path="/about"><about/></route>
  </router>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul {
      display: flex;
      list-style: none;
    }

    li:not(:last-child) {
      margin-right: 10px;
    }
  </style>
</app>

このファイルにルーティング処理を書いていきます。
routerタグの中に入っているリンクは自動的にルーター用のリンクになり、リンクをクリックすると、クリックしたリンクに対応しているrouteタグの中身が表示されます。

Home.riot

<home>
  <p>Hello Riot Router!</p>
</home>

<route path="/"><home/></route>に表示される内容を書きます。

About.riot

<about>
  <p>Simple and elegant component-based UI library</p>
</about>

<route path="/about"><about/></route>に表示される内容を書きます。

完成

以上で完成です！画像のようにリンクをクリックした際に表示が切り替わっていれば成功しています。
このようにRiot Routerを使えば即座にルーティングが体験できます。今回はRiot.jsを使いましたが、このルーターはスタンドアロンモジュールとしても提供されているため、Riot.jsだけではなくその他の環境でも使用できます。
とても使いやすいので、ルーティングを体験してみたいと思っている方はぜひ使ってみてください。