Vue.jsってなんなの？使うと何が違うの？
というところを、これからフロントエンドを学習される方向けに記事にしてみました。
SPAとは
Single Page Applicationを略したもので、特徴としては、単一のページで構成される、クロスプラットフォームであること、UXの向上、などがよく取り上げられています。
Vue.jsやReact.jsなどのJSフレームワークを取り入れることによってSPAが作りやすくなります。
Webの表示の仕組みについて
どうしてSPAである必要があるのか、通常のWebサイトの表示の流れと比較して説明したいと思います。
ページを表示するためのファイルを取得
Webページを開くときに私たちはサーバーに対してリクエストを送ります。
簡単に言うと、ブラウザからWebページのURLを叩いたり、ブラウザでWebサイトを検索してリンク開く、などの行為がそれに該当します。
この際、どのサーバーのどのディレクトリのどのファイルを表示してほしいのかを、リクエストしています。
サーバーは指定されたファイルがあればそのファイルを表示します。
ページを開いた際には、ページ表示に必要なファイルを取得するために、サーバーとの通信が発生していることになります。
CSS、JSファイルをHTMLのheadから読み込んでいる場合は、そちらも取得されます。
描画処理(レンダリング)
ページ表示に必要なHTMLファイルを取得してからは、HTMLの構造やCSSでのスタイル、JSでの処理を反映させて、画面を描画しなければなりません。
HTMLの構造の部分はよくDOMと言われます。
正しい意味としては、HTMLをプログラムから操作するための仕組みのようですが、
「DOMの取得」、「DOMの操作」など、DOM自体が構造であるかのような意味合いでもよく使われます。
DOMとは「Document Object Model」の略だ。
直訳すると、「ドキュメントを物として扱うモデル」になる。
プログラムからHTMLやXMLを自由に操作するための仕組みだ。
https://eng-entrance.com/what-is-dom
ファイル取得後は、DOMの構造が取得され、要素のサイズや位置、余白などの計算、背景色や文字色などのスタイルを反映という順で行われます。
このページ描画までの一連の処理はレンダリングと呼ばれます。
以下の例はかなり省略しているので、詳しく知りたい方はググって見てください。
例えば、DOMの構造を変化させたとします。
そうするとまたDOMの取得から、幅や余白などのレイアウトの計算、背景色や文字色などの描画の順で処理が行われます。
一部テキストの文字色が変更された場合は、DOMやレイアウトに関わるスタイルが変更されていないので、色の反映の処理まで戻ります。
DOMの構造を変化させた場合と色を変更した場合では色のみを変更した場合の方が負荷が少ないことになります。
ページ遷移があった場合は、ファイルの取得から描画までの処理が行われますが、SPAのように1つのページで構成されていれば、少なからず表示に関わるファイルを再度取得することはありません。
また、Vue.jsでは仮想DOMが使用されます。
仮想DOMによってさらに描画処理の負担が減り、処理の無駄を省くことができます。
仮想DOMとは
仮想DOMを用いない、リアルなDOMについては、前の説明のような流れで処理されます。
仮想DOMの場合は、DOMに変更があった場合に、差分を検知し変更分のみを最適な形で処理します。
ただ、これは仮想DOMが構築されてからの話です。
初回表示については、仮想DOMを構築するためにリアルなDOMが描画されるよりも時間がかかってしまいます。
SPAに適したページ
初回表示に時間がかかるので、処理が少ないページではあまり効果得られないかもしれません。
初回表示が遅ければユーザーの離脱率が上がります。
極端な例ですが、モバイル向けのWEBサイトでは、ページの読み込みにかかる時間が3秒以上だと53％が離脱するという結果もあるようです。
JSフレームワークを使うのに適したページは、ユーザーがUIを操作することの多いページ（検索などの機能があったり、UI/UXを重視したページなど）、直帰率の低いページになるかと思います。
メディアサイトの記事ページなどは直帰率が高い傾向にあるので、あまり取り入れるメリットはないかと思います。
ただし、ランディングページなどブランディングに関わるものについては、直帰率は比較的高めの傾向にはありますが、それ以上にUI/UX重視したいもあります。
あくまでこれらはJSフレームワークを取り入れる際の判断の一例となります。
直帰率については以下のページで業界別データがまとめられているのでよかったら見てみてください。
https://www.demandsphere.jp/blog/referrer-pattern-average
導入のメリット
JSフレームワークの導入にあたって、Vue.jsが選択された理由についての多くは学習コストが少ないこと、規模に合わせてカスタマイズしやすいことがよく挙げられています。
ちなみに、Vue.jsはLine(スタンプショップ等)やRetty、noteなどのサービスでも導入されています。
- 生のHTML・CSSに近い形で記述ができる
- 日本語のドキュメントや導入事例が多い
- ES6の知識がなくても取り入れられる
- 規模に合わせて使いやすい
おわりに
ここまでお読みいただきありがとうございます。
今後は、VuexやVue Router、Nuxt.jsやSSRについても記事にできたらいいなと思っていますので、よろしくお願いします。