はじめに

なにやら世の中には「VSCode」という素晴らしいものがあることを今更知った。orz
なんだか、TypeScriptで書けて、JavaScriptに変換までしてくれるらしいのですが！？
GASでこういう↓ものを作成したので、だったら「VSCode」で書けないのかしらん？
スプレッドシートをDB代わりにGASのWebアプリを作成しデータ更新させてみた。Vue版その１～～
ということで調べ、まとめてみました。
「間違ってるぞ。」「動かないぞ。」というときは優しくご指摘くださいm(_'_)m

参考にさせていただいたサイト

・【Google Apps Script】claspを使ってローカル環境で開発する
　　こちら↑を見ればできます。

わからないこと

Googleのアカウントを複数持っていた場合の挙動

インストールと設定手順

No	対象	設定方法
1	VSCode	こちらからWindows用インストーラをダウンロードしてexeを起動する。インストール後、VSCodeは閉じておく（念のため）
2	Node.js	こちらからWindows Installerを選択してダウンロード。msiファイルを実行する。
3	clasp	コマンドプロンプトを管理者で起動する。「npm install @google/clasp -g」を実行する。
4	GoogleAPI	Googleに任意のアカウントでログインしておきます。そして、こちらでAPIをオンに変更します。

これで下準備は完了です。

まっさらでVSCodeから始める場合

※スプレッドシートの作成から・・・

No	やること
1	ローカルパソコンでソースなどを保存する用のフォルダを作成しておく。フォルダの名称でスプレッドシートのファイル名が作成されるようなので、ちょっと注意。
2	VSCodeを起動する。
3	VSCode内で、ファイル＞フォルダを開く　で上記のフォルダを開く。
4	ターミナル＞ターミナルを開く　でターミナルを表示する。
5	ターミナルに、「clasp login」と入力しエンター。
6	ブラウザが開きアカウント選択⇒スマホに連絡が来たので許可などする。
7	ブラウザを閉じてVSCodeに戻る
8	ターミナルに「clasp create --rootDir ./src」と入力し、エンター。
9	上下キーでsheetsを選択⇒エンター。
10	すると、vsCodeで選択していたフォルダの名前でスプレッドシートのファイルが作成される。
11	左側の階層で「src」で右クリックをして「New File」を選択する。
12	ファイル名は、なんでもいいが、拡張子は「.ts」にする。
13	作成したファイルにfunction test() { console.log('test') } と書いてみる。
14	ターミナルに「clasp push」と入力しエンター。するとGAS側に反映される。
15	ターミナルに「clasp open」と入力しエンター。するとブラウザが起動しスクリプトのエディタ画面が表示され、上記のソースが確認できる。
16	確認できない場合は、F5を押すなりしてリフレッシュさせると更新が確認できるはず。
※「.ts」が「.gs」になったりと臨機応変にやってくれているようです。

GASは存在していてVSCodeでこれから書いてみようとする場合

No	やること
1	ローカルパソコンでソースなどを保存する用のフォルダを作成しておく。
2	VSCodeを起動する。
3	VSCode内で、ファイル＞フォルダを開く　で上記のフォルダを開く。
4	ターミナル＞ターミナルを開く　でターミナルを表示する。
5	ブラウザを開き、Googleにログインする。
6	GASのあるスプレッドシートを開く。
7	ファイル＞プロジェクトのプロパティ　から、「スクリプトID」をメモる（コピる）
8	VSCodeに戻る。
9	ターミナルに「clasp clone xxxxxxxxxxxxxxx」と入力しエンター。「xxxxxxxx」は前の「スクリプトID」を入力する。
10	すると、ファイル類が出来上がる。
11	※しかし、新規に作成したような「src」フォルダは作成されない。

そのあとの使い方（たぶん共通）

やること
その後は、Loginしなくても、スクリプトIDは入れなくても以降の処理はできる。
ターミナルに「clasp pull」と入力しエンターでGAS側から引っ張ってこれる。
ブラウザ側でのファイルのrenameは、vscodeでpullすると新しいファイルとして認識される模様。
vscode側でのファイルのrename後に、vscodeでpushするとファイル名が変わったように認識される模様。（※delete⇒insertなのかぁ）
ターミナルで「npm init --y」「npm i @types/google-apps-script --save-dev」を実行しておくと便利らしい。

拡張機能を入れると便利

・VSCode に必ず入れておきたい拡張機能
　　簡単に拡張できてすごく便利ですね

入れてみました。

感想

プッシュする際に毎回「clasp push」と打つのが面倒に感じますね。
十字キーを使えばいいんでしょうが、なんかそれも何度もだと面倒に感じて・・・
ボタンがあったらうれしいのになぁ。

でも、見やすくなっていい感じ。

でわでわ。