24
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

React/Vue/AngularでDOMのonやhrefにJavaScriptのソース文字列を使うのはアリか?

React、Vue、Angularユーザーに質問。

JSXやテンプレートのHTMLにおいて、デフォルト挙動のキャンセルのために、ネイティブのon属性等を仕込むのはいいのでしょうか? まずは、アンケートにご回答ください。

個人的な意見

ここからは個人的な意見です。先のアンケートで「許容する」と回答した方には厳しい意見に思われるかもしれません。先に謝っておきます。

それぞれのライブラリにはイベントのための記法があります。デフォルト挙動をキャンセルするには、イベントハンドラー内でevent.preventDefault()をするのが定番だと思います。

Reactの場合

ReactSample.jsx
<a onClick={handler}>ほげ</a>

Vueの場合

VueSample.vue
<a @click="handler">ほげ</a>

Angularの場合

AngularSample.html
<a (click)="handler($event)">ほげ</a>

テンプレート文はライブラリの中の世界で書いているのだから、イベントハンドリングの処理は、ライブラリの中で閉じているべきだと考えています。

それがonclick属性を使うと、その部分だけライブラリ管理外の領域を呼び出すことになります。インラインでも、関数呼び出しでも同じです。

VueSample.vue
<a @click="handler()">ほげ</a><a onclick="return false;">ほげ</a>

href属性にJavaScriptを仕込むのも、同じことです。

VueSample.vue
<a href="javascript:void(0)">ほげ</a>

ライブラリの秩序を崩壊するような気がするのですが、いかがでしょうか?

アンケートの回答を割合を見ると、許容している人が多いことに驚きました。理想的な作り方などどうでもいい、目の前の案件を片付けるために動けばいいという観点だけで作っている人が多いのでしょうか。

※今回はデフォルト挙動のキャンセルのための話に限定しましたが、それ以外の目的でもReact/Vue/Angularの使用範囲内でリアルDOMのイベント属性を使うのは微妙(というかNG)だと考えています。
※とはいえ、ReactもVueもAngularのいずれの公式ドキュメントに非推奨としている記載は見つかりませんでした。はたして公式見解はどうなのでしょう。

ことの発端

東京五輪のボランティア募集サイトがReactで作られているにもかかわらず、href="javascript:void(0)"が頻出する設計となっていました。

Reactの使い方として良いのか悪いのか意見を求めたく、アンケートを実施した次第です。

ユーザービリティーの観点

話は脱線しますが、href属性にJSを書くのは、ユーザーフレンドリーでは邪道と考えています。

<a href="javascript:void(0)">ほげ</a>

なぜならば、ブラウザのステータスバーにリンク先が表示されるからです。
国内の多くのウェブサイトで<a href="javascript:void(0)">が使われているように感じています。

image.png

どうでもいいですが、aタグにalt属性ついてるのもびっくりです・・・。

関連記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
24
Help us understand the problem. What are the problem?