質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

J.S. 独自属性は妥当なのか?

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,302

score 10

はじめに

Vue.js, AngularなどのフロントエンドWebアプリケーションフレームワークには、v-*ng-*属性などの「ディレクティブ」と呼ばれる、独自属性のようなものがあります。ここで、HTML内で「独自属性を使っている」というところに違和感を感じたため、この質問をするに至りました。

独自要素は妥当なのか?

少なくとも私は、妥当ではない、と結論付けました。

なぜならば、独自属性はHTMLの仕様に従っていないからです。
フロントエンドWebアプリケーションフレームワークが動作する場所は、結局のところHTML文書内なので、HTMLの仕様が適用されるべきだと考えました。

HTMLの仕様に従っていない根拠として「HTML Standard - 3.2.1 Semantics」が挙げられます。
これによれば、この仕様または他の適用可能な仕様で許可されない要素、属性、または属性値を使用してはなりません。そのため、v-*ng-ディレクティブは妥当ではないと考えることができます。

Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

また、これはVue.jsにのみ該当しますが、属性名としてコロンは許可されていません。そのため、Vue.jsにて使われているコロンを含む独自属性は妥当ではないと考えられます。

もしも「すべてのディレクティブを削除するなどして、最終的に妥当なマークアップへ置換されている」としても、それが行われるのはブラウザがHTMLを読み込み、解析をした後であり、妥当ではないHTMLが読み込まれている事実には変わりがありません。

質問

そこで質問ですが、

  • Vue.js, Angularの独自属性はHTMLとして妥当ですか?また、もし妥当でない場合、これらのフレームワークは何かの対策を行っていますか?
  • Vue.js, Angularが独自属性を使い続け、data-*属性に移行しない理由は何ですか?

以上、ご回答よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+3

Vue.jsの場合、このあたりに議論がありましたが、

  • v-***のような属性でもパースはできる
  • テンプレートは直接HTMLとして描画するものではないので、完璧に文法に従わせたところで実益がない
  • 最終型のHTMLに現れるものではない
  • data-属性を使うにしても衝突の危険がある

ということで、独自の属性を使い続けているとのことです。どうしても気になるなら、VueのテンプレートをHTMLに直接書かずに単一ファイルコンポーネントを使う、という選択肢もあります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/23 23:29

    「DOMベースのテンプレート」自体に、DOMであることに由来する限界があるので、個人的にはDOMベースのテンプレートは「限界や厳密な文法違反を気にしない人が使う便法」というように捉えています。

    https://jp.vuejs.org/v2/guide/components.html#DOM-%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%91%E3%83%BC%E3%82%B9%E6%99%82%E3%81%AE%E8%AD%A6%E5%91%8A

    キャンセル

  • 2019/01/24 00:39 編集

    ご回答ありがとうございます。

    > v-***のような属性でもパースはできる
    無効な属性名のためブラウザが無視し、表立った問題は出ないから正常にパースできているのでしょうかね...。
    もしそうだとすれば「エラーが発生した後、それをブラウザがどう扱うか」に問題を丸投げしている状態ということになりますが、あまり良い状態ではないと思います。

    > テンプレートは直接HTMLとして描画するものではない
    > 最終型のHTMLに現れるものではない
    これは質問にて書いた「すべてのディレクティブを削除するなどして、最終的に妥当なマークアップへ置換されている」場合ですかね。もしそうであれば、Vue.jsが最終的に妥当なマークアップへ変換しているということになりますが、変換前にHTMLとして解析されるものは「HTMLではないもの」ということになります。

    つまり、ブラウザがよしなにしてくれることを想定していることになりますが、この不安定な状況に「いつ突然使えなくなってもおかしくないのでは」という危うさを感じます。

    > data-属性を使うにしても衝突の危険がある
    これは少しdata-*属性を使わない理由として厳しいかな、と思います。v-*属性が衝突する可能性もあるので、わざわざ文法違反をしてまで独自属性とする必要はなかったのではないかと思います。そもそも、data-*属性でも適切にプレフィックスを振れば、衝突対策としては十分と感じます。

    > VueのテンプレートをHTMLに直接書かずに単一ファイルコンポーネントを使う
    少し公式サイト(https://jp.vuejs.org/v2/guide/single-file-components.html)を読んできました。

    これを使うと、Vue.jsのテンプレートを妥当なマークアップへ変換した後に、指定した要素内へそれらを入れていく、ということが可能なのでしょうか。これが現状では一番良さそうですね。レンダリングが完了し、テンプレートの変換処理が終了するまで待機しなければならないところが難点ですが。

    > 「限界や厳密な文法違反を気にしない人が使う便法」
    確かに、独自属性を使う時点で、多少HTMLの文法を無視することは覚悟していたのかもしれません。

    関連する機能として、Custom Elementsという独自のHTML要素を生成する機能もあるようですが、これも質問で参照したHTML Standardの仕様と競合してしまっているので、どのように解決されていくのか(それとも既に解決済みか)、が気になりますね。それによっては、今後Vue.jsやAngularの行っている独自属性がHTML Standardでも許容されるかもしれません。

    ---

    しかし現状では、ブラウザが正しいHTMLを解析できるようになるための、何らかの対応策が用意されるべきだと思います。(確かに単一ファイルコンポーネントは良い仕組みですが、問題の本質的な解決にはなっていません。)

    回答に載せてくださったURL先のissueを読むと、意見が分かれているようなので、この質問ももう少しオープンにして、他の方の回答を待ってみようと思います。

    以上、長文失礼しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る