【実例コード付】claspとvscodeでGAS開発

※本サイトにはプロモーション・広告が含まれています。

(最終更新月:2023年5月)

✔当記事はこのような方に向けて書かれています

「GASをローカル環境で使えるようにしたい」

「claspってどうやるの?」

「claspを使ってTypescriptでもGASが書けるかな?」

✔当記事の主な内容は以下のとおり

  • claspの使い方
  • claspでGASのプロジェクトを操作する方法
  • GASでTypescriptを使う方法

当記事では、claspの使い方だけでなく、実際にGASのプロジェクトへ反映させる方法や、Typescriptによる開発環境を構築する方法まで解説しています。

ぜひ最後までご覧ください。

大まかな手順としては以下のようになります。

  1. claspのインストール
  2. Google Apps Script APIをONにする
  3. ログインして、アクセス権限を付与

動画による解説はこちら。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

claspによる開発環境を設定する方法

claspの設定完了の目安は、ホームディレクトリに、「.clasprc.json」ができること。

~$ ls -la
合計 348
drwxr-xr-x 52 yulikepython yulikepython  4096  5月  4 16:11  .
drwxr-xr-x  3 root         root          4096  1月  6  2022  ..
-rw-------  1 yulikepython yulikepython 35558  5月  4 16:10  .bash_history
-rw-r--r--  1 yulikepython yulikepython   220  1月  6  2022  .bash_logout
-rw-r--r--  1 yulikepython yulikepython  4725  4月 18 22:16  .bashrc
-rw-------  1 yulikepython yulikepython  2293  4月 30 18:04  .clasprc.json

以下のコマンドでclaspをインストールしましょう。

npm install -g @google/clasp

インストールの際は、必ず「-gオプション」で、グローバルにインストールします。

なぜならローカルインストールだと、ログインなどでの認証がおこなわれないからです。

Google Apps Script APIをON

claspがインストールできたら、Google Apps Script APIをオンにします。

設定から、Google Apps Script APIを選択

Google Apps Script APIをオンにする

ログインをして、アクセス権限を付与

次は、自身のPC上ターミナルで、claspへのログインを実行します。

clasp login

ブラウザで権限付与の画面が立ち上がりますので、許可するアカウントをクリック。

権限内容を確認の上、「許可」をクリック。

成功した際のメッセージが出ればOKです。

claspコマンドの使い方

claspコマンドはgitのようなイメージで使えます。

一覧にその説明とまとめましたので、ご覧ください。

コマンド説明
clasp login [–no-localhost] [–creds <file>] [–status]Google アカウントにログインします。
オプションでローカルホストの使用を無効化したり、クレデンシャルファイルを指定できます。
clasp logoutGoogle アカウントからログアウトします。
clasp create [–title <title>] [–type <type>] [–rootDir <dir>] [–parentId <id>]Google Apps Script プロジェクトを作成します。
タイトル、タイプ、ルートディレクトリ、親フォルダ ID をオプションで指定できます。
clasp clone <scriptId | scriptURL> [versionNumber] [–rootDir <dir>]指定された scriptId または scriptURL の Google Apps Script プロジェクトをクローンします。
バージョン番号とルートディレクトリをオプションで指定できます。
clasp pull [–versionNumber]プロジェクトのソースファイルをローカルにダウンロードします。
オプションでバージョン番号を指定できます。
clasp push [–watch] [–force]ローカルの変更をプロジェクトにプッシュします。
オプションでウォッチモードを有効にしたり、強制プッシュを行うことができます。
clasp status [–json]プロジェクトのステータスを表示します。
オプションで JSON 形式で出力できます。
clasp open [scriptId] [–webapp] [–creds] [–addon] [–deploymentId <id>]スクリプトIDを指定して、プロジェクトをブラウザで開きます。
オプションで webapp、creds、addon などのページを開くことができます。
clasp deploymentsプロジェクトのデプロイメント一覧を表示します。
clasp deploy [–versionNumber <version>] [–description <description>] [–deploymentId <id>]プロジェクトをデプロイします。
オプションでバージョン番号、説明、デプロイメントIDを指定できます。
clasp undeploy [deploymentId] [–all]指定されたデプロイメントIDのデプロイメントを削除します。
オプションですべてのデプロイメントを削除することができます。

既存のプロジェクトをローカルに引き込む場合は、pullコマンドです。

もしくはcreateで新たなプロジェクトを作りましょう。

claspのcreateコマンドの説明

新しくプロジェクトを作る場合は、createコマンドが使えます。

引数でいろいろな設定ができるので、以下を参考に実装しましょう。

コマンド説明
clasp createスタンドアロンのデフォルトタイプの Google Apps Script プロジェクトを作成します。
clasp create –type standalone (default)スタンドアロンタイプの Google Apps Script プロジェクトを作成します。これがデフォルトのオプションです。
clasp create –type docsGoogle Docs にバインドされた Google Apps Script プロジェクトを作成します。
clasp create –type sheetsGoogle Sheets にバインドされた Google Apps Script プロジェクトを作成します。
clasp create –type slidesGoogle Slides にバインドされた Google Apps Script プロジェクトを作成します。
clasp create –type formsGoogle Forms にバインドされた Google Apps Script プロジェクトを作成します。
clasp create –type webappGoogle Apps Script Web アプリケーションプロジェクトを作成します。
clasp create –type apiGoogle Apps Script API 実行可能プロジェクトを作成します。
clasp create –title “My Script”“My Script” というタイトルで Google Apps Script プロジェクトを作成します。
clasp create –rootDir ./dist./dist ディレクトリをルートディレクトリとして Google Apps Script プロジェクトを作成します。
clasp create –parentId “folder_id”IDで指定された親フォルダに、 Google Apps Script プロジェクトを作成します。
clasp version [description]新しいバージョンを作成し、オプションで説明を追加できます。
clasp versionsプロジェクトのすべてのバージョンとその説明を表示します。
clasp list現在のユーザーがアクセスできる Google Apps Script プロジェクトの一覧を表示します。

TypescriptでGAS開発をしよう

claspを使うと、Typescriptが使えます。

実際にTypescriptでpushするとApps Script上では次のようになります。

Typescriptで記述されることがコメントされます。

手順はこちらです。

  • 必要なパッケージのインストール
  • 適切な場所にフォルダを作成
  • コードを書く
  • clasp.jsonの場所を移動する
  • pushの実行

最終的なフォルダツリーはこのようになります。

.
├── .clasp.json
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── appsscript.json
│   └── main.ts
└── tsconfig.json

必要なパッケージのインストール

package.jsonが作られます。

npm init -y

以下の3つをインストールします。

  • typescript
  • node.d.ts
  • google-apps-script
npm i -D typescript @types/node @types/google-apps-script

srcフォルダをルートとし、typescriptの設定ファイルを初期化します。

npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs

現在のフォルダツリーはこちら。

.
├── node_modules
├── package-lock.json
├── package.json
└── tsconfig.json

適切な場所にフォルダを作成

package.jsonと並列に、「src」フォルダを作成する。

mkdir src

srcフォルダに移動して、新規プロジェクトを作成する。

$ cd src
$ clasp create --title "FromLocal"
? Create which script? (Use arrow keys)
❯ standalone 
  docs 
  sheets 
  slides 
  forms 
  webapp 
  api 

とくにほかのアプリケーションを使わないようであれば、standaloneを選択しよう。

以下のように表示されればOKです。

Created new standalone script: https://script.google.com/d/1YoSSF6sTfMBcY1BzM0HBzQFmr4zc_J_QPG9_RuuIMSjaxmz9enQoQOp3/edit
Warning: files in subfolder are not accounted for unless you set a '/home/yulikepython/dev/gasPrj/testPrj/src/.claspignore' file.
Cloned 1 file.
└─ /home/yulikepython/dev/gasPrj/testPrj/src/appsscript.json

現状のフォルダツリーはこちら。

.
├── package-lock.json
├── package.json
├── src
│   ├── .clasp.json
│   └── appsscript.json
└── tsconfig.json

コードの記述

ひとまず何でも良いので、コードを書きましょう。

ファイル名は、「main.ts」とします。

const testVar: string = "これはテストです。";
Logger.log(testVar);

フォルダツリーはこちら。

.
├── package-lock.json
├── package.json
├── src
│   ├── .clasp.json
│   ├── appsscript.json
│   └── main.ts 
└── tsconfig.json

clasp.jsonの場所を移動する

pushの前にclasp.jsonを、package.jsonと並列に移動します。

フォルダツリーは以下のようになります。

.
├── .clasp.json
├── package-lock.json
├── package.json
├── src
│   ├── appsscript.json
│   └── main.ts 
└── tsconfig.json

pushの実行

「clasp push」でプロジェクトを移しましょう。

$ clasp push
└─ /home/yulikepython/dev/gasPrj/testPrj/src/appsscript.json
└─ /home/yulikepython/dev/gasPrj/testPrj/src/main.ts
Pushed 2 files.

clasp createで名づけたとおり「FromLocal」というタイトルのプロジェクトが作られています。

中身もきちんと反映され、Typescriptで記述されたことが明記されています。

まとめ:claspを使うとローカルでGAS開発ができる

claspは、ローカルでGAS開発ができるパッケージです。

正しくインストール・設定すれば、とても便利。

ローカルでおこなうことで、githubなどにコードを残すのも簡単にできます。

ぜひ上手く活用してください。

claspの公式レポジトリはこちらです。

GitHub - google/clasp: 🔗 Command Line Apps Script Projects
🔗 Command Line Apps Script Projects. Contribute to google/clasp development by creating an account on GitHub.
タイトルとURLをコピーしました