ポートが開いている状態と Listen している状態の違い

ロミオとジュリエットで学ぶ「ポートが開いてる」と「Listen している」の違い - Qiita

なんかタブで開いていたので読んだんだけど、面白かった(おわり)

• 窓が閉じている = ポートが閉じている
• 窓が開いているけど中の人が寝てる = ポートは開いているけど Listen してない
• 窓が開いていて中の人が聞き耳を建てている = ポートが開いていて Listen している

つまり Listen するにはポートが開いていることが必要条件であり、Listen 状態であることはポートが開いていることの十分条件であるということ(あってるよね……？)

最後の入力イベントから N 秒経ったあとにバリデーションを走らせたい

VeeValidateというライブラリでバリデーションを実装しているのだけど、入力フォームの最後の input イベントから N 秒経ったタイミングでバリデーションを走らせたい(rules を有効にしたい)というときにどう実装すればいいのか分からなくて、結局分からずに終わった。

最後の input イベントから一定時間が経過したときになにかするのは入力完了を判断する JavaScriptというページを見て実現できそうだなとは思ったんだけど、このページで紹介しているのはグローバルスコープにタイマーを持たせて、別の input イベントが来たらタイマーをセットし直すというやつ。

これってつまりは state にタイマーを持たせれば実現できる……？と思ったんだけど、変更の監視を watch でやったり computed でやったりどうすればいいのかいまいち掴めなかったので、週末にうまい実装が思いつくかやってみたい。

実装自体は、VeeValidate の interaction modes という概念のeagerを使ってひとまず終えた。

極力ユーザーフレンドリーな形でバリデーションしてエラーメッセージを出したいと思っていて、最も質の高そうな実装として「最後の input イベントから N 秒後にバリデーションを実行しエラーの場合エラーメッセージを表示する」というのをやりたかった。

ただ一旦それは置いといて、eagerという mode を使うことで良しとした。

mode はバリデーションが走るタイミングを指定できて、デフォルトではaggressiveという input イベントごとにバリデーションするものだが、lazyにすることで change イベントをトリガーにバリデーションできる。

そして今回指定したeagerは、入力欄が空またはバリデーションエラーが起きていない状態ではlazyで、バリデーションエラーが起きるとaggressiveに切り替えるというもの。

これが最も便利でかなりユーザーフレンドリーかなと思いこれを使うことにした。