😎

GASでnpmのライブラリを使用したり、TypeScriptでローカル開発をする方法

2024/11/24に公開

はじめに

個人的にGASでLINE BOTを動かす機会があり、その際に少し勉強をしたため、ここにまとめる。

また、GASでの開発環境を自分なりに簡単に作成し、用意したので是非使っていただきたいです。

なお、この記事はこちらの記事を参考にさせてもらいました。ただし、自分の場合はなぜかesbuildがうまく使用できなかったため、バンドラはrollupを使用しています。

esbuildはgo言語で書かれていて、非常に高速なビルドができるので、基本的にはesbuildの方が優れているに決まっています。なので、自分のように、そちらの参考記事で上手くいかなくてどうしようってなってる人が、私の用意した開発環境を使用してみてください。

そちらの参考記事の方が絶対優れているはずなので笑

開発環境構築の手順

  1. まず、このリポジトリをクローンをする。

    git clone https://github.com/show-creater/GAS_development_environment.git
    
  2. cd GAS_development_environment
    

    を実行してプロジェクトルートへ行き、

    npm install
    

    を実行して、パッケージをインストールする。

  3. claspと自分のgoogleアカウントを紐付けるために、

    clasp login
    

    を実行する。

    すると、サイトが立ち上がり、googleアカウントのログインをさせられると思う。

  4. ログインしたgoogleアカウント内でGASのプロジェクトを作成する。

  5. 作成した新規スクリプトの左のメニューから「概要」を押し、遷移先のページのURLを確認する。

    https://script.google.com/home/projects/hogehogehoge
    

    のような感じになっていると思うが、hogehogehogeの部分をメモしておく。

    (もし、末尾に ?hl=ja みたいなものがついていた場合、それは除いてほしい)

  6. 先ほどメモした文字列を.clasp.jsonのscriptIdの部分に貼り付ける。

    貼り付けたら以下のような感じになる。

    .clasp.json
    {
       "scriptId": "hogehogehoge",
       "rootDir": "./dist"
    }
    
  7. これで初期設定は完了しているはずであるため、あとはpushができるかをテストする。

    npm run deploy
    

    を実行してpushをしてみる。(このコマンドはビルドとpushを同時に行うカスタムコマンドである。)

もしできなかった場合

  1. gasのスクリプトの画面の一番左上のApps Scriptというアイコンを押し、自分のプロジェクト一覧画面にいく。

  2. 左下の「設定」を押し、Google Apps Script APIをオンにする。

これで正常にプッシュができる(はず)

開発方法について

基本的にはsrc直下にファイルやディレクトリを作成して開発をしていくことになる。
また、最終的には全てindex.tsに集約する形で設計をする必要がある。

注意点

このような方法を用いてローカルで開発をする場合、ローカルで書いたコードはGAS上の1スクリプトに集約される。そのため、GASのスクリプトを直接いじって開発をしたい人はやめた方がいいかもしれない。

また、ローカルでテストができないのが少し難点。

使用技術について

今回ローカル環境での開発を可能にしているのは、clasp(Command Line Apps Script Projects)というもので、これがかなり優秀。
これにより、gasでのチーム開発等も容易に行うことができる。

また、バンドラはrollupというものを使用している。(esbuildで苦戦してなぜか上手くいかなかったので仕方なくバンドラだけ変更しました。esbuildで上手くいった人はesbuildでやるべきです)

この開発環境では、メイン関数をindex.tsにおき、index.tsをビルドし、そのビルドしたファイルをdist内のindex.jsに出力する。この時、バンドラを使用して、インポートファイルのソースを全てindex.jsに書き出し、出力をしているため、結局pushするファイルはindex.jsのみとなっている。
これはもちろんライブラリでも同じことが言え、ライブラリをインポートしたindex.tsをpushするとライブラリのソースコードもrollupによってindex.jsに全て書き出され、もちろん何万行のコードとかになってもおかしくない。そのため、gasのスクリプトを直接いじって開発をしたい人には向いていない。(直接いじりたい人がいるのかはよく分からないが)

Discussion