開発効率と品質を極める(clasp/TypeScript/Git管理)

開発効率と品質を極める(clasp/TypeScript/Git管理)を図解する女性
目次

ブラウザエディタの限界とローカル開発の必要性

これまでの章では、Google Apps Script(GAS)のスクリプトエディタを使用してコードを記述し、実行してきました。ブラウザ上で完結するこの環境は、環境構築が不要であるという点で非常に手軽であり、小規模なツールや単発のスクリプトを作成するには最適です。しかし、開発するシステムの規模が大きくなり、コードの行数が数千行に及ぶようになったり、複数人のチームで開発を行うようになったりすると、ブラウザエディタの限界が顕在化します。

例えば、ブラウザエディタでは誤ってコードを削除してしまった場合の復元が困難であったり、変更履歴の詳細な追跡ができなかったりします。また、共通の処理を複数のスクリプトで使い回すためのモジュール管理や、コードの品質を一定に保つための静的解析ツールの導入も容易ではありません。プロフェッショナルな開発者として、堅牢で保守性の高いシステムを構築するためには、ブラウザを離れ、自身のPC上(ローカル環境)で開発を行う体制への移行が不可欠です。本章では、GAS開発をモダンなソフトウェア開発の基準へと引き上げるためのツールチェーンとワークフローについて解説します。

claspとは何か:GAS開発におけるコマンドラインツールの役割

ローカル環境でGASを開発するためにGoogleが公式に提供しているツールが「clasp(Command Line Apps Script Projects)」です。claspはNode.jsベースのコマンドラインツールであり、ローカルにあるプログラムファイルをGoogleのサーバーにアップロード(push)したり、逆にサーバー上のファイルをローカルにダウンロード(pull)したりする機能を持っています。

通常、ローカルで書いたコードをGASに反映させるには、コードをコピーしてブラウザエディタに貼り付ける必要がありますが、claspを使用すればコマンド一つでその作業が完了します。また、claspはプロジェクトの新規作成や、既存プロジェクトの複製(clone)、デプロイの管理、バージョンの作成といった操作もターミナルから実行可能です。これにより、開発者はVS Codeなどの高機能なエディタを使用してコーディングに集中でき、強力な補完機能や検索機能、拡張機能の恩恵を受けることができるようになります。claspは、ローカルの豊かな開発エコシステムとGASの実行環境を繋ぐ架け橋となる重要なツールです。

環境構築:Node.jsの準備とclaspのインストール手順

claspを利用するためには、前提として「Node.js」とパッケージ管理ツールである「npm」がインストールされている必要があります。これらが未導入の場合は、公式サイトからLTS(長期サポート)版をインストールしてください。環境が整ったら、ターミナル(またはコマンドプロンプト)を開き、npmコマンドを使用してclaspをグローバルにインストールします。コマンドは npm install -g @google/clasp です。

インストールが完了したら、Googleアカウントとclaspを紐付けるためのログイン作業を行います。clasp login コマンドを実行するとブラウザが立ち上がり、Googleアカウントへのアクセス許可を求められます。これを承認することで、ローカルのclaspがあなたのGoogleドライブ上のGASプロジェクトを操作できるようになります。また、事前にGoogle Apps Scriptの設定画面(ブラウザ)で「Google Apps Script API」をオンにしておく必要がある点に注意してください。これがオフになっていると、claspからの操作が拒否されてしまいます。これらの準備が整って初めて、プロフェッショナルな開発環境の土台が完成します。

プロジェクトの管理:clone、create、push、pullの基本操作

claspの導入後、最初に行うのはプロジェクトの準備です。既存のGASプロジェクトをローカルに持ってきたい場合は、スクリプトID(URLに含まれるID)を指定して clasp clone <スクリプトID> を実行します。これにより、サーバー上のコードがローカルにダウンロードされます。新規にプロジェクトを作成したい場合は、clasp create コマンドを使用します。対話形式でスプレッドシートやドキュメント、スタンドアロンなどのタイプを選択でき、自動的にGoogleドライブ上にファイルが生成されます。

開発の基本サイクルは、ローカルでコードを編集し、clasp push でサーバーへアップロード、そしてブラウザ上で実行確認という流れになります。逆に、ブラウザ側でトリガーの設定変更などを行った場合は、clasp pull でその変更をローカルに取り込みます。注意点として、GASのファイルはGoogleのサーバー上では特別な形式で保存されていますが、ローカルでは.jsや.tsファイルとして扱われます。claspはこの変換を自動的に行ってくれますが、不用意にpushするとサーバー上のコードを完全に上書きしてしまうため、チーム開発では後述するGitとの併用が必須となります。

TypeScriptの導入:型安全性によるバグの未然防止

ローカル開発環境を構築する最大のメリットの一つが、「TypeScript」を導入できることです。GASの標準言語はJavaScript(V8ランタイム)ですが、JavaScriptは動的型付け言語であるため、実行するまで変数の型(数値なのか文字列なのか等)の不整合によるエラーが判明しにくいという課題があります。TypeScriptはJavaScriptに「型」の概念を導入したスーパーセットであり、コードを書いている段階で型のエラーを検知できます。

GAS開発にTypeScriptを導入するには、npm install -D typescript @types/google-apps-script コマンドを実行し、必要なパッケージとGASの型定義ファイルをインストールします。これにより、SpreadsheetAppやGmailAppといったGAS固有のクラスやメソッドに対しても、エディタ上で強力な入力補完と型チェックが効くようになります。例えば、getRangeメソッドに誤った引数を渡そうとすると、その場で赤い波線が表示され警告してくれます。TypeScriptで記述されたコード(.tsファイル)は、そのままではGASで動作しないため、claspでアップロードする前にJavaScript(.jsファイル)に変換(コンパイル)する工程が必要ですが、この一手間によって劇的にバグを減らし、コードの品質を高めることができます。

ディレクトリ構成の最適化:ソースコードとビルド成果物の分離

TypeScriptやモダンな開発手法を取り入れる場合、プロジェクトのディレクトリ構成(フォルダ構造)を整理することが重要です。一般的には、開発者が編集するTypeScriptファイルなどを「src」フォルダに配置し、コンパイルによって生成されたJavaScriptファイルを「dist」フォルダに出力するという構成が取られます。

claspの設定ファイルである .clasp.json に “rootDir”: “dist” という設定を追加することで、clasp push を実行した際に、distフォルダの中身だけをGASサーバーにアップロードするように制御できます。これにより、開発用の設定ファイルやReadme、TypeScriptのソースコード自体がGAS環境に混入することを防げます。また、Gitで管理する際も、自動生成されるdistフォルダは無視(gitignore)し、人間が書いたsrcフォルダのみを管理対象とすることで、リポジトリをクリーンに保つことができます。このようにディレクトリの役割を明確に分けることは、混乱のない開発現場を維持するための定石です。

リンターとフォーマッター:ESLintとPrettierによるコード品質の統一

自分以外の開発者、あるいは未来の自分がコードを読んだ時に、書き方がバラバラで読みづらいという状況を防ぐために、「リンター」と「フォーマッター」を導入します。リンター(ESLintなど)は、コードの潜在的なエラーや、推奨されない書き方(未使用の変数や、varの使用など)を自動的に検出し、警告を出してくれるツールです。フォーマッター(Prettierなど)は、インデントの数やセミコロンの有無、改行の位置などの「見た目」を自動的に整えてくれるツールです。

これらを導入し、VS Codeなどのエディタと連携させることで、ファイルを保存した瞬間に自動的にコードが整形され、構文エラーが修正される環境を作ることができます。チーム開発においては、これらの設定ファイルを共有することで、誰が書いても同じ品質、同じスタイルのコードが出力されるようになります。コードレビューの際に「インデントがずれている」「スペースが足りない」といった本質的でない指摘をする必要がなくなり、ロジックの確認に集中できるようになるため、開発効率が大幅に向上します。

Gitによるバージョン管理:変更履歴の追跡と安全なロールバック

せん。そこで、ソフトウェア開発の標準である「Git」を使用します。Gitを使えば、「いつ」「誰が」「なぜ」「どの行を」変更したのかを完全に記録できます。

ローカル環境で git init を実行し、コードの変更をコミット(記録)していきます。機能追加やバグ修正を行う際は、メインの履歴から「ブランチ(枝)」を切って作業を行い、完成したらメインに統合するというフローをとることで、安定して動いているコードを壊すことなく安全に開発を進めることができます。もし新しい変更でバグが発生しても、Gitがあれば直前のコミットの状態へ瞬時に戻す(ロールバック)ことが可能です。GAS開発を「野良スクリプト」ではなく「管理されたソフトウェア」として扱うために、Gitによるバージョン管理は必須のスキルです。

GitHubを用いたチーム開発フローとプルリクエストの活用

Gitで管理したコード履歴をクラウド上で共有・管理するサービスが「GitHub」です。チームでGAS開発を行う場合、GitHubを中心とした開発フローを構築します。開発者はGitHubにあるリポジトリ(コードの保管場所)からコードをローカルにダウンロードし、修正を加えたらGitHubへプッシュします。

ここで重要になるのが「プルリクエスト(PR)」という機能です。開発者が自分の変更をメインのコードに統合したい時、プルリクエストを作成して他のメンバーにレビューを依頼します。レビュアーはGitHub上で変更差分を確認し、コメントで質問や修正依頼を行います。そして、承認が得られて初めてコードが統合されます。このプロセスを経ることで、バグの混入を未然に防ぎ、コードの品質をチーム全体で担保することができます。また、GitHub上でIssue(課題)を管理し、プルリクエストと紐付けることで、プロジェクトの進捗状況も可視化されます。

CI/CDパイプラインへの展望:自動テストとデプロイの自動化

clasp、TypeScript、Git/GitHubを導入した先には、さらなる自動化の世界「CI/CD(継続的インテグレーション/継続的デリバリー)」が待っています。これは、GitHubにコードがプッシュされたタイミングで、自動的にテストを実行したり、GASへのデプロイを行ったりする仕組みのことです。

例えば、GitHub Actionsという機能を使えば、「mainブランチにコードが統合されたら、自動的に npm run test を実行してバグがないかチェックし、問題なければ clasp push を実行してGASの本番環境に反映させる」といったパイプラインを構築できます。これにより、手動でのデプロイ作業によるミスをなくし、常に最新で品質の保証されたコードが稼働している状態を維持できます。また、開発環境用と本番環境用のGASプロジェクトを分け、設定ファイルを切り替えてデプロイするといった高度な運用も自動化可能です。市民開発者の域を超え、エンジニアリングとしてのGAS開発を極める旅は、このCI/CDの構築へと続いていきます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次