🚩

Riot.js v3 tips - カスタムタグに属性経由で渡した値を opts で参照する際, 命名規則には注意しよう

2021/01/28に公開

はじめに

今回は, Riot.js v3(以降 Riot.js) で, カスタムタグに属性経由で渡された値を, opts で参照した際の注意点を紹介したいと思います.

Riot.js の opts について

Riot.js では, カスタムタグを配置した際に指定した属性を, カスタムタグ内で opts 経由で参照することができます.
具体的には以下のような感じです.

app.tag
<app>
  <div data-is="item" message="{'Hello, world!'}">
</app>
item.tag
<item>
  <!-- Hello, world! が表示される -->
  <div>{opts.message}</div>
</item>

ただ, これには重大な落とし穴があります.

message や content といった, 1word のシンプルな名前だったら問題ないんですがチェーンケースやキャメルケースといったワードをつなげた場合, opts で値を参照する際に注意する必要があります.

再現するサンプルを作ったので見てみてください.

サンプルプログラム

上記で書いた現象を再現したサンプルになります.
それぞれの命名規則で書いた場合と, それぞれに合わせた参照方法で結果を表示しています.

https://runstant.com/phi/projects/08e08869

コード

app.tag
<app>
  <h1>{opts.title}</h1>
  
  <div data-is='item' chain-case="{'chain'}" snake_case="{'snake'}" camelCase="{'camel'}" value="{'value'}"></div>
</app>
item.tag
<item>
  <ul>
    <li>チェインケース: {opts.chainCase}</li>
    <li>スネークケース: {opts.snake_case}</li>
    <li>キャメルケース: {opts.camelcase}</li>
    <li>riotValue: {opts.riotValue}</li>
  </ul>
  
  console.log(this.opts);
</item>

解説

サンプルでは, item というカスタムタグに対して, それぞれの命名規則で属性を指定しています.

<div data-is='item' chain-case="{'chain'}" snake_case="{'snake'}" camelCase="{'camel'}" value="{'value'}"></div>

それぞれを実際にカスタムタグ内で opts として参照した際のコードは以下になります.

<ul>
  <li>チェインケース: {opts.chainCase}</li>
  <li>スネークケース: {opts.snake_case}</li>
  <li>キャメルケース: {opts.camelcase}</li>
  <li>riotValue: {opts.riotValue}</li>
</ul>

このように opts で参照する際に, 属性で書いた名前と参照方法がかわっている場合があります.
以下にパターンをまとめてみました.

命名規則 変換内容 例) attr -> opts
チェインケース キャメルケースに変換される chain-case -> chainCase
スネークケース そのまま snake_case -> snake_case
キャメルケース すべて小文字になる camelCase -> camelcase
属性予約語 頭に riot が付いた状態でキャメルケース value -> riotValue

上記の仕様を知らずに適当に属性を指定するといつまでも opts で値を参照できないといったドツボにハマってしまいます.

一見複雑ですがルールとしてはシンプルなのですぐに覚えられると思います.

さいごに

結論としては, ちゃんと変換される仕様を把握した上でチェインケースで指定するのがベストだと思います.

既存の属性とバッティングすることも無いですし, 仕様さえ知っていれば躓くこともありません.
あと, opts は JavaScript のコードなので, 命名規則がキャメルケースなのも納得がいきます!

ただ, やっぱりちょっとややこしいですよね💦

実際に私が教えてきたメンバーはもれなくこの落とし穴にハマってきていますw
しっかり覚えて今後躓かないようにしましょう!

Discussion