GAS Webアプリ開発の始め方｜スプレッドシートとApps Scriptを準備する

公開日：2026/11/04

GAS Webアプリ開発の始め方。作業依頼管理アプリの一覧シートと、顧客マスタ、設定、操作ログ、エラーログ、PDFテンプレートが連携するイラスト — 作業依頼管理アプリのシート構成を表すイラストです。実際の画面ではありません。

この記事では、GAS Webアプリ開発の準備として、GoogleスプレッドシートとApps Scriptプロジェクトを作成し、Apps Scriptからスプレッドシートへテストデータを書き込む方法を説明します。

第2シリーズでは、作業依頼・受付管理Webアプリを段階的に作っていきます。第1回では、まだ画面は作らず、GASからスプレッドシートを操作できる状態を作ります。

1. 今回作るもの

今回作るのは、Apps Scriptエディタから実行できるテスト関数です。

完成すると、スプレッドシートに次のような確認用データを書き込めるようになります。

実行日時 | メッセージ
2026/06/23 22:00:00 | GASから書き込みました

この動作確認で、次回以降に使うスプレッドシートへの書き込み処理の土台が整います。

2. 完成イメージ

今回の完成状態は次のとおりです。

Googleスプレッドシートを作成している
Apps Scriptプロジェクトを開ける
Code.gs にテスト関数を貼り付けている
setupTestSheet() を実行できる
初回テスト シートにテストデータが書き込まれる

3. 前回までの状態

第1回のため、前回までのソースコードはありません。

シリーズ全体の構成と完成イメージは、第0回で紹介しています。

4. 使用するファイル

今回使用するファイルは次の1つです。

ファイル	用途
`Code.gs`	Apps Script側のテスト処理

HTMLファイルはまだ使いません。

5. スプレッドシート構成

今回は本番用のシート設計には入りません。

第1回では、アプリ用の6シートはまだ作りません。まずは1つのシートへ書き込めることを確認し、第2回で本番用のシート構成を作ります。接続確認と設計を分けることで、どこでつまずいているかを切り分けやすくなります。

動作確認用として、スクリプトから次のシートを自動作成します。

シート名	用途
初回テスト	Apps Scriptから書き込めるか確認する

本格的なシート構成は、第2回で作成します。

6. 貼り付けるコード

Apps Scriptエディタの Code.gs に、次のコードを貼り付けます。

function setupTestSheet() {
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const sheetName = '初回テスト';
  const sheet = spreadsheet.getSheetByName(sheetName) || spreadsheet.insertSheet(sheetName);

  sheet.clear();
  sheet.getRange(1, 1, 1, 2).setValues([['実行日時', 'メッセージ']]);
  sheet.getRange(2, 1, 1, 2).setValues([[new Date(), 'GASから書き込みました']]);
  sheet.autoResizeColumns(1, 2);

  Logger.log('初回テストシートへ書き込みました。');
}

7. コードの解説

SpreadsheetApp の getActiveSpreadsheet() で、現在開いているスプレッドシートを取得します。

getSheetByName('初回テスト') でシートを探し、存在しない場合は insertSheet() で新しく作成します。

setValues() は、複数セルへまとめて値を書き込むためのメソッドです。GASでは、セルを1つずつ操作するより、まとめて書き込む方が扱いやすく、処理も安定します。

sheet.clear() は、実行するたびにシートの内容をリセットします。前回の実行結果が残らないため、動作確認では毎回同じ状態から確認できます。履歴を残したい場合は、この行を削除するか、別のシートへ追記する形に変更します。

getRange(1, 1, 1, 2) は、「1行目・1列目から、1行×2列」を指定しています。setValues() に渡す値は、[['実行日時', 'メッセージ']] のように、行と列の2次元配列にします。

autoResizeColumns(1, 2) は、1列目から2列目までの幅を内容に合わせて調整します。列幅を手で直す手間を減らせます。

Logger.log() は、Apps Scriptの実行ログにメッセージを出します。実行後に「実行数」や「ログ」を開くと、処理が動いたか確認できます。

8. GAS Webアプリ開発の導入手順

Googleスプレッドシートを新規作成する
スプレッドシート名を 作業依頼管理アプリ_学習用 などに変更する
メニューから 拡張機能、Apps Script を開く

Apps Scriptプロジェクト名を設定する
Code.gs に今回のコードを貼り付ける

Apps ScriptエディタにsetupTestSheet関数を貼り付けた画面

保存する
関数一覧から setupTestSheet を選ぶ
実行する

権限承認が表示された場合は、内容を確認して承認する

9. 動作確認

実行後、スプレッドシートに 初回テスト シートが作成されていることを確認します。

初回テスト シートに、次の2列が表示されていれば成功です。

実行日時
メッセージ

2行目に現在日時と GASから書き込みました が入っていれば、Apps Scriptからスプレッドシートへ書き込めています。

実行するたびに 初回テスト シートはリセットされ、2行目が最新の実行結果に書き換わります。過去の結果を残したい場合は、sheet.clear() の行を削除し、最終行の下へ追記する形に変更してください。

10. よくあるエラー

権限承認が表示される

初回実行時は、スプレッドシートを操作する権限の承認が必要です。

承認画面の内容を読み、学習用スプレッドシートで実行していることを確かめてから承認します。

`setupTestSheet` が関数一覧に出ない

コードを保存していない可能性があります。

保存後に、関数一覧を再確認してください。

シートに何も書き込まれない

実行対象の関数が setupTestSheet になっているか確認します。

また、対象のスプレッドシートからApps Scriptエディタを開いているか確認してください。

11. starter.zipの案内

starter.zip には、説明用の README.txt のみを入れています。

starter.zipをダウンロード

12. complete.zipの案内

complete.zip には、今回の完成状態として次のファイルを入れます。

Code.gs
README.txt

記事本文のコードと complete/Code.gs は同じ内容にします。

complete.zipをダウンロード

13. 次回追加する機能

次回は、GAS Webアプリ開発で使うスプレッドシート構成を設計します。

作業依頼、顧客マスタ、設定、操作ログ、エラーログ、PDFテンプレート などのシートを準備し、GASで業務データを扱う土台を作ります。