【GASの小技】スプレッドシートをWEBページ化！HtmlService.createHtmlOutput()の基本と使い方

こんにちは、イカPOです。
Google Apps Script（GAS）の HtmlService.createHtmlOutput() を使えば、スクリプトだけで HTML をブラウザに表示できます。

この記事では 1) とりあえずページが出る最小構成 と 2) スプレッドシートのデータをテーブルに出す実践サンプル の２本立てで解説します。

1. HtmlService.createHtmlOutput() の最小構成
1. ここがポイント 🔍
2. doGet(e) と doPost(e) の違い
3. スプレッドシートを読み込んで HTML に表示するサンプル
4. 使用方法
5. まとめ

1. HtmlService.createHtmlOutput() の最小構成

// 最小構成
function doGet(e) {
  return HtmlService
    .createHtmlOutput('<h1>Hello from GAS Web App!</h1>');
}

ここがポイント 🔍

たった１行で HTML を返せる
createHtmlOutput() に文字列を渡すだけ。超シンプルです。
必ず doGet(e)（または doPost(e)）の中で返す
GAS Web アプリの入口はこの２つ。ここから返したものがブラウザに届きます。

2. doGet(e) と doPost(e) の違い

用途	使うメソッド
ページを見に来たとき	doGet(e)
フォーム送信などでデータを渡すとき	doPost(e)

ページ表示だけなら doGet(e) だけ覚えれば OK です。

3. スプレッドシートを読み込んで HTML に表示するサンプル

3-1. コード全文

function doGet(e) {
  // ① テーブル部分の HTML を作る
  const html = getItem();
  // ② そのままブラウザに返す
  return HtmlService.createHtmlOutput(html);
}

/**
 * 商品一覧シートからデータを取得し、HTML テーブル文字列を返す
 */
function getItem() {
  // ① アクティブなスプレッドシートを取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();

  // ② 「商品一覧」シートを取得
  const sheet = ss.getSheetByName('商品一覧');

  // ③ シート全体の値を２次元配列で取得
  const data = sheet.getDataRange().getValues();

  // ④ １行目（ヘッダー行）を取り出す
  const headers = data.shift();   // → ["商品ID","商品名",…]

  // ⑤ ヘッダーと列番号の辞書を作る
  const headerMap = {};
  headers.forEach((header, index) => headerMap[header] = index);

  // ⑥ ヘッダー行を <th> で包む
  const thRow = headers.map(h => `<th>${h}</th>`).join('');

  // ⑦ データ行を <tr><td>…</td></tr> に変換
  const tdRow = data.map(item => `
    <tr>
      <td>${parseInt(item[headerMap["商品ID"]], 10) || 0}</td>
      <td>${item[headerMap["商品名"]]}</td>
      <td>${item[headerMap["カテゴリー"]]}</td>
      <td>${parseInt(item[headerMap["在庫数"]], 10) || 0}</td>
    </tr>`
  ).join('');

  // ⑧ テーブル完成
  const html = `
    <table border="1" cellspacing="0" cellpadding="5">
      <thead><tr>${thRow}</tr></thead>
      <tbody>${tdRow}</tbody>
    </table>`;

  // ⑨ HTML 文字列を返す
  return html;
}

3-2. スプレッドシートをコードに取り込む４ステップ

シートを指名（②）
const sheet = ss.getSheetByName('商品一覧');
→ 職員室で「商品一覧の名簿ください！」と声を掛けるイメージ。
データを全部コピー（③）
getDataRange().getValues() で A1 から右下端まで を２次元配列として取得。
例：data[0][1] は「１行目２列目」のセル。
ヘッダー行を抜き取る（④）
const headers = data.shift();
shift() は先頭行をスポッと抜いて返す。data からはヘッダーが消え、純粋データだけが残る。
列名⇔番号の辞書を作る（⑤） const headerMap = {}; headers.forEach((h,i)=>headerMap[h]=i); // → { "商品ID":0, "商品名":1, "カテゴリー":2, "在庫数":3 } これで item[headerMap["商品名"]] のように「名前で列を指定」でき、列順が変わっても安全。

マッピングについてはこちらの記事も参考に

3-3. HTML テーブルを組み立てる３ステップ

ヘッダーを <th> に包む（⑥）
headers.map() で包み紙を付け、.join('') で連結 → <th>商品ID</th>… が完成。
データ行を <tr><td> に変換（⑦）
data.map() 内でテンプレートリテラルに流し込み、.join('') で tbody 用の長い文字列に。
数値列は parseInt()＋|| 0 で安全に整数化。
テーブルを組み立てる（⑧）
<thead> に thRow、<tbody> に tdRow を入れてテーブル完成。
装飾は Bootstrap などを使うならクラス名に差し替えれば OK。

4. 使用方法

スプレッドシートに 「商品一覧」 シートを作成
列は 商品ID / 商品名 / カテゴリー / 在庫数（順番厳守）。
スクリプトエディタに上記コードを貼り付ける
デプロイ → 新しいデプロイ → ウェブアプリ を選択
公開 URL を開くと、シートの内容が表になって表示されます 🎉

商品ID	商品名	カテゴリー	在庫数
1001	シャンプー	風呂	1
1002	リンス	風呂	1
1003	ボディソープ	風呂	1
1004	トイレットペーパー	トイレ	1
1005	トイレ用洗剤	トイレ	1
1006	トイレ掃除シート	トイレ	1
1007	歯ブラシ	整容	1

[商品一覧]シートの例

URLをクリックしてスプレッドシートの内容が表示されていれば成功です。

5. まとめ

HtmlService.createHtmlOutput() で GAS だけでも簡単に Web ページが作れる。
まずは doGet(e) に HTML 文字列を返す だけで OK。
スプレッドシートと組み合わせれば、在庫リストや一覧表もサクッと表示。

スプレッドシートのデータをそのまま Web ページ化すると、「表示に特化した専用ビュー」 が手に入るので視認性がグッと向上します。
とくに――

現場のスマホ閲覧
画面の小さなスマホでも余計な列やメニューを省いたテーブルだけを表示できるため、スクロール地獄から解放。
リンク１発で共有
「シートを開いて、フィルタを掛けて…」という手間がなく、URL をタップすれば即ダッシュボード。
編集と閲覧の役割分担
シート側は “データ入力専用”、Web 側は “見る専用” と切り分けられるので、誤操作や表示ズレのリスクが減ります。

たとえば 見本品の一覧や在庫表 を管理しているケースなら、営業や製作スタッフが外出先・作業現場でも「在庫いくつ？」「最新の貸出ステータスは？」を一目で確認できます。業務の合間にスプレッドシート全体を開く時間を削減できるため、“探す時間” が “判断する時間” に置き換わり、結果として業務効率が大幅アップ。

「現場ですぐ見たい！」と少しでも感じたら、今回のコードをコピペしてまず動かしてみてください。たった数十行で、あなたのスプレッドシートが即席の Web ダッシュボードに早変わりします。

それでは、また。

テンプレートを使った方法はこちらの記事から