【初級編】Vue.jsアプリケーションの環境構築から実行方法まで解説！

この記事でわかること

Vue.jsの開発環境の構築方法
Vue.jsでアプリケーション開発方法
Vue.jsでアプリケーション実行・デバッグ方法

最近は、Vue.jsやReactなどのSPA方式のアプリケーション開発がトレンドです。

この記事では、トレンドの一つであるVue.jsを使ったSPAアプリケーションの開発方法を解説しています。

Vue.jsの導入から開発環境の設定、アプリケーションの実行方法に至るまで解説しています。

Vue.js開発の入門者に役立つ内容となっていますので、ぜひ最後までご覧ください。

プロキシ環境下での実行方法など、開発者が直面する問題の対処方法も紹介しているので実践的な内容となっています。

Vue.jsの簡単な紹介
開発環境の構築
Vueアプリケーションの作成
まとめ
参考サイト

Vue.jsの簡単な紹介

Vue.jsはSPA開発に特化したJavaScriptライブラリです。

JQueryに比べてSPA開発の生産性が高く人気のライブラリです。Vue.jsは、同じSPA開発ライブラリのReactやAngulerと比べて、一番導入しやすいという特徴があります。

Vue.jsの詳細な情報はVue.jsの公式サイトを参照ください。

Vue.jsやReact、Angulerのどれを採用するかはプロジェクト特性に合わせて判断する必要があります。

特にVue.jsとReactはよくどちらを採用するか意見が分かれるほど同じくらいの人気のライブラリです。

※この記事を執筆した時点では、GoogleアナリティクスでVueとReactは同じくらいの人気です。

開発環境の構築

Vue.jsを開発できる環境を構築していきます。

本記事ではWindows上で開発環境を構築していきます。

macの場合は、node.jsのインストールをhomebrewでインストールするよう読み替えてください。

統合環境のインストールと設定

Vue.jsの開発は、VSCodeを利用するのが定番です。本記事でもVSCodeを使って手順を紹介します。

VSCodeは他の言語でもよく使うIDEです。

インストールされてない方はこの機会にインストールすることをオススメします。

VSCodeのインストール

Microsoft公式サイトからインストーラをダウンロードします。

VSCodeはインストール直後は英語です。

日本語で利用したい場合は、VSCodeの拡張機能メニューから「Japanese Language Pack for Visual Studio Code」をインストールしてください。

Vue.js用のプラグインの導入

Vue.js開発のために「Vue.js Extension Pack」プラグインをインストールします。

VSCodeの拡張機能メニューで検索し、以下のプラグインをインストールしてください。

Vue.js Extension Pack

補足事項

ネット上では、Vue.jsのデバッグには「Debugger for Chrome」というプラグインが必要という記事が出てきます。

こちらは、2023年9月時点非推奨になっており、現在はなくてもデバッグできます。

ブラウザの設定（Chrome または Edge）

Vue.jsのデバッグは、ブラウザで行います。

そのため、ブラウザでデバッグできる様にアドインの導入が必要です。

ブラウザはGoogle ChromeかMicrosoft Edgeを利用してください。

本記事ではGoogle Chromeの手順を紹介します。

ブラウザにアドインの追加

ブラウザにアドインを導入します。

Chrome、もしくは、Edge(Chronium)で以下サイトにアクセスしアドイン「Vue.js devtools」を追加します。

追加は以下画像の画面から追加してください。

ブラウザの拡張機能から、以下手順でプラグインを有効化します。
「拡張機能を管理」をクリック　ー　「Vue.js devtools」をクリック -「オン」にします

「ファイルのURLへのアクセスを許可する」をオンにします

アドインはChromeのものですが、Edge(Chromium)はChromeと同じエンジンのため、Chromeのアドインも使うことができます。

Vue.jsのインストール

ここではVue.jsのインストール手順を解説します。

Vue.jsはnpmを利用してインストールするので、node.jsをインストールしておきます。

node.jsはブラウザ以外でjavaScriptを実行できるようにするソフトウェアです。

node.jsのインストール

node.jsはこちらのサイトからインストーラをダウンロードします。

インストーラを実行して、すべての設定を変えずに指示に従ってインストールします。

インストール後、コマンドプロンプトで正常にインストールされたか確認します。

以下コマンドを実行し、画像のようにバージョン情報が表示されればインストールは完了です。

C:\Users\xxxxx>node -v
v18.16.0

Vue.js（vue CLI）のインストール

以下コマンドを実行してインストールします。

npm install -g @vue/cli

プロキシ環境で実行する場合の注意点

プロキシ環境下で実行する場合、以下のようにエラーが発生します。

C:\WINDOWS\system32>npm install -g @vue/cli
npm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno ECONNRESET
npm ERR! network request to https://registry.npmjs.org/@vue%2fcli failed, reason: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxxx\AppData\Local\npm-cache\_logs\2023-04-19T09_29_45_709Z-debug-0.log

プロキシ環境の場合、npmnいプロキシ情報を設定する必要があります。

以下のnpmコマンドで、プロキシ情報を設定できます。

プロキシ情報設定後、再度インストールコマンドを実行するとエラーが解消されます。

call npm -g config set proxy "http://xxx.xxx.xx.xxx:8080/"

Vueアプリケーションの作成

インストールが完了したので、Vue.jsアプリケーションを作成していきます。

作業ディレクトリの作成

今回作成する、Vue.jsアプリケーション用の作業ディレクトリを作成してください。

ディレクトリ作成後、コマンドプロンプトを起動して、作業ディレクトリまで移動します。

私は、作業ディレクトリをD:\data\vue-sampleに作成したので、以下のように移動します。

cd D:\data\vue-sample

Vue.jsプロジェクトの作成

Vue.jsのプロジェクトは「vue create」コマンドで作成します。

作業ディレクトリに移動後、以下のコマンドを実行してください。

今回作成するプロジェクトは「vue-first」という名前にしました。

vue create vue-first

コマンド実行後、「Successfully created project プロジェクト名」と表示されればプロジェクトの作成は成功です。

Vueアプリケーションの起動

上で作成したVueアプリケーションを起動してみます。

「npm run serve」コマンドでアプリケーションが起動します。

npm run serve

コマンド実行後、ブラウザで「http://localhost:8080/」にアクセスします。

以下のように表示されればアプリケーションの起動は成功です。

まとめ

Vue.jsの開発はVSCodeを利用する
ブラウザにVue.js用のアドインが必要
Vue.jsのデバッグは、ブラウザ上で実施する

本記事では、Vue.jsでアプリケーションを開発するための開発環境の構築の内容を紹介しました。

最近のトレンドはSPA方式のアプリケーションから各サービスのAPIを呼び出す開発方法が主流となっています。

Vue.jsは、SPA方式のアプリケーション開発に役立つスキルであるため市場からの需要が高まっています。

ぜひ習得してエンジニアとしての市場価値を高めてください。

本記事が皆様の参考となれば幸いです。

参考サイト

当記事を作成するにあたり、以下記事を参考とさせていただきました

ありがとうございます。

Vue.js開発環境構築手順
 vue.jsの開発環境を構築しよう！
【Vue.js】Vuejsをchromeブラウザでデバッグする方法