YAMLの基本文法

YAMLの基本文法について書いてみます。
覚えておくことは3つだけです。

単純な列挙

- a
- b
- c

ラベル付き

a: 1
b: 2
c: 3

ラベルをつけて列挙

a:
  - a1
  - a2
b:
  - b1
c:
  - c1

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'

一見どこが違うわからないかもしれませんが、2つ目のimportUsersusersになっています。

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

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

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

まずは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