Vue.jsは、とっても楽しい
2017年頃、ネットでReactとかVueといったJavaScriptのフレームワークの話題を頻繁に目にするようになって、自分のWordPressサイトのフロントエンドでも、ReactかVueを使ってみたいと思い始めました。
ReactにするかVueにするか、いろいろ調べた結果、
- 既存のJavaScriptのプログラムに少しずつ導入できそうなこと
- Vue2の日本語サイトのイントロダクションの説明がとてもわかりやすかったこと
から、Vue.js（当時のバージョンは、2.xだったので、Vue2と呼ぶ）を使い始めました。
Vue2を使うまでは、JQueryを使ってHTMLの要素を動的に操作したりしていましたが、いざ、Vue2を使い始めると、
「なんて便利なの！」
「もっと早く使えば良かった。」
という感じで、ドハマりしてしまいました。
何より、JavaScriptの変数やプロパティーが変わると、更新が必要なDOMが自動で置き換わるリアクティブな動作が心地いいんです。
状態の変化に応じて、自分でHTML要素をJQueryで変更する面倒な作業には、もう戻れません。
「カバの樹」さんのサイトなどで紹介されているVueのライブラリも便利そうなものが多く、気に入ったVueライブラリを自分のサイトに組み込むのが楽しい作業になりました。
Vue3へ移行
Vue.jsは、2020年の9月にメジャーバージョンが2.xから3.0にアップし、さまざまな改良が加えられました。
いろいろネットの情報を調べてみると、Vue.js本体を2.xから3.0に単純に差し替えるだけではダメで、自分の書いたJavaScriptのプログラムを変更しないといけないことがわかりました。
以下のように、Vueアプリケーションを組み込む、最初のコードから違います。
// Vue2の場合
var app = new Vue({
el: '#app',
…
})// Vue3の場合
Vue.createApp(Counter).mount('#app')ということで、ちょっと面倒臭くなり、しばらく放っておきました。
ただ、HTMLのテーブルにいろいろな機能を追加するために、ずっと利用させてもらってきたJQueryの「teblesorter」というライブラリを、テーブル用Vueライブラリ「vue-good-table-next」へ置き換えるのを機に、Vue3に移行することにしました。
使いたいのはローカルのブラウザ環境
ここで一つ注意があります。
ネットでVueの情報を閲覧すると、そのほとんどが、サーバー側にNode.jsをインストールして、そのNode.jsの環境でVueを実行させる話です。
この「ちょいプラ素材」のブログで取り上げるのは、サーバー側にインストールしたNode.js環境の話ではなく、手元（ローカル）のブラウザ環境でVue3を利用する方法です。
WordPressで作成されたWebサイトが表示されるまでの流れ
- クライアント側：手元（ローカル）のブラウザ環境
- サーバー側：サーバー環境
の区別を理解するために、WordPressで作成されたWebサイトの情報やコンテンツが、ローカルPCのブラウザに表示されるまでの流れを説明します。
この「ちょいプラ素材」のブログも、WordPressを利用したWebサイトです。
皆さんの使っているブラウザから、「ちょいプラ素材」にアクセスしたとき、「ちょいプラ素材」のコンテンツがブラウザに表示されるまでの流れを下図で説明します。
- ブラウザから「ちょいプラ素材」のURLを指定してWebサーバーにアクセスします。
- Webサーバーは、URLを解釈して、URLに応じたPHPプログラムを実行します。
Webサーバーには、Linuxサーバーで利用されるAPACHE、NGINX、OpenLiteSpeedや、Windowsサーバーで利用されるIISなどがあります。
- PHPプログラムは、MySQLを経由して、データベースに保存されているコンテンツ（文章やデータ）を読み出します。
MariaDBなどMySQL互換のデータベースサーバーが使われることもあります。
- データベースから読み出されたコンテンツは、PHPプログラムによって処理され、Webサーバーを通して、HTML / CSS / JavaScript の形式でクライアント側に送られます。
- ブラウザは、クライアント側に送られたHTML / CSS を解釈し、画面に表示します。
JavaScriptが含まれるWebページでは、JavaScriptのプログラムを実行します。
JavaScript（場合によっては、JavaScriptのjQueryライブラリ、JavaScriptのフレームワークのVue.jsなど）を利用するとHTMLの要素を動的に変更することができます。
「ちょいプラ素材」では、JavaScriptライブラリやVueライブラリを使って、表やグラフを表示したり、ユーザーインターフェースを構成したりしています。
- ブラウザはクライアント側にあるので、ブラウザからサーバー側のデータベースに直接アクセスできません。
ユーザーがインターフェースを操作して入力したパラメーターをサーバーに送ったり、表やグラフの元になるデータをサーバーに要求したりする場合は、Ajax通信を使います。
URLを指定したアクセスでは、Webページ全体の表示が更新（リセット）されてしまいますが、Ajax通信を使うと、Webページの表示をリセットしないで、クライアントとサーバーの間でデータのやりとりができます。
Ajax通信は、jQueryライブラリやフレームワークのVue.jsにaxiosを組み合わせて利用した方が楽に処理できます。
余談になりますが、2022年4月現在、「W3Techs」の調査データによると、全世界のWebサイトの43%がWordPressを利用しています。
コンテンツ管理システムでのシェアは、64.5%です。
これだけ広くWordPressが使われるようになった理由は、WordPressがリリースされた当時、一番メジャーだった以下のサーバーシステムを組み合わせて構成したので、ITエンジニアに抵抗感なく受け入れられたからだと思います。
- Webサーバー：APACHE
- アプリケーションサーバー：PHP
- データベースサーバー：MySQL
サーバー側にインストールしたNode.jsでJavaScriptを使う場合
先ほど、
ネットでVueの情報を閲覧すると、そのほとんどが、サーバー側にNode.jsをインストールして、そのNode.jsの環境でVueを実行させる話です。
と説明しました。
上図で示したように、WordPressのアプリケーションサーバーは、PHPを使っています。
WordPress以外の一部のWebサイトでは、サーバーにNode.jsをインストールし、サーバー側でもJavaScriptが動作する環境を用意して、この環境で動作するJavaScriptをアプリケーションサーバーとして使うことがあります。
Vueは、JavaScriptのフレームワークですから、当然、サーバー側のNode.js環境でも動作します。
ネットに溢れているVueの情報は、サーバー側のNode.js環境の話がほとんどです。
クライアント側のブラウザで動作するVueとは？
では、「クライアント側のブラウザで動作するVue」とは、どういう話でしょうか？
上図で、
- データベースから読み出されたコンテンツは、PHPプログラムによって処理され、Webサーバーを通して、HTML / CSS / JavaScript の形式でクライアント側に送られます。
- ブラウザは、クライアント側に送られたHTML / CSS を解釈し、画面に表示します。
JavaScriptがが含まれるWebページでは、JavaScriptのプログラムを実行します。
と説明しました。
クライアント側に送られたJavaScript（④）は、ブラウザで実行（⑤）されますが、このブラウザで実行されるJavaScriptでも、Vueを動作させることができます。
「クライアント側のブラウザで動作するVue」とは、ブラウザで実行（⑤）されるJavaScriptで、Vueを利用するという意味です。
CDNからVueを読み込む
ブラウザで動作するJavaScriptでVueを利用するためには、Vue本体（Vue.js）を読み込む必要があります。
上図の④で、Webサーバーから送られるJavaScriptに、Vue本体を含めても良いのですが、
- サーバー側の処理や通信トラフィックに負荷がかかる
- 個々のサーバーで、Vue本体のバージョン管理をするのは大変
という理由で、実際には行われていません。
では、どうするか？
④で送られるHTMLやJavaScriptの中に、Vue本体を読み込む処理（コード）を埋め込みます。
Vue本体を読み込むコードは、1行で書けるほどの小さいサイズなので、④で送られるHTMLやJavaScriptのデータ量はほとんど増えません。
以下に、実際のコードの例を示します。
<!-- HTMLから読み込む場合 -->
<script src="https://unpkg.com/vue@next"></script>// JavaScriptから読み込む場合
import Vue from "https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.esm-browser.js";上記のコードで、「3.2.31」は、Vueのバージョンです。
メジャーバージョンが「3」なので、Vue3を読み込んでいます。
また、Vue本体を「https://unpkg.com」や「https://cdn.jsdelivr.net」といった、CDNサイトから読み込んでいます。
CDNは、「Content Delivery Network：コンテンツデリバリーネットワーク」の略で、
ウェブサーバーの負荷を軽減する目的で、ウェブコンテンツを効率的かつスピーディーに配信できるように工夫されたネットワーク
の仕組みです。
まとめ
今後、「ちょいプラ素材」では、ローカルのブラウザ環境でVue3を使う方法を説明します。
具体的には、
- ブラウザ環境で、SFC（Single-File Component：単一ファイルコンポーネント、別名 *.vueファイル）を使う方法
- 美しいグラフを作成できる有名なJavaScriptライブラリ「Chart.js」をVue3で使う方法
- テーブル用の高機能なVueライブラリ「vue-good-table-next」をVue3で使う方法
などを紹介しようと思います。
コメント