よしたく blog

ほぼ週刊で記事を書いています

claspをインストールしてから「こんにちは 世界」するまで

Google Apps Scriptはブラウザからいじることが多いかと思いますが、claspを導入することでローカルでも開発することができます。 今回はインストールから「こんにちは 世界」するまでの手順をまとめておきます。

インストール

npmでインストールをおこないます。

npm install @google/clasp -g

ログイン

claspでログインをし、Googleの認証を行います。

clasp login

無事に認証が完了すると.clasprc.jsonが作成されます

プロジェクトの作成

認証が無事に完了したのでプロジェクトの作成します。 新規で作成する場合は clasp create clasp-demo

すでにフォルダが存在する場合は clasp create .

作成が完了すると.clasp.jsonappsscript.json が作成されます。

デプロイ

src/sample.js を作成し、デプロイをしましょう。 シンプルにHello Worldです。

function main(){
    Logger.log('Hello World');
}

作成したら、clasp push をして送信し、clasp open でブラウザを立ち上げ中身を見てみましょう

無事にソースコードが上がっていることが確認できます。

f:id:yoshitaku_jp:20190207151743p:plain
Hello World

ブラウザ側で修正したくなったら?

アップロードしてから、ブラウザにて修正したくなることもあるかも知れません。 編集しましょう。

f:id:yoshitaku_jp:20190207153427p:plain
こんにちは 世界

編集できました。この編集結果をローカルにも反映させたいです。 そこで、clasp pullを使います。実行すると…

f:id:yoshitaku_jp:20190207153623p:plain
こんにちは 世界 at ローカル

無事に反映されました。

おまけ

既存にあがっているプロジェクトはどうやってローカルに持ってくればいいでしょうか。

clasp clone プロジェクトIDの形で可能です。

プロジェクトIDは、図の黒く塗りつぶしてある部分です。

f:id:yoshitaku_jp:20190207155231p:plain
URLが塗りつぶされています

以上で基本的なclaspのコマンドを学び、ローカルで開発することができるようになりました。 Google Apps Scriptでも、PrettierやESLintなどを使いきちんとしたコードを書きたくなってきたので、ブラウザでの開発を中止しローカルに移行していきたいと思います。


参考にさせていただきました。

github.com

kic-yuuki.hatenablog.com