いかなる理由があろうとリンクは絶対に <a href> にしてほしい

こちらの記事を拝見しました。

• ただリンクにしたいときにhref="url"の代わりにonClick="location.href = 'url'"的なことをすると体験を損ねます

著者の主張を要約するとこんな感じでしょうか。

• ハイパーリンク（ハイパーテキストアンカー）を <a href> でなく JavaScript で遷移させると、別タブで開けないというデメリットがある
• 意図して別タブで開かせたくない場合を除いて、 JavaScript での遷移は避けるべき
• できるだけ <a href> が望ましい
• 強い意思を持って JavaScript 遷移を使うならいいんじゃないか

これに対して、実際に onClick によるリンクで（正確な表現に置き換えると「JavaScript に依存したページ遷移で」）困った思いをしている者としての補足をさせていただきます。

先に結論を言うと、私は表題のように**「いかなる理由があろうとリンクは絶対に <a href> にしてほしい」**と考えています。

まず事実として、別タブで開けないという問題以前に、スクリプト無効環境では「遷移すらできない」という重大な問題が発生します。スクリプト無効環境というのは、古のテキストブラウザだったり、ブラウザのスクリプト設定を意図的に無効にしてたりする場合だけではありません。ブラウザ設定やアドオンによりスクリプトの一部が実行されない、あるいはネットワークの設定で一部のスクリプトファイルがロードされないことにより、意図した処理が行われないことはままあります。

例えばブラウザの設定から Cookie を受け入れない設定にして以下の HTML ファイルにアクセスしてみてください。 Link の文字列をクリックしても何も起こりません。

<p><span class="js-anchor">Link</span></p>

<script>
sessionStorage.setItem('foo', '1');

document.querySelector('.js-anchor').addEventListener('click', () => {
  location.assign('page1');
});
</script>

開発者ツールで Console を見ると、 sessionStorage.setItem() の部分でエラーが起こっているのが分かります。そして後続の処理は実行されないので、 Link をクリックしても何も起こらないわけです。

あるいは、 Firefox で Third-party Request Blocker をインストールして、以下の HTML ファイルにアクセスしてみてください。やはり Link をクリックしても何も起こらないはずです。

<p><span class="js-anchor">Link</span></p>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$('.js-anchor').on('click', () => {
  location.assign('page1');
});
</script>

これは「Third-party Request Blocker」のデフォルト設定ではドメインをまたいだ通信をすべてブロックするため、 code.jquery.com から jquery-3.5.1.min.js のロードが行われないことによるものです¹。別にこのアドオンを入れていなくても、読み込み先のサーバーが落ちていたり、極端に速度が低下していれば同じようなこと（結果的にスクリプトが正常に動作しないこと）は起こりえます。

---

その昔、ブラウザの JavaScript 実装が酷かった頃は、安全のためにスクリプトを無効にした方が良いという論調がありました。ガラケーの世界では、端末によっては比較的最近までそういうことがあり、サービス提供者が公式にスクリプトを無効にせよと案内したことすらあります²。

昨今ではさすがにそういうこともなくなり、未だスクリプトを無効にしているユーザーなど無視しても構わないという風潮になってきていますが、上記のように意図的にスクリプトを無効にしていなくとも、別の事情でスクリプトが正常に動かないということはままあります。

個人的な話になりますが、私も昔はブラウザのスクリプト設定を無効にしていたため、2006年に Firebug が登場する前は、リンクをクリックして何も起こらないページに出くわした際は右クリックでHTMLソースを開き、目視で処理を追って本来の遷移先URLを見つけ、それをブラウザのアドレスバーにコピペして遷移するという、地獄のようなことを繰り返していたことを思い出します。今はスクリプトは有効にしているものの、 Cookie はデフォルトで拒否しており（もちろんログインが必要なドメインは個別に許可しています）、またいくつかアドオンを入れている関係から、依然同じような事態には遭遇します。

お願いです、いかなる理由があろうとリンクは常に <a href> を使ってください。

1. 実際にこのようなアドオンを導入しているユーザーは、問題ないと判断したドメイン間の通信を個別に許可しているでしょう。実例は高木浩光＠自宅（テレワークを除く）の日記 - 「NoScript」をやめて「RequestPolicy」にしたをご覧ください（※「Third-party Request Blocker」ではなく類似の機能を持っていた「RequestPolicy」について、導入意義を含めて解説された記事です）。 ↩

2. 例えば2010年にソフトバンクがブラウザのセキュリティ設定に関する重要なお知らせをリリースしたのは記憶に新しいところです。 ↩