スクリーン間のナビゲーション: シンプルな方法

ボタンを使用したナビゲーション: ボタンを使用して画面間のナビゲーションを行うこともよくあります。ユーザーがボタンをクリックすることで次の画面に遷移するようにします。以下は、JavaScriptを使用してボタンクリック時に画面遷移を行う例です。

<button onclick="window.location.href = '次の画面のURL';">ボタンテキスト</button>

JavaScriptの window.location.href を使用することで、クリック時に指定したURLに画面遷移することができます。

ナビゲーションフレームワークの使用: 大規模なアプリケーションでは、ナビゲーションを管理するためのフレームワークやライブラリを使用することがあります。例えば、React.jsではReact Routerと呼ばれるライブラリがあり、画面間のナビゲーションを簡単に管理できます。

import { BrowserRouter, Route, Link } from 'react-router-dom';
function App() {
 return (
   <BrowserRouter>
     <nav>
       <ul>
         <li>
           <Link to="/page1">ページ1</Link>
         </li>
         <li>
           <Link to="/page2">ページ2</Link>
         </li>
       </ul>
     </nav>
     <Route path="/page1" component={Page1} />
     <Route path="/page2" component={Page2} />
   </BrowserRouter>
 );
}

この例では、React Routerを使用してナビゲーションを実装しています。<Link> コンポーネントを使用してリンクを作成し、<Route> コンポーネントを使用してURLに対応するコンポーネントを表示します。