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

 
Home > TECH BLOG > GitHub CopilotでGAS(GoogleAppsScript)を爆速開発できる環境を作ってみよう!
公開日: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をインストールしていること
    • インストールしていない場合
  • Git及びGitHubの基本操作ができること
    • GitHub Copilotを利用するには、GitHubを使っていることが必須条件です。
  • GASの基本文法を理解していること

▎GitHub Copilotに登録してみよう

GitHub Copilotとは

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

登録、利用手順

  1. GitHub Copilotの無料トライアルに登録する
    1. 無料トライアルはこちら
  1. Monthly planを選択する
  1. Billing Information(支払い情報)を登録する
    1. クレジットカード登録が必須なのでご注意ください
  1. Suggestions matching public code
    1. Allow を選択する
  1. VSCodeのGitHub Copilot 拡張機能をインストールする
    1. GitHub Copilot 拡張機能ページに移動し、 [インストール] をクリックします
    2. ポップアップが表示され、Visual Studio Code を開くように求められます。 [Open Visual Studio Code] をクリックします
    3. VSCode の [Extension: GitHub Copilot] タブの install をクリックします
      1. GitHub アカウントで VSCode に認証していない場合は、GitHub にサインインするように求められます
    4. 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として設定されています。
material-icon-themeが適用された画面
material-icon-themeが適用された画面

Prettier - Code formatter

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

ESLint

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

Path Autocomplete

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

TypeScript Importer

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

▎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ローカル開発用のツールです。
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クラウド上にデプロイします。
  1. TypeScriptで記述された src/index.ts ファイルが JavaScriptにコンパイルされる
  1. 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

  1. src/index.ts にログを出力するmain関数を追加
  1. そこに Logger.log を追記します
Diff

デプロイ

  1. ターミナル:npm run deploy
  1. ターミナル:clasp open
  1. GASエディタ:main関数を実行
  1. Hello world! と出力される

全体の流れ(動画)

Hello Worldをログ出力するという単純なものですが、全体の流れがわかるように動画に収録しました。

GitHub Copilotがコードを自動で提案にしている点に注目してみよう!

Loggerと入力した瞬間に、灰色で .log('Hello world!') と表示されているのがわかりますでしょうか?
これがGitHub Copilotのコード自動提案です。何も処理しないコードで、Logger.logが実行される場合、.log('Hello world!') と入力されるだろうとAIが予測してくれたのです!
灰色の予測コードが表示されている状態で「TABキー」を入力するとその提案を確定することができます。

▎スプレッドシートのデータでメール送信してみよう!

スプレッドシートを開く

Bash

データ準備

以下、メールアドレス一覧をコピーして、スプレッドシートに貼ります。
JavaScript

index.ts

  1. src/index.ts に実装したい関数をコメントで記載する
    1. スプレッドシートのデータでメールを送信する。
    2. 宛先、件名、本文の順番で並んでいるとする。
  1. 関数名などが自動補完される
    1. function sendMail() などGitHub Copilotがコードを自動で提案してくれてます!
    2. 実際にメール送信する場合は、MailApp.sendEmail(address, subject, body); のコメントを外して有効にしてください!
Diff

デプロイ

  1. ターミナル:npm run deploy
  1. ターミナル:clasp open
  1. GASエディタ:sendMail関数を実行
  1. スプレッドシートのからメールの宛先、件名、内容がログに出力される
  1. 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ステップでサポートいたします。

▎関連記事