こんにちは。チームラボのフロントエンド班に所属しています、朴木です。趣味はNHKの連続テレビ小説を毎朝欠かさず鑑賞することです！
今回は、GASこと、Google App Scriptについて基本的な内容紹介したいと思います！
フロントエンドの技術からは少し離れますが、チームラボのフロントエンド班では、仕事をする上で欠かせない強力なツールとなっています。これを機に、皆様もぜひGASを使ってみてください！
この記事のターゲット
GASを始めたい人向けの内容になっています！
- 触ったことがないが、GASに興味がある人
- Google Workspaceのサービス使っている人
- スプレッドシートの単純作業にうんざりしている人
- 基本的なJavaScriptの使い方を知っている人
GASとは？
GASはGoogleのサービスの作業を自動化・効率化する開発プラットフォームです！
- Google App Scriptの略です。
- Googleの各種サービスをJavaScriptで操作できるスクリプト言語です。
- それらの各種サービスを連携し、簡単に自動化することができます。
GASでできること
GASはスプレッドシートの操作だけでなく、簡単な静的ページも作ることができ、外部APIとの連携もできます！
以下に、これさえ知っておけばGASライフが充実するような内容をピックアップしました。
1. スプレッドシートの値の入出力
以下のスクリプトで、値の入出力ができます。他にも様々なメソッドがあります。
/** 入力：「シート1」の「A1」のセルに「teamLab」をセット */
const myFunction = () => {
SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/XXXXXXX')
.getSheetByName('シート1')
.getRange('A1')
.setValue('teamLab')
}
/** 出力：「シート1」の「A1」のセルの値を取得 */
const myFunction = () => {
const value = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/XXXXXXX')
.getSheetByName('シート1')
.getRange('A1')
.getValue()
console.log(value) // → teamLab
}
2. 実行スケジュールの設定
以下の手順で設定できます。毎晩実行しておきたい関数がある時などに便利です。
3. 実行ボタンの設置
スプレッドシートに、図形や自作メニュータブを追加し、関数を実行するボタンを作成できます。
3-1. 図形に関数を紐づける
以下の手順で設定できます。
3-2. 自作メニュータブを増やす
以下のスクリプトで、自作メニュータブを設定できます。メニュータブですと、シート上に置かなくて良いので扱いやすいです。
/** 自作メニュータブを増やす */
const onOpen = () => {
const ui = SpreadsheetApp.getUi()
const menu = ui.createMenu("自作メニュータブ");
menu.addItem("実行する", "myFunction");
menu.addToUi();
}
※補足：onOpen関数
4. 静的ページの作成
以下の手順でデプロイすると、静的ページを作成できます。公開範囲はGASの閲覧権限範囲に依存します。
/**
* NOTE:
* - 関数名は`doGet`固定
* - HTML側で<?=hoge ?>と書き、GAS側で template.hoge = ’埋め込みたい文字列’ とを設定すると、htmlに埋め込める。
*/
const doGet = () => {
const template = HtmlService.createTemplateFromFile('index');
template.hoge = 'teamlabフロントエンド班'
return template.evaluate()
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>テスト</h1>
<h2>↓埋め込んだ文字列</h2>
<div class="hoge"><?=hoge ?></div>
</body>
<style>
.hoge {
color: red;
}
</style>
</html>
5. WebAPIの実行
以下のスクリプトで、WebAPIを実行できます。SlackなどのWebhookの実行や、外部の情報を取得したい場合に便利です。
/** slackへ通知するサンプル関数 */
const executeSlackWebhook = () => {
const requestParams = {
text: 'GASから通知'
};
const options = {
method: 'post',
contentType: 'application/json',
payload: JSON.stringify(requestParams),
};
UrlFetchApp.fetch('https://hooks.slack.com/triggers/XXXXXXXXXX', options);
}
GAS実例紹介
チームラボのフロントエンド班では、ほぼ上記で紹介した技術だけで、以下に挙げているようなツールをGASで開発している人もいます！
1. 画面設計書から、単体テストのケースを生成するツール
- 単体テストの目的は「画面設計書の内容が実装に反映されていることの確認」です。
- 表形式の画面設計書の内容をチェックリストにする作業をGASで自動化しています。
- これにより、ケースの挙げ忘れ、ケース作成の時間短縮、つまらない作業によるエンジニアの士気低下を防止しています。
2. 便利ツールが搭載された静的ページ
- ブラウザ上で完結する様々な便利ツール作成しています。
- 例えば、JSON形式のobjectからYAML形式に変換するツールなどは、以下のCDNを利用してHTMLで作成しています。
3. 期限切れのプルリクエストを毎朝Slackに投稿するbot
- GitHub GraphQL APIをfetchし、それをGASで加工し、SlackのWebhookを実行しています。
- 公式のGitHubのbotよりも柔軟なプルリクエストの状況把握が可能になります。
4. ガチャ
インターンランチガチャ
以下のようなガチャを日常的に利用しています。
- タスク担当を決めるガチャ（選出回数に応じて調整する機能付き）
- インターン生とランチにいくメンバーを選出するガチャ（会社付近の店を提案してくれる機能付き）
GAS開発環境
1. 純正のGASエディタ
Google Woekspace 公式
- 基本的にはGASのブラウザエディタを利用します。
- コーディング中、標準で設定されているクラスや関数のサジェストが表示されます。
- 一方で、型のサポートやコード整形機能はありません。
- ちょっとした便利ツールを作るのに最適です。
2. VSCode
VSCode 公式
- 「もっと型安全にTypeScriptを使って開発したい！」という方は、
google/claspというライブラリを利用すれば、ローカルのコードエディタで開発可能です。 - TypeScriptをJavaScriptにコンパイルし、GASの実行環境のクラウド上へpushするという仕組みになっています。
- Git管理、Jestなどのテスト実行、VSCodeの拡張機能などが利用できます。
- 一方で、実行結果確認など、デバッグをするためには、pushしてから実行が必要です。
- 大規模なGAS開発に最適です。
まとめ
- GASはプチWebアプリなら作れてしまうほど強力です。
- クラスの使い方やUI操作が直感的なので、使っていればすぐに覚えていきます。
- この記事以外にも、調べれば多くの情報が見つかります。
- 皆様も、日常の小さなストレスをGASで解決してみませんか？
最後までお読みいただきありがとうございました！
Discussion