コンテナに GAS + TypeScript + clasp + Jest の環境を作成したい!

Last updated at 2025-04-28Posted at 2025-04-27

はじめに

Docker コンテナを利用して、ホストOS の環境を汚さずに Google Apps Script (GAS) の開発環境をセットアップするテンプレートリポジトリを作成しました。

この記事では、このコンテナ環境でできることを紹介します。

前提

このテンプレートリポジトリを利用するにあたり、下記事項を満たしている必要があります。

ホストOS に Docker Desktop がインストールされていること
ホストOS に VSCode がインストールされていること
ホストOS の VSCode に Dev Containers 拡張機能がインストールされていること
ホストOS に Git がインストールされていること
自身の GitHub アカウントを持っていること
自身の Google アカウントを持っていること
Google アカウントで Google Apps Script API が有効化されていること
- Google Apps Script APIを有効にする

このコンテナ環境でできること

このコンテナ環境を起動することで、ホストOS を汚さずに以下のことができるようになります。

clasp を利用して Google Apps Script のプロジェクトをデプロイすることができる。
デプロイするコマンドを使い分けることで、本番環境と開発環境を分けてデプロイすることができます。
```
# 本番環境にデプロイ
npm run deploy:prod

# 開発環境にデプロイ
npm run deploy:dev
```
Google Apps Script のプロジェクトを TypeScript で開発することができる。
npm run build コマンドを実行することで、TypeScript で開発したコードを GAS が実行できる JavaScript に変換できます。
```
# TypeScript をコンパイルして JavaScript に変換
npm run build
```
Google Apps Script のプロジェクトを Jest でテストすることができる。
Jest を利用して、GAS のプロジェクトをテストすることができます。
```
# テストを実行
npm run test
```
Biome を利用して、GAS コードのフォーマット / 静的解析をすることができる。
```
# 静的解析を実行
npm run lint
```
license-check-and-add を利用して、ライセンス表記を各ファイルに追加することができる。

license-check-and-add - npm
```
# ライセンス表記の追加
npm run license
```
コンテナ環境の VSCode で下記拡張機能がデフォルトでインストールされている。
LazyGit を利用して、VSCode のターミナルから Git の GUI 操作を行うことができる。

jesseduffield/lazygit: simple terminal UI for git commands
```
# LazyGit を起動
lazygit

# lazygit コマンドのエイリアスとして利用可能
lg
```
zsh を利用したシェル操作ができる。
コンテナを起動すると、zsh がデフォルトのシェルとして起動します。
oh-my-zsh による zsh のカスタマイズができる。

ohmyzsh/ohmyzsh: 🙃 A delightful community-driven (with 2,400+ contributors) framework for managing your zsh configuration.

コンテナ起動時点では、作者の .zshrc ファイルが適用されています。
自身で zsh をカスタマイズしたい場合は、コンテナ内で ~/.zshrc を編集してください。
```
# .zshrc を編集
vim ~/.zshrc
```
peco を利用してコマンド検索を行える。
ctrl + r により、過去に実行したコマンドを検索することができます。
peco を利用してディレクトリ移動を行える。
ctrl + u により、過去に移動したディレクトリを検索することができます。
zsh の補完機能を利用して、コマンドの補完ができる。
コマンド入力中にtab キーを押すことで、その後の候補を表示してくれます。

zsh-users/zsh-completions: Additional completion definitions for Zsh.
zsh の補完機能を利用して、シェルのコマンド履歴に基づいてコマンド候補を表示、入力補完を行える。
入力途中のコマンドに対して、過去の履歴から続き候補をリアルタイムで表示してくれます。
また、候補が表示された状態で tab キーを　押すことで、コマンドの入力補完を行うことができます。

zsh-users/zsh-autosuggestions: Fish-like autosuggestions for zsh

フォルダ構造

このテンプレートリポジトリを利用することで、以下のフォルダ構造が作成されます。

.
├── .devcontainer
│   ├── .env
│   ├── .env.sample
│   ├── devcontainer.json
│   ├── docker-compose.yml
│   ├── Dockerfile
│   │   # zsh の設定用スクリプト
│   │   # .zshrc のクローン / oh-my-zsh プラグインのインストールを実行
│   └── setup-zsh.sh
│   # ビルド時に生成されるフォルダ
│   # GAS のプロジェクトをデプロイする際に必要なファイル郡
├── dist
│   ├── appsscript.json
│   └── index.js
├── doc
│   │   # README.md 用画像ファイル
│   └── img
│       ├── CleanShot 2025-04-19 at 05.35.15.png
│       ├── CleanShot 2025-04-19 at 05.39.49.png
│       ├── CleanShot 2025-04-19 at 06.13.30.png
│       └── CleanShot 2025-04-19 at 06.38.35.png
├── node_modules
│   # GAS ソースコード
├── src
│   ├── example-module.ts
│   └── index.ts
│   # テストコード
├── test
│   └── example-module.test.ts
│   # ビルド用コード
│   # 詳細は tools/README.md を参照
├── tools
│   ├── build.ts
│   ├── exportHandlers.ts
│   └── README.md
├── .clasp.json.example
├── .claspignore
├── .gitignore
├── appsscript.json
├── biome.json
├── jest.config.json
│   # Apache-2.0 ライセンスファイル
├── LICENSE
│   # license-check-and-add 用設定ファイル
├── license-config.json
│   # ライセンスヘッダーファイル
├── license-header.txt
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up