Javascriptはあまり触れてこなかったが、必要なシーンが出てきたので少し勉強する。現状のスキルとしては、必要な動的要素に対してライブラリをカスタマイズして使う程度。
最近のJavascript情勢
| やり方 | 学習コスト | 用途 | |
| 生のJavascript | 高い | 何でもいけるが学習コストがネック。 | |
| jQuery | 低い | jsのライブラリ。歴史長め。 | |
| Vue.js | 低い | jsのフレームワーク。シングルページなどの小規模開発に向く。DOMの制御が得意で習得が容易。 | |
| react | 中くらい | jsのフレームワーク。大規模開発に向く。習得に若干かかる。 |
jQueryは失速気味で、潮流としてはVue.jsとreactに二分されている。そういえば最新のBootstrap V5もjQueryが廃止されていたのもこういう経緯だろうか。
やりたいこと
バリデーションのような、ユーザの入力によってDOMを制御するようなパーツの制作などを行いたい。がっつりjsをマスターしたい、というわけではないので今回は習得が容易とされているVue.jsを学んでみることにする。
試してみる
まずは公式サイトのチュートリアルを試してみると…
See the Pen My First Vue by git-cat-meow (@git-cat-meow) on CodePen.
DOMが変数の値に書き換わる。CDNでVue本体を読み込むだけなので、超簡単。この例のように括弧で囲んだ変数出力をマスタッシュ構文と言う。括弧が口ひげっぽいかららしい。
要素のバインディング
バインディングを使うと、要素とjavascriptを紐づけることができる。
See the Pen Vue v-bind by git-cat-meow (@git-cat-meow) on CodePen.
使用時にはv-bindで対象の属性や要素を指定し、紐づけたいデータオブジェクトのプロパティ名を指定する。
Date()はjavascriptのインスタンス。new演算子を添えて使用し、ミリ単位秒での時刻を表現する（new演算子なしだと、文字列としてデータが表現される）。これにtoLocaleString()はjavascriptのメソッドで、使用言語に合わせた日時の文字列を返させる。
いきなり生のjavascriptが出てきて戸惑うが、調べてなんとなく理解する。
