Help us understand the problem. What is going on with this article?

Riot.jsでSPAを作る

More than 3 years have passed since last update.

はじめに

この記事は株式会社アイスタイルアドベントカレンダーの5日目の記事です。

新規案件をLaravel5.1で開発しています。@kubotakです。
元デザイナー・コーダーなのでフロントエンドの方が得意な気がします。

今回は簡単な導入として事前コンパイルやbrowserifyなどはしません。
あくまでもルーティング方法のみの説明となります。

Riot.jsについて

http://riotjs.com/ja/

A React-like user interface micro-library

Reactを意識して作られた超軽量のUIライブラリ。
Riot(=反乱)は、ボイラープレート(=雛形、決まり文句)と、不要な複雑さにまみれた現在の潮流に「反旗」を翻すプロジェクト。

超軽量と云うだけあってGitHubリポジトリに以下のように書かれている

Framework Size Comparison

Framework Version Minified Size
Ember 1.13.3 493.3kb
Angular 1.4.2 145.5kb
React 0.14.1 132.6kb
Web Components Polyfill 0.7.5 117.1kb
Polymer 1.0.6 101.2kb
Riot 2.3.11 18kb

他にもVirtualDOMを扱うMithril.jsという軽量ライブラリもあるが、Riot.jsの良さはやはり見慣れたDOMの書き方だと思う。

そのへんはRiot.js公式のReact.jsとの比較をみるとわかりやすい。

カスタムタグ

ここでは割愛しますが、Riot.jsではReact.jsで言うJSXの機能を担うカスタムタグというものがあります。
今回は

  • home.tag
  • hello.tag
  • not-found.tag

を作成して
http://hoge.com/ -> home.tag
http://hoge.com#hello -> hello.tag
上記以外 -> not-found.tag
が読み込まれるようにルーティングしたいと思います。

Route

ルーティングを定義していきます。
標準のルーターでも良いですが今回はこちらを使って行きます。

$ npm i --save riot riot-router

定義は以下

app.js
// Compile all tags
riot.compile(function() {

    // Mount all Riot tags.
    riot.mount('*');

    // My app routes
    var
        Route = riot.router.Route,
        DefaultRoute = riot.router.DefaultRoute,
        NotFoundRoute = riot.router.NotFoundRoute,
        RedirectRoute = riot.router.RedirectRoute;

    riot.router.routes([
        new Route({tag: 'hello'}),
        new DefaultRoute({tag: 'home'}),
        new RedirectRoute({from: 'h', to: 'hello'}),
        new NotFoundRoute({tag: 'not-found'}),
    ]);

    // Start routing
    riot.router.start();
});

定義の詳細ですが、

new Route()

基本はこれで行います。
new Route({tag: 'hello'})の場合カスタムタグの<hello></hello>http://hoge.com#helloにアクセスされた場合に<route></route>にセットされます。

クエリパラメータを使う場合は以下
new Route({path: 'hello/:userId' ,tag: 'hello'});
pathでルーティングを指定します。

http://hoge.com#hello/1
にアクセスされた場合はhelloカスタムタグ内で:userIdを以下のように取得できます。

<hello>
    { userId } = 1
    this.userId = 1
</hello>

new DefaultRoute

ルートにアクセスされた場合に<route></route>にセットされます。

RedirectRoute

リダイレクトを定義できます。
{from: 'h', to: 'hello'}とした場合はhttp://hoge.com#hにアクセスした場合http://hoge.com#helloに変換します。リダイレクトとは言いますが実際にhttp通信するわけではありません。

NotFoundRoute

定義していないURLにアクセスした場合に読み込むカスタムタグを指定できます。

HTML

HTMLは以下のようになります。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Riot Routing Test</title>
</head>
<body>
    <ul>
        <li><a href="/">HOME</a></li>
        <li><a href="#hello">HELLO</a></li>
        <li><a href="#404">NOT FOUND</a></li>
    </ul>

    <route></route>

    <!-- tags -->
    <script src="hello.tag" type="riot/tag"></script>
    <script src="home.tag" type="riot/tag"></script>
    <script src="not-found.tag" type="riot/tag"></script>

    <script src="node_modules/riot/riot+compiler.min.js"></script>
    <script src="node_modules/riot-router/lib/router.min.js"></script>

    <script src="app.js"></script>
</body>
</html>

DEMO

http://plnkr.co/K6NOCzA3nK2W31rdDfbH

所感

ルーティングもシンプルで簡単にSPA(Single Page Application)が作成できました。
Riot.jsは学習コストがかなり低いので試しに使ってみては如何でしょう。

明日は@YuyaAboくんです。

kubotak
フロントエンドが好物 これでもサーバーサイドエンジニア
https://kubotak.page
macloud
M&Aクラウドは「テクノロジーの力で、M&Aに流通革命を」をミッションにM&Aプラットフォーム「M&Aクラウド」を開発運営するスタートアップです。
https://macloud.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away