Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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属性ついてるのもびっくりです・・・。

関連記事

clockmaker
ウェブ制作会社ICSの代表および ics.media 編集長をやっています。得意分野はプログラミングアート、インタラクティブ表現の制作。詳しくはリンク先を御覧ください。 https://ics.media/entry/author/ikeda
http://clockmaker.jp/labs/
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
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