Riot.js入門ハンズオン 〜 基礎編① 〜

こんにちわ! エンジニアの佐山です。

前回に続いて、Riot.js(以下Riot)について書いていきたいと思います。

前回の記事は以下です。

note.welks.co.jp

作業ディレクトリの作成

作業用ディレクトリを作成します。

今回はRiot-sampleというディレクトリを作業ディレクトリとします。

// Riot-sampleというディレクトリを作成
$ mkdir Riot-sample

// Riot-sampleディレクトリへ移動
$ cd Riot-sample

// js、tagsディレクトリを作成
$ mkdir js tags

// index.htmlを作成
$ touch index.html

// app.jsをjsディレクトリ内に作成
$ touch js/app.js

Riotをインストールする

こちらのドキュメントを読むと、2つのコンパイル方式が用意されていると記載があります。

インブラウザ・コンパイル

<script src="https://cdn.jsdelivr.net/npm/riot@3.1/riot+compiler.min.js"></script>htmlにこちらのスクリプトタグを読み込ませると、ブラウザでコンパイルが実行されます。 ※ 今回はこちらの方法は使いません

プリコンパイル

今回はこちらの方法を採用して、進めていきたいと思います。

// riotをnpm経由でグローバルにインストール
$ npm install -g riot

// 監視モード
$ riot -w tags js

上記でriotをインストールして監視モードを実行させました。
監視モードが実行されていると、tagsディレクトリ内に.tagという拡張子で保存されたファイルはファイルに変更があると検知、コンパイルされ、jsフォルダにコンパイルされた状態で吐き出されます。
なので、Riotを書くときは監視モードにしてから書くという風にします。

riotコマンドのオプションについては以下で確認が出来ます。

$ riot --help

index.htmlを編集

先ほど作成した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">
  <!-- CDNでRiotを読み込む -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.7.3/riot.min.js'></script>
  <title>Riot-sample</title>
</head>
<body>

  <!-- jsの設定ファイル -->
  <script src="./js/app.js" charset="utf-8"></script>
</body>
</html>

app.jsを編集

riot.mount('*');の記法で、全てのタグをマウント(表示)するという設定にします。

// 全てのタグをマウントする
riot.mount('*');

特定のカスタムタグだけマウントしたい場合は、以下のようにします。

// hogeというタグだけマウント
riot.mount('hoge');

簡単なサンプルを作る

概要

Riotで開発するための準備を整えたら、実際にコードを書いてみましょう。
今回は簡単なサンプルとしてタイマーアプリを作ってみます。

機能要件:
1. タイムアウトとなる秒数を指定
2. ボタンを押すとカウントダウンスタート
3. 0になったらアラートを表示

のように作っていけたらと思います。

ベースとなるレイアウトを編集

レイアウトにはSiimpleを使います。

先ほど作った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">
  <!-- CDNでRiotを読み込む -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.7.3/riot.min.js'></script>
  <!-- CDNでSiimpleを読み込む -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple@3.0.0/dist/siimple.min.css">
  <title>Riot-sample</title>
</head>
<body>
  <div class="siimple-box">
    <div class="siimple-box-title">Riot Simple Timer</div>
    <!-- カスタムタグの呼び出し -->
    <timer></timer>
  </div>

  <!-- コンパイルされたtimer.jsを読み込む -->
  <script src="./js/timer.js" charset="utf-8"></script>
  <!-- jsの設定ファイル -->
  <script src="./js/app.js" charset="utf-8"></script>
</body>
</html>

上記では、以下で作成するtimer.tagコンパイル後のtimer.jsを読み込ませるようにしてあります。 上記のようにすると以下のスクリーンショットのようになります

f:id:sayamaken0402:20180617084125p:plain

timer.tagを作成

監視モードにしておくことを忘れないでください

$ riot -w tags js

上記を実行すると以下のようなコンソールが出力されます。 f:id:sayamaken0402:20180617084505p:plain

tagsディクトりにtimer.tagというファイルを作成しましょう timer.tagの中身は以下のようにします。

<timer>
  <h1>{title}</h1>

  <script>
    this.title = "hello"
  </script>
</timer>

ブラウザの表示を見てみると、以下のようにhelloという文字列が表示されているのがわかるかと思います。 f:id:sayamaken0402:20180617084959p:plain

timer機能を作り込む

今回作るタイマーでは、始まりの数字と、終了時のメッセージを変更しやすく作りたいと思います。
具体的には、カスタムタグを呼び出す際に独自の属性を指定して、その値をカスタムタグ内の処理に使うということをします。

<!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">
  <!-- CDNでRiotを読み込む -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/riot/3.7.3/riot.min.js'></script>
  <!-- CDNでSiimpleを読み込む -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple@3.0.0/dist/siimple.min.css">
  <title>Riot-sample</title>
</head>
<body>
  <div class="siimple-box">
    <div class="siimple-box-title">Riot Simple Timer</div>
    <!-- カスタムタグの呼び出し -->
    <timer num="5" msg="Finish!!"></timer>
  </div>

  <!-- コンパイルされたtimer.jsを読み込む -->
  <script src="./js/timer.js" charset="utf-8"></script>
  <!-- jsの設定ファイル -->
  <script src="./js/app.js" charset="utf-8"></script>
</body>
</html>

<timer num="5" msg="Finish!!"></timer>を見てみると、nummsgという属性と属性値が指定されているのがわかります。
Riotではこのように定義された属性をthis.opts.属性名で取得することができます。

<timer>
  <!-- カウントされる数字を表示 -->
  <h1 class="siimple-h1">{this.time}</h1>
  <!-- クリックされたらonclickでstartTime関数を実行する -->
  <button onclick={startTimer} type="button" name="button" class="siimple-btn siimple-btn--navy">Start</button>

  <style>
    h1 {
      font-size: 60px;
    }

    button {
      width: 100px;
    }
  </style>

  <script>
    // 整数に変換
    this.time = parseInt(this.opts.num)

    that = this
    // ボタンを押した時の処理
    this.startTimer = function(){
      var timer = function(){
        // 1ずつマイナスする
        that.time--
        // 1秒ごとに処理を実行
        var tick = setTimeout(timer, 1000)
        // 0以下になったら以下の処理を実行
        if (that.time < 0) {
          clearTimeout(tick)
          // 0になったら、設定された数字に戻す
          that.time = that.opts.num
          // メッセージを表示
          alert(that.opts.msg)
        }
        // 明示的にブラウザをアップデート
        that.update()
      }
      // 関数呼び出し
      timer()
    }
  </script>

</timer>

以上でタイマーアプリは完成です。

完成

f:id:sayamaken0402:20180617090252p:plain

f:id:sayamaken0402:20180617090258p:plain

以上でRiotの基礎編①は完成です! 次回はもう一つサンプルアプリを作っていき、さらにRiotの使い方を紹介したいと思います。 ではまた次回!