ボタンを使用したページ遷移の実装方法 - コード例を交えて解説します

リンクを使用した遷移: 最も基本的な方法は、ボタンを <a> 要素として作成し、href 属性に目的のページのURLを指定することです。以下はその例です。

<a href="page2.html"><button>次のページへ</button></a>

このコードでは、ボタンをクリックすると page2.html に遷移します。

JavaScriptを使用した遷移: JavaScriptを使用すると、ボタンのクリックイベントをキャッチし、任意のアクションを実行できます。以下は、JavaScriptを使った遷移の例です。

<button onclick="window.location.href = 'page2.html'">次のページへ</button>

このコードでは、ボタンをクリックすると page2.html に遷移します。JavaScriptの window.location.href プロパティを使用して、現在のウィンドウのURLを変更しています。

フレームワークを使用した遷移: 一部のフレームワークでは、ページ遷移のための便利なメソッドやコンポーネントを提供しています。例えば、Reactフレームワークでは、react-router パッケージを使用してルーティングを管理できます。以下はReactを使った遷移の例です。

import { Link } from 'react-router-dom';
// ...
<Link to="/page2">
  <button>次のページへ</button>
</Link>

このコードでは、Reactの <Link> コンポーネントを使って、/page2 への遷移を実現しています。

以上が、ボタンを使用したページ遷移の実装方法のいくつかです。必要に応じて、適切な方法を選択してください。