画面遷移を行いたい場合に、<a>要素ではなく<button>要素とJavaScriptのonClickイベントを組み合わせて、無理やりページ遷移させてしまっていませんか？一見すると「ボタンを押せばページが変わる」という直感的な実装に思えるかもしれません。しかし、Webアクセシビリティやセマンティックなマークアップの観点、そしてメンテナンス性・可読性の面から、この手法は望ましくありません。

本記事では「なぜbuttonタグによる直接的なonClickでの遷移が好ましくないのか」、そして「画面遷移のためにはどのような実装が推奨されるのか」を解説していきます。

1. セマンティクス（意味的な役割）の欠如
   button要素は、フォームの送信やモーダルの表示・非表示といったUI操作をトリガーするための要素として設計されています。一方で、ページ間遷移は本来<a>要素（リンク）によって行われるべきであり、ユーザーや支援技術はリンクであることを前提に操作します。
   button＋onClickでページを遷移させてしまうと、ユーザーエージェント（ブラウザ）やスクリーンリーダーはその要素を「リンク」として認識できず、適切なナビゲーションを提供できなくなります。
2. アクセシビリティの低下
   視覚的にはボタンをクリックすれば次のページに移動できるかもしれませんが、スクリーンリーダーを使用するユーザーやキーボード操作に頼るユーザーにとって、「これが本当にリンクなのか、別のUI操作なのか」が曖昧になります。<a>要素はデフォルトでリンクとして扱われ、Tabキーでのフォーカス移動や読み上げ時のリンク認識が行われるため、アクセシビリティの観点からも正しい要素を使うことが望まれます。
3. ブラウザの既定機能を活かせない
   リンクとして実装されていないと、例えば右クリックメニューから「新しいタブで開く」が使えない、もしくは正常に動作しないケースが生まれます。また、ユーザーはリンクであれば「Cmd / Ctrl + クリック」で新しいタブを開くなど、慣れ親しんだ操作を利用できます。buttonでこれを実現するには余分な処理が必要になってしまいます。
4. メンテナンス性・可読性の低下
   コードを読んだ際、button＋onClickを見ただけでは「なぜ画面遷移が行われるのか？」が明示的にわかりづらいです。リンクとして定義された<a>要素や、React Routerの<Link>コンポーネントを用いることで、コードを読むチームメンバーや後続の開発者にも「ここは画面遷移する箇所なんだな」と直感的に理解させることができます。

1. シンプルなHTMLであれば<a>要素を用いる
   単純に他ページへ移動したいのであれば、<a href="/nextpage">次のページへ</a>のようにリンク要素を使うべきです。これによって、前述したセマンティクスやアクセシビリティ、ブラウザ既定の機能がそのまま活用できます。
2. ReactなどのSPAフレームワークならLinkコンポーネントを使う
   React+TypeScriptで開発している場合は、React Routerの<Link>コンポーネントを使用すれば、シングルページアプリケーション特有の高速なページ遷移や履歴管理が簡潔に実装できます。

   import { Link } from "react-router-dom";
   
   export const NavigationExample = () => (
     <nav>
       <Link to="/nextpage">次のページへ</Link>
     </nav>
   );
   

   これにより、明示的に「ここはリンクである」という意図が伝わり、アクセシビリティやメンテナンス性が確保できます。

3. ボタンはUI操作に限定する
   ボタンはページ内の状態操作（フォーム送信、モーダル開閉、タブ切り替えなど）に限定し、画面遷移という「リソース位置の変更」はリンク要素に任せることが理想的です。

button＋onClickで無理やりページ遷移を行う手法は、セマンティクスの欠如、アクセシビリティの低下、ブラウザ機能の制限、そして可読性・メンテナンス性の低下など、様々な問題を引き起こします。

正しい要素を使うことは、コード品質向上だけでなく、ユーザー体験全体の改善につながります。今後は、画面遷移には<a>要素やフレームワーク標準のLinkコンポーネントを用いて、よりわかりやすく、アクセシブルなWebアプリケーションを構築していきましょう。