MacでclaspのインストールからVS CodeでのGASコーディング、自動反映まで解説

この記事は約6分で読めます。

今回は、Mac環境でのclaspのインストール手順から、VS Codeを使ったGAS（Google Apps Script）コーディング、そして自動反映の設定まで、解説していきます。

前提条件

まず、claspをインストールする前に、以下の2つがインストールされているか確認しましょう。

  • Homebrew: macOS用のパッケージマネージャー
  • Node.js: JavaScript実行環境

もしインストールされていない場合は、以下の手順でインストールしてください。

Homebrewのインストール:

  • ターミナルを開き、以下のコマンドを実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Node.jsのインストール:

  • ターミナルで以下のコマンドを実行します。

brew install node

claspのインストールと設定

次に、claspをインストールし、Googleアカウントでログインします。

claspのインストール:

  • ターミナルで以下のコマンドを実行します。

npm install -g @google/clasp
  • インストール後、以下のような警告が表示されることがありますが、インストール自体は成功しているので安心してください。
npm warn deprecated read-pkg-up@11.0.0: Renamed to read-package-up changed 223 packages in 2s 82 packages are looking for funding run `npm fund` for details

これらの警告については、後ほど詳しく解説します。

claspのログイン:

  • ターミナルで以下のコマンドを実行します。

clasp login

ブラウザが開き、Googleアカウントへのログインとclaspへの権限付与を求められるので、指示に従って操作してください。

GASプロジェクトの作成またはクローン

次に、GASプロジェクトを新規作成するか、既存のプロジェクトをクローンします。

新規プロジェクトの場合:

  • VS Codeで新しいフォルダを作成し、ターミナルでそのフォルダに移動します。以下のコマンドを実行し、新しいGASプロジェクトを作成します。

clasp create --type <プロジェクトタイプ> --title "<プロジェクト名>"
<プロジェクトタイプ>には、docs, sheets, slides, forms, standaloneなどを指定します。
<プロジェクト名>には、プロジェクトのタイトルを指定します。

既存プロジェクトの場合:

  • GASのスクリプトエディタでプロジェクトを開き、プロジェクトIDをコピーします。VS Codeでプロジェクトを保存するフォルダを作成し、ターミナルでそのフォルダに移動します。以下のコマンドを実行し、既存のGASプロジェクトをクローンします。

clasp clone <プロジェクト ID>

VS Codeでのコーディングと反映

次に、VS CodeでGASプロジェクトを開き、コーディングを行い、変更をGASプロジェクトに反映させます。

VS CodeでGASプロジェクトを開く:

VS Codeで、clasp createまたはclasp cloneで作成したフォルダを開きます。

コーディング:

VS Codeで.gsファイルを編集します。

GASプロジェクトへの反映:

  • ターミナルで以下のコマンドを実行し、変更をGASプロジェクトにアップロードします。

clasp push

GASのスクリプトエディタでプロジェクトを開き、変更が反映されていることを確認します。

GASプロジェクトからローカル環境への反映:

  • GASのスクリプトエディタでコードを変更した場合、以下のコマンドを実行し、変更をローカル環境にダウンロードします。

clasp pull

自動反映の設定

最後に、VS Codeで.gsファイルを編集して保存すると、自動的にclasp pushが実行されるように設定します。

chokidarのインストール:

  • ターミナルで以下のコマンドを実行し、chokidar-cliをインストールします。

npm install -g chokidar-cli

VS Codeのタスク設定:

  • VS Codeのメニューから「ターミナル」>「タスクの実行」>「タスクの構成」を選択します。tasks.jsonファイルが開くので、以下の内容を記述します。

JSON{ "version": "2.0.0", "tasks": [ { "label": "clasp push", "type": "shell", "command": "clasp push", "group": { "kind": "build", "isDefault": true }, "problemMatcher": [] }, { "label": "watch", "type": "shell", "command": "chokidar \"./**/*.gs\" -c \"clasp push\"", "group": "build", "problemMatcher": [] } ] }

タスクの実行:

VS Codeのメニューから「ターミナル」>「タスクの実行」を選択し、「watch」タスクを実行します。

.gsファイルを編集して保存すると、自動的にclasp pushが実行されます。

claspインストール後の警告について

npm install -g @google/clasp実行後に表示される警告は、以下の意味を持っています。

  • npm warn deprecated read-pkg-up@11.0.0: Renamed to read-package-up:
    • read-pkg-upというパッケージが非推奨となり、read-package-upに名称変更されたことを示しています。
    • claspが依存しているパッケージが更新されていないために表示されていますが、claspの動作自体には影響ありません。
    • この警告は、将来的にclaspのアップデートで解消される可能性があります。
  • 82 packages are looking for funding run npm fund for details:
    • インストールされたパッケージのうち82個が、開発資金を必要としていることを示しています。
    • npm fundコマンドを実行すると、資金提供の方法が表示されます。
    • 資金提供は任意であり、claspの動作には影響ありません。

まとめ

これらの手順で、Mac環境でもVS CodeでGASをコーディングし、変更を自動的に反映させることができます。ぜひ試してみてください！

コメント

タイトルとURLをコピーしました