はじめに
JavaScriptについてチュートリアルを用いて基礎的な部分を中心に学習を進めていく中で少し自信がついてきたので今回はフレームワークの一つであるVue.jsについて触れていきたいと思います！
最初は描き方ではなく、Vue.jsの概要についてまとめ、具体的な記述方法については学習が終わり次第、記事にまとめて公開したいと思います。
本記事の作成にあたって参考にしたサイトのリンクを掲載しておきます。いまいち理解出来なかった方は是非参考にしてみてください。
Vue.jsとは？
Vue.jsは、標準的な HTML、CSS、JavaScript の上に構築されるユーザーインターフェースの構築のためのJavaScriptフレームワークです。
ほかの開発ツールと組み合わせやすく、保守・運用が簡単に行える（らしい）のでフロントエンド開発を行う方に人気なフレームワークとなっています。
フレームワーク：
ソフトウェア開発において開発者が効率的にアプリケーションを構築するための基本的な構造や機能を提供するツールやライブラリの集合体。
特徴
次にVue.jsの特徴を４つ紹介します。
高速に動作できる
Vueでは、仮想DOMという概念を適用しJavaScriptオブジェクトを使って差分のみをDOMに反映する処理を行うことで処理の高速化を図っています。
つまりwebページの要素に差分が出たときのみその部分を再描画するため表示がその分スムーズになるということです。
また、Vue.jsは軽量なフレームワークなためユーザーがWebページにアクセスする際に、大量のデータを読み込む必要がないことも、読み込みの速さにつながっています。
JavaScriptライブラリを組み合わせることができる
「Vue.jsでWebサービスの骨組みを構築しつつ、〇〇にはjQueryを用いる」というようにほかのライブラリを一緒に用いることが出来ます。
開発にかかる工数を削減できる
Vue.jsにおけるコンポーネントは独立性が強く、相互に依存していません。したがって複数の画面でコンポーネントを使いまわすことが出来ることから効率的に開発を行うことが出来ます。
コンポーネント：
プログラムを構成する要素を「部品化」し、部品を組み合わせながらコーディングを行う仕組み
データの変更を自動で画面に反映する
Vue.jsには、内部で管理しているデータをシームレスに画面へ反映させる リアクティブシステムがあります。リアクティブシステムとは、データ同士が紐付けられて、どちらか一方のデータが更新されると、もう一方も更新される仕組みのことです。具体的には、JavaScriptで扱うデータと、Viewとしてユーザーに見えているDOMのデータを同期させることを指します。また、データ同士を紐付けることをデータバインディングといいます。
できること
フロントエンド開発
Vue.jaはフロントエンド開発に特化したフレームワークとなっています。
また、スマートフォンやタブレットなどのモバイル端末にインストールするアプリケーションの開発であったり「Electron」を組み合わせることで、パソコンにインストールして使うデスクトップアプリだったりも開発できます。
PSA(シングルページアプリケーション)の構築
Vue.jsはルーティングという機能を使ってページ遷移をしているように見せることができます。画面遷移を最小限におさえることでユーザーのストレスを減らすことでUX（ユーザー体験）を高められるメリットもあります。UXが重視される近年のWeb開発において、SPAが持つ強みは無視できません。
シングルページアプリケーション：
単一のページとして動作するアプリケーション」の総称です。ページ遷移が発生しないため通信負荷が小さく、外観の同一性も維持しやすいため、クロスプラットフォーム対応のアプリケーションなどで頻繁に使用されています。
勉強方法
私の調査不足感が否めませんが、やはり公式ドキュメントに従って学習を進めていくのが、独学・無料という観点では最強なのかなと感じました。
また、Vue.jsの公式サイトに記載されているCDNを用いることですぐに実行することが出来るので下記サイトを是非チェックしてください！
さいごに
本記事ではVue.jsの概要と特徴について初心者ながら調べたことをまとめました。
これ以降のVue関連記事では、貧乏人の端くれとしてチュートリアルで学んだことを自分なりに理解して記事にまとめていきたいなと思います！