search
LoginSignup
37

More than 1 year has passed since last update.

posted at

updated at

Visual Studio Code で GAS のコードを編集する環境を作ってみた(Windowsだよ)

はじめに

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

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

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

わからないこと

  1. 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 に必ず入れておきたい拡張機能
  簡単に拡張できてすごく便利ですね

入れてみました。
image.png

感想

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

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

でわでわ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
37