Google App ScriptをVScode+Typescriptで書く時の環境構築法

作成日：2022年2月26日

どういう記事か

この記事では、Google App Script(以下GAS)をVScodeとtypescriptで開発をする際の環境構築の手順を示します。なおnpmは既にインストールされており、claspとtypescriptはグローバルでインストール済みの状況で実行するので、上記のインストールに関しての言及はありません。

実行環境

windows10
npm: 8.3.1
VScode: 1.64.2

npmには以下のパッケージがグローバルでインストールされています。

google/clasp@2.4.1
typescript@4.5.5

環境構築

この記事ではデスクトップにtestというフォルダを置き、その中にプロジェクトを作成します。

step1: npmプロジェクトの作成

npm initしてpackage.jsonを生成します。色々聞かれるので適当に設定します(この段階でentory pointはindex.tsとかにしておくと後から楽ですね)。後から編集できるので、適当で良い気がします(しらんけど)。

step2: app scriptの型情報のインストール

npm i -S @types/google-apps-scriptします。

step3: claspでapp scriptのプロジェクトを作成 or clone

今回は新規でapp scriptのプロジェクトを作成します。testディレクトリにて
clasp createします。どのタイプのスクリプを作成するのか聞かれるので、今回はsheetsを選びました。

cloneするはclasp clone <project ID>で、appscript.jsonと関連するコードが引っ張ってこられるので同じファイル構成になると思います。

step4: スクリプトの作成

index.tsをtestディレクトリに作成し、package.jsonのentory pointをindex.tsに変えておきます。
ここでは適当に以下のようなものを入れておきます。

index.ts

function greet() {
  Logger.log("hello world");
}

VScodeの自動補完について

この段階で自動補完が効くこともあれば、効かないこともあります。詳しいところまでは調べていませんが、VScodeが開いているフォルダがpackage.jsonのルートディレクトリでない場合、出ないのかなと思っています。
プロジェクトのルートディレクトリでVScodeを開きたくない場合、package.jsonと同じフォルダにjsconfig.jsonを作成し、以下の内容を記述することで、自動補完が効くことがあります。jsconfig.jsonを作成しても自動補完が効かなかったり、jsconfig.jsonの方にエラーが出る場合、VScodeを再起動するとエラーが治ることがありました。target等はお好みで変更してください。

jsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2020",
    "jsx": "preserve",
    "strictFunctionTypes": true
  },
  "include": [
    "node_modules/@types/google-apps-script"
  ]
}

jsconfig.jsonに関して詳しくは以下を参照してください。

step5: コードのpush

現在のファイル構成はこんな感じです。

ここでclasp pushすると、appscript.jsonとindex.tsをapp script側に送ってくれて、実行することが出来るようになります。index.tsはこの時にトランスパイルされます。

以上です。