WSL2(Ubuntu20.04LTS)とclaspを用いてGASのローカル環境を構築する
はじめに
こんにちは！Keichan_15 と申します。
普段はJavaでAtCoderにもがき苦しんだり、RailsやGAS、WSL2を用いた環境構築だったりを細々とやっております。
Qiitaでいくつか記事を執筆しているのですが、今回Zennでも1つ記事を執筆してみたいなと思い、今に至ります…（笑）
ところで最近GASの魅力にどっぷりハマってしまっており、中々抜け出せずにいます。GASのエディターに直接コーディングするのも良いのですが、せっかくなら慣れ親しんだローカル環境で構築したいよね～って衝動に駆られ、WSL2とclaspを用いた環境構築を行ったのでその備忘録になります！
それでは早速見ていきましょう～！よろしくお願いします！(´▽｀*)
事前準備
今回は、 WSL2が導入済であることを前提 として進めていきます。WSLの導入方法については自身が過去に執筆した記事をご覧いただけますと幸いです。
記事内で導入する項目のうち、行って頂きたい項目は以下の2つになります。
- WSL2のインストール
- Node.jsのインストール
インストールが完了したら早速claspを導入していきましょう！
導入
実行環境の構築
まず、任意のディレクトリを作成します。今回は clasp_demo というディレクトリを作成します。作成が完了したら同時にディレクトリも移動しておきましょう。
$ mkdir clasp_demo
$ cd clasp_demo
ついでに、以降はVSCodeのターミナルを使用して導入を行うため、追加で下記のコマンドを入力します。
$ code .
このコードを入力することでVSCodeの拡張機能をインストールすることが可能です。
次に、念のためNode.jsとnpmが導入されているか確認します。
$ node --version
v16.17.0
$ npm --version
8.15.0
若干表示されるバージョンの違いはあるかと思いますが、このように表示されていれば問題ありません。
Google Apps Script APIの有効化
claspを使用するためにGoogle Apps Script APIを有効化にする必要があります。
下記のページから有効化しましょう。
パッケージの導入
次に必要なパッケージをインストールしていきます。
$ npm init -y
$ npm install @google/clasp -g
$ npm install @types/google-apps-script
ちなみに僕はここでコケました。2つ目のコマンドである clasp のインストールで下記のエラーにぶち当たります。
npm notice
npm notice New major version of npm available! 8.15.0 -> 9.6.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.2
npm notice Run npm install -g npm@9.6.2 to update!
npm notice
npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/@google/clasp
npm ERR! dest /usr/local/lib/node_modules/@google/.clasp-L3XGxwFD
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/@google/clasp' -> '/usr/local/lib/node_modules/@google/.clasp-L3XGxwFD'
npm ERR! [Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/@google/clasp' -> '/usr/local/lib/node_modules/@google/.clasp-L3XGxwFD'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'rename',
npm ERR! path: '/usr/local/lib/node_modules/@google/clasp',
npm ERR! dest: '/usr/local/lib/node_modules/@google/.clasp-L3XGxwFD'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/keichan/.npm/_logs/2023-03-16T12_19_13_632Z-debug-0.log
あれ～と思ったのですが、よくよくログを見てみると、
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/@google/clasp' -> '/usr/local/lib/node_modules/@google/.clasp-L3XGxwFD'
npm ERR! [Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/@google/clasp' -> '/usr/local/lib/node_modules/@google/.clasp-L3XGxwFD']
permission denied の文字があるではないか！ということで、 sudo で実行すると問題無く通りました。
$ npm init -y
$ sudo npm install @google/clasp -g
$ sudo npm install @types/google-apps-script
余談ですが、npmのupdate通知が入っていましたので一緒にやっておきました。
npm notice New major version of npm available! 8.15.0 -> 9.6.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.2
npm notice Run npm install -g npm@9.6.2 to update!
$ sudo npm install -g npm@9.6.2
$ npm --version
9.6.2
Googleアカウント連携
パッケージの導入が完了したらGoogleアカウントと連携します。下記のコマンドを入力してください。
$ clasp login
Warning: You seem to already be logged in *globally*. You have a ~/.clasprc.json
Logging in globally…
🔑 Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?access_type=xxxxxoxxxox
おそらく自動でGoogle Chromeが開くと思います。画面の説明に沿ってアカウントを選択して連携します。
見切れていますが、下にスクロールすると 許可 のボタンが表示されると思います。
許可が通り下記のような画面が表示されるとOKです！
ターミナルにも下記のようなメッセージが表示されていると思います。
Authorization successful.
作成
準備が完了したのでGASアプリケーションを新規作成していきましょう！
$ clasp create
? Create which script? (Use arrow keys)
❯ standalone
docs
sheets
slides
forms
webapp
api
clasp create を入力した後、どの形式でGASを作成するか選択できます。今回は standalone を選択します。
$ clasp create
? Create which script? standalone
Created new standalone script: https://script.google.com/d/1B-_xxxoxxxxxoxxx/edit
Warning: files in subfolder are not accounted for unless you set a '/home/keichan/clasp_demo/.claspignore' file.
Cloned 1 file.
└─ /home/keichan/clasp_demo/appsscript.json
Googleドライブのマイドライブ直下の位置にアプリケーションが作成されたことが確認できると思います。
これでスクリプトの準備ができました。
次に今回はテストで main.js を作成し、Hello World をログ出力するコードを実装していきます。
まず、 main.js を作成します。
$ touch main.js
中身はお決まりの console.log での出力。
function test() {
console.log('Hello World!');
}
実装が完了したら、GASにソースファイルをpushしましょう。下記のコマンドを入力します。
$ clasp push
次にpushした先のGoogle環境にあるアプリケーションをWebエディター(従来のGASエディター)を開きます。下記のコマンドを入力します。
$ clasp open
以下のようにGoogle ChromeにてGASのエディターが開けばOKです！お疲れ様でした！
ちなみに今回は紹介しませんが、claspには他にも便利なコマンドが数多く存在しています。是非皆さんもclaspを使用してローカルでGAS触っちゃいましょう～～！
参考記事
おわりに
いかがでしたでしょうか。今回はWSL2(Ubuntu20.04LTS)でclaspを用いたGASの開発環境の構築について行いました。
慣れ親しんでいるエディタでやるのがやっぱり一番！ってことでますます開発に拍車がかかりそうです！笑
皆さんも快適な開発ライフを～！！
あとQiitaでよく記事を執筆してますのでよろしければ覗いてみてネ！
それでは！私は寝る！！
Discussion