ゆるおたノート

Tomorrow is another day.

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

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

また、文頭に!とつけると「NOT『pushしないもの』」つまり「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ワークスペース固有の設定を記入

    カラーテーマや、フォント、フォルダのショートカット等が登録できます。

    私の場合は、下記のように使用しています。

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

      "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お問い合わせフォーム等でご教示ください。

連載目次

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

参考