【初心者向け】Vue.jsとは？特徴やメリット、注意点をわかりやすく解説

Vue.jsは、JavaScriptを使ったアプリケーション開発を行うエンジニアから注目を集めている技術の1つです。Vue.jsを使うことによって、アプリケーション開発の効率と品質を向上させることができます。この記事ではVue.jsとは何かといった概要から、メリット・注意点・インストール方法・学習方法まで紹介するので参考にして下さい。

Vue.jsとは

Vue.jsはWebアプリケーションのUI部分などを開発する際に使われる、オープンソースのJavaScriptフレームワーク※です。JavaScript用のフレームワークは他にも数多くの種類がありますが、Vue.jsはその中でも特に高い採用率を誇ります。

Vue.jsを開発したのは、Googleの元エンジニアであるエヴァン・ヨー氏です。氏はAngularという別のUI用JavaScriptフレームワークを使っていましたが、「より効率的に使えるフレームワークが欲しい」と考えVue.jsを開発しました。

Vue.jsを導入している企業・サービスの例

Vue.jsはGoogleやAppleなど、世界の名だたる企業が利用しています。日本でも、ZOZOやDMM、一休.comといった企業・サービスがVue.jsを採用している状況です。これからもVue.jsを採用する企業・サービスは増えると考えられ、最も有力なJavaScriptフレームワークの1つと言えるでしょう。

Vue.jsの主な特徴・メリット

Vue.jsはなぜ多くの企業に採用されているのでしょうか。以下、Vue.jsの特徴や主なメリットをみていきましょう。

手軽に使い始められる

Vue.jsはHTMLに似た文法で覚えやすい上に、他フレームワークと比べシンプルに設計されています。またVue.jsは、scriptタグを1行追加するだけでよいことから、手軽に使い始められる点は大きなメリットです。

シンプルな設計で拡張性が高い

Vue.jsはシンプルに設計されている上に柔軟性が高く、他ライブラリと組み合わせて使うことも可能です。他のライブラリを使って開発中のUIに足りない部分があるときに、Vue.jsを使って補うこともできます。

覚えるべき知識が少なく、学習コストをおさえられる

Vue.jsはフレームワークとしては規模が小さく設計がシンプルであることから、新しく覚えなくてはならない知識が少なくてすみます。そのため他のフレームワークより学習に時間がかかりません。

「DOM操作」を自動化できる

DOM（Document Object Model）とは、HTMLデータをJavaScriptなどから使うための技術です。WebブラウザでJavaScriptを動作させるときは、HTMLデータがDOMというツリー形式のデータに変換（パース）されます。DOM操作とは、文字通りDOMを操作（編集）することです。

たとえばよく使われるJavaScriptライブラリ「jQuery」を採用して開発を行う際は、DOM操作を手動で行わなくてはなりません。一方、Vue.jsはHTMLとJavaScriptのデータ・イベントの関連付けを自動で行います。（DOM操作が自動化される）

その分、開発の負荷が少なくなる上に、jQueryよりコードを分かりやすく記載できるようになるのです。

Vue.jsを使うときの注意点

Vue.jsを使うときは、どのような点に注意すべきでしょうか。以下主な注意点を1つずつ解説します。

規模の大きな開発には不向き

Vue.jsが得意としているのはSPA※のようなシンプルで小規模な開発です。一方で、大規模な開発向けには適していません。大規模開発向けには、Angularなど先行するフレームワークの方が適しています。

ネイティブアプリ開発用としては遅れをとっている

Vue.jsはSPAのようなWebアプリケーションの開発に適したライブラリです。一方、スマートフォンのネイティブアプリ開発用としては、他の人気フレームワークから遅れをとっているのは否めません。今後の進化が期待されるところです。

Vue.jsのインストール方法

ここではWindows10にVue.jsをインストールする方法を紹介します。Vue.jsを使うためには、あらかじめNode.jsのインストールが必要です。Node.jsの詳細については、以下記事をご覧ください。

もちろん、KVM基盤を利用したVPS Windows Serverの環境でもVue.jsのインストールは可能です。

事前にNode.jsをインストールする

以下Node.js公式サイトから、Node.jsのインストーラをダウンロードしインストールを実行して下さい。インストーラはLTS（推奨版）と最新版の2種類がありますが、ここではLTS（推奨版）を選択します。

なおインストーラは基本的に指示されたまま進んでいただいて問題ありません。ただし、途中で表示される「Automatically install -」にはチェックを入れないでください。（チェックを入れると、インストールに時間がかかる場合があります。）

インストール完了後、以下の操作でインストールが成功したか確認します。

1. キーボードのWindowsキーを押しながら「R」キーをクリックする
2. 「ファイル名を指定して実行」メニューが表示されるので「cmd」と入力し「OK」をクリックする
3. コマンドプロンプトが起動するので、以下コマンドを1行ずつ順番に実行する

node --version
npm --version

これらのコマンドを実行すると、それぞれバージョンが表示されます。バージョンが表示されれば、Node.jsのインストールは成功です。

Vue.jsをインストールする

次にvue.jsの開発ツール「@vue/cli」をインストールします。コマンドプロンプトで以下コマンドを実行して下さい。

npm install -g @vue/cli

次に以下コマンドを実行し、正常にインストールが完了したか確認します。

vue --version

バージョンが表示されれば、Vue.jsのインストールが正常に完了しています。

プロジェクトの作成と起動

以下コマンドを実行しプロジェクトを作成します。※プロジェクト名は任意です。

vue create プロジェクト名

途中で「Please pick a preset」と聞かれますが、そのまま「Enter」キーをクリックして下さい。プロジェクト作成後は、まず作成したプロジェクトの配下へ移動します。

cd プロジェクト名

以下コマンドでプロジェクトを起動します。

npm run serve

ブラウザで「http://localhost:8080/」にアクセスすると、プロジェクトの起動画面が表示されます。

これでVue.jsのインストールは完了です。

Vue.jsの学習に役立つWebサイト・書籍

※注意
Vue.jsを使えるようにするためには、その前提としてJavaScriptの基本的な知識が必要です。JavaScript初心者の方は、まず以下記事を参考に学習を進めてください。

【超入門】JavaScriptとは？できること・基本をわかりやすく解説
https://www.kagoya.jp/howto/it-glossary/web/javascript/

Vue.jsはWebサイトや専用書籍で詳しく学ぶことができます。以下、おすすめをピックアップして紹介するので参考にして下さい。

• 【Webサイト】公式チュートリアル
  Vue.js公式のチュートリアルです。日本語で分かりやすくまとめられています。
  https://jp.vuejs.org/v2/guide/
  　
• 【Webサイト】Udemy
  Udemyは、様々なジャンルのオンライン学習講座が集まるプラットフォームです。Vue.jsに関しても、基本的な講座から実践的な講座まで幅広く公開されています。
  https://www.udemy.com/courses/search/?src=ukw&q=Vue.js
  　
• 【書籍】動かして学ぶ！Vue.js開発入門
  Vue.jsを使うのに、最低限必要な知識がわかりやすくまとめられた書籍です。はじめてVue.jsを学習する方におすすめできます。
  https://www.shoeisha.co.jp/book/detail/9784798158921

まとめ

Vue.jsはWebアプリケーションのUI開発に適した、シンプルで使いやすいJavaScriptフレームワークです。数あるJavaScriptフレームワークの中でも高い採用率を誇り、世界的な企業に利用されています。他フレームワークに比べ覚える知識が少なく、学習コストが少なくてすむことや、DOM操作を自動化できる点もメリットです。Vue.jsは今流行しているSPAの開発にも適しています。