AngularJS のコンポーネント名には「使えない文字列」がある

2017年7月14日 13:16

AngularJS では、アプリケーションを構造化するために「コンポーネント」という仕組みを採用している。たとえば hoge という名前のコンポーネントを作るとしたら、JavaScript 側はこんな感じで記述する。

angular.module('myApp').component('hoge', {

    // コントローラやテンプレートの指定など

});

この場合、HTML 側のタグはこうなる(restrict: 'E' の場合)。

<hoge></hoge>

ところが、コンポーネント名を data- から始めると、HTML 側のタグは以下のようになり、HTML5 のカスタムデータ属性と同じになってしまい、具合が悪い。

<data-hoge></data-hoge>

そのため、AngularJS ではこの data- の部分を削除(=ノーマライズ)したものをコンポーネント名とみなす仕様になっている。よって、上記のタグは冒頭に書いた JavaScript なら問題なく使える。ノーマライズについては、公式の Developer Guide の Derective のページ にこんな記述があった。

The normalization process is as follows:

  1. Strip x- and data- from the front of the element/attributes.
  2. Convert the : , - , or _ -delimited name to camelCase.

つまり、「要素・属性名の前方から、x-data- を削除」する、そして「:-_ 区切りされた名称をキャメルケースに変換」する、というわけだ。

本記事のタイトルには便宜上「使えない文字列」と書いたが、「使われない文字列」もしくは「削除・変換される文字列」のほうが正しいと言える。