Google Apps Script（GAS）は、Googleのサービスと連携できる強力な自動化ツールですが、実はWebアプリケーションの開発にも最適です。JavaScriptベースで誰でも無料で使え、サーバー不要で動作するため、個人開発者や中小企業にも人気が高まっています。
この記事では、Google Apps Scriptを使ったWebアプリ開発の基本から実践テクニックまで、初心者でも理解できるように徹底解説します。
1. Google Apps Scriptとは？ なぜWebアプリ開発に使えるのか
Google Apps Scriptは、Googleが提供するクラウドベースのスクリプト環境で、以下の特徴があります：
✅ JavaScriptベース（ES5準拠）
✅ Googleサービスと連携可能（Gmail、スプレッドシート、カレンダーなど）
✅ 無料で利用可能（一定の制限はあり）
✅ サーバーレスで動作（Googleのインフラ上で実行）
特に、スプレッドシートのデータを活用したWebアプリや、社内ツールの簡易開発に適しています。
Google Apps Scriptで作れるWebアプリ例
- 社内業務自動化ツール
- フォーム回答を自動処理するダッシュボード
- Googleカレンダー連携の予約管理システム
- スプレッドシートをDB代わりに使った簡易CRM
2. 最初のWebアプリを作ってみよう
ステップ1：Google Apps Scriptのプロジェクトを作成
- Google Apps Scriptの公式サイトにアクセス
- 「新しいプロジェクト」を選択
- エディタが開くので、以下のコードを入力
function doGet() {
return HtmlService.createHtmlOutput('<h1>こんにちは、世界！</h1>');
}
ステップ2：Webアプリとしてデプロイ
- エディタ上部の「デプロイ」→「新しいデプロイ」を選択
- 「種類を選択」で「Webアプリ」を選ぶ
- アクセス権を「全員（匿名ユーザーを含む）」に設定（テスト用）
- 「デプロイ」をクリック → URLが発行される
これで、誰でもアクセス可能なWebページが完成しました！
3. 実用的なWebアプリに進化させる
HTML/CSS/JavaScriptを使ったリッチなUI構築
Google Apps Scriptでは、HTMLテンプレートを使用して動的なWebアプリを作成できます。
// doGet関数を修正
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
Index.html（同じプロジェクト内に作成）
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
button { padding: 10px 15px; background: #4285F4; color: white; border: none; }
</style>
</head>
<body>
<h1>ようこそ！</h1>
<button onclick="showAlert()">クリック</button>
<script>
function showAlert() {
google.script.run.alertUser();
}
</script>
</body>
</html>
コード解説
google.script.run→ フロントエンドからバックエンド（GAS）の関数を呼び出せるHtmlService.createTemplateFromFile()→ 外部HTMLを読み込む
4. データベース代わりにGoogleスプレッドシートを使う
Google Apps Scriptの真価は、Googleサービスとの連携にあります。例えば、スプレッドシートを簡易DBとして使うことが可能です。
// スプレッドシートにデータを保存
function saveData(name, email) {
const sheet = SpreadsheetApp.openById('スプレッドシートID').getActiveSheet();
sheet.appendRow([name, email, new Date()]);
}
フロントエンドから呼び出す例
// HTML側のJavaScript
function submitForm() {
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
google.script.run.saveData(name, email);
}
これで、フォーム入力→スプレッドシート自動保存の仕組みが完成します。
5. 実践的なテクニックと注意点
✔ セキュリティ対策
- 本番環境では「全員（Googleアカウントを持つユーザー）」にアクセス制限
try-catchでエラーハンドリングを実装
✔ パフォーマンス向上
CacheServiceで一時データをキャッシュ- 大量データ処理時は
Range.setValues()を利用
✔ デバッグ方法
Logger.log()→ ログは「実行ログ」で確認console.log()（フロントエンド側）→ ブラウザのDevToolsで確認
6. さらに学びたい人向けリソース
| リソース | リンク |
|---|---|
| Google公式ドキュメント | Google Apps Scriptガイド |
| サンプルコード集 | GitHub GASサンプル |
| 日本語チュートリアル | ICS MEDIAの解説記事 |
まとめ：Google Apps ScriptでWebアプリ開発を始めよう
Google Apps Scriptを使えば、無料で、かつGoogleの強力なAPIを活用したWebアプリを開発できます。
- 初心者でも始めやすい（JavaScriptの知識だけでOK）
- Googleサービスと簡単連携（スプレッドシート、Gmail、カレンダーなど）
- サーバー管理不要（Googleのインフラで動作）
「社内ツールを手軽に作りたい」「スプレッドシートのデータを可視化したい」という方は、ぜひ試してみてください！
🚀 まずは「Hello World」から始めて、オリジナルのWebアプリを作ってみましょう！
