clasp導入の落とし穴/ installing clasp

GASのローカル開発環境であるclaspを導入するときに、実際に直面したトラブルと、その解決方法をまとめました。

Transcript

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