はじめに
なにやら世の中には「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」と打つのが面倒に感じますね。
十字キーを使えばいいんでしょうが、なんかそれも何度もだと面倒に感じて・・・
ボタンがあったらうれしいのになぁ。
でも、見やすくなっていい感じ。
でわでわ。