Vue.jsをインストールしてWebアプリ開発を効率化させよう!
thumb_vuejsinstall_01
Vue.jsをインストールしてWebアプリ開発を効率化させよう!
アンドエンジニア編集部
2023.09.11
この記事でわかること
Vue.jsはWebアプリケーションの主にフロントエンドで利用される人気のフレームワーク
Vue.jsを手軽に使え、シンプルで学習コストが低いのが特徴だが、大規模開発には適さない
Vue.jsの環境構築には、あらかじめNode.jsのインストールが必要になる

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

img_vuejsjsinstall_01

動的な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とは

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

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

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

Vue.jsとは?すぐに分かる概要から特長・使い方まで解説!
ReactとVue.jsの違いは何?概要や具体的な違いを整理する

Vue.jsを利用する際の注意点

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

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

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

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の環境構築

img_vuejsjsinstall_02

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

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

Node.js(npm)のインストール

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

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

【参考】:Node.js |公式サイト

img_vuejsjsinstall_03
【画像】:Node.jsのダウンロード画面 

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

img_vuejsjsinstall_04
【画像】: Node.jsのインストール開始画面 

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

img_vuejsjsinstall_05
【画像】: Node.jsのダウンロード画面-ライセンス契約同意 

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

img_vuejsjsinstall_06
【画像】: Node.jsのインストール先確認 

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

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

img_vuejsjsinstall_07
【画像】: Node.jsのインストール先詳細設定 

6.Install(インストール)をクリックします。

img_vuejsjsinstall_08
【画像】: Node.jsのインストール先詳細設定 

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

img_vuejsjsinstall_09
【画像】: Node.jsのインストール開始画面 

8.インストールが終了したら、[Finish]をクリックします。

img_vuejsjsinstall_10
【画像】: Node.jsのインストール終了画面 

Node.jsのインストールの確認

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

C:>node -V

 

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

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

C:>npm -v

 

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

Vue.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を使ってみよう

img_vuejsjsinstall_11

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

 

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

img_vuejsjsinstall_12
【画像】: Node.jsのアクセス許可確認画面 

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

DONE  Compiled successfully in 8529ms   

 

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

img_vuejsjsinstall_13
【画像】: Vue.jsの起動画面 

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

img_vuejsjsinstall_14

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

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

気になる人のXをフォローしよう!
公式LINE
公式YouTube
マイナビITエージェント

編集部オススメコンテンツ

Sponsored
【年収±診断】6つの質問に答えて、真の市場価値をチェック!
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
はじめて転職される方へ
SE・システムエンジニア(IT/通信/インターネット) 求人一覧

編集部おすすめコンテンツ

Sponsored
【年収±診断】6つの質問に答えて、真の市場価値をチェック!
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

Powered by マイナビ AGENT