ESLint対応物語 ~no-script-url~ #JavaScript

ESLintでair_bnbとか入れたらたくさん怒られた！
ルールの内容自体は検索すれば出てくるけど、具体的にどうすればいいのよ！？
っていう場面が何度かあったので、具体的な対応方法をまとめていきたいシリーズです。

今回は「no-script-url」＝「hrefに "javascript:" を入れてはいけない」というルールの紹介と対応方法をまとめたいと思います。

具体的にはどんなもの？

一番引っかかるのが、aタグのリンクを無効化するための下記かと思います。

<a href="javascript:void(0)" onClick={hoge}>クリック</a>

何故いけないのか

簡単に書くと、

重い
汚い
危ない（XSS脆弱性）

から、だそうです。
参照：What is the matter with script-targeted URLs?

対応例1、hrefを取ってしまう

一番手っ取り早いのがhrefを取ってしまうことです。
後述の2つのデメリットをクリアできるなら、こちらで対応するのが良いかと思います。

<a href="javascript:void(0)" onClick={hoge}>クリック</a>
 ↓
<a onClick={hoge}>クリック</a>

メリット：とにかく簡単

すぐにできます。

デメリット1：htmlとして適切で無い場合がある

html5では、hrefの無いa要素を "プレイスホルダ" と定義され、まだリンク先がまだ存在しない、あるいは存在したが削除された場合などに使うものとされています。
単純にJavaScriptを動かしたいだけでこちらを使うのは目的があっていません。

デメリット2：CSSがうまく当たらなくなる場合がある

次の場合に起こります。

.pageContents a {
    color : green;
}
.pageContents a:link, a:visited {
    color : blue;
}

<div class="pageContents">
    <a href="javascript:void(0)" onClick={hoge}>クリック</a>
</div>

この状態で、hrefを消すと、青色だった "クリック" は緑色になってしまいます。
linkとvisitedの擬似要素はhrefに依存しており、hrefがなくなることで効かなくなってしまいます。
これにより、緑色と青色の使い分けができなくなってしまうのです。

対応例2、buttonタグに変える

そもそもaタグはanchar（アンカー＝錨）の略です。
あるリソースから別のリソースへ錨を降ろすことで、2つのリソースを繫ぎ止めるために使われます。
ですのでaタグのリンクっぽい見た目をクリックさせたいからといって、aタグ本来の役割を殺す「href="javascript:void(0)"」は正しい使い方とは言えません。
そこで「それを押して、何かしらの機能が動くもの」としてより適切なbuttonタグに差し替える、というものです。

具体的な記述例です。

.linkText {
    color : blue;

    background: none;
    border: none;
    cursor: pointer;
    display: inline;
    font: /* リンクで使っているフォント */
    height: auto;
    width: auto;
    padding: 0;
    margin: 0;

    &:hover {
        text-decoration: underline;
    }
}

<div class="pageContents">
    <button class="linkText" type="button" onClick={hoge}>クリック</button>
</div>

cssではaタグっぽい見た目にするための記述、ボタンっぽさをなくす記述を入れます。
また、buttonタグでは「type="button"」とすることで、formと連動させないようにできます。

メリット：html的に正しい

ブラウザフレンドリーです。
用途にもよりますが、tabキーでフォーカスが当たるのも良いところです。

デメリット：CSSが大変

古いブラウザも対応しようとすると大変かもしれません。。。

まとめ

no-script-urlの対応として2つの具体的な方法を紹介しました。
メリ・デメを考慮してやりやすい方法を選ぶと良いかと思います。

ESLint対応物語 ~no-script-url~