今年もアドベントカレンダーの季節がやってきました！！！ヽ(=´▽`=)ﾉ
弊社デジクエのカレンダー初日を担当させて頂きます、リードエンジニアの大野です。よろしくお願いしますm(_ _)m

`Riot.js` V4系であえてロケーションハッシュ(#xxx)でルーティングをする

弊社では私の好みも多分に含まれますがRiot.jsを使ったSPAを作ることが多いです。
最近ではSSR等も流行なようなのでSSRで昔ながらの「/(スラッシュ)」によるディレクティブなルーティングをするSPAが増えていますね。

Riot4系のルーターも標準では「/(スラッシュ)」によるルーティングになっているようです。
しかしそんな中ではありますが、あえてディレクティブなものでなく「#(ハッシュ)」を使ったルーティングを設定して見たので、「#(ハッシュ)」派の人は是非ご参考下さい！m(_ _)m

※管理ツールなどで特にSSRを必要しない要件で、さっくりSPAしたい派の方特に必見です！

STEP1. Roit4系のルーターの読み込み

標準？で提供されているコチラをまずルーターとして使います。
https://github.com/riot/route

<!DOCTYPE html>
<html>
  <head lang="ja">
    <meta charset="UTF-8">
    <title>Riotルーターサンプル</title>
  </head>
  <body>
    <h1>Riot4ルーターサンプル</h1>
  </body>
    <!-- riot4本体 -->
    <script src="//unpkg.com/riot@4/riot+compiler.min.js"></script>
    <!-- Riot4用のルーター -->
    <script src="//unpkg.com/@riotjs/route@4.0.0-beta.1/route.js"></script>
</html>

シンプルにベースはこんな感じです。

STEP2. シンプルなHello worldサンプル

先ずは、シンプルに2ページを行き来するサンプルを用意

<!DOCTYPE html>
<html>
  <head lang="ja">
    <meta charset="UTF-8">
    <title>Riotルーターサンプル</title>
  </head>
  <body>
    <h1>Riot4ルーターサンプル</h1>
    <ul>
      <li><a href="./">トップ</a></li>
      <li><a href="./sample">サンプル</a></li>
    </ul>
    <app></app>
  </body>
  <!-- riot4本体 -->
  <script src="//unpkg.com/riot@4/riot+compiler.min.js"></script>
  <!-- Riot4用のルーター -->
  <script src="//unpkg.com/@riotjs/route@7.0.0/route.js"></script>

  <!-- appタグをインライン定義 -->
  <template id="app">
    <app>
      <router>
        <route path="{window.location.pathname}">
          <h2>Hello world!</h2>
        </route>
        <route path="{window.location.pathname}sample">
          <h2>サンプル！</h2>
        </route>
      </router>
    </app>
  </template>

  <script>
    // appタグを読み込み
    riot.inject(riot.compileFromString(document.getElementById('app').innerHTML).code, 'app', './app.html');
    // riotをコンパイル
    riot.compile().then(() => {
      riot.register('route', route.Route);
      riot.register('router', route.Router);
      // ルートディレクトリ外でも動くようにベースパスを設定
      route.setBase(`${window.protocol}//${window.host}${window.location.pathname}`);
      riot.mount('app');
    });
  </script>
</html>

ブラウザで実行したサンプルは以下

 http://plnkr.co/plunk/IogODWhBcSlmVAzw

ルーターを入れた基本はこんな感じになってます。
サンプルを実際にローカルで実行してみるとわかると思いますが、デフォルトではルーターは「/(スラッシュ)」によるディレクティブなルーターになっていると思います。
本来はこれで十分に満足出来るんじゃないでしょうか。

これを「#(ハッシュ)」ベースのルーターに変えるんですが、実は凄く簡単です。

STEP3. 「#(ハッシュ)」ベースのルーターに変えたサンプル

実はものすごく簡単で

route.setBase(`${window.protocol}//${window.host}${window.location.pathname}`);

の行を#を含めた形に変えて上げて

route.setBase(`${window.protocol}//${window.host}${window.location.pathname}#`);

後はリンクとpathを#式に変えてあげるだけでOKです。

実際の書き換えた後のサンプルは以下

<!DOCTYPE html>
<html>
  <head lang="ja">
    <meta charset="UTF-8">
    <title>Riotルーターサンプル</title>
  </head>
  <body>
    <h1>Riot4ルーターサンプル</h1>
    <ul>
      <li><a href="#">トップ</a></li>
      <li><a href="#sample">サンプル</a></li>
    </ul>
    <app></app>
  </body>
  <!-- riot4本体 -->
  <script src="//unpkg.com/riot@4/riot+compiler.min.js"></script>
  <!-- Riot4用のルーター -->
  <script src="//unpkg.com/@riotjs/route@7.0.0/route.js"></script>

  <!-- appタグをインライン定義 -->
  <template id="app">
    <app>
      <router>
        <route path="{window.location.pathname}">
          <h2>Hello world!</h2>
        </route>
        <route path="{window.location.pathname}#sample">
          <h2>サンプル！</h2>
        </route>
      </router>
    </app>
  </template>

  <script>
    // appタグを読み込み
    riot.inject(riot.compileFromString(document.getElementById('app').innerHTML).code, 'app', './app.html');
    // riotをコンパイル
    riot.compile().then(() => {
      riot.register('route', route.Route);
      riot.register('router', route.Router);
      // ルートディレクトリ外でも動くようにベースパスを設定
      route.setBase(`${window.protocol}//${window.host}${window.location.pathname}#`);
      riot.mount('app');
    });
  </script>
</html>

ブラウザでの実行結果は以下

 http://plnkr.co/plunk/veYITpKjBuVEc91A

こんな感じで非常に簡単に「#(ハッシュ)」ベースに変えられました！

まとめ

「#(ハッシュ)」ベースのルーターの場合のいいところはSSRと逆行しますがサーバーサイドの設定などは特に不要になる点かなと思います。
管理ツールだったり、非公開のアプリケーションであったりの場合は特にSSRに絶対にしないとならないシチュエーションでは無く、サックリSPAが作れればいい！と言うことも多々あると思ってます。
(特にRiotはブラウザコンパイル出来てとてもサクッとSPA出来るので尚更)
そう言う時のTIPSとして是非ご参考下さいm(_ _)m

Riot.js V4系であえてロケーションハッシュ(#xxx)でルーティングをする

STEP1. Roit4系のルーターの読み込み

STEP2. シンプルなHello worldサンプル

STEP3. 「#(ハッシュ)」ベースのルーターに変えたサンプル

まとめ

`Riot.js` V4系であえてロケーションハッシュ(#xxx)でルーティングをする