当記事では、フロントエンドアプリで人気のVue.jsの開発環境構築からアプリケーションを動作する方法を紹介します。
初めてVue.jsを触るので、作り方から動かし方まで知りたい！！
と、思ってる方におすすめです。
この記事では、以下のことを紹介してます。
- Vue.jsについて
- 開発環境の構築方法
- Vue.jsの設定
- Vue.jsアプリケーションの作成方法
- Vue.jsアプリケーションの動かし方
VSCodeでの環境設定から、Vue.jsのインストール、必要なプラグインの追加方法、そしてアプリケーションの作成と実行に至るまでの手順を紹介しています。
Vue.jsのデバッグ方法や、プロキシ環境下でのnpmの設定など、実践的な内容も紹介してます。開発者が直面する一般的な問題への対処法もあり、Vue.js開発の入門者から中級者まで役立つ内容を紹介してます。
Vue.jsとは
Vue.jsはSPA開発に特化したJavaScriptライブラリです。JQueryでもSPA方式のアプリケーションを作成することができますが、JQueryに比べて生産性が高いとされています。同じようなライブラリにReactやAngulerがありますが、その中でも一番導入が容易なライブラリとなります。
VueやReact、Angulerのどれを採用するかはプロジェクト特性に合わせて判断する必要があります。
※この記事を執筆した時点では、GoogleアナリティクスでVueとReactは同じくらいの人気です。
Vueに関しての詳細な情報は以下の公式サイトを参照ください。
開発環境構築
WindowsのVSCode上にVue.jsを開発できる環境を構築します。
macの場合は、Windowsでnode.jsをhomebrewでインストールするくらいの違いです。
VSCodeの設定
vue.jsを開発するにあたって、VSCodeを開発環境として利用します。ここでは、VSCodeのインストールと設定を記載します。なお、VSCodeは他の言語でもよく使うIDEです。インストールしておいて損はないのでインストールされてない方はこの機会にインストールすることを推奨します。
VSCodeのインストール
Microsoft公式の以下からインストーラをダウンロードします。
VSCodeはデフォルトだと英語です。日本語化したい場合は、VSCodeの拡張機能メニューから「Japanese Language Pack for Visual Studio Code」 をインストールします。
VSCodeプラグインの設定
vue.js開発のために以下プラグインをインストールする必要があります。VSCodeの拡張機能メニューから、以下のプラグインをインストールします。
Vue.js Extension Pack
なお、Vue.jsをデバッグするためにDebugger for Chromeという拡張機能が必要と他の方が記載されています。インストールしようとしたところ、2023年9月時点非推奨になっていました。現在はこれをいれなくてもデバッグできるらしいです。
Chrome or Edge(Chronium)の設定
Vue.jsは、ブラウザ上でデバッグを行います。ブラウザでデバッグできるようにするため、以下のアドインを入れます。ここでは、Chrome、もしくはEdge(Chromium)でデバッグを行うための設定を記載します。
Chrome or Edge(Chromium)にアドインを追加
Chromeのアドインを入れます。アドインはChromenおものですが、Edge(Chromium)は中身がChromeと同様のため、Chromeのアドインを使うことができます。
Chrome、もしくは、Edge(Chronium)で以下サイトにアクセスしアドイン「Vue.js devtools」を追加します。
追加は以下画像の画面から追加してください。
ブラウザの拡張機能から、以下手順でプラグインを有効化します。
「拡張機能を管理」をクリック ー 「Vue.js devtools」 をクリック -「オン」にします
「ファイルのURLへのアクセスを許可する」をオンにします
Vue.jsの設定
Vue.jsのインストールはnpmを利用します。そのため、node.jsのインストールが必要です。ここではnode.jsのインストールからVue.jsのインストール手順を記載します。
なお、node.jsはブラウザ以外でjavaScriptを実行できるようにするソフトウェアです。
node.jsのインストール
以下サイトからダウンロードします。
インストーラを実行後、全部の設定をデフォルトのまま、インストールします。
インストール完了後、正常にインストールされたかを確認します。
コマンドプロンプトを起動し、以下コマンドを実行します。以下画像のようにバージョン情報が表示されたら正常にインストール完了です。
C:\Users\xxxxx>node -v
v18.16.0vue CLIのインストール
npmを利用してインストールします。以下コマンドを実行します。
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プロキシ環境によりインターネットに接続できないことが原因でした。npmでは、プロキシ環境の場合、プロキシ情報を設定する必要があります。以下の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 create vue-firstコマンド実行後、「Successfully created project プロジェクト名」と表示されれば作成は成功です。
以下のコマンドで、作成したアプリケーションを起動します。
npm run serve上記コマンド実行後、ブラウザでアプリケーションにアクセスします。
作成したアプリケーションが起動していれば以下のサイトが表示されます。
まとめ
本記事では、Vue.jsでアプリケーションを開発するための開発環境の構築の内容を紹介しました。昨今はSPAで各サービスから提供されたAPIや、自作のAPIを利用したマイクロサービス型の開発方法が主流となっています。
Vue.jsはSPA方式のアプリケーション開発に特化したライブラリであるため需要が高まっており、習得しておくと良いスキルとなっています。
本記事が皆様の参考となれば幸いです。
参考サイト
当記事を作成するにあたり、以下記事を参考とさせていただきました
ありがとうございます。
Vue.js開発環境構築手順
vue.jsの開発環境を構築しよう！
【Vue.js】Vuejsをchromeブラウザでデバッグする方法
コメント