Google Apps Scriptローカル開発環境構築ガイド（全4回）【第4回】TypeScript型定義の導入でVS Codeのコード自動補完を極める

当記事の作成にはAIアシスタントを使用しています。
誤った情報が含まれることもありますのでご了承ください。

【第4回】TypeScript型定義の導入でVS Codeのコード自動補完を極める

前回の第3回では、claspを用いた実践的な同期ワークフローを解説しました。clasp push や clasp pull の正しい扱い方に加え、ファイルを保存した瞬間にGoogleクラウドへ全自動でコードが同期される clasp push --watch とVS Codeの自動保存設定を組み合わせた、圧倒的に快適な開発ループを体験していただけたはずです。

しかし、VS CodeでGAS（Google Apps Script）を開発する魅力は、単に「ローカルでコードを保存・同期できる」ことだけにとどまりません。

VS Codeを真の「最強の開発環境」へと進化させるもうひとつの強力な武器、それが「TypeScript型定義（Type Definitions）の導入による爆速コード自動補完（IntelliSense）」です。

連載の第4回となる本記事では、「GAS固有のオブジェクトやメソッドに関する補完・型チェックをVS Code上に組み込み、公式ドキュメントを往復する無駄な時間をゼロにする環境を作ること」をゴールとして進めていきます。

具体的には、以下のステップで解説・構築を行っていきます。

GAS開発における型定義の重要性：なぜ標準のVS Codeのままでは不十分なのか、型定義が開発効率に与える決定的な影響を解き明かします。
@types/google-apps-script の概要とインストール：npmを使って、Google公式のGAS型定義パッケージをプロジェクトへ導入します。
VS Codeでの自動補完（IntelliSense）体験：SpreadsheetApp や GmailApp などの主要サービスを打ち込み、ドットひとつでメソッドや引数がずらりと補完される快適さを実感します。
JSファイルとTSファイルそれぞれでの活用テクニック：JavaScript（.js）のままJSDocを使って補完を効かせる方法と、TypeScript（.ts）で厳格に型管理を行う方法の両方をマスターします。

「あのメソッドの引数の順番、なんだっけ？」「getValues() だったか getValue() だったか...」とブラウザで検索を繰り返していた日々は、今日で終わりです。

VS Codeの補完機能を極め、ストレスフリーで圧倒的な開発スピードを手に入れましょう！

なぜGAS開発に「型定義」が必要なのか？

ブラウザ版GASエディタとVS Code（標準状態）の補完の限界

ブラウザ版のGASエディタ（Web UI）も、近年アップデートが行われ、コードを入力する際に多少の自動補完が表示されるようになりました。しかし、Web UI上の補完機能は決して万能ではなく、複雑なオブジェクト構造に入り込むと補完が途切れたり、メソッドの詳細な引数の説明や戻り値の型までを正確にナビゲートしてくれない場面が多々あります。

一方で、第2回・第3回を経て導入したVS Codeですが、実は「インストールした直後の標準状態」のままでは、GASの開発において大きな課題を抱えています。

標準状態のVS Codeは、通常のJavaScript（Webブラウザ用やNode.js用）の文法は理解していますが、「Google Apps Script固有のオブジェクト（SpreadsheetApp、GmailApp、DriveApp など）」に関する情報を一切持っていません。

その結果、標準状態のVS CodeでGASのコードを書こうとすると、以下のような問題が発生します。

補完が効かない：SpreadsheetApp. と入力しても、その先にどんなメソッドが存在するのかリストが表示されない。
誤検知のエラー表示：VS Code側が SpreadsheetApp を「定義されていない未知のグローバル変数」と判断し、コード上に警告（赤波線や黄色波線）を出してしまうことがある。
スペルミスに気づけない：メソッド名をタイポ（打ち間違い）していても、コード実行（または clasp push 後にGAS側で動かす）までエラーに気づけない。

VS Codeという世界最高峰のエディタのポテンシャルを100%引き出すためには、エディタに対して「GASにはこういうオブジェクトがあって、こういうメソッドや引数が存在するんだよ」という辞書データを教えてあげる必要があります。この辞書データこそが「型定義ファイル」です。

型定義（Type Definitions）がもたらす3つの開発革命

型定義ファイルをプロジェクトに導入すると、VS Codeの言語解析エンジン（IntelliSense）が即座にその内容を読み込みます。これにより、あなたの開発環境に以下の3つの「開発革命」がもたらされます。

1. タイポ（スペルミス）の即時検知と撲滅
- プログラミングにおけるエラーの原因で最も多いのが、大文字・小文字の間違いや単複形のミス（例：getValue() と getValues() の押し間違え、getRange() を getrange() と書いてしまう等）です。
- 型定義が導入されていれば、存在しないメソッドを書いた瞬間にVS Codeがリアルタイムで赤波線を出し、「そのメソッドは存在しません」と教えてくれます。実行前にバグを100%潰せるようになります。
2. 公式リファレンス（Webドキュメント）との往復がゼロになる
- これまでは「このメソッドの第2引数は行数だっけ？列数だっけ？」「戻り値は配列で返ってくるんだっけ？」を確認するために、何度もGoogleの公式ドキュメント（Webサイト）を開いて調べる必要がありました。
- 型定義を導入すると、コード上にマウスカーソルをホバーするだけで、メソッドの役割、各引数の意味、戻り値の型、さらにはGoogle公式の説明コメントが小さなウィンドウで表示されます。画面を行き来する無駄な時間が完全にゼロになります。
3. ドット（.）を打つだけの爆速コード自動補完
- SpreadsheetApp. と打ち込んだ瞬間に、利用可能なすべての操作（getActiveSpreadsheet(), openById() など）がアルファベット順でずらりとリスト表示されます。
- 候補を選んで Tab キーや Enter キーを押すだけでコードが自動入力されるため、タイピングの速度が劇的に向上します。

JavaScript派とTypeScript派の双方にメリットがある理由

「型定義」と聞くと、「本格的なTypeScript（TS）の文法を勉強して、コードをTSで書かなければ恩恵を受けられないのではないか？」と不安に思う方がいるかもしれません。

しかし、結論から言うとその心配はまったく無用です。

型定義ファイルの導入は、コードを通常のJavaScript（.js）で書く人にも、TypeScript（.ts）で書く人にも、双方にとって絶大なメリットをもたらします。

それぞれの開発スタイルにおけるメリットを比較してみましょう。

JavaScript（.js ファイル）で開発する場合のメリット
- 学習コストゼロで恩恵を受けられる：TypeScriptの難しい文法（インターフェースやジェネリクスなど）を覚える必要は一切ありません。これまで通りのJavaScriptコードを書くだけで、VS Codeが裏側で型定義を参照し、強力な自動補完とホバーヘルプ機能を提供してくれます。
- JSDocとの連携：後述する「JSDoc」という特殊なコメントを1行添えるだけで、自分で作った独自の関数や変数に対しても完璧な型補完を効かせることができるようになります。
TypeScript（.ts ファイル）で開発する場合のメリット
- 厳格な型チェックによる高度な安全性：変数に入る値の型（数値、文字列、Rangeオブジェクト等）を厳しくチェックし、不整合があればコンパイル（送信）前に厳重にブロックしてくれます。
- リファクタリングの容易さ：大規模なスクリプトで関数の仕様変更や変数名の変更を行った際、影響のあるすべての箇所をVS Codeが自動で検出・一括修正してくれます。

つまり、型定義ファイルの導入は、開発言語の選択に関わらず「導入しない理由が存在しない」、ノーリスク・ハイリターンな環境強化施策なのです。

次章では、この強力な型定義データである @types/google-apps-script を、実際にあなたのプロジェクトへインストールする手順を見ていきましょう！

npmを使用した型定義パッケージのインストール

公式型定義パッケージ `@types/google-apps-script` とは？

VS CodeにGoogle Apps Script（GAS）の各種オブジェクトやメソッドを理解させるための「辞書データ」を提供するのが、@types/google-apps-script という公式型定義パッケージです。

このパッケージは、TypeScriptコミュニティが有志で維持管理している巨大な型定義リポジトリ「DefinitelyTyped」の一部であり、Google Apps Scriptで提供されているあらゆる組み込みサービスやAPIの型情報が網羅されています。

具体的には、以下のような広大なGASの機能を完全にカバーしています。

標準スクリプトサービス：SpreadsheetApp（スプレッドシート）、GmailApp（Gmail）、DriveApp（Googleドライブ）、CalendarApp（カレンダー）、DocumentApp（ドキュメント）、FormApp（フォーム）など
ユーティリティ・基盤サービス：PropertiesService（プロパティ関連）、Utilities（Base64変換や日付フォーマット）、UrlFetchApp（外部API通信）、CacheService（キャッシュ制御）など
イベントオブジェクト型：onEdit(e) や doGet(e) / doPost(e) の引数 e に渡されるイベントオブジェクトの内部構造定義

このパッケージをプロジェクト内に取り込むだけで、VS Codeは「GASで利用可能な全オブジェクトの完全な見取り図」を手に入れることになります。

なお、このパッケージは「VS Code（ローカルのPC）がコードを解析・補完するためだけに使う開発ツール」です。実際にGASへ送信されるコード本体に組み込まれたり、プログラムの実行サイズを増やしたりすることは一切ありません。そのため、Node.js（npm）の管理上は「開発用依存関係（devDependencies）」として導入します。

開発用依存関係（`-D` / `--save-dev`）としてのインストール手順

それでは、VS Codeのターミナルを使用して @types/google-apps-script をプロジェクトへインストールしましょう。

VS Codeでプロジェクトフォルダを開く 第2回・第3回で構築したclaspプロジェクトのフォルダをVS Codeで開いていることを確認します。
ターミナルの起動 Ctrl + Shift + @（Macは Cmd + @）を押して内蔵ターミナルを開きます。
npmの初期化（package.json が未存在の場合のみ） もし作業フォルダ内にまだ package.json が存在しない場合は、まず以下のコマンドを実行してNode.jsのプロジェクト管理ファイルを生成します。

npm init -y

実行すると、フォルダ直下にデフォルト設定の package.json が即座に作成されます。

型定義パッケージのインストールコマンド実行 ターミナルに以下のコマンドを入力して Enter キーを押します。

npm install -D @types/google-apps-script

ここで付与している -D オプション（または --save-dev）は、「このパッケージは本番用コードではなく、開発作業時のみ使用するツールです」とnpmに宣言するための重要なフラグです。

コマンドを実行すると、npmがインターネット上から最新の型定義データをダウンロードし、数秒でインストールが完了します。

処理完了後、package.json を開いてみてください。以下のように devDependencies（開発用依存関係）の項目内にパッケージ名とバージョン情報が自動追記されていれば成功です。

{
  "devDependencies": {
    "@types/google-apps-script": "^1.0.0"
  }
}

また、この操作によってプロジェクト直下に node_modules というフォルダと package-lock.json が生成されます。node_modules の中にはダウンロードされた膨大な型定義データが格納されていますが、これらはGASへ送信（push）する必要のないローカル専用ファイルです。第3回で作成した .claspignore や .gitignore に node_modules が含まれていることを改めて確認しておくと安心です。

`tsconfig.json` または `jsconfig.json` の設定と最適化

型定義パッケージのインストールが完了すると、VS Codeは自動的に node_modules 内の型情報を検知し始めます。しかし、VS Codeに対して「どの型定義を優先して読み込むか」「どのようにプロジェクト全体を解析するか」を明示的に指示し、自動補完の精度を極限まで高めるために、設定ファイルをひとつ配置しておきましょう。

使用している言語（TypeScriptかJavaScriptか）に応じて、配置する設定ファイルが異なります。

TypeScript（.ts ファイル）で開発する場合：tsconfig.json</strong> プロジェクトのルート直下に tsconfig.json というファイルを新規作成し、以下の内容を記述します。

{
  "compilerOptions": {
    "target": "ES2019",
    "moduleResolution": "node",
    "types": ["google-apps-script"],
    "strict": true,
    "noImplicitAny": false
  },
  "include": ["src/**/*"]
}

JavaScript（.js ファイル）で開発する場合：jsconfig.json</strong> プロジェクトのルート直下に jsconfig.json というファイルを新規作成し、以下の内容を記述します。

{
  "compilerOptions": {
    "target": "ES2019",
    "moduleResolution": "node",
    "types": ["google-apps-script"],
    "checkJs": true
  },
  "include": ["src/**/*"]
}

設定ファイルの重要ポイント
- types 指定："types": ["google-apps-script"] と明記することで、Node.jsなどの関係ない型定義との干渉を防ぎ、GAS固有の型情報のみを確実にVS Codeに読み込ませます。
- checkJs: true（JavaScriptの場合）：.js ファイル内であっても、VS Codeがバックグラウンドで型チェックを行い、文法ミスや存在しないメソッドの呼び出しに対して警告を出してくれるように設定します。
- target 指定：現代のGAS実行エンジン（V8）に対応するECMAScriptバージョン（ES2019 や ES2020）を指定します。

この設定ファイルを1枚置くだけで、VS Codeの言語サーバー（TS/JS Language Server）がプロジェクトの構造を完全に把握し、完璧な自動補完環境がセットアップされます。

感動の書き心地！VS Codeにおける強力なコード自動補完（IntelliSense）の実践

補完機能（IntelliSense）の具体的な動作と見方

環境設定が完了したら、いよいよ実際のコード記述でVS Codeの強力な自動補完機能「IntelliSense（インテリセンス）」の感動的な書き心地を体験してみましょう。

VS Codeで src/main.js（または src/main.ts）を開き、エディタ上で SpreadsheetApp. と入力してみてください。ドットを入力したその瞬間に、画面上に滑らかなドロップダウンリスト（補完候補一覧）が立ち上がります。

この補完ウィンドウが表示されたら、表示されている記号や情報に注目してみましょう。

アイコンの意味
- 紫色のキューブアイコン：実行可能な「メソッド（関数）」を表します。
- 青色のレンチやブロックアイコン：参照可能な「プロパティ（属性）」や「定数」を表します。
引数ヒント（シグネチャヘルプ）
- 候補の中から例えば getRange を選択すると、getRange(row, column, numRows, numColumns) のように、そのメソッドが受け取る引数の型と順序がポップアップで視覚的に表示されます。
JSDocドキュメントホバー
- 選択中のメソッドの横には、Google公式の仕様書から抽出された英語・日本語の説明文が表示されます。「このメソッドは何をするものか」「どのような値を返すのか」がエディタから一歩も出ずに理解できます。

候補の選択は、キーボードの上下矢印キー（↑ / ↓）で移動し、Tab キーまたは Enter キーを押すだけで確定できます。長いメソッド名を手動でタイプする必要はもうありません。

主要サービスでの補完事例（SpreadsheetApp, GmailApp, DriveApp）

具体的にGASの代表的なサービスでどのような補完と型チェックが効くのか、いくつかの実践的なコード例を通して確認してみましょう。

事例1：SpreadsheetAppでのメソッドチェーン補完 スプレッドシート操作で最もよく使われる「アクティブなシートの特定の範囲から値を取得する」処理を書いてみます。

function processSheetData() {
  // 「SpreadsheetApp.」と打つと getActiveSpreadsheet() が補完される
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  
  // 「ss.」と打つと Spreadsheet オブジェクト独自のメソッド群が補完される
  const sheet = ss.getActiveSheet();
  
  // 「sheet.」と打つと Range を取得するメソッド群（getRange等）が表示される
  const range = sheet.getRange(1, 1, 10, 2);
  
  // 「range.」と打つと Range オブジェクト独自の getValues() などが完璧に補完される
  const values = range.getValues();
}

変数を経由していくたびに、VS Codeはその変数が「スプレッドシートなのか」「シートなのか」「セル範囲（Range）なのか」を正しく追跡し続け、それぞれの型に応じた正しいメソッドだけを厳選して候補に出してくれます。

事例2：GmailAppでのメール送信とオプション補完 Gmail自動送信スクリプトを作成する際も、引数の渡し間違いを防ぐことができます。

function sendNotificationEmail() {
  const recipient = "user@example.com";
  const subject = "日次レポート送付";
  const body = "本日のレポートをお送りします。";

  // GmailApp.sendEmail と打つと、複数存在するオーバーロード（引数の組み合わせパターン）がすべて表示される
  GmailApp.sendEmail(recipient, subject, body, {
    name: "自動配信システム",
    noReply: true
  });
}

第4引数に渡すオプションオブジェクト（{ name, noReply, cc, bcc, htmlBody } など）内部のキー名までもが自動補完の対象となるため、オプション名をブラウザで調べる必要がなくなります。

事例3：DriveAppやCalendarAppでの強力な列挙型（Enum）補完 権限設定や検索条件で用いられる「列挙型（Enum）」の入力も非常にスマートになります。例えばドライブでファイル共有権限を設定する際、DriveApp.Access. と入力するだけで、利用可能なアクセス権限一覧（ANYONE、DOMAIN など）が補完されます。

JSDocを活用した独自関数・変数の型補完（.jsファイルでの活用）

@types/google-apps-script はGAS標準の機能だけでなく、「あなたが自分で書いた自作の関数や変数」に対する補完精度も劇的に引き上げてくれます。

特にJavaScript（.js ファイル）で開発を行う場合、関数の上に JSDoc（ジェイエスドック） と呼ばれる特別な形式のコメントを書き添えることで、VS Codeに対して独自の型情報を伝えることができます。

具体的な書き方を見てみましょう。

/**
 * 指定されたスプレッドシートのRangeから、2次元配列のデータを取得して処理する関数
 * @param {GoogleAppsScript.Spreadsheet.Range} targetRange - 処理対象のセル範囲
 * @param {string} prefix - データ先頭に付与する文字列
 * @return {string[]} 処理された結果の文字列配列
 */
function formatRangeData(targetRange, prefix) {
  // targetRange に対して Range オブジェクトの補完（getValues等）が完全に機能する！
  const rawData = targetRange.getValues();
  
  const result = [];
  // 処理ロジック...
  return result;
}

JSDocコメントのメリット
- 引数の補完：@param {GoogleAppsScript.Spreadsheet.Range} targetRange と書くことで、関数の内部で targetRange. と入力した瞬間に、GASのセル範囲オブジェクトとして補完が効くようになります。
- 呼び出し元での補完：別の場所から formatRangeData( と入力してこの自作関数を呼び出す際、どんな引数をどんな順番で渡すべきか、そして戻り値が何なのかがツールチップで表示されるようになります。

このように、GAS公式の型定義とJSDocコメントを組み合わせることで、JavaScriptの軽快さを維持したまま、大型のプロジェクトでも絶対にバグが発生しない極上の開発環境を構築できます。

次章では、この型定義環境をさらに発展させ、TypeScript（.ts）を用いた本格的な型安全開発の手法と、さらなる便利テクニックを学んでいきましょう！

開発体験をさらに引き上げる環境カスタマイズとコード整形

VS Code設定（settings.json）の最適化で補完レスポンスを爆速化

前章までに型定義パッケージ @types/google-apps-script の導入と、JSDocを活用した型補完の基本をマスターしました。このままでも十分に快適ですが、VS Code自体の設定を少しチューニングするだけで、型補完（IntelliSense）の反応スピードや使い勝手をさらに上の次元へと引き上げることができます。

VS Codeの設定ファイル（.vscode/settings.json またはユーザー設定）に以下の項目を調整・追記してみましょう。

editor.suggestSelection の最適化
- 設定値："first"
- 効果：補完ウィンドウが立ち上がった際、過去の入力履歴に関わらず「型定義に基づいて最も適切な候補（先頭の選択肢）」をデフォルトでハイライトしてくれます。
editor.quickSuggestions の有効化
- 設定値：{"other": true, "comments": false, "strings": true}
- 効果：通常のコード記述中はもちろん、文字列（""）の内部でも即座に補完候補を出してくれます。例えばスプレッドシートのシート名指定やプロパティのキー名入力時にも補完が効くようになります。
editor.parameterHints.enabled のオン
- 設定値：true
- 効果：関数の括弧 () を開いた瞬間に、必要な引数の型と説明が自動でツールチップ表示されるようになります。

これらの設定を組み込むことで、コードを入力する思考スピードにエディタが遅れることなく追随し、打ち間違いやドキュメント確認のストレスを極限まで減らすことが可能です。

Prettier（コードフォーマッタ）の導入と保存時自動整形

型定義によって「意味的なバグ（型の不一致やスペルミス）」を撲滅したら、次にこだわりたいのが「見た目の美しさと可読性」です。どれだけ正しく動くコードであっても、インデント（段落）がズレていたり、シングルクォートとダブルクォートが混在しているコードは可読性を著しく低下させます。

そこで導入したいのが、世界標準のコード整形ツール「Prettier（プリティア）」です。

VS Codeの拡張機能として「Prettier - Code formatter」をインストールし、設定に数行追加するだけで、保存（Ctrl + S / Cmd + S）と同時にコードの見た目を一瞬で完璧に美しく整えてくれるようになります。

おすすめの設定例（.vscode/settings.json）
- "editor.defaultFormatter": "esbenp.prettier-vscode"（標準フォーマッタにPrettierを指定）
- "editor.formatOnSave": true（ファイル保存時に自動でコード整形を実行）
- "prettier.singleQuote": true（文字列の囲み文字をシングルクォート ' に統一）
- "prettier.semi": true（文末のセミコロン ; を自動補完・統一）
- "prettier.tabWidth": 2（インデント幅をスペース2文字に固定）

型定義による自動補完でコードを素早く入力し、適当に改行やスペースを打って保存ショートカットを押せば、Prettierが綺麗なコードへと瞬時に美化してくれる——。

この「型補完 × 自動フォーマット × clasp push（自動同期）」の組み合わせこそが、プロの開発者が実践しているローカルGAS開発の最強セットアップです。

スニペット機能とショートカットキーを駆使した快適入力テクニック

最後に、型補完の恩恵を120%活かすためのキーボード操作とVS Code標準のテクニックを紹介します。これらを指になじませることで、開発効率はさらに倍増します。

JSDocの自動生成ショートカット（/**）
- 自作関数の直上の行で /** と入力して Enter キーを押すと、VS Codeが関数の引数や戻り値を自動解析し、JSDocの雛形（@param や @return）を一瞬で自動生成してくれます。あとは型と説明を少し書き足すだけで完璧なドキュメント付き関数が完成します。
補完ウィンドウの強制呼び出し（Ctrl + Space）
- 万が一、途中で補完ウィンドウが消えてしまった場合や、後からドロップダウンリストを再度表示させたい場合は、Ctrl + Space（Macは Cmd + Space または Ctrl + Space）を押します。どの位置からでも型定義に基づく補完を即座に再起動できます。
型や定義へのジャンプ（F12 / Alt + F12）
- 気になる組み込み関数や自作関数にカーソルを合わせ、F12 キーを押すと「その関数の定義場所（または型定義ファイル内の定義）」へ一瞬でジャンプできます。また、Alt + F12（Macは Option + F12）を押せば、画面を切り替えずにその場で小窓を開いて定義内容を確認（Peek）できます。

型定義を導入したVS Codeは、単なるテキストエディタではなく、あなたのコード記述を強力にバックアップしてくれる賢いアシスタントへと生まれ変わります。これらのカスタマイズとテクニックを取り入れ、最高に洗練された開発環境を体験してください。

【初心者が陥りがちなトラブルとエラー対処】

TypeScriptの型定義を導入した際、設定手順のわずかな漏れやエディタの動作不調によって「なぜか補完が効かない」「エラーメッセージの対処法が分からない」といった問題に直面することがあります。ここでは、初心者が直面しやすいトラブルの原因と、具体的な解決アプローチを分かりやすく解説します。

型定義を入れたのに補完が効かない場合のチェックリスト

npm install も完了し、コードを打ち込んだものの SpreadsheetApp. と入力しても何も候補が出ない場合、以下の4つのチェックポイントを順に確認してください。

チェック1：node_modules フォルダと package.json の存在
- プロジェクトのルート直下に node_modules/@types/google-apps-script フォルダが生成されているか確認します。
- 存在しない場合は、ターミナルで npm install -D @types/google-apps-script を再実行してください。
チェック2：jsconfig.json / tsconfig.json の配置場所と設定記述
- 設定ファイル（jsconfig.json または tsconfig.json）が、src フォルダの中ではなく、必ずプロジェクトのルート（一番上の階層）に配置されているか確認します。
- ファイル内の "include" の指定が ["src/**/*"] や ["**/*"] となっており、作業中のコードファイルが含まれているか確認してください。
チェック3：開いているフォルダの階層（ワークスペース）の間違い
- VS Codeで「プロジェクトの親フォルダ」を開いていると、下層にある jsconfig.json が認識されないことがあります。必ず .clasp.json や package.json が存在するプロジェクト直下のフォルダをVS Codeで開いてください。
チェック4：VS CodeのTypeScript/JavaScript言語サーバーの再起動
- エディタ側の解析エンジンが一時的にフリーズしている可能性があります。
- Ctrl + Shift + P（Macは Cmd + Shift + P）を押してコマンドパレットを開き、TypeScript: Restart TS Server または Developer: Reload Window を選択して再起動を試みてください。

赤波線（型エラー）が出たときの読み方と対応方法

型定義を導入すると、コード上に赤色の波線（エラー）や黄色の波線（警告）が表示されるようになります。これはVS Codeが「文法や型の不整合」を教えてくれているサインです。

赤波線が出たときは、焦らず波線の上にマウスカーソルを合わせ、ポップアップ表示される英作文のメッセージを確認しましょう。

エラーパターンA：Property 'xxx' does not exist on type 'yyy'
- 意味：「yyy というオブジェクトの中に xxx というメソッドやプロパティは存在しません」というエラーです。
- 対応：大半はメソッド名のタイポ（打ち間違い）や大文字・小文字のミス（例：getValue と getValues）です。補完リスト（Ctrl + Space）を呼び出し、正しいスペルに修正しましょう。
エラーパターンB：Argument of type 'string' is not assignable to parameter of type 'number'
- 意味：「数値（number）を渡すべき引数の場所に、文字列（string）を渡しています」という型のミスマッチです。
- 対応：関数の引数に渡しているデータの型を見直します。必要に応じて Number("123") や parseInt() を使って型を変換してください。
エラーパターンC：Cannot find name 'SpreadsheetApp'
- 意味：「SpreadsheetApp という名前の変数・オブジェクトが何なのか認識できていません」という未定義エラーです。
- 対応：型定義パッケージの読み込みに失敗している可能性が高いため、5.1のチェックリスト（特に jsconfig.json の配置と記述）を再確認してください。

型定義ファイルと clasp（.claspignore）の兼ね合い

型定義の導入に伴い、プロジェクト内に node_modules フォルダや package.json、jsconfig.json といったローカル開発用のファイルが多数追加されました。

ここで注意しなければならないのが、「これらのローカル専用ファイルが clasp push でGASプロジェクト側に送信されてしまわないか？」という点です。

不要なファイルがクラウドに送信されるのを防ぐため、第3回で設定した .claspignore の記述内容を改めて確認しておきましょう。

確認・推奨される .claspignore の記述例

# ビルド対象外のローカル専用ファイル・フォルダ
node_modules/
package.json
package-lock.json
tsconfig.json
jsconfig.json
.vscode/
.git/
README.md

このように .claspignore へ node_modules/ や設定ファイル群を明記しておくことで、clasp push 実行時には src フォルダ内の純粋なコードファイル（.js や .ts、appsscript.json）だけが自動的に選別され、GASへクリアに同期されるようになります。

おわりに / 連載の総括

第4回の振り返り

本記事「【第4回】TypeScript型定義の導入でVS Codeのコード自動補完を極める」では、VS Codeの開発体験を飛躍的に向上させる「型定義」の世界を探求してきました。

@types/google-apps-script の導入：GAS固有の巨大なAPI群をVS Codeに認識させ、信頼性の高い「辞書データ」をセットアップしました。
IntelliSense（自動補完）とJSDocの実践：ドットひとつでメソッドや引数が提示される快適さと、自作関数への型付けテクニックを習得しました。
環境カスタマイズとコード美化：VS Codeの設定調整とPrettier連携により、見た目も美しく入力スピードを最大化する環境を整えました。
エラーハンドリング：補完が効かない際のチェックリストや型エラーの読み方を身につけ、トラブルに強い開発力を手に入れました。

公式リファレンスを何度も往復し、スペルミスによる実行時エラーに悩まされていた日々はもう過去のものです。

連載の総括：究極のローカルGAS開発環境の完成

全4回にわたってお届けしてきた「VS Code × GAS」のローカル開発構築ロードマップも、本記事をもって完結となります。ここで改めて、私たちが一緒に作り上げてきた最強の開発環境の全貌を振り返ってみましょう。

【第1回】環境構築の第一歩
Node.jsとVS Codeを導入し、コマンドラインツール clasp をインストール。ローカル開発への扉を開きました。
【第2回】Webエディタからの脱却
GoogleアカウントのAPI認証を完了させ、clasp login や clasp create / clone でローカルとクラウドの架け橋を構築しました。
【第3回】実践的な同期ワークフロー
clasp push / pull による正確なコード同期と、clasp push --watch ＆自動保存機能による「キーボードを叩いた瞬間にクラウドへ反映される」爆速の開発ループを完成させました。
【第4回】型定義と補完機能の極限活用
公式型定義パッケージとJSDocを組み込み、タイポゼロ・ドキュメント確認ゼロの圧倒的にストレスフリーな記述環境を確立しました。

「エディタの使いやすさ」「自動同期のシームレスさ」「型補完による確実性」の3つが揃ったこの環境は、プロの現場でもそのまま通用する究極のローカルGAS開発セットアップです。

次なるステップへ向けて

素晴らしい開発環境は手に入りました。ここから先、この環境をどう活かしていくかはみなさんの自由です。

日々の業務効率化ツールを作成するも良し、スプレッドシートやGmail、Slackなどを連携させた大規模な自動化システムを構築するも良しです。快適になった開発環境が、みなさんの発想とプログラミングの楽しさをどこまでも後押ししてくれるはずです。

もし今後、さらに開発基盤を強化したい場合は、バージョン管理ツール「Git / GitHub」によるコードの履歴管理や、複数のTypeScriptファイルを1つにまとめるバンドラー（WebpackやVite）の導入などに挑戦してみるのもおすすめです。

本連載が、みなさんのGAS開発ライフをより豊かで刺激的なものにするきっかけとなれば幸いです。最後までお読みいただき、本当にありがとうございました！

Steem's CG Developin'

このブログを検索

翻訳（オリジナル）