claspの基本操作

GAS(Google App Script)はブラウザ上でコーディングするため、いままで使いづらさを感じて手が出せませんでした。

しかし、今年の初めにclaspというCLIツールができてから、状況はかなり変わったといえます。

https://github.com/google/clasp

まずはclaspのコマンドを使えるようにします。

yarn global add @google/clasp

もしくは

npm install -g @google/clasp

アカウントの紐付けを行います。

clasp login

ブラウザが立ち上がり、次のようなメッセージが表示されます。
メッセージにあるようにそのまま閉じて構いません。

Logged in! You may close this page. 

次にプロジェクトを作成します。

clasp create

どのようなプロジェクトを作るか選択が出来ます。
ここではstandaloneを選択しました。

? Create which script? (Use arrow keys)
❯ standalone 
  docs 
  sheets 
  slides 
  forms 
  webapp 
  api 

さて、ここから何をしたらいいのだろうかという感じですので、Hello World!をやってみます。
ブラウザでエディターを開きましょう。

clasp open

次のような関数を作ります。

function myFunction() {
  const hello = 'Hello World!'
  Logger.log(hello)
}

作れたら、実行→関数を実行→myFunction
を押してみましょう。

何も起こらにように見えますが、「Ctr + Enter」を押すとでログが表示されています。

今はブラウザ上でソースコードを編集しましたが、claspはローカルで編集できることに意味があります。

次のコマンドでファイルを取ってきます。

clasp pull

逆にローカルファイルをpushすることもできます。

clasp push

毎回pushするのは面倒です。
保存したらpushされるようにwatchしておくと便利です。

clasp push --watch

ログの確認もできます。

clasp logs

vue-rotuerでreloadを実現する

vue-routerには再描画のためのAPIが用意されていません。

そのため、initなどのラッパー関数を用意して、再度呼び出す方法が紹介されています。

created: function () {
  this.init()
}
methods: {
  init: function() {
      // do something
    },
    relaodThisPage: function () {
      this.init()
    }
}

参考:
https://github.com/vuejs/vue-router/issues/296

vuexのgettersで違う結果を返すには

次のようなテンプレートのデータを返すような処理をあるとします。

getEmptyData: state => {
    return {
     test1: '',
     test2: ''
    }
}

これだと、一度返されたデータはキャッシュされ、また次も同じデータが返されます。

毎回データを生成して、確実に違うデータを返したいなら、Functionを返すようにします。

getEmptyData: state => () => {
    return {
     test1: '',
     test2: ''
    }
}

moment.jsで日付までのデータを作成する

今の日付時間を取得するなら、次の一文だけで終わります。

moment()

ただこれで作成したオブジェクトは、現在時刻も含まれるため、diff()で比較するときに不便です。

そんなときはstartOf(‘day’)をつけると0時0分のデータが作成できます。

moment().startOf('day')

ここしばらくは副作用の少ないdate-fnsを使うことが多くなってきました。
また別記事で使い方を説明できたらと思います。

momnet.jsはオブジェクト本体を変更する

次の操作では最初と最後で出力内容が変わります。
(オブジェクトが変更される)

let momentObj  = moment()
console.log(momentObj.format())

momentObj.date(1) // 1日に設定
console.log(momentObj.format()) // 結果が1日に変わる

元のオブジェクトを変更せずに使いたい時はclone()を使えます。

let momentObj  = moment()
console.log(momentObj.format())

momentObj.clone().date(1) // 1日に設定
console.log(momentObj.format()) // 結果は最初と同じ

上記のような使い方をしなければならないので、最近はdate-fnsを使っています。
date-fnsについてはまた別記事でご紹介したいと思います。

moment.jsで当月の日数を出す

ドキュメント見てもすぐに見つからなかったのでメモしておきます。

moment().daysInMonth()

momentjsは元のデータを変更する破壊的(副作用のある)仕様になっているため、最近はdate-fnsを使用しています。

また別の記事でご紹介したいと思います。