GitHub CopilotでGAS(GoogleAppsScript)を爆速開発できる環境を作ってみよう!
目次
▎はじめに▎ゴール▎前提条件▎GitHub Copilotに登録してみようGitHub Copilotとは登録、利用手順▎VSCode拡張機能のインストールinstallコマンドJapanese Language Pack for VS Code material-icon-themePrettier - Code formatterESLintPath AutocompleteTypeScript Importer▎Node.jsのインストール▎ClaspのインストールとGoole認証インストールGoogle認証▎ASIDEを使ったGAS開発環境の準備スプレッドシートと開発コードの準備コードの修正license-config.jsonappsscript.jsonGitコミットGASコードのデプロイGASコードの確認スプレッドシートの確認▎Hello Worldをログ出力してみよう!index.tsデプロイ全体の流れ(動画)GitHub Copilotがコードを自動で提案にしている点に注目してみよう!▎スプレッドシートのデータでメール送信してみよう!スプレッドシートを開くデータ準備index.tsデプロイ全体の流れGitHub Copilotがコードを自動で提案にしている点に注目してみよう!▎おわりに▎【宣伝】GAS開発代行サービス▎関連記事
公開日:2023年5月5日 更新日:2023年5月5日
▎はじめに
GitHub CopilotでGAS(GoogleAppsScript)を爆速開発できる開発環境が欲しい!といった方に向けて、開発環境構築方法を解説した記事です。本記事では、以下、スキルと知識を得ることができます。
- GitHub Copilotの利用方法
- GASローカル開発に必要なVSCode拡張機能
- Node.jsのインストール方法
- ClaspのインストールとGoole認証の方法
- ASIDEを使ったGAS開発環境の方法
- GitHub Copilotのコード自動提案を活用したGASの開発方法
▎ゴール
GitHub Copilotのコード自動提案を活用したGASの開発ができるようになること。
以下の動画でGASコードを入力している時に「灰色で表示されるコード」が自動で提案しているコードです。

▎前提条件
この記事は以下の前提条件を元に解説しています。条件をご確認ください。
- Macであること
- Macのターミナルを前提としてます
- VSCodeをインストールしていること
- インストールしていない場合
- 方法1:ダウンロードする
- 方法2:Homebrew
- 以下、コマンドをターミナルで実行する
$ brew install --cask visual-studio-code
- Git及びGitHubの基本操作ができること
- GitHub Copilotを利用するには、GitHubを使っていることが必須条件です。
- GASの基本文法を理解していること
- 基本文法を理解してない場合は、以下Udemyなどで学習してみてください。以下、オススメのGAS教材です
- TypeScriptの基本文法を理解していること
- 基本文法を理解してない場合は、以下Udemyなどで学習してみてください。以下、オススメのTypeScript教材です
▎GitHub Copilotに登録してみよう
GitHub Copilotとは
GitHubが開発した人工知能(AI)によるコード自動生成サービスです。GitHub Copilotは、OpenAI Codexというプログラムコードに特化したChatGPTを利用しており、GitHubのAIからコードの提案を受けることができます。
登録、利用手順
- GitHub Copilotの無料トライアルに登録する
- Monthly planを選択する

- Billing Information(支払い情報)を登録する
- クレジットカード登録が必須なのでご注意ください
- Suggestions matching public code
Allow
を選択する

- VSCodeのGitHub Copilot 拡張機能をインストールする
- GitHub Copilot 拡張機能ページに移動し、 [インストール] をクリックします
- ポップアップが表示され、Visual Studio Code を開くように求められます。 [Open Visual Studio Code] をクリックします
- VSCode の [Extension: GitHub Copilot] タブの install をクリックします
- GitHub アカウントで VSCode に認証していない場合は、GitHub にサインインするように求められます
- GitHub から、GitHub Copilot に必要なアクセス許可が要求されます。 アクセス許可を承認するには、 [Visual Studio Code の認可] をクリックします。
▎VSCode拡張機能のインストール
installコマンド
ターミナルで以下のinstallコマンドを実行すれば簡単に拡張機能がインストールできます!
Bash
上記コマンドでインストールする拡張機能は以下の通りです。
Japanese Language Pack for VS Code
VSCodeメニューなどを日本語化する拡張機能です。
material-icon-theme
ファイルの種類に応じてアイコンを設定してくれます。
例えば、tailwind.confg.jsは、tailwindの設定ファイルなので、ロゴがiconとして設定されています。

Prettier - Code formatter
HTMLコードなどをきれいにFormat(コード整形)できるようになります。
インストール後、VSCodeに以下設定します。
- 保存時にコード自動整形するように設定する
format on save
で検索する。- ONにする

- Default FormatterをPrettierに設定する
default formatter
で検索する。- ONにする

ESLint
ESLint はJavaScriptコードを静的解析して、よくない書き方のコードを見つけてくれるものです。 ESlintを実行しておくことで、キレイなコードを保つことができますし、より良い書き方を学習することができます。
Path Autocomplete
VSCodeの初期状態でもある程度パスの入力補助がついていますが、この拡張機能を使うことでより精度高くJavaScriptのimportファイルを検索できるようになります。
TypeScript Importer
.ts、.js、.tsxなどに入っているモジュールを自動でインポートしてくれます。TypeScriptのコーディングに便利な拡張機能です。
▎Node.jsのインストール
nvmとは、Node.jsのバージョンを切り替えて利用することができるツールです。複数のバージョンのNode.jsをインストールして切り替えて使うことができるので便利です。
Bash
▎ClaspのインストールとGoole認証
Claspとは、Command Line Apps Script Projectsの略で、ローカル環境を使ってGoogp Apps Scriptの開発ができるようにするためのツールです。Claspを使うことで、VSCodeを使って開発できるようになります。
インストール
ClaspのNode.jsライブラリをグローバルにインストールします。
Bash
Google認証
ローカル環境からGoogle Apps Scriptにコードをデプロイできるように、Google認証します。認証が成功すると、
~/.clasprc.json
に access_token などの認証情報が記録されます。Bash
▎ASIDEを使ったGAS開発環境の準備
ASIDEとは、Apps Script in IDEの略で、2023年3月にリリースされた新しいGASローカル開発用のツールです。
Claspをより便利にしたツールで以下の機能が特徴です。
- TypeScript
- TypeScript でコードを記述できます。TypeScriptのコードは、デプロイ時にGASスクリプトに自動でコンパイルされます。
- Formatting / Linting
- ESLint と Prettier の機能を活用してより良いコーディング スタイルを適用できます。
- Test
- デプロイ前に Jest を使用してコードをテストできます。
- Multiple Environments
- デプロイ先で開発環境(dev)と本番環境(prod)を切り替えることができます
スプレッドシートと開発コードの準備
~/workspace/gitHub-copilot-gas
にGASスクリプトのディレクトリを作成して、そこにASIDEを使って開発環境を用意します。また、GitHubで管理できるようにGitリポジトリも作成します。スプレッドシートとGASスクリプトが新規作成されます。
- Google Sheets Link: スプレッドシートのURL
- Apps Script Link: GASスクリプトのURL
Bash
コードの修正
初期状態だと、testコードが存在しないのにtestしようとしてエラーになるなどのトラブルが発生するので、修正します。あと、ライセンス記述をコンパイル後のソースに追加されるように修正します。
Bash
license-config.json
src/icense-config.json
を修正します。Apache License Version 2.0のライセンスだと、著作権を表記する必要がありますが、ソースコードに表記があるとコードが見づらくなるので、distフォルダに出力される JavaScriptに著作権表示が表記されるように修正します。
Diff
appsscript.json
appsscript.json
を修正します。タイムゾーンを日本時間(Asia/Tokyo)に設定しています。
Diff
Gitコミット
ここまでの修正をGitコミットしておきます。
Bash
GASコードのデプロイ
ローカルのGASコードをクラウドにデプロイします。
npm run deploy
コマンドを実行すると、以下の手順でGoogleクラウド上にデプロイします。- TypeScriptで記述された
src/index.ts
ファイルが JavaScriptにコンパイルされる
- JavaScriptとappsscript.jsonが
dist/
以下に出力される
Bash
GASコードの確認
clasp open
コマンドでGASエディタを起動します。src/index.ts
のコードがデプロイされていることが確認できればOKです!Bash

スプレッドシートの確認
clasp open --addon
コマンドでGASが紐づいているスプレッドシートを確認することができます。Bash

▎Hello Worldをログ出力してみよう!
入門の第一歩といえば、
Hello World!
ということで、Hello World!をログ出力してみましょう!index.ts
src/index.ts
にログを出力するmain関数を追加
- そこに Logger.log を追記します
Diff
デプロイ
- ターミナル:
npm run deploy
- ターミナル:
clasp open
- GASエディタ:main関数を実行
- Hello world! と出力される
全体の流れ(動画)
Hello Worldをログ出力するという単純なものですが、全体の流れがわかるように動画に収録しました。
GitHub Copilotがコードを自動で提案にしている点に注目してみよう!
Loggerと入力した瞬間に、灰色で
.log('Hello world!')
と表示されているのがわかりますでしょうか?これがGitHub Copilotのコード自動提案です。何も処理しないコードで、Logger.logが実行される場合、
.log('Hello world!')
と入力されるだろうとAIが予測してくれたのです!灰色の予測コードが表示されている状態で「TABキー」を入力するとその提案を確定することができます。

▎スプレッドシートのデータでメール送信してみよう!
スプレッドシートを開く
Bash
データ準備
以下、メールアドレス一覧をコピーして、スプレッドシートに貼ります。
JavaScript

index.ts
src/index.ts
に実装したい関数をコメントで記載する- スプレッドシートのデータでメールを送信する。
- 宛先、件名、本文の順番で並んでいるとする。
- 関数名などが自動補完される
function sendMail()
などGitHub Copilotがコードを自動で提案してくれてます!- 実際にメール送信する場合は、
MailApp.sendEmail(address, subject, body);
のコメントを外して有効にしてください!
Diff
デプロイ
- ターミナル:
npm run deploy
- ターミナル:
clasp open
- GASエディタ:sendMail関数を実行
- スプレッドシートのからメールの宛先、件名、内容がログに出力される
- MailApp.sendEmail(address, subject, body);のコメントアウトを外して、再度デプロイして実行すると、メールが送信される
全体の流れ
GitHub Copilotがコードを自動で提案にしている点に注目してみよう!
自動提案している部分だけを抜き出してみました。コード入力している間に、自動でコードを提案してくれるのでコーディングがとても効率的に進めることができます!

▎おわりに
この記事は、GitHub CopilotでGAS(GoogleAppsScript)を爆速開発できる開発環境が欲しい!といった方に向けて、開発環境構築方法を解説しましたがいかがだったでしょうか?
- GitHub Copilotの利用方法
- GASローカル開発に必要なVSCode拡張機能
- Node.jsのインストール方法
- ClaspのインストールとGoole認証の方法
- ASIDEを使ったGAS開発環境の方法
- GitHub Copilotのコード自動提案を使ったGASの開発方法
上記、6点をしっかりと理解すれば、GitHubのAIがGASのコードを自動で提案してくれるようになり、爆速なGAS開発が実現できるはずです。
▎【宣伝】GAS開発代行サービス
GASによる業務自動化を提案・開発・保守の3ステップでサポートいたします。