GAS｜Webアプリケーションでページ遷移を実装する方法

const PAGE_FILES = Object.freeze({index: 'Index', menu1: 'Menu1', menu2: 'Menu2'});

function doGet(e) {
  const values = e && e.parameters && e.parameters.p;
  const page = e && e.parameter && e.parameter.p || 'index';
  if ((values && values.length !== 1) ||
      !Object.prototype.hasOwnProperty.call(PAGE_FILES, page)) {
    return HtmlService.createHtmlOutput(
      '<h1>該当するページがありません</h1><p>URLのpをindex、menu1、menu2のいずれかにしてください。</p>'
    ).setTitle('ページ指定を確認してください');
  }
  const appUrl = ScriptApp.getService().getUrl();
  if (!appUrl) throw new Error('テストデプロイまたはWebアプリのURLから開いてください。');
  const template = HtmlService.createTemplateFromFile(PAGE_FILES[page]);
  template.appUrl = appUrl;
  return template.evaluate().setTitle('ページ遷移の練習：' + page);
}

<!DOCTYPE html>
<html lang="ja">
<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>body{font:18px/1.7 sans-serif;margin:2rem;max-width:42rem}nav{display:flex;gap:1rem;flex-wrap:wrap}a{padding:.5rem;border:1px solid #2768af;border-radius:4px;color:#14569b}a:focus-visible{outline:3px solid #e09319;outline-offset:3px}</style>
</head>
<body>
  <h1>Indexページ</h1>
  <p>練習用のトップ画面です。Menu1、Menu2へ移動して戻れます。</p>
  <nav aria-label="練習ページ">
    <a href="<?= appUrl ?>?p=index">トップ</a>
    <a href="<?= appUrl ?>?p=menu1">Menu1</a>
    <a href="<?= appUrl ?>?p=menu2">Menu2</a>
  </nav>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>body{font:18px/1.7 sans-serif;margin:2rem;max-width:42rem}nav{display:flex;gap:1rem;flex-wrap:wrap}a{padding:.5rem;border:1px solid #2768af;border-radius:4px;color:#14569b}a:focus-visible{outline:3px solid #e09319;outline-offset:3px}</style>
</head>
<body>
  <h1>Menu1ページ</h1>
  <p>最初の練習画面です。トップまたはMenu2へ移動できます。</p>
  <nav aria-label="練習ページ">
    <a href="<?= appUrl ?>?p=index">トップ</a>
    <a href="<?= appUrl ?>?p=menu1">Menu1</a>
    <a href="<?= appUrl ?>?p=menu2">Menu2</a>
  </nav>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>body{font:18px/1.7 sans-serif;margin:2rem;max-width:42rem}nav{display:flex;gap:1rem;flex-wrap:wrap}a{padding:.5rem;border:1px solid #2768af;border-radius:4px;color:#14569b}a:focus-visible{outline:3px solid #e09319;outline-offset:3px}</style>
</head>
<body>
  <h1>Menu2ページ</h1>
  <p>2番目の練習画面です。トップまたはMenu1へ移動できます。</p>
  <nav aria-label="練習ページ">
    <a href="<?= appUrl ?>?p=index">トップ</a>
    <a href="<?= appUrl ?>?p=menu1">Menu1</a>
    <a href="<?= appUrl ?>?p=menu2">Menu2</a>
  </nav>
</body>
</html>