Vue.jsについて簡単に振り返る

年末年始に初めてVue.jsを使ったアプリケーションを開発しました。
それを振り返り、改めてVue.jｓってなんだっけを簡単にまとめてみます。

フロントエンドフレームワーク

通常フロント側(ブラウザ上)で動きをつけるためにはJavaSctiptでプログラムを書きます。JavaScriptをより簡単に表記できるJQueryも有名ですね。小規模なサイトやあまり動きのないサイトであればJavaScriptやJQueryでプログラムを書いてもそこまで問題にはなりません。
しかし、中・大規模なWebアプリケーションになってくるとコード量はかなり増えたりきて生産性や保守性が低下してしまいます。
そこで登場したのがフロントエンドフレームワークと呼ばれるもので、少ないコード量でかつコードを統一化してプログラムを作成することができます。

フロントエンドフレームワークの代表として以下のようなものがあります。

• Vue.js
• React
• Angular

Vue.jsとは

Vue.jsは以下の特徴があるようです。

• 学習コストが低い
• 双方向データバインディング
• 様々な開発規模に対応

それほど覚えることが多くないため学習しやすく、双方向データバインディングでjs側のデータ(プロパティ)が変わるとHTMLの表示が自動で変更されるためコードを書く手間が省かれます。
私はVue.jsとReactで開発経験があるのですが、確かにVueのほうが理解しやすい気がしました。双方向データバインディングもストレスなく気持ちいいです(jsやJQueryは大変だった...)。

クライアントサイドレンダリングとサーバーサイドレンダリング

通常Vue.jsではサーバーからファイル一式をダウンロードして、ユーザーのブラウザ上でJavaScriptを実行してDOMを生成します。これをクライアントサイドレンダリングと呼びます。但しこの場合、初回アクセスではページの表示までに時間がかかってしまいます(ページの読み込み速度的にSEOが不利になることもあるとか)。特に、スペックの低い端末ではより表示できるまでに時間がかかってしまいます。
そこで、あらかじめサーバー側でJavaScriptを実行してHTMLを生成した後にそれをブラウザにレスポンスするのがサーバーサイドレンダリング(SSR)です。サーバーサイドレンダリングではユーザーの端末や通信環境の影響が左右されにくく、ページの表示速度も早くなります。

Vue.jsのサーバーサイドレンダリングにNuxt.jsというのがあります。

まとめ

以上、フロントエンドフレームワークのVue.jsについてまとめてみました。まとめてみて改めて勉強になりました。私自身まだまだフロントの開発経験が浅いのでどんどん使っていきたいと思います。

参考文献

フロントエンドフレームワークとは
【公式】Vue.js
【公式】 Vue.js サーバサイドレンダリングガイド
【Qiita】 SPA、SSR、プリレンダリングの違いをまとめてみた