1. はじめに
AIツールClaudeを使って、Google Apps Script (GAS) Webアプリを作ってみました。
Claudeの無料プランでは一日のチャット回数に上限があるため、一回のプロンプトでできるだけ実用的なコードを得るため、事前に要件定義を作り込んでおくのが良いと思います。
2. プロンプト構成
以下の4つの要素で構成しました。
1. DBとして使用するスプレッドシートの構成
アプリのデータソースとなるスプレッドシートの構造を定義します
- シート名と目的: そのシートが何のためのデータを持つのかを記述
- カラム構成: 各列（カラム）の名前と、そのデータが持つ意味を解説
2. 仕様（機能・ロジック）
Webアプリの具体的な機能と、それに対応する動作ロジックを箇条書きで記述します。
- 画面要素: どのような要素（ボタン、テキストエリアなど）を画面に配置するか
- 操作と動作: ユーザーが操作（ボタンを押す、ページを開くなど）をした際、どのような処理（ロジック）が実行されるか
3. 技術要件と性能
使用技術の指定に加え、性能に関する制約を指示します。
- 使用技術: 外部ライブラリやフレームワークを記載(JQueryを使う、とか)
- 性能指示: 「スプレッドシートへのアクセスを最小限にする」「起動時に全データを取得し、その後の操作ではアクセスを控える」など、動作を効率化するための指示
4. ファイル構成と役割
GAS Webアプリを構成する各ファイルの役割を指示
| ファイル名 | 役割 |
|---|---|
main.gs |
サーバーサイドのメインロジック（GAS関数、スプレッドシート連携など） |
index.html |
Webアプリの画面を構成するHTML（ボディ部分） |
style.html |
CSS（画面の見た目を定義） |
script.html |
クライアントサイドのJavaScript（HTML要素の操作など） |
3. まとめ
結構長めのプロンプトを投げた結果、Claudeはwebアプリの骨子となるコードをけっこういい感じで出力してくれました。
そのあと、細かなエラーの修正や、デザインの調整をちょこちょこやって仕上げました。
ただ、AIにコード生成を頼ることで、自身のGASへの理解が深まらないという懸念も・・・
ちゃんと勉強もしないといけないですね。