見出し画像

(第2回：Claude code導入編)超初心者向けGAS をローカルで開発する方法（clasp + Claude code 導入ガイド)の完全詳細解説(Mac & Windows)

ブイヨン2025

はじめに


前回の記事（第1回：clasp導入編）では、Google公式ツール「clasp」を導入し、GASをローカル環境で扱えるようにしました。

今回は「第2回：Claude Code導入編」として、「Claude Code」をインストールし、clasp と Claude Code を組み合わせて、簡単なGASプログラムを修正する流れを紹介します。

1. Claude Code のインストール

前提条件

  • Node.js / npm が動作している

  • clasp が導入済み

  • Claude Pro (または Max) アカウントを保有している

ターミナル（Mac）またはコマンドプロンプト（Windows）で以下を実行します。

npm install -g @anthropic-ai/claude-code

  • npm install … パッケージをインストール

  • -g … グローバルインストール（どのフォルダからでも利用可能にする）

👉 このコマンドは 最初の1回だけでOK です。

2. 初期セットアップと認証

  1. 前回作成した「gas-test」フォルダに移動

  2. 下記コマンドで Claude Code を起動

claude

  1. 起動後は以下の画面が順番に表示されます。基本的に「Enter」で進めばOKです。

  • 表示モード選択（ダーク / ライト 等）

  • 認証方法の選択

    • Claudeアカウント（Pro/Max サブスク） → サブスクで利用可能

    • Anthropic Console（APIキー課金制） → 従量課金
      👉 今回は Claudeアカウント を選択してください

  1. ブラウザでログイン → 承認

  2. フォルダアクセス許可 → YES

  3. 最後に一旦 exit で終了します

3. テスト用のサンプルシートを作成

  1. Googleドライブにテスト用フォルダを作成

  2. 空のスプレッドシートを作成し、シート名を「データ」に変更

  3. A1〜A3 に以下を入力

山田
田中
佐藤

4. GASエディタにコードを貼る

スプレッドシートから 拡張機能 → Apps Script を開き、次のコードを貼り付けて保存します。

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu("サンプルメニュー")
    .addItem("データを確認", "showData")
    .addToUi();
}

function showData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const values = sheet.getRange("A1:A3").getValues();
  const msg = values.map(row => row[0]).join(", ");
  SpreadsheetApp.getUi().alert("データ: " + msg);
}

01_1回目テスト用シート

5. 1回目のGAS実行

  • スプレッドシートをリロードすると「サンプルメニュー」が追加されます

  • 「サンプルメニュー → データを確認」をクリック

  • 認証画面が表示されるので自分のアカウントで承認

  • 「データ: 山田, 田中, 佐藤」と表示されれば成功 🎉

6. ターミナルを2つ用意する

Claude Code と clasp を同時に使うため、ターミナルを2つ開いておきます。

  • ターミナルA：clasp用

  • ターミナルB：Claude Code用

どちらも作業用フォルダ「gas-test」に移動してください。

7. 「ターミナルA」でプロジェクトを取得

clasp を使って GAS プロジェクトをローカルにコピーします。

clasp clone <スクリプトID>

👉 「スクリプトID」は GASエディタ → 設定画面 からコピー可能です。

8. 「ターミナルB」で Claude Code をセットアップ

作業フォルダ「gas-test」で claude を入力すると、Tipsが表示されます。

Tips for getting started:
  Run /init to create a CLAUDE.md file with instructions for Claude
  ...

そこで次を入力します。

/init

👉 「CLAUDE.md」が作成されます。

9. Claude Codeに修正依頼を出す

シート「データ」の内容を以下のように変更します。

氏名          ヨミガナ                電話番号
聖徳 太子  ショウトク タイシ  090-1122-9988
豊臣 秀吉  トヨトミ ヒデヨシ  080-2233-4455
坂本 龍馬  サカモト リョウマ  070-1234-6789
勝 海舟     カツ カイシュウ      080-2233-6677
西郷 隆盛  サイゴウ タカモリ  070-3344-5566

Claude Code には次のように依頼します。

シート名: データ
1行目はヘッダー、3列構成
人数は可変なので、自動で範囲を取得できるよう修正してください

10. 「ターミナルA」で GAS を更新

clasp push

これで修正内容が Google 側に反映されます。

11. 再デプロイして確認

スプレッドシートをリロードし、再度メニューを実行。
Claude Code の修正が反映されていれば成功です 🎉

12. 完成したGASの例

完成版のGASは下記スプレッドシートに用意してあります。
自分のGoogleドライブにコピーしてご利用ください。

👉 完成したGASのURL

まとめ

これで「第1回：clasp導入編」「第2回：Claude Code導入編」が完了しました。

開発手順をまとめると以下の通りです。

  1. Chrome上のGAS、clasp、Claude Code の3画面を用意

  2. GASプロジェクトを新規作成

  3. ローカルに作業フォルダを作成

  4. clasp clone <スクリプトID> でローカルにコピー

  5. Claude Codeで /init を実行し「CLAUDE.md」を作成

  6. Claude Codeに作成／修正を依頼

  7. clasp push で更新

  8. GAS画面で動作確認（GAS+HTMLならデプロイ後に確認）

  9. 不具合があれば再度 Claude Code に依頼

👉 この「6〜8」のサイクルを繰り返すだけで、GAS（GAS+HTML含む）をAIと一緒に開発できます。

補足：Codex CLI の場合

ChatGPTの有料プランを利用している方は、同様の「Codex CLI」を使用可能です。性能はほぼ同じなので、既にChatGPTを契約している方はこちらでも問題ありません。

いいなと思ったら応援しよう！