投稿日:

Vue jsでファイル名の大文字・小文字で発生するエラー

次のようなエラーが発生し、小一時間ぐらい悩むことになりました。

Webpack: “there are multiple modules with names that only differ in casing” but modules referenced are identical

解決策としてはimport時のURLに小文字や大文字が混じってないかチェックすることです。
例えば、次の場所にファイルがあったとします。

components/Users/UserForm.vue

あるファイルでこのようにimportを行います。

import UserForm from '@/components/Users/UserForm'

しかし、違うファイルで次のようにimportを行ったとします。

import UserForm from '@/components/users/UserForm'

一見どこが違うわからないかもしれませんが、２つ目のimportはUsersがusersになっています。

このエラーの辛いところは、小文字・大文字を区別せずに読み込まれるところです。

片方だけでは露見せず、誤って上記のように混じった時のみ発生します。

https://stackoverflow.com/questions/47534267/webpack-there-are-multiple-modules-with-names-that-only-differ-in-casing-but?rq=1

投稿日:

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()) // 結果が１日に変わる

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

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

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