はじめに
今回は, Riot.js v3(以降 Riot.js) で, カスタムタグに属性経由で渡された値を, opts で参照した際の注意点を紹介したいと思います.
Riot.js の opts について
Riot.js では, カスタムタグを配置した際に指定した属性を, カスタムタグ内で opts 経由で参照することができます.
具体的には以下のような感じです.
<app>
<div data-is="item" message="{'Hello, world!'}">
</app>
<item>
<!-- Hello, world! が表示される -->
<div>{opts.message}</div>
</item>
ただ, これには重大な落とし穴があります.
message や content といった, 1word のシンプルな名前だったら問題ないんですがチェーンケースやキャメルケースといったワードをつなげた場合, opts で値を参照する際に注意する必要があります.
再現するサンプルを作ったので見てみてください.
サンプルプログラム
上記で書いた現象を再現したサンプルになります.
それぞれの命名規則で書いた場合と, それぞれに合わせた参照方法で結果を表示しています.
コード
<app>
<h1>{opts.title}</h1>
<div data-is='item' chain-case="{'chain'}" snake_case="{'snake'}" camelCase="{'camel'}" value="{'value'}"></div>
</app>
<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