VSCodeでclaspを使ってGAS上のライブラリをコード補完させる

claspを使っていると、「VSCodeでGAS自体のコード補完はしてくれるけれど、GASのライブラリのコード補完出来たら嬉しいんだけどな〜 :thinking:」となります

同じような処理をまとめて自作ライブラリを作っていたりするので、この悩みは解決したかったんです！

ググっても意外と手順が書いてある記事がなかったのですが、手元で色々試してみたら比較的簡単に実現出来たため、誰かの役に立てばと思い、書いてみました！

## 実行環境
- Visual Studio Code（1.91.1）
- clasp（2.4.2）

## この記事で説明しないこと
それぞれの基本的な部分は割愛しますので、参考になりそうな記事へのリンクを貼ります！

- claspの基礎知識
    - [VS CodeでGASの開発環境を構築する #VSCode - Qiita](https://qiita.com/Lintaro/items/d9633ddd2140202bb438)
    - [claspを使ってGoogle Apps Scriptの開発環境を構築してみた | DevelopersIO](https://dev.classmethod.jp/articles/vscode-clasp-setting/)
- GASのライブラリとは
    - [これだけ読めば全部わかる、Google Apps Scriptライブラリの使い方 #GoogleAppsScript - Qiita](https://qiita.com/shikumiya_hata/items/5e11ff875a9dd050a722)
    - [これだけ読めば全てわかる、Google Apps Scriptライブラリの作り方｜VisionaryBase編集部](https://note.com/visionarybase_2/n/n9bb810d1d1f9)

## 手順
今回は、nepia_infinityさんの大型の便利ライブラリ（ [【GAS】Google Apps Script 活用事例　自作ライブラリを公開しました｜nepia_infinity](https://note.com/nepia_infinity/n/n4320954a3851) ）を例に使用させて頂き、手順を説明していきます！


### 0．GASのプロジェクトを立ち上げ、VSCodeでコードが書ける状態にする
この手順は割愛します :pray: 
↑の参考ドキュメントで手順をご覧ください！

### 1．GASのライブラリをGASに追加する
- ライブラリの追加には2通りの方法があります
    - UIからスクリプトIDを指定してライブラリを追加する方法
    - VSCodeでappsscript.jsonを編集して直接追加する
        - イメージは↓

```json
{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
    "libraries": [
      {
        "userSymbol": "nepia_infinity",
        "version": "131",
        "libraryId": "18rg2maFYXNmPmB2R-8s3UuFG850j5OLw4WBvcOrghzRMlfVbQWDgOVvZ"
      }
    ]
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}
```

### 2．GASのUIから「新しいタブで開く」でライブラリのドキュメントを開く
- 三点リーダーから新しいタブで開きます
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953887/8e6d8708-d7de-f187-ac75-dee378ee2d52.png" width=80% alt="GASのUIでライブラリを選択し、「新しいタブ」というオプションが表示されている">
- すると、ドキュメントが表示されます
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953887/0e6c16f1-11f5-5639-34a4-f7b649adebb2.png" width=80% alt="nepia_infinityさんのライブラリのドキュメントが表示されている">

### 3．ChatGPTにTypeScriptの型定義ファイル(hoge.d.ts)を作ってもらう
- claspでは、d.tsファイルを読み取って、コードの自動補完をしてくれます
- 2で表示されたドキュメントをChatGPTにd.tsに変換してもらいましょう
- プロンプトは `GAS上で動くライブラリの定義書を渡しますので、VSCODEで補完ができるように、TSの型定義ファイルを作ってください。なお、コメント部分も含めるようにしてください。` とかでOKです！そのあとに2の内容を貼って作ってもらいます
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953887/e57cd29b-d50f-2fc6-f9d9-50c051e79342.png" alt="ChatGPTがd.tsファイルを生成している">

### 4．プロジェクトにカスタムライブラリのフォルダを作成し、.claspignoreを設定する
これは必須の手順ではありませんが、このままclasp pushすると、d.tsファイルをgsファイルに変換されたものがGASにpushされてしまいます
もし見た目上それは嬉しくないよという場合にはclaspのignore設定をオススメします！

- プロジェクトにカスタムライブラリのフォルダを作成します
    - 例では名前を `custom_libraries` とします
- VSCodeのプロジェクトディレクトリに `.claspignore` ファイルを新規作成します
    - ファイルの中身はこんな感じで、最終行だけカスタムしてください！

```
# ignore all files…
**/**

# except the extensions…
!appsscript.json
!**/*.gs
!**/*.js
!**/*.ts
!**/*.html

# ignore even valid files if in…
.git/**
node_modules/**
custom_libraries/**   // ←←←ここが大事なポイント！！※このコメントは消してください
```
- プロジェクト内がこんな構成になっていれば、OKです！
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953887/a9921980-de08-2af7-455d-a610c4889094.png"  alt="VSCodeのスクショ。custom_libraries内にd.tsがあり、.claspignoreの内容が赤線で強調されている">

### 5．コード補完が効く！
- 4までが完了すると、準備は完了です！
- d.ts内でdeclareしたライブラリ名前を入力すると、こんな感じで補完してくれます！便利！
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953887/4b117cf2-8614-31e9-7302-e2ca426c4385.png"  alt="NepiaInfinityと打ち込み、ライブラリの関数一覧が補完されている">
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953887/40497ad7-e165-01f1-1ddf-44bbec643520.png"  alt="NepiaInfinity.addImageToSheetと入力すると引数一覧が補完されている">


### 6．（参考）ライブラリを作るときのオススメ
- このようにVSCodeでコード補完をしていくぞという方のなかで、自作ライブラリを使う方にはオススメがあります！
- 引数の型や戻り値の型だけではなく関数自体のヘルプや引数のヘルプをJSDocでしっかり書いておくと、nepia_infinityさんのライブラリのようにとても捗る補完をしてくれるんです
- 自作のライブラリの例ですが、イメージはこんな感じです！

```javascript
/**
 * 【関数ヘルプ】スレのTS（threadTs）を指定するとスレの返信内容をJSON形式で取得できます。内容は、ユーザーとその投稿内容のテキストのみです。
 *
 * @param {String} token - Slackアプリのbot token
 * @param {String} channelId channelのID
 * @param {String} threadTs スレのts。「1715475097.020549」みたいな形式のもの。ピリオドは必要です。
 * @param {boolean} isSingleLine アウトプットを単一行に加工したい場合はTrue。オブジェクトの形式でOKであればFalse。
 * @returns {JSON} スレの中身のJSONデータ、ないしは単一行の出力データ
 */

function slack_makeJsonFromThreadTs(token, channelId, threadTs, isSingleLine) {
    hogehoge
}
```


## 参考ドキュメント
↑に貼ったものも含めて、こちらにまとめます

- claspの基礎知識
    - [VS CodeでGASの開発環境を構築する #VSCode - Qiita](https://qiita.com/Lintaro/items/d9633ddd2140202bb438)
    - [claspを使ってGoogle Apps Scriptの開発環境を構築してみた | DevelopersIO](https://dev.classmethod.jp/articles/vscode-clasp-setting/)
- GASのライブラリとは
    - [これだけ読めば全部わかる、Google Apps Scriptライブラリの使い方 #GoogleAppsScript - Qiita](https://qiita.com/shikumiya_hata/items/5e11ff875a9dd050a722)
    - [これだけ読めば全てわかる、Google Apps Scriptライブラリの作り方｜VisionaryBase編集部](https://note.com/visionarybase_2/n/n9bb810d1d1f9)
- 例に使わせていただいたライブラリ
    -  [【GAS】Google Apps Script 活用事例　自作ライブラリを公開しました｜nepia_infinity](https://note.com/nepia_infinity/n/n4320954a3851) 
- .gitignoreについて
    -  [google/clasp: 🔗 Ignore File (.claspignore) - GitHub](https://github.com/google/clasp?tab=readme-ov-file#ignore-file-claspignore) 
    - [[GAS]claspで特定のフォルダを除外する｜かにみそ.gs](https://note.com/kanimiso_gs/n/n1bf02138142d) 
    - [さかもとのサイト - clasp](https://sites.google.com/view/youuu4/programming/gas/clasp)