ゆるおたノート

Tomorrow is another day.

トップ > JavaScript / Google Apps Script > 【Clasp】ローカルでGASを書く準備 ～コーディングを楽にする～

【Clasp】ローカルでGASを書く準備 ～コーディングを楽にする～

JavaScript / Google Apps Script JacaScript / Google Apps Script-Clasp npm 環境構築 VS Code VS Code-カスタマイズ

プロジェクトやエディタの設定を確認して、楽にコーディングできるよう調整します。

GASにPushしないファイルを設定

プロジェクト内に、README.mdなどの「ClaspでPush出来ないファイル」がある場合に使用します。

特に無い場合は次へ。

.claspignoreの作成

［目標］フォルダ構成

赤字のファイルを作成します。
`.clasp.json`と同じ階層に`.claspignore`を作成する

Bashの場合

  1. ターミナルで.claspignoreを保存したいフォルダに移動

    cd <テキストファイルのあるフォルダ>

    今回の例ではルートフォルダに移動します。

    cd ルート

  2. ファイルを作成

    touch <ファイル名>

    ここで.claspignoreを作成します。

    touch .claspignore

PowerShellの場合

  1. .claspignoreを保存したいフォルダにテキストファイルを作成

    test.txtなど適当な名前でOKです。

  2. エクスプローラを開き、何もない辺りでShift+右クリック

  3. PowerShellウィンドウをここで開くを選択

    「PowerShellウィンドウをここで開く」を選択

  4. ファイル名を変更

    ren <作成したファイル名> <新しいファイル名>

    test.txtを.claspignoreに変更する場合は、こんな感じ。

    ren test.txt .claspignore

pushしないファイルを記入

改めてフォルダ構成を確認

現在のフォルダ構成

除外するファイルを記入

相対パスで記入と思いきや、「ちょっと違う」ので要注意です。

パスの中に*を含めると、ワイルドカードとなります。
例えば、このように書くと「末尾に.mdとつくものすべてを除外する」という意味になります。

*.md

また、文頭に!とつけると「NOTpushしないもの」、つまり「pushするもの」を指します。
ローカル側のスクリプトファイルの拡張子が.jsなので、これらをすべてpushするとしたらこのように書きます。

!src/*.js
例
# 「.js」とつくものは全て対象とする
!src/*.js
 
# 絶対必要！
!src/appsscript.json
 
# フォルダ分けは反映させない
**/**
 
# エラーになるので「Git関係のファイル」はすべて除外する
./.git

ローカルで編集しやすくする

GASの独自文法・用語をエディタに反映する

このままでもコーディング自体は可能ですが、ローカルエディタはGAS独自の文法を認識できないので色々と不便です。

そこで「型定義ファイル」なるデータをプロジェクトに適用します。
本来はTypescript用のものですが、JavaScriptでコーディングする場合でもその恩恵に預かることができます。

型定義ファイルの設定ファイル（package.json）を作成

まずは、型定義ファイルの設定用にpackage.jsonを作成します。

  1. プロジェクトのルートフォルダに移動

    cd ルート

  2. 下記のコマンドで設定ファイル（package.json）を作成

    npm init -y

initコマンドの意味

npmでパッケージ管理を始める時は、まずプロジェクトをinitコマンドでnpm用に初期化（=initialize）します。

npm init

実行するといろいろ聞かれますが、基本的にはすべてy（=yes）でOKのようです。
処理が完了すると、ルートフォルダ直下にpackage.jsonが作成された状態になります。

でも、どうせ全部yなら何回も答えるのは面倒です。
そこで、initの時にオプションとして-y（もしくは-yes）とつけておくと、「全部yesで答えといて」とまとめて指示するコマンドになります。

npm init -y

npm init -yes
GASの型定義ファイルをインストール

そのまま、Google社が配布しているGASの型定義ファイル（のパッケージ）をインストールします。

  1. Clasp用の型定義ファイル（@types/google-apps-script）をインストール

    npm i --save-dev @types/google-apps-script

コマンドの意味

iは、過去記事で記載したようにinstallのショートハンドです。

npm i <パッケージ名>

npm install <パッケージ名>

これを使って、GAS用の型定義ファイルをインストールします。

npm i @types/google-apps-script

また、このパッケージの場合は、オプションとして--saveか--save-devをつけるのが慣例のようです。

npm i --save @types/google-apps-script

npm i --save-dev @types/google-apps-script

それぞれの意味を調べてみると…

  • --save

    依存パッケージの場合に指定します。package.json の dependencies に記録されます。このパッケージを誰かが npm install したときに依存パッケージとしてインストールされます。

    npm入門 - とほほのWWW入門

    ここで言う「依存」とは「このパッケージが無いとスクリプト自体動かないよ！」という意味なので、型定義ファイルもこのプロジェクトを使う人全員にインストールされることになるみたいです。

  • --save-dev

    テストツールなど、開発者が使用するパッケージの場合に指定します。package.json の devDependencies に記録されます。このパッケージを npm install しても、インストールされません。ただし、パッケージを Git から clone して npm install した場合は開発者とみなされ、インストールされます。

    npm入門 - とほほのWWW入門

    つまり、「スクリプトの開発には必要なパッケージだけど、実行するだけの人は必ずしもインストールする必要は無い」という意味になるようです。

今回の型定義ファイルは、あくまでも「開発の補助データ」として使うものなので、後者の--save-devオプションを使用します。

npm i --save-dev @types/google-apps-script

VSCodeの設定

せっかくなので、ローカルエディタもカスタマイズします。

※当記事では、Visual Studio Code（通称VSCode）を例にご紹介します。

拡張機能
コーディング支援
コードの整形

  • Prettier - Code formatter

    JavaScript向けフォーマッタで特に人気なやつ。
    フォーマッタをこれに指定して、エディタ上でAlt+Shift+Fで使用できます。
    整形のルールは特にいじってませんが、とりあえずそのままでも充分な気がします。

カラーテーマ
ターミナル
ワークスペースの設定

ショートカットや、プロジェクト固有の設定に使います。

  1. プロジェクトをワークスペースとして保存

    プロジェクトを丸ごと「ワークスペース」として保存して、設定ファイル（***.code-workspace）を作成します。

    VSCodeをタスクバーにピン留めしている場合、右クリックで「最近使用したワークスペース一覧」に、このファイルのショートカットが表示されます。
    複数のプロジェクトを管理しやすくなるのでオススメです。

  2. （お好みで）ワークスペース固有の設定を記入

    ワークスペースの設定ファイル（***.code-workspace）に、プロジェクト固有のカラーテーマやフォント、フォルダのショートカット等が登録できます。

    私は下記のように使用しています。
    ※設定ファイルはルートフォルダ直下のvscodeフォルダに格納しています。

    • フォルダのショートカット

      "folders": [
  {
    "name": "VSCode",
    "path": "."
  }, {
    "name": "ProjectAll",
    "path": "../"
  }, {
    "name": "Git",
    "path": "../.git"
  }, {
    "name": "src",
    "path": "../src"
  }
],

    • それ以外の設定

      "settings": {
  "workbench.colorTheme": "Darcula",
  "editor.fontSize"     : 14,
}

このシリーズについて

Google Apps Scriptをローカルで編集する方法について、まとめています。

誤り、分かりづらい等ありましたら、ぜひコメント欄やTwitter、お問い合わせフォーム等でご教示ください。

次回

【Clasp】ローカルでGASを書いてみる ～スクリプトを書いてアップロードする～ - ゆるおたノート

連載目次

  1. 【Clasp】ローカルでGASを編集するメリットとデメリット - ゆるおたノート
  2. 【Clasp】ローカルでGASを書く準備 ～Claspをインストールする～ - ゆるおたノート
  3. 【Clasp】ローカルでGASを書く準備 ～プロジェクトを作成する～ - ゆるおたノート
  4. 当記事【Clasp】ローカルでGASを書く準備 ～コーディングを楽にする～ - ゆるおたノート
  5. 【Clasp】ローカルでGASを書いてみる ～スクリプトを書いてアップロードする～ - ゆるおたノート
  6. 【Clasp】ローカルでGASを書いてみる ～スクリプトをGitで管理する～ - ゆるおたノート

参考