Web開発

【Vue + vue-cli】Vue.jsとは？〜環境構築まで

目次

1. Vue.jsとは？
2. Vue.jsの環境構築
   1. nodeのインストール
   2. yarnもしくはnpmのインストール
   3. Vueのインストール

みなさんこんにちは。

今回はJavaScriptライブラリの一つであるVue.jsについて、概要と環境構築の流れまでをご紹介したいと思います。

Vue.jsとは？

JavaScriptはどのブラウザでも動作する言語であり、Webサイト制作やWebアプリケーション開発などで幅広く使われているプログラミング言語です。

JavaScriptはその優秀さゆえに様々なライブラリやフレームワークなどが作られてきました。

その一つがjQueryであり、特にWebサイト制作においてはとても便利で、導入しやすさや学習のしやすさにおいてかなり信頼度が高いライブラリであるといえます。

しかし、近年、Javascriptでの開発において、より効率的な開発が主流となってきています。

最近の主流の中でDOM操作（HTML要素の取得、操作、イベント設定などの処理）を自動で行い、単一ページの中でコンテンツの切り替えを行うSPA（Single Page Application）というものがあります。

SPAのメリットとしては、

• 挙動の向上（ページ遷移しないため、通信量を抑えられる）
• 高度な表現を実現（ユーザーの操作によって部分的にのみコンテンツを切り替えるため、より自由度の高い表現が可能）
• ネイティブアプリの代用ができる（オフラインでのページ閲覧、プッシュ通知、ホーム画面からの起動を実現可能）

などがあります。

従来のjQueryなどのJavaScriptライブラリではDOM操作を行うには手動で行わなければならず、SPA開発には向きません。

ですが、JavaScriptライブラリである、Vue.jsやReact.js、Angular.jsなどはDOM操作を自動に行ってくれるSPA開発に向いた技術です。

特に今回取り扱うVue.jsは他のReactやAngularに比べて、シンプルで学習コストも低いため、初心者でも取り扱いやすいライブラリであるといえます。

Vue.js公式サイト
https://jp.vuejs.org/index.html

Vue.jsの環境構築

nodeのインストール

Vue.js開発にはnodeが必要です。

下記、公式サイトから自身のPCにあった最新のnodeをインストールしてください。

https://nodejs.org/ja/download/

インストールが完了したら、コマンドプロンプト（Macならターミナル）を開いて、下記コマンドを実行して、nodeがインストールされたか確認してください。

node -v

バージョンが表示されれば、OKです。

nodeコマンドが使えない場合、パスを通す必要があるので、その場合は下記手順に従って、パスを通してください。

Windows10の場合
https://qiita.com/shuhey/items/7ee0d25f14a997c9e285

Macの場合
https://qiita.com/nbkn/items/01a11392921119fa0153

yarnもしくはnpmのインストール

nodeを扱うので、nodeのパッケージ管理ツールをインストールする必要があります。

npmのインストール

sudo npm install -g npm
npm -v

1行目のコマンドでインストールを行います。

インストールが完了したら、npm -vでバージョンを確認し、インストールされていることを確認してください。

※npmコマンドが使えない場合はnode同様パスを通してください。

yarnのインストール

npmを事前にインストールしておいて、npmコマンドを使えるようにしておいてください。

npm install -g yarn
yarn -v

1行目のコマンドでインストールを行います。

インストールが完了したら、yarn -vでバージョンを確認し、インストールされていることを確認してください。

Vueのインストール

いよいよVueのインストールを行います。

まず、Vue CLIというものをインストールします。

これは、迅速にVue開発を行えるようにするためのコマンドラインインターフェースです。

Vue開発にはパッケージやツールの専門的で複雑な知識が必要ですが、このVue CLIを導入することで、それらを自動化し、環境構築を補完する役割を担ってくれます。

Vue CLIをインストールする前にあらかじめ、プロジェクトを作成したい任意のディレクトリにcdコマンドで移動しておいてください。

下記コマンドでVue CLIをインストールしてください。

//npmの場合
npm install -g @vue/cli

//yarnの場合
yarn global add @vue/cli

インストールが完了したら、vue -vでvueのバージョンを確認して、問題なくインストールされているか確認してください。

インストールが完了したら、下記コマンドで、Vueプロジェクトを作成します。

vue init webpack test-vue

※test-vueの部分には任意のフォルダ名を入れてください。

実行中にいくつか質問を聞かれます。

基本的に任意で問題ないですが、筆者は以下のようにしました。

• Install vue-router?　Yes　//Vue公式のSPA構築に必要なルータ
• Use ESLint to lint your code?　No　//構文チェックツール
• Set up unit tests　No　//テストツール
• Setup e2e tests with Nightwatch?　No　//テストツール

無事、完了したら、ディレクトリにプロジェクトフォルダが生成されているはずです。

cdコマンドでそのフォルダに移動し、下記コマンドでvueを実行してください。

//npmの場合
npm run dev

//yarnの場合
yarn dev

するとサーバーが起動し、表示されたURL「http://localhost:8080」をブラウザでアクセスすると下記ページが表示されます。

この画面が表示されれば、環境構築は完了です。

今回は、Vue.jsの大まかな概要と環境構築について、まとめました。

次回は、実際にVueに触れていきたいと思います。

それでは！