Slide 1
Slide 1 text
clasp導入の落とし穴
Slide 2
Slide 2 text
2
自己紹介
名前： 羽毛田 睦土（はけた まこと）
仕事： 会計事務所 経営
エクセルセミナー 運営
ソフトウエア 開発
Twitter: @excelspeedup
Slide 3
Slide 3 text
3
Clasp導入手順
1. Node.jsインストール
2. claspインストール
3. GAS環境にログイン
4. 自動補完用ファイルのインストール
5. GASプログラムの同期準備
6. プログラム作成・アップロード
Slide 4
Slide 4 text
Step2,3,4
4
Clasp設定に潜む落とし穴 その1
1. Node.jsインストール
2.claspインストール
3. GAS環境にログイン
4. 自動補完用ファイルのインストール
5. GASプログラムの同期準備
6. プログラム作成・アップロード
Slide 5
Slide 5 text
Step2,3,4
2種類のインストール方法
5
freee残高ダウンロード
Analytics日次自動通知
Twitter日次フォロワー取得
clasp
clasp
プロジェクト
npm install ... -g
npm install ... –save-dev
1. グローバルインストール
2. ローカルインストール
Slide 6
Slide 6 text
Step2,3,4
初心者向けにはどちらがおすすめ？
6
npm install @google/clasp -g
npm install @google/clasp --save-dev
1. グローバルインストール
2. ローカルインストール
Slide 7
Slide 7 text
Step2,3,4
初心者向けにはどちらがおすすめ？
7
npm install @google/clasp -g
npm install @google/clasp --save-dev
1. グローバルインストール
2. ローカルインストール
※初心者限定
Slide 8
Slide 8 text
Step2,3,4
ローカルインストールをするとどうなる?
8
Slide 9
Slide 9 text
Step2,3,4
自動補完用ファイルはローカル必須
9
npm install @types/google-apps-script -g
npm install @types/google-apps-script --save-dev
1. グローバルインストール
2. ローカルインストール
Slide 10
Slide 10 text
Step5,6
10
落とし穴 その2
1. Node.jsインストール
2. claspインストール
3. GAS環境にログイン
4. 自動補完用ファイルのインストール
5.GASプログラムの同期準備
6. プログラム作成・アップロード
Slide 11
Slide 11 text
Step5,6
同期の準備をする
11
（プロジェクトルート フォルダ）
test.ts src
test.ts
clasp create
Googleサーバ
clasp push clasp push
clasp create -rootDir ./src
Slide 12
Slide 12 text
Step5,6
初心者にはどちらがおすすめ?
12
clasp create
clasp create –rootDir ./src
1. プロジェクトルートフォルダをrootDirに指定
2. srcフォルダをrootDirに指定
Slide 13
Slide 13 text
Step5,6
初心者にはどちらがおすすめ?
13
1. プロジェクトルートフォルダをrootDirに指定
2. srcフォルダをrootDirに指定
clasp create
clasp create –rootDir ./src
Slide 14
Slide 14 text
Step5,6
rootDir指定をしないとどうなる?
14
Slide 15
Slide 15 text
Step5,6
rootDirとclasp pushの関係
15
（プロジェクトフォルダ）
Node_modules
大量のjsファイル
-rootDir ./src
（プロジェクトフォルダ）
test.ts
-rootDir .
Node_modules
src
test.ts
jsファイル
Googleサーバ
clasp push
Slide 16
Slide 16 text
Step ?
16
落とし穴 その3
1. Node.jsインストール
2. claspインストール
3. GAS環境にログイン
4. 自動補完用ファイルのインストール
5. GASプログラムの同期準備
6. プログラム作成・アップロード
Slide 17
Slide 17 text
Step ?
claspコマンド実行時にエラー
17
Slide 18
Slide 18 text
Step ?
文法チェックが明らかにおかしい
18
Slide 19
Slide 19 text
Step ?
Npmパッケージをインストールし直す
19
npm uninstall @google/clasp –g
npm install @google/clasp -g
npm install
私の環境では、これで解決しました
Slide 20
Slide 20 text
20
claspをとりあえず動かしたいときには?
このブログに導入手順をまとめてあります
https://gas.excelspeedup.com/
Slide 21
Slide 21 text
ここから未公開スライド
21
Slide 22
Slide 22 text
Step2,3,4
ローカルインストールするときは
22
npm install @google/clasp --save-dev
npm run clasp login
"scripts": {
...
“clasp”: “clasp”
},
package.json
すべてのclaspコマンドの前に
「npm run」を付ける
p8の補足
Slide 23
Slide 23 text
Step5,6
RootDirを指定しないときは
23
node_modules/**
.claspignore
（プロジェクトフォルダ）
Node_modules
jsファイル
test.ts
Push対象から除外される
p14の補足
Slide 24
Slide 24 text
ありがとうございました！
24