【JavaScript】Vue.jsに触れてみた
[2024/07/10]
JavaScriptについて勉強をしていました。
いろんなウェブアプリも作成してきましたが、これらは基本Vanilla（バニラ） JavaScriptで書いてきました。
Vanilla JavaScriptとは？
バニラとは素の状態で、マイクラなんかでもModを使っていない状態をバニラと呼びます。
Vanilla JavaScriptとは、素のJavaScriptのことをいいます。
自分は基本的にバニラでプログラムを組んできました（とはいえ、DataTablesのようなライブラリを使うことはあります）。
フレームワークとは？
じゃあバニラに対して何があるんだ？というと、Vue.jsやReact、AngularというJavaScriptのフレームワークというものがあります。
ぶっちゃけ同じことはバニラでもやろうと思えばできます。でも、フレームワークを使うともっと簡単にできるという訳です。
「だったら最初からフレームワークを使ってくればよかったんじゃね？」となる訳ですが、今まで何度か使おうと挑戦したものの挫折をしてました。
環境構築（Node.jsは使いたくない）
それぞれのフレームワークを使ってみようと調べてみると、「まずNode.js（サーバ上でJavaScriptを動かすヤツ）をインストールします。」というところから始まります。
いつも使っているPCにNode.jsをインストールするのは簡単です。でも自分のウェブサーバはレンタルサーバでNode.jsを動かすことができません。一番最初にここで躓きました（結構前の話）。
先ほど挙げたフレームワークの中でVue.jsはCDN（別のサーバからファイルを参照する仕組み）でも利用できるってことで、とりあえず動かすことができました。
Vue2とVue3
Vue.jsを動かすことはできたんですが、タイミングがあまりよくなかった。
タイミングというのは、Vue.jsの最新バージョンはVue3です。Vue2から大きく変わったということで、Vue3の情報を見つけることができなかった。
正確にはVue2と3の情報の見分けがつかなかった。
Vue3からはcomposition APIというものが追加され、コードの書き方が大きく変わりました。
今までのOptions APIも使えるのですが、今から勉強するならcomposition APIとなった訳ですが、いちいちコードに「composition APIですよー」なんて書いてない訳です。
知識があれば見分けるのは簡単ですが、無知な自分には本当に必要な情報を探すのが大変。
ぶっちゃけ何が便利なの？
「フレームワークを使うともっと簡単にできる」と書いたものの、この時点では何が便利なのかさっぱりわかっていませんでした。ということもあり、あまり学習に乗り気ではなかった。
でも、実際に動かしてみると「便利だな！」と思うことがありました。
例えば「入力された値を取得して、結果を表示する」という基本的はプログラムがあるとします。
バニラでは、「入力欄に値が変更されたときに動作する」という仕組み（イベントリスナー）を事前に仕込んでおく必要があり、その次に値の取得をしたり、計算する関数の呼び出ししたりしないといけない。計算以外にもやることがたくさんあります。その分コードも長くなる。
これがVue.jsだとフォームから値を設定(v-model)が簡単にでき、値が変更される（リアクティブ）と自動的に再計算される仕組みがあります。
値を取得するコードや計算をする関数を呼び出したりする必要がないのは便利。
いつものIIDXのDJ LEVELを計算するツールをVue.jsを使って作ってみた。
「Note」と「ExScore」の取得のコードは書く必要はありません。「const note = ref(1000);」と宣言していれば、「v-model.number="note"」とした入力欄の値を自動で反映されます。
computedプロパティというものにすると、計算に必要な値（今回であれば「Note」や「ExScore」）が変更されると自動で再計算され、結果も自動で反映されます。
formatPercentで表示形式を定義していて、「{{ formatPercent(rate) }}」とスコアレートをパーセント表示にしています。今回は1つしかパーセント表示にするものはありませんが、複数あるときは便利。
watchで値の監視をしていて「理論値以上のExScoreが入力されたときに理論値にする」ようにしています。
最初のうちは慣れないですが、それでも処理を省略できるのは便利ですね。
さいごに
リアクティブとかそういう知識もない自分にとっては、仕組みを知ったときに一生「へー。へー。」って感心してた。