claspの基本操作

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

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

https://github.com/google/clasp#push

まずはアカウントの紐付けを行いましょう。

clasp login

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

clasp create

スクリプトを作って、テストしてみます。

touch test.gs

ローカルファイルを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: ''
    }
}

理由はわかりませんが、もう一度呼び出すと、全く同じデータが返されます。

その場合は普通にvuexの外でfunctionなりclassなりを作って利用するのが無難です。

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

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

moment()

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

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

moment().startOf('day')

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()) // 結果は最初と同じ

vue-fontawesomeでfarのアイコンを使う

メモ書きですが、次も絶対ハマるので

https://github.com/FortAwesome/vue-fontawesome/issues/77

yarn add @fortawesome/fontawesome-free-regular
import { faCircle, faCheckCircle } from '@fortawesome/fontawesome-free-regular'