続・Riot.jsの落とし穴まとめ

Riot.jsの落とし穴まとめ

こちらの記事の続編というか、v2.x しか書いていなかったので、今回は v3.x のための記事です。

v4 の開発が水面下で粛々と進んでおり、今更感もありますが、v4リリースされたからと言ってすぐに本番で導入するとは思えないですし、また v3.x の需要もあると思いますので、書いていきます。（以下、本記事ではRiot.jsを riot と呼びます）

1. イベントが発火すると、イベント発火した現在のタグのみ更新される

ユーザの操作に伴いデータの変更が行われたとき、画面上にもその変更を反映しないといけませんが、riotだと、以下のように update() メソッドを明示的に発火させる必要があります。以下の例を見てください。（デモ）

app.tag

<app>

  <!-- ここのテキストは変わらない -->
  <p show="{ show_flg }" class="text">hogehoge</p>
  <p hide="{ show_flg }" class="text">fugafuga</p>

  <child on-toggle="{ toggle }" />

  <script>
    this.show_flg = false

    toggle() {
       this.show_flg = !this.show_flg
    }
  </script>
</app>

child.tag

<child>
  <button onclick="{ opts.onToggle }">toggle</button>

  <script>
    this.on('update', () => {
       console.log('updated in child tag.')
    })
  </script>
</child>

この例では、toggle メソッドは app タグに定義されていますが、button タグとクリックイベントは <child> という子タグに定義されているため、このボタンをクリックしても child タグの中でのみ更新処理が走ります。したがって、テキストはずっと fugafuga のままです。

app タグを更新するためには、以下のように明示的に update() を実行する必要があります。

app.tag(更新)

toggle() {
   this.show_flg = !this.show_flg
+  this.update()
}

2. 属性名が自動で小文字に変換される

属性の名前にキャメルケースを使っている場合、その名前は全て小文字に変換されます。
以下のコード例を見てください。

app.tag

<app>
  <child showDetail={ hoge } />

  const self = this
  self.hoge = 'fuga'

</app>

<child>
  <h2>{ opts.showDetail }</h2>

  console.info(opts)  //=> Object {showdetail: "fuga"}

</child>

上記のように、opts の中身を見ると、showdetail とDの文字が小文字に変換されてしまいます。

これはブラウザの仕様で自動で変換されるものですので、これを回避する方法はキャメルケースを使わないことです。（3.に続く）

※ こちらは公式ドキュメント にも記載されています。

3. 属性名が自動でローワーキャメルケースに変換される

2. のケースと同じようなものですが、今回はハイフン(-)を使っていると、自動でローワーキャメルケースに変換されるパターンです。

app.tag

<app>
  <child show-detail={ hoge } />

  const self = this
  self.hoge = 'fuga'

</app>

<child>
  <h2>{ opts.show-detail }</h2>

  console.info(opts)  //=> Object {showDetail: "fuga"}

</child>

見ていただいた通りです。この回避策としては、属性名をスネークケースにするのが手っ取り早いです。アンダーバーの場合は何も変換されません。または、割り切ってローワーキャメルケースで扱うのもありですね。

4. select, table, svgなどのタグの子要素としてriotタグを設置することはできない

こちらも公式ドキュメントに記載がありますが、例えば、selectタグの子要素にはoptionタグしか設置できない仕様になっていますので、以下のような書き方ですと、マウントされません。

tag（誤り）

<select>
  <my-options />
</select>

正しくは、以下のように書きます。

tag（正しい）

<select data-is='my-options'></select>

終わりに

公式ドキュメントも少しづつ更新が入っておりますので、久しぶりに見ると答えが書いてあるかもしれません。またRiot.jsは、初めてJavaScriptのライブラリやフレームワークに触れるという人にはわかりやすいものですので、一度触って見るか、くらいの時の選択肢として十分ありだと思います。その後、Vue.jsやReactに行くのも学習の流れとしてはいいのではないかなーと思います。

また何か見つかれば随時更新します！
では