仕事

『clasp』を使って『Google Apps Script（GAS）』をローカル開発する方法

  /

『clasp』を使って『Google Apps Script（GAS）』をローカル開発する方法

目次
  1. 最初に
  2. claspの開発環境を構築
  3. GASの開発を開始
  4. 最後に

最初に

最近はボードゲーム記事ばかり記載していますが、たまには技術系のことを書こうと思い、今回は『clasp』を使って、「Google App Script（GAS）」のローカル開発する方法について書きます！

claspとは？

claspとは、Googleが提供しているGoogle Apps Script（GAS）の開発ツールです。

GASはweb上のエディタを使って開発するのが基本ですが、claspを導入することでローカル開発できるようになり、TypeScriptでの開発も可能になります。

Gitでバージョン管理が出来るので、共同開発を行うのもやりやすくなるかと思います。

GitHub

 

GitHub – google/clasp: 🔗 Command Line Apps Script Projects
https://github.com/google/clasp
🔗 Command Line Apps Script Projects. Contribute to google/clasp development by creating an account on GitHub.

claspの開発環境を構築

clasp をインストール

では、早速claspのインストールをしていきたいと思います。

npmを利用してインストールをするので、まだnpmをインストールしてない方はNode.jsをインストールしてあげて下さい。
・Node.jsのインストール

## clasp install
$ npm i -g @google/clasp

## clasp login
$ clasp login

npmを使用して、上記のclaspをインストールし、ログインを行います。

Googleのログイン画面がブラウザで表示されるので、使用したいアカウントを選択し、アクセス権限を許可しましょう。

『Logged in! You may close this page. 』という画面が出たらログイン完了になるので、画面を閉じてもOKです！

【作業フォルダを作成 & gasファイル作成】

## プロジェクトディレクトリの作成
$ mkdir gas-project
$ cd gas-project

## create project
$ clasp create [project_name] --type standalone

## create .claspignore
$ touch .claspignore

## create srcフォルダ
$ mkdir src

それでは実際にGASのファイルを作成していきます。

プロジェクト用のディレクトリを作成し、clasp createコマンドでプロジェクトを作成しましょう。[project_name]の箇所を修正して、好きなプロジェクト名で作成しましょう。

コマンドを入力することで、.clasp.jsonやappsscript.jsonのファイルが自動作成されます。

appsscript.jsonは、下記のようにtimeZoneとruntimeVersionの修正を行っていきましょう。

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}

作成したGASのデータをブラウザで開きたい場合、clasp openを入力することでターミナルからブラウザを開くことが出来ます。

**/**
!src/**/*
!appsscript.json
src/**/*.{test,spec}.ts

.claspignoreファイルを作成することで、claspのpush範囲を指定することができます。

※上記のファイルを作成しておくことで、clasp pushのコマンドを実行した際は、!で指定されているファイルのみがpushされるようになります。

TypeScriptをインストール

下記のコマンドを入力し、TypeScriptのインストール及び設定ファイルの作成を行っていきます。

## install typescript
$ npm install -D typescript

## install @types/google-apps-script
$ npm install -D @types/google-apps-script

## create tsconfig.json
$ tsc --init

tsconfig.json ファイルを作成

tsc –initのコマンドを入力することで、tsconfig.jsonが作成されます。

作成時、tsconfig.jsonにはデフォルト値が設定されていますが、今回は下記のようにtsconfig.jsonを設定していきます。

{
  "compilerOptions": {
    "lib": ["ES2018"],
    "target": "ES2018",
    "allowJs": false,
    "outDir": "./dist",
    "module": "commonjs",
    "strict": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.ts",
  ],
}

ESLint & prettier をインストール

## install eslint prettier
$ npm install -D eslint
$ npm install -D prettier
$ npm install -D eslint-config-prettier
$ npm install -D eslint-plugin-prettier
$ npm install -D @typescript-eslint/eslint-plugin

ソースの構文を整えるために、ESLintとPrettierを導入します。

ESLintはJavaScriptの構文が正しいかどうかを検証するためのツール、prettierはソースコードを綺麗に整えてくれるフォーマッターのツールです。

実装上は必須のツールではないですが、常にソースコードを綺麗に保つことができるようになるので、導入するのをおススメします！

ESLintの設定方法

各インストールが完了した後、ESLintの設定ファイルを作成していきます。

## .eslintrc.js ファイルを作成
$ touch .eslintrc.js

## tsconfig.eslint.json ファイルを作成
$ touch tsconfig.eslint.json

ESLint用の設定ファイル「.eslintrc.js」及び、TypeScript用のESLint用の設定ファイル「tsconfig.eslint.json」の設定をしていきます。

各ファイルの内容は、今回は下記のように設定していきます。

.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    project: ['./tsconfig.eslint.json'],
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  rules: {
    'no-console': 'off',
    '@typescript-eslint/restrict-template-expressions': 'off',
    '@typescript-eslint/no-namespace': 'off',
    '@typescript-eslint/no-unsafe-assignment': 'warn',
    '@typescript-eslint/no-unsafe-member-access': 'warn',
    '@typescript-eslint/no-unsafe-return': 'warn',
    '@typescript-eslint/no-explicit-any': 'off',
  },
}
tsconfig.eslint.json
{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.ts",
    ".eslintrc.js"
  ],
  "exclude": [
    "node_modules",
    "dist",
  ]
}

prettierの設定方法

次にESLintの設定を行った後は、prettierの設定ファイルを作成しましょう。

## .prettierrc ファイルを作成
$ touch .prettierrc

prettier用の設定ファイル「.prettierrc」の設定を行っていきます。
今回は下記のように設定していきます。

{
  "printWidth": 120,
  "tabWidth": 2,
  "semi": false,
  "arrowParens": "always",
  "singleQuote": true
}

GASの開発を開始

GASの環境設定後、フォルダ構成は下記の通りになります。
（git関連のファイルやREADME.mdなどは別途作成しています。）

srcフォルダの配下にファイルを作成して、GASのコードを記入していきましょう。

作成した後、clasp pushのコマンドを行うことで、ローカルで作成したGASのコードを反映させることができます。

好きなようにGASを作成していきましょう！

最後に

今回はGASをローカルで開発するため、claspでの開発環境の作成方法を記載しました。

claspを利用することで、TypeScriptで開発できることもできるのと、Gitでの共同開発が可能になるので、おすすめです。

Googleスプレッドシートなど、Googleサービスとの連携もでき、無料での開発もできるので、プログラミングに触れたことない方も気軽に開発できることがGASの魅力でもあると思うので、是非GAS開発試してみて下さい！

ここまで見て頂きありがとうございます！
また次回もよろしければご覧ください！

ABOUT ME
くり坊
Web系フリーランスエンジニア
BLOG：https://www.lecu1012.com
RELATED POST