LoginSignup
1

More than 5 years have passed since last update.

(gapps + babelから)clasp + babelに構造を変えないで移行できるか試してみました

Last updated at Posted at 2018-02-05

この記事は?

gapps+babelで構成していたGAS開発環境を、clasp+babelの構成に変えた際に困ったので、対応した内容を残しておきます。

TL;DR

  • .clasp.jsonを設定すれば、カレントじゃなく特定のディレクトリでソース管理できる
  • gappsで管理していたsrcディレクトリを設定すれば、同じ構造のまま使える

状況

最近、社内利用のWEBアプリケーションの開発基盤に、GoogleAppsScriptを使ってます

  • GitHubで管理したい
  • ES6で開発したい(→babelでES5にトランスパイルしてupload)
  • 好きなエディタで開発したい

といった個人的ニーズがあったので、以下の記事を参考にしてローカル環境を構築していました
https://qiita.com/zaki-yama/items/9a301542137febd8876c

その時の構造は、こんな感じです
devの中にES6で開発し、babelでコンパイルしてsrcに出力しています

root
├── .babelrc
├── package.json
│    ~
├── gapps.config.json
├── dev
│   └── コード.js
└── src
    └── コード.js

clasp

そんな中、1/11にGoogle公式のCLIとして、clasp(とScriptAPI)がリリースされていたという事実に今更気がつきました
困っていたことがいくつか解決できそうなので、gappsからclaspに移行することに決めて、検証してます
claspに関しては、こちらの記事を参考にしました。
 https://qiita.com/soundTricker/items/354a993e354016945e44

ただ、標準的な利用ではclaspはカレントディレクトリにスクリプトを展開するので、標準的な利用ではgappsの構造のままでは使いにくい状況でした
また、カレントに直接展開されちゃうので開発用のファイルとデプロイ用のファイルが混在してしまいます

root
.
├── appsscript.json
└── コード.js ←直下に展開されてしまいます

.clasp.json

https://github.com/google/clasp
困ったので、なんなら自分で作るかと思いながらissueを辿ってみると、

Possible to specify directory for push / pull ?

という記述が
.clasp.jsonファイルとpull/pushコマンドの組み合わせでディレクトリを特定して連携する機能が追加されているようです!
まだreadmeには書かれてませんが、早速試してみました

試してみました

持っている情報が同じなので、gapps.config.jsonを.clasp.jsonに書き換えます

gapps.config.json
{
  "path": "src",
  "fileId": "XXXX-scriptId-XXXX"
}

このファイルをリネームします

$ mv gapps.config.json .clasp.json

.clasp.jsonの書式に合わせて修正します

  • path → rootDir
  • fileId → scriptId
  • (順番は関係ないと思いますが、issueに乗っている例の順に変えてます。念のため。)
clasp.json
{
  "scriptId": "XXXX-scriptId-XXXX",
  "rootDir": "src"
}

これだけです

あとは、pullpushでgappsと同じような使い方が可能です

  • ソースを持ってくるとき:$ clasp pull
  • uploadしたいときは:$ clasp push

おわり

とりあえず機能確認までです

あとでやりたいこと

  • claspではローカルでプロジェクトが作れるらしいので、ES6で構築するためのサンプルテンプレートとかを作ろう

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
  3. You can use dark theme
What you can do with signing up
1