UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

vueのプロパティの形式 (キャメルケース vs ケバブケース)

フロントエンド周りのライブラリを更新しているときに、html-loaderを0.5系から1.x系にアップデートしたらvueのテンプレートがある場合に動かなくなってしまった

影響範囲は、Storybookのyarn run build-storybookを実行して出力したファイルのみ

事象はビルド後もStyledComponentsのタグがHTMLのタグに展開されず、StyledComponentsタグのままで出力される

原因は、ケバブケースとキャメルケースの混合が問題だった(ここをケバブケースのみにしたら問題が解消された)

<a-inputText>

アトミックデザインを導入していて、外部コンポーネントとStyledComponentsを区別するために、a-``m-``o-プレフィックスをつける工夫をしていて、確かにプレフィックス部分だけケバブになるちょっと特殊な形ではあったが、普通にbuildしただけでは問題なく動いていたのでよしとしていた

いったん、バージョンアップはやめるとして、このケバブとキャメルが混合しているケースもやめたいと思う

ちなみに、vueのドキュメントではコンポーネント名にはパスカルケバブの2つが選択できるとのことなので、このどちらかに統一しようと思う

jp.vuejs.org