2019/05/08

Vue.js

算出プロパティ

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

  • このテンプレートはシンプルでない。算出プロパティを使うべき。

  • computedで算出プロパティを宣言できる。computedで宣言したmessageのreverse文字列は、vm.messageの値に依存する。直接の書き換えができない。

  • この依存関係は宣言的に作成されている。算出getter関数は副作用がなく、テストや値の推論が用意になる。←？？？？

  • methodsで同じ機能を定義することも可能。だが算出プロパティはリアクティブな依存関係にもとづきキャッシュされる。 つまり、computedで定義すればmessageが変わらない限り、reversedMessageに何度アクセスしても以前の結果を即時に返す。

computed: {
  now: function () {
    return Date.now()
  }
  • これはリアクティブな依存ではない（thisで要素を取得していない）ので一度アクセスしたら二度と更新されない

たとえばDate.now()をそれぞれで定義して表示したとき。 表示後、コンソールでそれぞれ呼び出したとき、算出プロパティは値が変わらず、メソッドは値が変わる。

結論

  • キャッシングしたいときに算出プロパティ（computed）を使う。

監視プロパティ

  • watched property
  • fullNameを変更するのに、わざわざfistnameとlastnameを監視している
  • 命令的で冗長である。算出プロパティを利用すると、fullNameをcomputedすればよい。
  • 違いはなにか。どうしてこう書くのか。監視プロパティでfullNameだけを監視しても、firstNameが変化したときに拾ってくれない。対象のものだけということ？
  • 大きな違いは、computedはreturnしているということ。なんでだろう・・・・・・・・・・・
  • compuptedは、fullnameを定義すればfirstnameとlastnameの変化を拾ってくれる。登場人物すべてを見てくれるってことかな。

算出setter関数

  • setterも使える。
  • setterでfullNameに値を設定すれば、firstNameとlastNameも両方適切に変更される。

ウォッチャ

  • これサンプル実装したら面白かった。 this.question.indexOf('?') === -1 値が見つからなければ-1を返すので、今回は「？」がなければtrueということ。
  • 非同期処理や実行頻度の制御、中間状態とかはwatchのおかげでできるらしい。よくわかんない、、、、、

lodashのdebounce, capitalise

  • テキスト入力のリアルタイム検索とかで、ある程度入力が止まった時点で（0.2秒後とか）といあわせするときに使える。
  • _.debounce(関数, wait時間)
  • つまり今回はgetAnserを500ms（0.5秒だから単位msであってる？）待ったら実行する

  • そういう関数を定義している

  • capitalizehは頭文字大文字

日記

あーどうしてもイライラしちゃうな。でも上司にいらいらしたときは自分でできることあるときだからな。 できないやらないから腹が立つ。イライラしている暇があったら目の前の事態解決のために動かねば。

「この要件ならこの条件」っていうの、どう整理していけばよいのか。複数オプションが付いて、片方は支払われているがもう片方は支払われていないとか。 予約の絞り込み、複雑化していて上の人も条件間違えるし。

どうすればいいチーム開発ができるのか。 アジャイルサムライと、カイゼンジャーニーはすぐ読み切りたい。 本読めなくなってしまってるが、ちゃんと読むぞｌ

イテレーション：スプリントのこと。