開発の準備と基本

第II部：GAS開発環境の準備と基本的な使い方を理解する

4. GASの基本環境設定

GASを使ったウェブアプリ開発を始めるための環境設定について解説します。

Googleアカウントの準備

GASを利用するには、Googleアカウントが必要です。学校での利用の場合は、多くの場合Google Workspace（旧G Suite）のアカウントを使用することになります。

ポイント：
  • 個人利用の場合は一般のGoogleアカウントでも利用可能
  • 学校でのアプリ開発には、学校ドメインのGoogle Workspaceアカウントを推奨
  • 共同開発する場合は、チームでの共有設定を確認しておく

GASエディタへのアクセス方法

GASエディタにアクセスする方法はいくつかあります：

方法1: Google Driveから直接アクセス
  1. Google Driveにログイン（drive.google.com）
  2. 「新規」ボタンをクリック
  3. 「その他」＞「Google Apps Script」を選択
この方法が最もシンプルで、新規プロジェクトを素早く作成できます。
方法2: スプレッドシートなどから作成
  1. 対象のGoogleスプレッドシート（またはドキュメント、フォームなど）を開く
  2. 「拡張機能」＞「Apps Script」を選択
この方法では、開いているアプリケーションに紐づいたスクリプトが作成されます。スプレッドシートと連携するアプリを開発する場合におすすめです。
方法3: Apps Scriptのダッシュボードを使用
  1. 直接 script.google.com にアクセス
  2. 「新しいプロジェクト」ボタンをクリック
この方法では、すべてのGASプロジェクトの一覧を確認できるダッシュボードからアクセスできます。

開発に必要な権限設定

GASでアプリケーションを開発・実行する際は、スクリプトがアクセスするGoogleサービスに応じた権限を許可する必要があります。

主な権限の種類と設定方法
  • 初回実行時の許可：スクリプトを初めて実行すると、必要な権限の確認ダイアログが表示されます
  • 権限の確認方法：プロジェクト設定の「スクリプトの権限」で確認できます
  • 権限のリセット：「実行」メニューの「権限を管理」から再設定可能
注意：特にウェブアプリをデプロイする際は、適切な実行ユーザーとアクセス権限を設定することが重要です。個人情報を扱う場合は、特に慎重に設定しましょう。

5. GASでウェブアプリを作る基本手順

プロジェクト作成の流れ

  1. GASエディタを開く（前章の方法で）
  2. 無題のプロジェクトに適切な名前を付ける（例：「教育用ウェブアプリ」）
  3. 初期状態の「Code.gs」ファイルが表示される
  4. HTMLファイルを追加する場合は「ファイル」＞「新規」＞「HTML」を選択
  5. プロジェクトを保存する（Ctrl+S または ⌘+S）
プロジェクト名は後からでも変更できますが、分かりやすい名前を付けておくとプロジェクトが増えたときに管理しやすくなります！

基本的なファイル構成

GASプロジェクトの基本的なファイル構成について説明します。

一般的なウェブアプリのファイル構成
  • Code.gs：サーバーサイドのメインスクリプトファイル
  • index.html：ウェブアプリのメインHTMLファイル
  • style.html：CSSスタイルを含むHTMLファイル（オプション）
  • javascript.html：クライアントサイドJSを含むHTMLファイル（オプション）
  • 複数のHTMLファイル：機能ごとに分割したHTMLファイル（必要に応じて）
Code.gsの基本構造
// グローバル変数や定数の定義
const SPREADSHEET_ID = '1abc...xyz';

// doGet関数 - ウェブアプリのエントリーポイント
function doGet(e) {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('教育用アプリ')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

// HTMLファイルを読み込むためのヘルパー関数
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

// アプリケーションのビジネスロジック関数
function getStudentData(studentId) {
  // スプレッドシートからデータを取得する処理
  // ...
}

// その他の関数
// ...
index.htmlの基本構造
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">
    <!-- スタイルの読み込み -->
    <?!= include('style'); ?>
  </head>
  <body>
    <div class="container">
      <h1>教育用アプリケーション</h1>
      
      <!-- アプリのメインコンテンツ -->
      <div id="app-content">
        <!-- コンテンツがここに表示される -->
      </div>
    </div>
    
    <!-- JavaScriptの読み込み -->
    <?!= include('javascript'); ?>
  </body>
</html>

doGet関数の役割

doGet関数は、ウェブアプリケーションのエントリーポイントとなる特別な関数です。ブラウザからアプリにアクセスしたときに最初に呼び出されます。

doGet関数の重要ポイント：
  • ウェブアプリとしてデプロイする場合は必ず実装が必要
  • HTMLコンテンツを返す必要がある
  • URLパラメータを受け取ることができる（eパラメータ経由）
  • 複数ページのアプリでは、表示するページを切り替えるロジックを含めることが多い
URLパラメータを利用したdoGet関数の例
function doGet(e) {
  // URLパラメータからページ名を取得
  // 例: ?page=settings
  var page = e.parameter.page || 'index';
  
  // 有効なページ名のリスト（セキュリティ対策）
  var validPages = ['index', 'students', 'grades', 'settings'];
  
  // 指定されたページが有効でない場合はindexを表示
  if (validPages.indexOf(page) === -1) {
    page = 'index';
  }
  
  // テンプレートを作成して評価
  var template = HtmlService.createTemplateFromFile(page);
  
  // パラメータをテンプレートに渡す（必要に応じて）
  template.user = Session.getActiveUser().getEmail();
  template.isAdmin = isAdminUser();
  
  // HTMLを評価して返す
  return template.evaluate()
    .setTitle('教育用アプリ - ' + page.charAt(0).toUpperCase() + page.slice(1))
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

6. 生成AIを活用したGASコード作成の基本

プログラミング知識がなくても、生成AIを活用することでGASアプリケーションの開発が可能です。このセクションでは、生成AIを使ったコード作成の基本を紹介します。

利用できる生成AIツールの紹介

主要な生成AIツール
  • ChatGPT（OpenAI）：最も一般的な生成AIの一つ。無料版と有料版（Plus）あり
  • Claude（Anthropic）：詳細な説明と丁寧なコード生成が特徴
  • Gemini（Google）：Google製のAI。GoogleのサービスとGASの相性が良い
  • Copilot（Microsoft/GitHub）：コード生成に特化したAIアシスタント
  • GASSISTANT：GAS専用のAIコーディングアシスタント
ツール名 GASとの相性 特徴・メリット
ChatGPT 良好 多様なプログラミング言語に対応、APIの詳細な説明も可能
Claude 良好 詳細な説明とコードの解説が丁寧、長文の対応が得意
Gemini 非常に良い Googleサービスの詳細を熟知、GASの最新機能にも対応
GASSISTANT 専用ツール GAS専用のエディタ拡張機能、コード提案やデバッグを支援
どのツールを選ぶかは個人の好みや具体的なプロジェクトの要件によりますが、まずは無料で利用できるツールから始めるのがおすすめです。複数のツールを試して比較するとよいでしょう。

基本的なプロンプトの書き方

生成AIにGASコードを作成してもらうためには、適切なプロンプト（指示）を書くことが重要です。

効果的なプロンプトの基本構成
  1. 目的の明確化：何を作りたいのかを明確に説明する
  2. 使用するGASの機能：スプレッドシート、フォーム、ドキュメントなど
  3. 具体的な機能要件：アプリが持つべき機能を箇条書きで
  4. 技術的な制約や条件：必要に応じて特定の制約を明記
  5. 出力形式の指定：コードの分類方法や説明の詳しさなど
基本的なプロンプト例
私は教師で、Google Apps Scriptを使って成績管理アプリを作りたいと思っています。プログラミングの経験はあまりありません。

【アプリの概要】
生徒の名前と科目ごとの成績を入力・管理できるウェブアプリケーション

【使用するGoogleサービス】
- Google スプレッドシート（データ保存用）
- GAS（ウェブアプリ機能の実装）

【具体的な機能要件】
1. 生徒情報の登録（名前、学年、クラス）
2. 成績の入力（科目、テスト日、点数）
3. 成績一覧の表示と検索
4. 平均点や順位の自動計算

【必要なコード】
- サーバーサイド（Code.gs）の処理
- HTMLユーザーインターフェイス（index.html）
- 必要なCSSスタイル

コードには詳細なコメントを付けて、各部分が何をしているのか分かりやすく説明してください。また、コードをどのファイルに配置すべきかも明記してください。

コード生成から実装までの流れ

  1. プロンプトの作成と送信：目的と要件を明確にしたプロンプトをAIに送信
  2. 生成コードの確認：AIが生成したコードを確認し、必要に応じて質問や修正依頼
  3. GASエディタへのコピー：
    • Code.gs用のコードを対応するファイルにコピー
    • HTML/CSS/JavaScript用のコードを対応するファイルにコピー
  4. 初期テスト：基本的な動作確認を行い、エラーがないか確認
  5. 修正と改善：問題があれば再度AIに質問し、修正案を得る
  6. デプロイ：完成したアプリをウェブアプリとしてデプロイ
ポイント：一度に完璧なコードを生成しようとせず、機能ごとに段階的に開発するアプローチがおすすめです。エラーが発生した場合も、そのエラーメッセージをAIに提示することで的確な解決策を得られることが多いです。

7. 効果的なプロンプト作成テクニック

生成AIからより質の高いGASコードを得るためのプロンプト作成のテクニックを解説します。

教育アプリ向けのプロンプト例

出席管理アプリのプロンプト例
私は中学校の教員です。GASを使ってクラスの出席管理をするウェブアプリを作りたいです。プログラミングの経験はほとんどありません。

【アプリの機能】
1. クラス選択（1年1組、1年2組などから選択できる）
2. 日付選択（カレンダーから選択）
3. 出席状況入力（出席、欠席、遅刻、早退を選択）
4. 過去の出席データの閲覧と集計
5. 欠席が多い生徒の自動抽出

【データ構造】
スプレッドシートには次のシートがあります：
- 「クラス情報」シート：クラス名、担任、生徒数を記録
- 「生徒情報」シート：生徒ID、名前、クラスを記録
- 「出席記録」シート：日付、生徒ID、出席状況を記録

【具体的に必要なもの】
1. サーバーサイドのCode.gsファイルのコード
2. メインのindex.htmlファイル
3. 必要なCSSスタイル
4. クライアントサイドJavaScriptの処理

コードには丁寧なコメントを入れて、初心者でも理解できるように説明してください。また、コードを貼り付ける場所や、デプロイ方法についても教えてください。
小テスト作成アプリのプロンプト例
私は小学校教員です。GASとGoogleフォームを使って、子どもたちに簡単な計算問題や漢字の小テストを自動生成するアプリを作りたいと考えています。

【必要な機能】
1. 難易度の選択（簡単、普通、難しい）
2. 問題の種類の選択（足し算、引き算、掛け算、割り算、漢字）
3. 問題数の選択（5問、10問、15問）
4. 選択した条件に基づいて問題を自動生成
5. Googleフォームとして問題を作成・共有
6. 解答後に自動採点と正答の表示

【使用するサービス】
- Google Apps Script
- Google Forms
- Google Spreadsheets（結果保存用）

コードはサーバーサイド（Code.gs）とユーザーインターフェース（index.html）に分けて提供してください。それぞれのコードブロックが何を行っているのかを説明するコメントもお願いします。

また、特に漢字問題の自動生成について、学年に応じた漢字を出題する方法があれば教えてください。

具体的な要件の伝え方

効果的な要件の伝え方のコツ
  • 具体的なユースケースを挙げる：「先生が生徒の名前を入力すると、その生徒の出席率が表示される」など
  • 画面イメージを言葉で説明する：「画面上部にタブがあり、『出席入力』『出席状況確認』『レポート』の3つに切り替えられる」など
  • データの入出力を明確にする：「入力値：生徒名と日付、出力値：その日の出席状況」など
  • 優先度を付ける：「最も重要な機能は〇〇で、△△は可能であれば実装したい」など
  • 既存システムとの関連を説明する：「現在は紙の出席簿を使用しており、それと同等の機能が必要」など
抽象的な説明よりも、実際の使用シーンや具体例を示すと、AIはより的確なコードを生成できます！

AIへの質問の最適化

AIへの効果的な質問方法
  • 段階的に質問する：まず全体像を確認し、次に詳細部分について質問
  • 一度に複数の質問をしない：一つのトピックに焦点を絞って質問
  • エラーメッセージを正確に伝える：エラーが発生した場合は全文をコピーして貼り付ける
  • 生成されたコードの説明を求める：「このコードの〇〇の部分が理解できません。何をしているのか説明してください」
  • 改善案を求める：「このコードをより効率的にする方法はありますか？」
  • 特定の機能の実装方法を質問する：「このアプリに検索機能を追加するにはどうすればよいですか？」
良い質問例 あまり効果的でない質問例
「スプレッドシートから特定の生徒のデータだけを取得するコードを生成してください。生徒IDは1列目にあります。」 「生徒データを取得するコードを教えてください。」
「このエラーメッセージ『TypeError: Cannot read property 'getRange' of null』が表示されました。原因と修正方法を教えてください。」 「コードがエラーになります。どうすればいいですか？」
「学年とクラスでフィルタリングできるドロップダウンメニューを追加したいです。index.htmlに実装するコードを教えてください。」 「フィルター機能を追加したいです。」
重要：質問する前に、すでに持っている情報（スプレッドシートの構造、既存のコードなど）を整理し、それを質問の中に含めることで、より適切な回答を得ることができます。
前のパート: 導入と基礎知識 次のパート: 実装の基礎