GitHub CopilotでGAS(GoogleAppsScript)を爆速開発できる環境を作ってみよう！

2023/5/1 2:302023/5/29 1:15

Home > TECH BLOG > GitHub CopilotでGAS(GoogleAppsScript)を爆速開発できる環境を作ってみよう！

📖

▎はじめに ▎ゴール ▎前提条件 ▎GitHub Copilotに登録してみよう GitHub Copilotとは登録、利用手順 ▎VSCode拡張機能のインストール installコマンド Japanese Language Pack for VS Code material-icon-theme Prettier - Code formatter ESLint Path Autocomplete TypeScript Importer ▎Node.jsのインストール ▎ClaspのインストールとGoole認証インストール Google認証 ▎ASIDEを使ったGAS開発環境の準備スプレッドシートと開発コードの準備コードの修正 license-config.json appsscript.json Gitコミット GASコードのデプロイ GASコードの確認スプレッドシートの確認 ▎Hello Worldをログ出力してみよう！index.ts デプロイ全体の流れ(動画)GitHub Copilotがコードを自動で提案にしている点に注目してみよう！▎スプレッドシートのデータでメール送信してみよう！スプレッドシートを開くデータ準備 index.ts デプロイ全体の流れ GitHub Copilotがコードを自動で提案にしている点に注目してみよう！▎おわりに ▎【宣伝】GAS開発代行サービス ▎関連記事

公開日：2023年5月5日　更新日：2023年5月5日

著者：藤澤勇樹(FUJISAWA Yuki)

▎はじめに

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教材です

[Udemy]Google Apps Script(GAS)開発入門

TypeScriptの基本文法を理解していること

基本文法を理解してない場合は、以下Udemyなどで学習してみてください。以下、オススメのTypeScript教材です

[Udemy]JavaScriptエンジニアのためのハンズオンで学ぶTypeScript徹底入門

▎GitHub Copilotに登録してみよう

GitHub Copilotとは

GitHubが開発した人工知能(AI)によるコード自動生成サービスです。GitHub Copilotは、OpenAI Codexというプログラムコードに特化したChatGPTを利用しており、GitHubのAIからコードの提案を受けることができます。

OpenAI Codexの詳細はこちら

登録、利用手順

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メニューなどを日本語化する拡張機能です。

Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace

Japanese Language Pack は VS Code にローカライズされた UI を提供します。既定の UI 言語をオーバーライドするには、 Configure Display Language コマンドを使用して、VS Code の表示言語を明示的に設定します。 Ctrl+Shift+P を押して "コマンドパレット" を表示し、 display と入力して Configure Display Language コマンドをフィルターして表示します。 Enter キーを押すと、インストールされている言語の一覧がロケールごとに表示され、現在のロケールが強調表示されます。UI 言語を切り替えるには、別の "ロケール" を選択してください。詳細については Docs を参照してください。翻訳改善のためのフィードバックについては、 vscode-loc リポジトリにイシューを作成してください。その翻訳文字列は Microsoft Localization Platform で管理されています。変更は Microsoft Localization Platform でのみ行うことができ、その後 vscode-loc リポジトリにエクスポートします。そのため、pull request は vscode loc リポジトリでは受け入れられません。 The source code and strings are licensed under the MIT license.

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

material-icon-theme

ファイルの種類に応じてアイコンを設定してくれます。

例えば、tailwind.confg.jsは、tailwindの設定ファイルなので、ロゴがiconとして設定されています。

Material Icon Theme - Visual Studio Marketplace

Get the Material Design icons into your VS Code.

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Prettier - Code formatter

HTMLコードなどをきれいにFormat（コード整形）できるようになります。

インストール後、VSCodeに以下設定します。

保存時にコード自動整形するように設定する

format on save で検索する。
ONにする

Default FormatterをPrettierに設定する

default formatter で検索する。
ONにする

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

ESLint

ESLint はJavaScriptコードを静的解析して、よくない書き方のコードを見つけてくれるものです。 ESlintを実行しておくことで、キレイなコードを保つことができますし、より良い書き方を学習することができます。

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Path Autocomplete

VSCodeの初期状態でもある程度パスの入力補助がついていますが、この拡張機能を使うことでより精度高くJavaScriptのimportファイルを検索できるようになります。

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

TypeScript Importer

.ts、.js、.tsxなどに入っているモジュールを自動でインポートしてくれます。TypeScriptのコーディングに便利な拡張機能です。

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter

▎Node.jsのインストール

Node.jsのインストールには nvm を使います。

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ローカル開発用のツールです。

GitHub - google/aside: 🚀 Apps Script development with formatting, linting, testing and more!

🚀 Apps Script development with formatting, linting, testing and more! - GitHub - google/aside: 🚀 Apps Script development with formatting, linting, testing and more!

https://github.com/google/aside

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ステップでサポートいたします。

[GAS開発] 提案・開発・保守の3ステップで業務自動化をサポート！

Google Workspace(スプレッドシート、カレンダー、Gmailなど)の単純な定型・反復作業の自動化・削減を検討中の方、本サービスを活用してみませんか？提案・開発・保守の3ステップでGASによる業務自動化を全面サポートいたします。

https://wywy.jp/system-devs/gas-dev-agent

▎関連記事

Twitterでシェア