🛢

GAS特化のTSプロジェクトジェネレータを作ったら爆速で開発環境が手に入った話

に公開
TypeScript
CLI
GAS
Google Apps Script
zennfes2025free
tech

概要

GAS芸人の皆さん、こんにちは！

Google Apps Script（GAS）でローカル環境での開発をしようとすると、環境構築で消耗していませんか？🫠
claspを導入して、webpackやesbuildでバンドル設定して、tsconfig.jsonを調整して...とやっていると、あっという間に時間が溶けてしまいますよねぇ

「もう環境構築はやりたくない！サクッとGASでツール作りたいんだわ！」
（でもTypeScriptは使いたいしGit管理もしたい...）

そんな（主に筆者の）ワガママな悩みを一撃で解決するために、GAS開発に特化したプロジェクトジェネレータ「@ciderjs/gasbombe」を開発しました！
このツールを使えば、コマンド一つでモダンなTypeScript開発環境が爆速で手に入ります

https://www.npmjs.com/package/@ciderjs/gasbombe

https://github.com/luthpg/gasbombe

この記事では、@ciderjs/gasbombeがどのようにあなたのGAS開発体験を向上させるか、その魅力をご紹介します！

パッケージ名の由来

gasbombe（ガスボンベ）というパッケージ名は、LPガスを家庭に届けるガスボンベのように、
GAS（Google Apps Script）開発に便利なプロジェクト構成をローカル環境に持ち帰れる、というコンセプトで名付けました

開発のきっかけ・背景

GASのローカル開発は、@google/claspの登場で大きく前進しましたが、快適な開発環境を整えるにはまだ多くのハードルが残されています。

claspはあくまでコードのアップロード/ダウンロードを行うためのCLIツールです。
そのため、TypeScriptにまつわる設定や、複数ファイルのバンドルといった、モダンな開発に不可欠な工程は開発者自身で環境を構築する必要がありました。

  • GAS環境を考慮した webpack や esbuild, vite などのバンドラ選定と設定
  • GASランタイムで動作するための tsconfig.json の調整
  • @types/google-apps-script などの型定義の導入
  • コードフォーマッターやリンターの導入と設定

これらの設定はGAS特有の知識が求められる場面も多く、新しいプロジェクトのたびに繰り返すのは大きな負担です。。。

さらに追い打ちをかけるように、claspの次期バージョン（v3）では、これまで提供されていたTypeScriptのトランスパイル機能が完全に廃止される予定です。
これにより、開発者はTypeScriptのビルド環境を自前で用意することが、もはや必須となるのです。

このような背景から、GAS開発におけるベストプラクティスを凝縮し、誰でも一瞬でモダンな開発環境を構築できるようにしたいという思いで、@ciderjs/gasbombeを開発しました🔥

gasbombeの主な機能と使い方

インストール

npxを使えば、パッケージをインストールすることなく、いつでも最新版を実行できます。

npx @ciderjs/gasbombe@latest

もしくは、グローバルインストールすれば、gasbombeで実行可能です。

# Install gasbombe to global
npm install @ciderjs/gasbombe -g

# generate project
gasbombe

プロジェクトのセットアップ

コマンドを実行すると、対話形式でセットアップが始まります。

  1. プロジェクト名: 作成するディレクトリ名を入力します。
  2. テンプレート: 用途に合わせて2種類から選択します。
    • vanilla-ts: シンプルなサーバーサイド実行環境向け
    • react-tsx: React(TSX)でフロントエンドも開発できる環境向け
  3. claspの設定: GASプロジェクトとの連携方法を選択します。
    • create: 新しいGASプロジェクトを作成します。
    • input: 既存のGASプロジェクトのIDを入力します。
    • select: 既存のGASプロジェクト一覧から選択します。
    • skip: claspの設定をスキップします。
  4. パッケージマネージャー: npm, yarn, pnpmから選択します。

全ての質問に答えるだけで、プロジェクトの雛形作成から依存関係のインストールまでが自動的に完了します！

利用可能なオプション

CI環境など非対話的に実行したい場合は、コマンドライン引数も利用できます。

オプション 説明
--name <name> プロジェクト名（ディレクトリ名）
--template <template> テンプレート (vanilla-ts or react-tsx)
--clasp <mode> clasp設定モード (create, input, select, skip)
--pkg <manager> パッケージマネージャー (npm, yarn, pnpm)
--skipInstall CLI実行時の依存パッケージのインストールをスキップ 
# 例: Reactプロジェクトをpnpmで非対話的に作成
npx @ciderjs/gasbombe@latest --name my-gas-app --template react-tsx --clasp create --pkg pnpm

競合ツールとの比較

GASのプロジェクトジェネレータとしては、Google製の@google/asideも存在します。
@google/asideは、ESLintやPrettier、Jestといった業界標準のツール群を提供し、Angularにも対応している堅実な選択肢です。

一方で、@ciderjs/gasbombeは、よりモダンで高速な開発体験を提供することに重点を置いており、以下の点で優位性があります。

  • 🚀 モダンで高速なビルド環境
    • gasbombeはビルドツールにViteやRolldownを採用。標準的なツールを用いる@google/asideに比べ、非常に高速な開発サーバーとビルドを実現します。
  • ⚛️ 人気のフロントエンドに対応
    • Webアプリ開発向けに、現在最も人気のあるフレームワークの一つであるReact(TSX)のテンプレートを標準で提供します。
  • 💅 次世代のツールチェーン
    • リンターとフォーマッターには、設定不要で超高速に動作するBiomeを採用。ESLint/Prettierで起こりがちな複雑な設定やプラグイン間の競合から解放されます。
  • 🤝 独自の型共有機能
    • Webアプリ開発において、サーバーサイド（GAS）の関数シグネチャをフロントエンドのTypeScriptコードに共有する@ciderjs/gasnukiを統合。これにより、バックエンドとフロントエンド間での安全な型連携が可能になります。

安定志向の@google/asideに対し、gasbombeは最新・最速を求める開発者のための選択肢です。
特にReactでWebアプリを作りたいなら、gasbombeが最高の開発体験を提供します。

gasbombeがもたらす快適なGAS開発体験

このツールは、GAS開発の体験を劇的に向上させます。

環境構築の時間をほぼゼロに

これまで数十分かかっていた環境構築が、わずか数十秒で完了。
思いついたアイデアをすぐにコードへ落とし込むことができ、開発の勢いを止めません。

ベストプラクティスを凝縮した構成

gasbombeが生成するプロジェクトには、モダンな開発に欠かせない以下の要素がプリセットされています。

  • TypeScript: 型安全な開発を実現します。
  • Vite / Rolldown: GAS環境を考慮した最適なビルド環境を提供します。
  • Biome: コードのフォーマットとLintを瞬時に行い、品質を保ちます。
  • @google/clasp: GASプロジェクトとの連携をスムーズにします。
  • @ciderjs/gasnuki: バックエンド関数の型情報を、フロントエンド側に共有します。

まとめ

@ciderjs/gasbombeは、GAS x TypeScript開発の面倒な初期設定を肩代わりし、あなたが「迅速なコーディング」にすばやく着手できるするためのツールです。
あなたのアイデアを最速で形にする手助けとなるでしょう！

もう環境構築で消耗するのはやめにしませんか？
快適な開発環境とともに、どんどんGASツールを作っていきましょう！🚀

Discussion