claspを導入する手順（GASをVSCodeで書けるようにする）

普段、GASのコードはブラウザのAppsScriptエディタで書いていました。
ですが、ClaudeCodeを使ってもっとラクにGASを勉強したいと思ったので、「clasp」というツールを使って、VS Code上でGASを書ける環境を作成。

つまずいたところも含めて、実際にやった手順をそのまま残しておきます。
同じようにGASをローカルで書きたいと思っている人の参考になればと。

今回は「claspを導入する手順（GASをVSCodeで書けるようにする手順）」というお話です。

土台をつくる（Node.jsとclasp）

Node.jsをインストール

claspは「Node.js」という土台の上で動くツールなので、まずNode.jsをインストール。
PowerShellを開いて（「Windowsキー」→「PowerShell」と検索です。）Node.jsがインストール済か確認しましょう。

「PowerShell開く」→「PowerShellにnode -vと入力」→入っていなければ、Node.js公式サイトから「Node.js®を入手」ボタンからダウンロードという流れです。

公式サイトにはDocker向けの説明も出てきますが、今回は関係ないので無視して、緑色の「Windows インストーラー (.msi)」ボタンをクリック。

インストールが完了したら、PowerShellを開き直して、node -vと入力。
ダウンロードできているか確認してみます。

上の画像のように表示されたら成功です。

claspの導入

Node.jsが入ったら、次はclasp本体です。
PowerShellにnpm install -g @google/claspとコマンドを入力。

私の場合、ここでエラーが発生しました。
「npm : このシステムではスクリプトの実行が無効になっているため…」というような文章が出てきたのです。

これはWindows特有の「セキュリティ制限」のようで、以下のコマンドを入力して、自分のユーザーだけ実行を許可する設定に変えると解決しました。

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

参考までに、実行制限には他にも段階があるようです。

• Restricted（デフォルト、最も厳しい）：スクリプトを一切実行できない
• RemoteSigned（今回使ったもの）：自分のスクリプトはOK、外部のものは署名必須
• Unrestricted（緩い）：署名なしでも全部実行できてしまう。
• Bypass（最も緩い）：警告なしで何でも実行する。

その後、もう一度npm install -g @google/claspを実行すると、無事にインストール完了。
clasp -vでバージョンが表示されればOKです。

Googleアカウントとclaspを連携する

PowerShellにclasp loginと打つと、ブラウザが自動で開いてGoogleのログイン画面が出ます。
普段使っているアカウントでログインして、アクセスを許可すれば完了です。

既存のGASコードをローカルに持ってくる

土台ができたところで、次はいよいよ本題です。
今回は、真っ白な状態から始めるのではなく、すでにスプレッドシートに紐づけてつくってあったGASを、ローカルに持ってくるところから始めました。

まず、スプレッドシートを開いて「拡張機能」→「AppsScript」でエディタを開きます。
左側の歯車アイコン（プロジェクトの設定）をクリックすると、「スクリプトID」という長い文字列が出てくるので、これをコピー。
このIDが、Google側にあるコードの「住所」のような役割を果たします。

次に、ローカル側にフォルダを作成。
PowerShellに以下のコマンドを入力。

mkdir word-count-tracker
cd word-count-tracker

フォルダに移動できたら、コードを呼び寄せます。

clasp clone "スクリプトID"

先ほどコピーしたスクリプトIDを、この"スクリプトID"の部分に貼り付けて実行します。
うまくいくとPowerShellに「Cloned 2 files.」と出て、Google側にあったコードが、自分のパソコンの中にファイルとしてコピーされました。
ブラウザでしか触れなかったコードを、初めて自分のパソコンの中で直接扱えるようになったのは地味に嬉しかったり（笑）。

そういえば、なんでこういった「clone」という仕組みがあるのか気になって調べてみました。
もともとGASは、ブラウザのAppsScriptエディタでしか書けない仕組み。
そこでGoogleが、「ブラウザの外に一度コードを持ち出して、好きなエディタで編集できるようにしよう」という発想でつくったのが、claspというツールみたいです。

その「持ち出す（自分のパソコンの中に持ってくる）」ための最初の一歩が、今回使ったこの「clone」というコマンド。

VS Codeで編集・反映して、Claude Codeも使えるようにする

編集して、Googleに反映する

cloneしたフォルダをVS Codeで開くと、「コード.js」のようなファイルが見えるようになります。
あとは「VS Codeでコードを編集」→「保存(Ctrl+S)」→「ターミナルでclasp push」でGASのエディタに反映させることができます。

ここでも、1つだけエラーが発生。
clasp pushと実行したら「User has not enabled the Apps Script API.」というエラーが出たのです。
これは、AppsScriptの設定画面で「GoogleAppsScript API」をオンにする必要がありました。

「AppsScriptの設定画面」→「GoogleAppsScript APIをオン」にしましょう。

VSCode上でClaudeCodeも使えるようにする

ついでに、VSCodeの拡張機能から「Claude Code for VS Code」もインストールしました。

VSCodeの左側のメニューの四角が4つあるアイコンをクリック。
検索ボックスに「Claude」と入力してAnthropicの公式拡張機能をインストールします。
似た名前の非公式拡張機能がいくつも出てくるので、発行元がAnthropicかどうかは必ず確認したほうがよさそうです。

ログイン画面では「Claude.ai Subscription」を選択。
プロプラン以上を利用していれば、追加料金なしでそのまま使えます。

---

【ログ帳】
昨日は、朝にメルマガとブログ。
その後は、家族で蒲江にキャンプへ。
途中、Kindle本の執筆をしつつ。