More than 5 years have passed since last update.

新しい暴動のお時間です。〜Riot.js v4(beta版) の変更点をピックアップ〜

Last updated at 2019-10-20Posted at 2019-03-25

注意事項

本記事で触れている Riot.js（以下、riot） のバージョンは 4.0.0-beta2 です。
正式リリースの際は仕様が変わっている可能性がありますので、ご注意ください。

`v4` が来る

riot の公式リポジトリを見ていますが、メジャーアップデートである v4 がリリースされるのも秒読みに入ってきたようです。今回は v2→v3 以上の、__破壊的変更が多く含まれる__ようですので、v3→v4 に乗り換える予定がある方は、今のうちからキャッチアップしておくと良いかと思います！

変更点のピックアップ

ではさっそく変更点を見ていきます。かなりガッツリと破壊的変更が入ります。
とりま、目次的に列挙します。¹ 個人的にバグ？と思うものはを付けています。

カスタムタグファイルの拡張子の変更
インクルードの type 指定の変更
マウント先のタグの指定が is に変更になった
mount メソッドにワイルドカード、id指定が使えなくなった
mount メソッド単体ではエラーになる
カスタムタグの script に export default {} が追加
ライフサイクルメソッドの書き方が変更
カスタムタグの中の引数が props, state に変更
riot.observable の切り出し

ここからは一つ一つ見ていきましょう！

1. カスタムタグファイルの拡張子の変更

v3まで:　.tag
v4:　.riot

となりました。
シンタックスハイライトが効かない問題が発生すると思いますが、Vue.js のように拡張子に個性が出たのは私としては嬉しいです（~~それに、元々 .tag はシンタックスハイライト効きませんでしたので、それほど問題はないですしねw~~）

2. インクルードの `type` 指定の変更

v3まで:　type="riot/tag"
v4:　type="riot"

/tag の部分がなくなって、スッキリしましたね

3. マウント先のタグの指定が `is` に変更になった

これはコードを見てもらったほうが早いですね。簡単に言うと、以下の書き方が使えなくなりました。

カスタムタグ


<body>
  <div data-is="app"></div>
  <div id="target"></div>
</body>

これはダメージ受ける方も多い気がしています…　<app>　という独自のタグを設置するより、困ったときの <div> を設置し、そこにマウントしている事例は結構耳にしていますので。

~~CSS のクラス設計的にも、div タグに id, class を振ってスタイリングしているでしょうし。~~

※ 2019-03-26 追記
@black-trooper さんに教えていただきまして確認しました。data-is→is になったようです。

isによる指定

<body>
  <div is="app"></div>

  <script>
    riot
       .compile()
       .then(() => {
          // mountメソッドの引数の書き方も変更になった模様
          riot.mount("[is=app]", {/*...*/})
       })
       .catch((err) => {
          console.error(err)
       })
  </script>
</body>

こちら、デモも用意しましたので触ってみてください

4. `mount` メソッドにワイルドカード、id指定が使えなくなった

以下の二通りの書き方が使えなくなってました。

マウントメソッド

riot.mount('*', {/*...*/})
riot.mount('app', '#target', {/*...*/})

これは、ワンチャン不具合だったという事ないかなぁ。。。²

5. `mount` メソッド単体ではエラーになる

これこそ不具合であってほしいです。一回 compile を挟まないといけないのは微妙…w

マウントメソッド

// 以下はエラーとなる
riot.mount('app', {/*...*/})

// こちらは正しくマウントされる
riot
   .compile()
   .then(() => {
      riot.mount('app', {/*...*/})
   })
   .catch((err) => {
      console.error(err)
   })

6. カスタムタグの `script` に `export default {}` が追加

v4 から、カスタムタグの script が以下のようになります。

カスタムタグ

<script>
   export default { // new!!
      // 引数については後述
      onBeforeMount(props, state) {
         console.log('I will be soon mounted :)')
         this.state = {
            select: props.params.foods
         }
      },
      onMounted() {
         console.log('I was mounted :)')
      }
   }
</script>

7. ライフサイクルメソッドの書き方が変更

全部書くのは冗長ですので、before-mount, mount イベントのみ書きます。

ライフサイクルメソッド

// v3まで
this.on('before-mount', {/*...*/})
this.on('mount', () => {/*...*/})

// v4 ※引数については後述
onBeforeMount(props, state) {/*...*/)
onMounted(props, state){/*...*/}

こちらの方が、明示的にイベントハンドラとなって良いですね

8. カスタムタグの中の引数が `props, state` に変更

v3まで:　opts
v4:　props, state

となりました。（~~物凄く React 感~~）
今のところ state の扱いがよくわからなく、props のまま使うか、カスタムタグ内の別の変数用意して保持するでも良い気はしていますが、そのためにメモリ使うのもあれなんで、私は以下のように props の値を state に放り込んでいます。

stateの扱い

export default {
   onBeforeMount(props, state) {
      // stateを初期化し値をセット
　    this.state = {
         message: props.message
      }
      console.log('I will be soon mounted :)')
   }
}

9. `riot.observable` の切り出し

マウントされたカスタムタグ内で console.log(riot) を出力した結果を以下に添付します。

…確かに observable がいなくなってます。
この機能もちょいちょい使ってたので、ちょっと残念です…

observable を使いたい方は、別途 riot-observable をimport, includeする必要があります。

参考

終わりに

個人的には、かなり書き方が変わった印象ですね。噂通り、全体的に React に寄った感じがしました。

また、公式サイトもリニューアルされる（かもしれない）ので、そちらも楽しみです！さらに、ロゴも変更になるところですね！今のところいくつかアイディアが投げられていますが、全部 @nibushibu さん一人の案ですので、他の方のアイディアも見てみたいところ。

あとはどれくらいパフォーマンス改善された³のかを、実際に書いてみないとわからないのと、その他サードパーティ製ライブラリとの親和性が懸念かなーってところです。それでは皆さん、v4 を期待して待ちましょう！

では(=ﾟωﾟ)ﾉ

参考デモURL

私が観測したもののみですので、これ以外にもあると思います。 ↩
roadmap でも議論には上がっていますが流されている感じがします。。。 ↩
Alpha.6のデモ見る限り割と早くなった印象です。 ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

新しい暴動のお時間です。 〜Riot.js v4(beta版) の変更点をピックアップ〜

注意事項

v4 が来る

変更点のピックアップ

1. カスタムタグファイルの拡張子の変更

2. インクルードの type 指定の変更

3. マウント先のタグの指定が is に変更になった

4. mount メソッドにワイルドカード、id指定が使えなくなった

5. mount メソッド単体ではエラーになる

6. カスタムタグの script に export default {} が追加