Zenn
📑

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

に公開
Docker
TypeScript
GAS
Google Apps Script
clasp
tech

はじめに

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

https://github.com/ko-uema2/gas-proj-template

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

前提

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

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

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

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

  1. clasp を利用して Google Apps Script のプロジェクトをデプロイすることができる。

    デプロイするコマンドを使い分けることで、本番環境と開発環境を分けてデプロイすることができます。

    # 本番環境にデプロイ
npm run deploy:prod

# 開発環境にデプロイ
npm run deploy:dev

  2. Google Apps Script のプロジェクトを TypeScript で開発することができる。

    npm run build コマンドを実行することで、TypeScript で開発したコードを GAS が実行できる JavaScript に変換できます。

    # TypeScript をコンパイルして JavaScript に変換
npm run build

  3. Google Apps Script のプロジェクトを Jest でテストすることができる。

    Jest を利用して、GAS のプロジェクトをテストすることができます。

    # テストを実行
npm run test

  4. Biome を利用して、GAS コードのフォーマット / 静的解析をすることができる。

    # 静的解析を実行
npm run lint

  5. license-check-and-add を利用して、ライセンス表記を各ファイルに追加することができる。

    license-check-and-add - npm

    # ライセンス表記の追加
npm run license

  6. コンテナ環境の VSCode で下記拡張機能がデフォルトでインストールされている。

  7. LazyGit を利用して、VSCode のターミナルから Git の GUI 操作を行うことができる。

    jesseduffield/lazygit: simple terminal UI for git commands

    # LazyGit を起動
lazygit

# lazygit コマンドのエイリアスとして利用可能
lg

  8. zsh を利用したシェル操作ができる。
    コンテナを起動すると、zsh がデフォルトのシェルとして起動します。

  9. 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

  10. peco を利用してコマンド検索を行える。

    ctrl + r により、過去に実行したコマンドを検索することができます。

  11. peco を利用してディレクトリ移動を行える。

    ctrl + u により、過去に移動したディレクトリを検索することができます。

  12. zsh の補完機能を利用して、コマンドの補完ができる。

    コマンド入力中にtab キーを押すことで、その後の候補を表示してくれます。

    zsh-users/zsh-completions: Additional completion definitions for Zsh.

  13. 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

Discussion