環境：
作りたい物：

GitHubリポジトリ作成からGASバックエンド設定まで

前提
Step1 GitHubでリポジトリ作成

GitHubを開く → https://github.com

右上の + → New repository

GitHubの新規リポジトリ作成画面

→ Create repository を押す

README.md は後から作らず、リポジトリ作成時にONにします。

Step2 SSH URLを確認

リポジトリ画面で Code → SSH → 右側の コピーボタン を押す。

GitHubのCodeメニューでSSH URLをコピーする画面

SSH URLのフォーマットに誤りがあります（例: git@github.com:ユーザー名/リポジトリ名.git）

コピーしたSSH URLを貼り付けると、下の clone コマンドが自動で書き換わります。

Step3 ローカルに持ってくる

PowerShell で実行

cd C:\local-doc\github
git clone git@github.com:your-github-name/sample-project.git
cd sample-project

cd まで完了したら PowerShell を閉じる。

Step4 VS Codeで開く

既存の VS Code のアイコンから VS Code を起動する。

Step5 AGENTS.md を作成

VSCodeで AGENTS.md というファイルを作成します。


    

    
    
  


  

    
Step6 public/sample.html を作成

    
AIに依頼して、Cloudflare Pages で公開する最初のHTMLを作成してもらう。

    
下のプロンプトをコピーして AI に送信する。

    

      まずは public の中に、Google Apps Script とは関係のないサンプル index.html を作成してください
      
    

    
まずはGASと無関係なサンプルHTMLを作り、Cloudflare Pages の公開を先に確認します。

  


  

    
Step7 コミット作成＆プッシュ

    
AIに依頼して、main ブランチでコミット作成＆プッシュしてもらう。

    
例: 「mainブランチでコミット作成＆プッシュして」と依頼する。

  


  
  

    
Step8 Cloudflare Pagesで公開設定

    

      Cloudflareを開く →
      https://cloudflare.com
    

    
左メニューから以下の順に進む。

    
Compute → Workers & Pages → Create app → Pages → Connect to Git

    CloudflareのWorkers and Pages画面
    Cloudflare Pagesでリポジトリを選択する画面
    Cloudflare Pagesのビルド設定画面
    
   Cloudflare Pagesのデプロイ確認画面
  


  

    
Step9 ドライブにアクセス

    

      Google ドライブを開く →
      https://drive.google.com
    

    
GAS を置きたいフォルダに移動しておくと管理しやすいです。

  


  

    
Step10 シートを作成

    
ドライブで 新規 → Google スプレッドシート を選び、新しいシートを作成する。

    
ファイル名を 掲示板 にする。左上の 無題のスプレッドシート をクリックすると名前を変更できる。

    
このシートに紐づく形で GAS プロジェクトを作ります。

  


  

    
Step11 GASを作成

    
作成したシートで 拡張機能 → Apps Script を開く。

    
ファイル名を 掲示板 にする。左上の 無題のプロジェクト をクリックすると名前を変更できる。

    
シートに紐づいた Apps Script プロジェクトが新しく開きます。

  


  

    
Step12 サンプルでデプロイ

    
最初にデプロイする時は、Step5 の AGENTS.md 内にある GAS コードを参照する。エディタの中身を下記サンプルコードに置き換えて保存する。

    

      const getA1 = (e) => {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const value = sheet.getRange('AI1').getValue();
  return value;
}


const doGet = (e) => {

  let response;

  // e の中の mode で実行する関数を切り替える
  // e を投げてその後の処理は関数に任せる
  // 現時点では参照しない

  response = getA1(e);

  const output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(JSON.stringify({ response }));
  return output;
};
      
    

    
続けて画面右上の デプロイ → 新しいデプロイ → 種類 ウェブアプリ を選んでデプロイする。

    
一度ブラウザ画面からデプロイしておくことで、後の clasp 運用が可能になります。

  


  

    
Step13 AIにクラウド版エディタ画面URLを伝える

    
Apps Script エディタ画面の URL をコピーして、下の入力欄に貼り付ける。URL の中の文字列が script ID（Key） です。

    

      
      
    

    
URLのフォーマットに誤りがあります（例: https://script.google.com/home/projects/xxxxx/edit）

    
入力したURLは Step14 のプロンプト末尾に自動で追加されます。

  


  

    
Step14 コードを変える

    
AI に依頼して、gas フォルダ内のコードを実装内容に合わせて修正してもらう。

    
下のプロンプトをコピーして AI に送信する。

    

      掲示板アプリのように動くスクリプト(./gas/)と、それを閲覧するための ./public/keijiban.html を作成してください。gasのエンドポイントはclaspで確認してください。（@HEADではなく数字が付いている方）
      
    

    
フロントからの通信は doGet で受信し、mode パラメーターで処理を分岐します（例: ?mode=list_view）。Step13 で入力したエディタURLが末尾に追加されます。

  


  

    
Step15 clasp push する

    
修正したコードを GAS にアップロードする。

    

      gas ディレクトリの中で clasp push からデプロイまで完了させて。デプロイは @HEAD はなく数字が付いている方を使ってください。git も push してください。
      
    

    
本番 deploy に反映する場合は、version 作成 → clasp deploy -i デプロイID も実行します。

  






コピーしました