0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCodeを使ったGoogle Apps Script開発の環境構築

Last updated at Posted at 2024-06-07

はじめに

この記事では、VSCodeでGoogle Apps Script(以下GAS)開発の環境を構築する方法を紹介します。GASを開発するためにはGoogleアカウントが必要になるので、もしお持ちでない方は先に作成してください。また、ローカルからGoogleアカウントにアクセスするためにclaspというNode.jsパッケージを使うので、Node.jsも必要になります。詳細は以下のドキュメントをご覧ください。


最終的なディレクトリ構成

myApp/
├── .clasp.json
├── .claspignore
├── appsscript.json
└── main.js

Google Apps Script APIを有効にする

まずはGAS APIを有効にしましょう。使いたいアカウントにログインした上で設定してください。以下からアクセスできます。

スクリーンショット 2024-06-07 0.32.02.png


プロジェクトディレクトリの作成とパッケージのインストール

mkdir myApp
cd _$
npm init -y
npm i -g @google/clasp # claspはグローバルにインストールする

claspでGoogleアカウントにログインする

clasp login

このコマンドを実行するとブラウザでアカウント認証画面が開きます。先程のGAS APIを有効にしたアカウントを選択し、指示に従って進めてください。成功すると以下のようなメッセージが表示されます。以降はclaspコマンドでローカルからGoogleアカウントにアクセスして、GASソースコードのアップロード・ダウンロードなどができるようになります。

スクリーンショット 2024-06-06 16.53.37.png


アプリケーションの新規作成と設定

以下のコマンドで新しくアプリケーションを作成します。

clasp create --type standalone

するとプロジェクトルートに以下のファイルが作成されます。

  • .clasp.json claspの設定ファイル
  • appsscript.json GASの設定ファイル

またアカウントのGoogle Driveにもアプリケーションが作成されているので確認してみてください。


appsscript.jsonのtimeZoneを日本に変更します。

appsscript.json
{
+ "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

.claspignoreファイルを作成します。

後でアプリケーションをGoogleにアップロードする工程があるのですが、これはその時にアップロードしたくないファイルやディレクトリを指定するためのものです。.gitignoreのようなものですね。

以下はmain.jsappsscript.json以外の全てを無視する設定です。

**/**
!main.js
!appsscript.json

main.jsを作成します。今回はログを出力するだけの簡単なコードです。

main.js
const test = () => {
  console.log("Hello GAS!");
}

Googleにアプリケーションをアップロードする

ではいよいよ、Googleにアプリケーションをアップロードします。

clasp push

成功すると以下のようなメッセージが表示されます。

スクリーンショット 2024-06-07 13.55.17.png


次に以下のコマンドを実行すると、今アップロードしたGASのwebエディターがブラウザで開きます。

clasp open

この時、main.jsmain.gsへ自動的に変換されています。実行ボタンを押してログが表示されれば成功です🎉 お疲れ様でした!

スクリーンショット 2024-06-06 17.26.43.png


おわりに

ローカルで開発すればエディターによる拡張機能の恩恵も受けられますし、Githubでのコード管理も楽になると思います。ぜひやってみてください。
最後まで読んでいただきありがとうございました!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?