Vue.jsをインストールしてWebアプリ開発を効率化させよう！

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

動的なWebページの作成を行う上で、JavaScriptは必要欠かせないログラミング言語です。特にWebエンジニアを目指す方は、JavaScriptを学ばれていると思いますが、効率的な開発を行う上で欠かせないのが、フレームワークです。

JavaScriptにはよく知られたフレームワークとして、「React」や「Angular」、「Vue.js」などがあります。この記事では、JavaScriptのフレームワーク「Vue.js」のメリット、インストール方法などについて解説をしていきます。

【参考】：Vue.js ｜ The Progressive JavaScript Framework | Vue.js 【参考】：react.dev のご紹介 |  React 【参考】：Angular 日本語版

Vue.js（ヴュー・ジェイエスと発音）は、主にフロントエンド開発で利用されるフレームワークです。2014年にリリースされた比較的新しいフレームワークで、JavaScriptエンジニアにはよく知られています。

フレームワークとは、開発でよく利用される機能が一つにまとめられた枠組みのことで、ルールに従ってコードを書いていくと、少ないコードで複雑なプログラミングが可能で、開発の効率化、品質の均一化などのメリットが得られます。

また、Vue.jsオープンソースソフトウェアであり、無償で利用できる点、学習コストが低く、汎用性が高いのが主な特徴です。

Vue.jsとは？すぐに分かる概要から特長・使い方まで解説！

ReactとVue.jsの違いは何？概要や具体的な違いを整理する

Vue.jsはシンプルな文法で、コードにScriptタグを1行追加するだけで済むため、手軽に利用でき、また拡張性が高いのも特徴です。一方で、次のような注意点がありますので、Vue.jsを利用する際には留意が必要です。

▪Vue.jsは比較的小規模な開発に適しており、大規模な開発には適していません。大規模開発ではAngularが利用されるケースが多くなっています。

▪Vue.jsはスマートフォンでのネイティブアプリの開発には適しておらず、今後の対応が待たれています。

Vue.jsのインストールでは、ただ単にVue.jsをインストールするのではなく、その前にNode.jsをインストールします。Node.jsはサーバーサイドのJavaScript実行環境で、さらにnpm（Node Package Manager）というパッケージ管理の仕組みが同梱されています。

Webアプリはフロントエンドとバックエンド（サーバーサイド）から構成されるのが一般的ですが、Node.jsはサーバーサイドを担い、なおかつフロントエンドのJavaScriptプログラムから制御が可能です。そのため、Vue.jsのインストールでは、Node.jsのインストールが欠かせません。

JavaScriptのおすすめ開発環境ツール9選！必要な準備も紹介

Vue.jsの環境構築

ここではVue.jsの環境を構築する手順を紹介します。最初にNode.jsをインストールし、インストールを確認できた後にNode.jsのインストールを確認し、続いてVue.jsをインストールする方法について解説します。

Node.jsとは？JavaScriptとの違いや使い所を解説

Vue.jsのインストールと利用には、npmが必要です。Windowsへのインストールでは、Node.jsをインストールするとnpmも自動的にインストールされます。以下、Node.jsのダウンロードとインストール方法について紹介します。

1．以下の公式サイトにアクセスし、Node.jsをダウンロードします。特別な理由がない限り、安定稼働している「18.17.1.LTS推奨版」を選択しましょう。

【参考】：Node.js ｜公式サイト

2．ダウンロードしたファイル「node-v18.17.1-x64.msi」を選択しダブルクリックすると、インストーラが起動します。［Next］を選択して先に進みます。

3．ライセンス契約を読み、「I accept the terms in the License Agreement」にチェックを入れて［Next］を選択します。

4．Node.jsをインストールする先を設定します。特別な理由がない限りはデフォルトのままで構いません。［Next］をクリックして次に進みます。

5．Automatically Install the tools.Note that this will ...」のチェック欄はチェックを入れる必要はありませんので、そのまま［Next］をクリックして次にへ進みます。

チェックを入れると、プロンプト画面が表示されてIInstration Scriptが実行されますが、大変時間が掛かり待たされますので、チェックをおすすめしません。

6．Install（インストール）をクリックします。

7．インストール実行中の画面が表示されますが、1分〜2分程度でインストールは終了します。

8．インストールが終了したら、［Finish］をクリックします。

Node.jsのインストールが終了したら、Node.jsとnpmが正しくインストールされているか、それぞれのバージョン情報で確認します。確認は次のように行います。Windows11の場合は、スタートボタンを右クリックし、「ターミナル（管理者）」を起動し、次のコマンドを入力します。

C:>node -V

表示された結果が『v18.17.1』であれば問題ありません。

続いて、npmのバージョンも確認しておきましょう。

C:>npm -v

『9.6.7』と表示されていれば、正しくインストールされています。以上でNode.jsのインストールは終了です。

Node.jsが正しくインストールできたら、続いてVue.jsをインストールします。Vue.jsのインストールには「vue-cli」を使用して行います。

1．「ターミナル（管理者）」を開き「npm install -g @vue/cli」を入力します。

C:>npm install -g @vue/cli

2．インストールが終了したら、正しくインストールされたことを確認するため、「ターミナル（管理者）」画面で「vue -v」を入力します。

C:>vue --version

『@vue/cli 5.0.8』と表示されていれば、無事にインストールできています。

Vue.jsを使ってみよう

Node.jsのインストールに続いて、Vue.jsをインストールしました。Vue.jsが利用できる環境になりましたので、Vueを起動して確認してみましょう。

1．最初にVueのプロジェクトを作成してみましょう。「ターミナル（管理者）」を開き、以下のコマンドを入力します。ここではプロジェクト名を仮に「project x」としましたが、任意の名前を設定してください。

C:>vue  create project x

2．コマンドを入力した後に以下のようなオプション選択が表示されます。

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

Defaultが［Vue3］になっていますが、安定稼働しているVue2を選ぶこともできます。また、マニュアル操作を希望する場合には、「Manually select features」を選択できます。

選択は>をカーソルキーで上下に移動して行います。今回はDefaultのままで実行します。処理が終了したら、cdコマンドでディレクトリを切り替えます。

C:>cd projectx

ルートディレクトリがプロジェクト名（ここではprojectx）に切り替わったら、Webサーバを起動するために、次のコマンドを入力します。

C:>npm run serve

処理が始まると次の画面が表示されることがありますが、その場合は許可を選択します。

処理が正常に終了すると次のメッセージが表示されます。

DONE  Compiled successfully in 8529ms   

ブラウザのURL欄に「http://localhost:8080/」と入力し、以下のページが表示されたらVue.jsは正常に起動しています。

Vue.jsを活用して開発力を向上させよう

この記事ではVue.jsの概要、メリット、インストール方法、起動方法について紹介しました。Vue.jsはWebアプリケーション開発で必須とも言えるフレームワークです。これからWebエンジニアを目指す方には手放せないツールになるかと思います。

Vue.jsに興味を持った方は、この記事を参考にしてVue.jsをインストールし、Webアプリの開発力向上にぜひ生かしてみてください。