WSL2(Ubuntu20.04LTS)とclaspを用いてGASのローカル環境を構築する

# はじめに
こんにちは！ @Keichan_15 です！

つい最近Zennデビューを果たしましたのでちょろっと宣伝がてらのQiita執筆になります（笑）

https://zenn.dev/keichan_15/articles/d35af004127dcb

Qiitaでも一応備忘録を兼ねて残しておくって感じ。内容自体は特段Zennと変わらないので、どっち見て頂いても大丈夫です（笑）

# 事前準備
今回は、 **WSL2が導入済であることを前提** として進めていきます。WSLの導入方法については自身が過去に執筆した記事をご覧ください！

https://qiita.com/Keichan_15/items/15548f1bdef2503a08b7

記事内で導入する項目のうち、行って頂きたい項目は以下の2つになります。

- **WSL2のインストール**
- **Node.jsのインストール**

インストールが完了したら早速claspを導入していきましょう！

# 導入
## 実行環境の構築
まず、任意のディレクトリを作成します。今回は ``clasp_demo`` というディレクトリを作成します。作成が完了したら同時にディレクトリも移動しておきましょう。

```terminal:Ubuntu
$ mkdir clasp_demo
$ cd clasp_demo
```

ついでに、以降はVSCodeのターミナルを使用して導入を行うため、追加で下記のコマンドを入力します。

```terminal:Ubuntu
$ code .
```
このコードを入力することでVSCodeの拡張機能をインストールすることが可能です。

次に、念のためNode.jsとnpmが導入されているか確認します。

```terminal:Ubuntu
$ node --version
v16.17.0

$ npm --version
8.15.0
```

若干表示されるバージョンの違いはあるかと思いますが、このように表示されていれば問題ありません。

## Google Apps Script APIの有効化
claspを使用するためにGoogle Apps Script APIを有効化にする必要があります。
下記のページから有効化しましょう。

https://script.google.com/home/usersettings


![](https://storage.googleapis.com/zenn-user-upload/a04b7fc99bf8-20230316.png)

![](https://storage.googleapis.com/zenn-user-upload/ca5611f5bf9f-20230316.png)

## パッケージの導入
次に必要なパッケージをインストールしていきます。

```terminal:Ubuntu
$ npm init -y
$ npm install @google/clasp -g
$ npm install @types/google-apps-script
```
ちなみに僕はここでコケました。2つ目のコマンドである `clasp` のインストールで下記のエラーにぶち当たります。

```terminal:Ubuntu
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
```
あれ～と思ったのですが、よくよくログを見てみると、

```terminal:Ubuntu
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` で実行すると問題無く通りました。

```terminal:Ubuntu
$ npm init -y
$ sudo npm install @google/clasp -g
$ sudo npm install @types/google-apps-script
```

:::note warn
**余談**
npmのupdate通知が入っていましたので一緒にやっておきました。別にこれに関してはやらなくても良いと思うけど一応ね。

```terminal:Ubuntu
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!
```

```terminal:Ubuntu
$ sudo npm install -g npm@9.6.2
$ npm --version
9.6.2
```

![](https://storage.googleapis.com/zenn-user-upload/0a5c8eecfa8e-20230320.png)

:::

## Googleアカウント連携
パッケージの導入が完了したらGoogleアカウントと連携します。下記のコマンドを入力してください。

```terminal:Ubuntu
$ 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が開くと思います。画面の説明に沿ってアカウントを選択して連携します。

![](https://storage.googleapis.com/zenn-user-upload/dc3f41d0ff5f-20230321.jpg)

![](https://storage.googleapis.com/zenn-user-upload/e48b0010ae58-20230321.jpg)

見切れていますが、下にスクロールすると `許可` のボタンが表示されると思います。

![](https://storage.googleapis.com/zenn-user-upload/90281579e56e-20230321.png)

許可が通り下記のような画面が表示されるとOKです！

![](https://storage.googleapis.com/zenn-user-upload/f738475dccfc-20230321.png)

ターミナルにも下記のようなメッセージが表示されていると思います。

```terminal:Ubuntu
Authorization successful.
```

## 作成
準備が完了したのでGASアプリケーションを新規作成していきましょう！

```terminal:Ubuntu
$ clasp create
? Create which script? (Use arrow keys)
❯ standalone 
  docs 
  sheets 
  slides 
  forms 
  webapp 
  api 
```

`clasp create` を入力した後、どの形式でGASを作成するか選択できます。今回は `standalone` を選択します。

```terminal:Ubuntu
$ clasp create
? Create which script? standalone
Created new standalone script: https://script.google.com/d/1B-xxxoxxxoxxxx/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ドライブのマイドライブ直下の位置にアプリケーションが作成されたことが確認できると思います。

![](https://storage.googleapis.com/zenn-user-upload/32a8b8f761a1-20230321.jpg)


これでスクリプトの準備ができました。
次に今回はテストで `main.js` を作成し、`Hello World` をログ出力するコードを実装していきます。

まず、 `main.js` を作成します。

```terminal:Ubuntu
$ touch main.js
```

中身はお決まりの `console.log` での出力。

```javascript:main.js
function test() {
  console.log('Hello World!');
}
```

実装が完了したら、GASにソースファイルをpushしましょう。下記のコマンドを入力します。

```terminal:Ubuntu
$ clasp push
```

次にpushした先のGoogle環境にあるアプリケーションをWebエディター(従来のGASエディター)を開きます。下記のコマンドを入力します。

```terminal:Ubuntu
$ clasp open
```
以下のようにGoogle ChromeにてGASのエディターが開けばOKです！お疲れ様でした！

![](https://storage.googleapis.com/zenn-user-upload/41b2e2aff31f-20230321.png)

ちなみに今回は紹介しませんが、claspには他にも便利なコマンドが数多く存在しています。是非皆さんもclaspを使用してローカルでGAS触っちゃいましょう～～！

# 参考記事

https://dev.classmethod.jp/articles/vscode-clasp-setting/

https://qiita.com/unsoluble_sugar/items/ca4a3ffb67dbed5dc54c



# おわりに
シンプルに眠いのと全く動きたくない病が絶賛発動中なのですが、これ改善方法ありますかね…？
ちなみに最近はジムサボってます。以上。
ばいばい:v: