Riot.js入門ハンズオン 〜 概要編 〜

こんにちわ!エンジニアの佐山です。 開発部のブログがスタートしてからというものiOSの事ばかりを書いてきましたが、今回はウェルクスの一部サービスで導入をしているRiot.js(以下Riot)について書いていきます。

Riot以前の問題点

ウェルクスでは日々の改善施策を素早く行えるようにディレクター自身がフロントのコーディングを行うようにしています。
インタラクションについては比較的容易に扱えるということからほとんどの実装をjQueryを使って行っていました。

jQueryは比較的容易に書けてしまう反面、処理の責任の所在が、構造(HTML)、スタイル(CSS)、ロジック(JS)と分離されてしまいそれらが密結合なため3つのうち1つでも正しくないと正しく動作をしなくなってしまいます。

規模が小さいサイトであれば問題ないのですが、ある程度ページ数や処理の数が増えてくるととても管理がしやすいと言えるものではなくなってしまいます。

ディレクターでも比較的に理解しやすく、JSの処理をまとめたい...

そのソリューションとしてRiotを使うことにしました。

Riot.jsとは

Riot.jsとは。

公式ドキュメントを読むのが一番正確なのですが、個人的にいいなと思う部分も交えて解説していきたいと思います。

Riotとは、JavascriptのUIライブラリです。
Riotは設計思想に、「Simple and elegant component-based UI library」とうたっています。

カスタムタグ

Riotでは、全てのブラウザでカスタムタグを実現することが出来ます。 このカスタムタグこそがRiotだと言っても過言ではないです。

カスタムタグは以下のように定義をします。

<カスタムタグ名>
  // HTMLを記述
  <input />

  // スタイルを記述
  <style>
    // カスタムタグだけに適用されるスタイルを書く
  </style>

  // ロジック
  <script>
    // カスタムタグの処理ロジックを書く
  </script>

</カスタムタグ名>

上記を見てわかるように、RiotではDOM(HTML)、スタイル(CSS)、ロジック(Javascript)を一つのファイルに定義します。一つの処理を一つのファイルで定義することで、管理の一元化が実現できます。

さらに例を見て見ましょう。 例えば、以下のようなタグがあったとします。

<hoge>
  <h1>Hello World!!</h1>
</hoge>

というカスタムタグがあったとします。それらの処理は全てhoge.tagというカスタムタグと同名のファイルに定義されているので、どこを直せばいいのか瞬時に判別することが出来ます。

hoge.tagの中身を見て見ます。

<hoge>
  // 表示させるDOM
  <h1>{text}</h1>

  // カスタムタグ内でのみ適用されるスタイル
  <style>
    h1 {
      color: red;
    }
  </style>

  // ロジック
  <script>
    this.text = 'Hello World!!';
  </script>
</hoge>

Javascriptに不慣れなデザイナーでも変更が容易であることが見て取れるでしょう。

シンプルでわかりやすい文法

多くの新しい技術を習得する際に様々なソースを参考にするかと思います。本、web上の解説記事...。しかし、HTML、CSSJavascriptの基本がわかっていれば書けるように設計されています。

具体的にどういうことか。

Riotは独自形式のイベントシステムはないため、イベントの処理をJavascriptオリジナルで実現します。

例えばボタンを押したら、アラートが出るという機能があったとします。

それをRiotで実現すると以下のように実現が可能です。

<hoge>
  <h1>{text}</h1>
  <button onclick="{showAlert}">Alert</button>
  <style>
    h1 {
      color: red;
    }
  </style>
  <script>
    this.text = 'hoge';

    this.showAlert = function(){
      alert('You can see this alert !!')
    }
  </script>
</hoge>

f:id:sayamaken0402:20180610161813p:plain

見慣れたonclickを使うことで実現が出来ました。

多様性

Riotは公式ドキュメントで「必要十分」と書いていますが、様々なことが実現できます。
riot-routerを使うことでSPAにも対応することが出来、ES6、Typescript、CoffeeScript、Jade、LiveScriptなどのプリプロセッサを使うことも出来ます。

ReactとRiotの文法

公式ドキュメントに記載されているものをそのまま載せますが、Riotのシンプルさが際立つので見てください。

React

ReactのJSXが使われている例です。

import React from 'react'
import { render } from 'react-dom'

class Todo extends React.Component {
  state = { items: [], value: '' }
  handleSubmit = e =>
    e.preventDefault() || this.setState({ items: [...this.state.items, this.state.value], value: '' })
  handleChange = e => this.setState({ value: e.target.value })
  render() {
    return (
      <div>
        <h3>TODO</h3>
        <ul>
          {this.state.items.map((item, i) => <li key={i}>{item}</li>)}
        </ul>
        <form onSubmit={this.handleSubmit}>
          <input value={this.state.value} onChange={this.handleChange} />
          <button>Add #{this.state.items.length + 1}</button>
        </form>
      </div>
    )
  }
}

render(<Todo />, mountNode)

Riot

<todo>
  <h3>TODO</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ handleSubmit }>
    <input ref="input">
    <button>Add #{ items.length + 1 }</button>
  </form>

  this.items = []

  handleSubmit(e) {
    e.preventDefault()
    var input = this.refs.input
    this.items.push(input.value)
    input.value = ''
  }
</todo>

普段マークアップをする方であれば、上記を見てRiotなら出来そうだなと感じるはずです。

次回

今回はRiotの魅力や概要について書きましたが、次回はRiotを実際に動かしていきたいと思います。 ではまた次回!!!