Vue.jsによるプログラミングに関する世界観です。
JavaScript フレームワーク入門を参考にしています。
Vue.jsの特徴は、学習コストが低く、HTMLのテンプレートに使えること。
最初のとっかかりが分かりやすく、簡単に習得出来る。しかしながら、ビューをHTMLで作る時に、「このようにしたいのだけど素のHTMLではたくさんの場所に重複する内容を記述しないといけない」といった時に、JavaScriptとVue.jsを使うことで、まるでWikipediaのテンプレートを書いているように、簡単に部品化やコンポーネント化ができる。
導入は、MathJaxなどと同じようにscriptタグで読み込むか、あるいはnpmなどを使えば導入できる。ホームページを作る上で、「素のHTMLではやりづらい」といった時にVue.jsを使うことができる。
Vue.jsのようなJavaScriptフレームワークを使う主な目的として、画面表示やデータの変更を、ユーザーによる入力や操作に対して、リアルタイムに反映できるということがあります。
従来のサーバーサイドによるWebの開発では、このようなユーザーの操作の画面やデータへの反映は、どうしても遅れがちになります。
Vue.jsを使うことで、ユーザーの操作に対してインタラクティブにプログラムが対応することができます。
2023.07.04
以下のようにnpmからインストールできる。npm自体はNode.jsをインストールすれば利用できる。
npm install vue
あるいは、HTMLの内部で使う場合、CDNを使うこともできる。
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
Vue.jsでは、Vueというオブジェクトを使って、データと画面のマッピングを行う。Vueの引数に渡すelが対応するHTMLのタグを示し、dataがそのタグに渡すデータとなる。波括弧二つの{{ msg }}という記述は、Mustasheタグと呼ばれ、データをHTMLに埋め込むために使う。
HTMLの例：
<!DOCTYPE html>
<html>
<head>
<title>あなたのお気に入り情報</title>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="vue_main.js"></script>
</head>
<body onload="vue_active();">
<h1>あなたのお気に入り情報</h1>
<div id="vue_information">
<p>あなたの名前は{{ name }}さんです。</p>
<p>あなたの好きなOSは{{ favorite_os }}です。</p>
<p>あなたの好きなプログラミング言語は{{ favorite_proglang }}です。</p>
</div>
</body>
</html>
スクリプトの例（vue_main.js）：
function vue_active(){
new Vue({
el: '#vue_information',
data: {
name: 'Assy',
favorite_os: 'Gentoo Linux',
favorite_proglang: 'Delphi'
}
})
}
注記：この記述は古いバージョンであるVue.js ver.2系列の記法です。最新版のver.3系列では異なる記法となります。
（JavaScript フレームワーク入門を参考に執筆しました。）
Vue.jsでは、v-on（たとえばv-on:click）でメソッドを実行したり、v-bind（たとえばv-bind:class）でクラスやスタイルを編集したり、v-model（v-onとv-bindをまとめて設定する）でフォームを構築したりできる。また、コンポーネントを使うことで、独自のタグを使って固定的なHTMLを挿入できる。またv-ifやv-forなどを使うことでサーバーサイドの処理の代わりにもなる（v-ifとv-forは同時には使うべきではない）。
また、propsが便利で、テンプレートの一部の記述だけを変えるためにpropsが使える。たとえばリンクの文字列だけを変えて固定的なHTMLを任意の位置に挿入できる。
Vue.jsは学習コストが少なく、簡単に習得できる。以下のチュートリアル動画で、最新のVue.js 3の基本を学ぶことができる。（上記は以下の動画を参考に執筆しました。）
Vue.jsは、アジア圏では流行っていますが、世界ではReactに負けています（2021年1月現在）。
日本などのアジア圏だけを見ると、Vue.jsはReact並みに使われていますが、世界ではReactに圧倒的に負けています。
まだ決着がついたわけではありませんが、今後もTypeScriptとReactを学んでおけば何とかなると思います。
以上は以下の動画を参考に執筆しました。
以下の書籍が参考になります。
Vue.jsで作られているNuxt.jsは、Next.jsのようなフレームワークで、サーバサイドレンダリング（SSR）ができる。
後日注記：実際はNuxt.jsは単なるSSRではなく、さまざまな機能のあるフレームワーク。Vue.jsを単体で使うことは少なく、多くがNuxt.jsを使ってVue-routerやVuexを用いて使います（もちろんデフォルトでSSRが使えるため処理も高速になる）。そしてFirebaseなどと組み合わせます。
Vue.js向けの状態管理のためのフレームワーク。
状態も参照のこと。
FirebaseはmBaaSというシステムで、バックエンドの永続化や認証などを補うために使う。Nuxt.js + Firebaseの組み合わせでシステムを開発することが多い。
Firebaseも参照のこと。
SPAはシングルページアプリケーションの略。単一のページでアプリケーションを提供する。
Ajaxも参照のこと。
クライアントサイドのフレームワーク。MVVMあるいはコンポーネント指向。
学習コストが低く、手軽に使え、日本語の情報も多いVue.jsがおすすめ。
まず、div idタグでテンプレートとJavaScriptを紐づける。
HTMLテンプレートの中のエレメントの子要素に、属性を付加する。
二重波かっこ{{ }}でテンプレートの中のメッセージを書く。
v-onはイベントを処理する。省略形は「@」。
v-bindはHTMLタグの属性値に変数名を割り当てる。省略形は「:」。
v-modelはVueオブジェクトのデータとフォーム値を関係づける。
ほかにもいろいろとv-からはじまる属性がある。
JavaScriptの方で独自のコーディングをして、テンプレート内のメッセージを動的に変更したり色んなことができる。
複雑になってきたらCLIツールや複数の.vueファイルを用いてより高度な管理もできる。
ビルドしてindex.htmlとbuild.jsができたらそれを本番環境にデプロイする。
サーバ側でDOMレンダリングを終えた上で、クライアントがアクセスした時点ですぐに画面描画が行えるようにする（サーバーサイドレンダリング・SSR）。