Vue.js

【最新】vue-cli4系での開発環境構築方法

はじめに

Vue.jsで開発してみたいけど、開発環境構築方法が分からない。。。

今回はこんな悩みに答えていきます。

Vue初学者の方でも簡単にVueのローカル開発環境が構築できるvue-cliでの開発環境構築方法を解説します。

vue-cliでは対話式でコマンドラインで必要なオプションを選択していくのですが、各対話で聞かれている内容についても解説しておりますので、自分好みの環境構築を行うことが可能です。

本記事の内容は以下の通りです。

本記事の内容

■ node.jsのインストール方法

■ vue-cli4系のインストール方法

■ vueプロジェクトの作成方法

■ 作成したプロジェクトをGitのリモートリポジトリへ登録する方法

この記事を読み終えることで、自分好みのVue開発環境が構築でき、Vue.js開発のスタートラインに立つことができるでしょう。

node.jsのインストール

vue-cliを動かすために必要なnode.jsのバージョン:8.9.0以上

今回の開発で使用しているnode.jsのバージョン:12.8.1

vue-cliというvueでの開発を効率化するツールを使用するためには、node.js(version 8.9.0以上)のインストールが必要です。

node.jsのversion 8.9以上がインストールされていない方は、まずnode.jsをインストールしましょう。

node.jsがインストールされているかの確認方法

デフォルトでnode.jsがインストールされている場合もありますので、まずnode.jsがインストールされているか確認します。

ターミナルより以下のコマンドを実行します。

node.jsのインストール方法

node.jsがインストールされていない場合は、以下の記事を参考にnode.jsのインストールをしてください。

node.jsのバージョン12.8.1を指定してください。

vue-cli4系のインストール

今回の開発で使用しているvue-cliのバージョン:4.3.0

vue-cliの概要

vue-cliは簡単にいうと、Vueの開発に必要な機能やプロジェクトの雛形、ビルドをコマンド一つで設定・実行してくれるツールです。

vue-cli公式サイト

例.vue-cliを使うメリット

■ 最終的なコードの軽量化(WebPack)

■ ES6やES5の記述をどのブラウザでも動く旧javascriptの記述へ変換(Babel)

■ プロジェクトのディレクトリの作成やサンプルページ(雛形)の作成

■ HMR(Hot Module Replacement)

■ ESLintやフォーマッターの設定

最終的なコードの軽量化(WebPack)

最近のフロントエンドでは処理速度を早くするために、複数のjsファイルをビルド時にひとつにまとめたり、コメントやスペース、改行などを取り除きブラウザが読み取りやすいようにする(minify化)のですが、そういった設定もvue-cliが勝手に設定してくれます。

ES6やES5の記述をどのブラウザでも動く旧javascriptの記述へ変換(Babel)

Javascriptの新しい書き方(ES6やES5)だとブラウザの種類やバージョンによっては動かなくなることがあります。

そういった環境差異をなくすために、Babelというプラグインを入れる必要があるのですが、こういったプラグインの導入・設定も自動でやってくれます。

プロジェクトのディレクトリの作成やサンプルページ(雛形)の作成

vue-cliでプロジェクトを作成すると、vue側が推奨するディレクトリ構成でディレクトリ作成してくれ、サンプルページ(雛形)も作成してくれます。

これによって、後日詳しく説明するコンポーネント等のアプリケーションの開発に集中できます。

HMR(Hot Module Replacement)

これはhtmlやcss、javascriptを編集したら、リロードをせずとも即座に開発画面に反映してくれる機能です。

この設定もvue-cliが行ってくれます。

ESLintやフォーマッターの設定

ESLintはjavascriptの構文を精査するライブラリのことでフォーマッターはスペースやインデント、改行等のコーディングスタイルを統一するものです。

これらの設定もvue-cliが行ってくれます。

また、フォーマッターは複数のフォーマッターから選択することが可能です。

なお、これまでに紹介した機能をvue-cliを使用せずに搭載する場合は一般的にはWebPackを使用します。

WebPackについても詳しく学びたい方は以下の記事をご覧ください。

webpack
【無料あり】webpackの使い方がマスターできる書籍やUdemy等の教材まとめwebpackの使い方がマスターできる書籍やUdemy等の教材や勉強法をまとめました。体系的にwebpackを基礎から学びたい方やwebpackを使用してフロントエンドの環境構築したいけど、使い方がよく分からないという方はぜひ参考にしていただければと思います。...

vue-cliのインストール方法

ターミナルで以下のいずれかのコマンドを実行してください。

バージョン確認

以下のコマンドを実行してください。
問題なくバージョン番号が表示されればOKです。

vueプロジェクトの作成方法

vue-cliを用いてvueプロジェクトの作成を行います。

vue-cliを用いると対話形式のコマンドラインで今回の開発に必要な項目を選択するだけでプロジェクト作成ができます。

まず、以下のコマンドを実行します。
(ここではアプリ名は「simple-vue-website-sample」としています)

すると、以下の画面が表示されますので、デフォルト設定(babel/ESlint)か手動設定かを、上下キーで選択します。

今回は手動設定ができる「Manually select features」を選択します。

次に、プロジェクトでどのような機能を使用するのか確認されます。

開発で使用する機能を選択してください。

本記事のハンズオンでは「Babel」「CSS Pre-processors」「Linter/Formatter」を選択します。

次に、CSSプリプロセッサに何を使うか確認されます。

「Sass/Scss(dart-sass or node-sass)」「Less」「Stylus」の3つから選択可能です。

dart-sassはSassのコンパイラです。

node-sassでもよいのですが、「インストールが遅い」、「Node.jsのバージョンが上がったときbugる」というようなことがよく起きるみたいで、Sassのコンパイラは「dart-sass」を使ったほうがよいです。

本記事のハンズオンでは、「Sass/SCSS (with dart-sass)」を選択します。

次にlinter(エラーや潜在的なバグを警告するライブラリ)とフォーマッター(スペースやインデント、改行等のコーディングスタイルを統一するもの)は何を選択するか確認されます。

本記事のハンズオンでは、「ESLint + Standard config」を選択します。

次にlinterをいつ実行するように設定するのか確認されます。

今回は保存したときにlinterを実行させる「Lint on save」を選択します。

ちなみに「Lint and fix on commit」を選択すると、Gitコミットしたときにlinterが実行されます。

次に各configファイルをpackage.jsonにまとめるのか、それとも個別に作成するのかを確認されます。

package.jsonはなるべくシンプルにしたいので、本記事のハンズオンではconfigファイルを個別作成する「In dedicated config files」を選択します。

次に以下のように今回の設定内容を次回以降使用するために保存するかどうか確認されます。

保存しておくと、次回以降「vue create」したときにテンプレートの選択候補として出現します。

保存する場合は「y」、保存しない場合は「N」を入力します。

すると、プロジェクトが数分で作成されますので、最後に以下のコマンドを実行してください。

以下のURLにアクセスして、下記のような画面が出力されればOKです。

http://localhost:8080/

Vueテンプレート画面

作成したプロジェクトをGitのリモートリポジトリへ登録する方法

次に作成したプロジェクトをGitのリモートリポジトリへ登録します。

以降、Gitのアカウントは作成されている前提で解説しますので、作成されていない方は以下の記事がわかりやすかったので、ご参考ください。

GitHub入門~アカウントを作成する方法~

まず、GitHubへログインし、「Start a project」をクリックして、新規の「リモートリポジトリ」を作成します。

リモートリポジトリ作成

次に、下図のようにリポジトリ名(ここでは「simple-vue-website-sample」としています)とprivateリポジトリもしくはpublicリポジトリかを選択し、クリックします。

publicリポジトリを選択する場合は、インターネット上に公開されるため、個人情報等はプッシュしないようにしてください。

リポジトリ情報入力

クリック後、以下のような画面になったらOKです。
下図の赤枠部分は次の手順で使用するのでコピーしておきましょう。

リポジトリ登録完了

次にターミナルを開き、先ほどコピーしたGitHubリポジトリのURLを下図のURL部分にペーストして、リモートブランチとして設定してください。

次に、ローカルで作成したvueのプロジェクトをリモートリポジトリへpushします。

さいごに先程リモートリポジトリを作成した画面に戻り、リロードし、以下のようにローカルで作成したプロジェクトがアップロードされていればOKです。

ローカルで作成したプロジェクトのアップロード結果

Gitについてもっと学びたいという方は以下の記事を参考にしていただければと思います。

github
【無料あり】Git&GitHub初心者におすすめ勉強法や書籍等の教材まとめGit・GitHub初心者向けにGitの仕組みや基本操作だけでなく、Gitを用いたチーム開発手法まで学べる書籍等の教材を紹介しております。また、無料だけど優良な教材も紹介しております。初心者から中級者へのステップアップとして参考にしていただければと思います。...

さいごに

ここまででvue-cliを用いた開発環境構築は完了です!

お疲れ様でした!

次は自分好みのVue開発環境を構築し、ガンガンVue.jsの開発をしていきましょう。

環境構築してみたものの、作成されたファイルがどういう役割を担っているのか分からないという方は以下の記事を参考にしていただければと思います。

vue-cli4系によって作成された各ファイルの説明「vue-cli4系でプロジェクトを作成してみたものの各ディレクトリやファイルの内容がよく分からない」という方に向けて、vue-cli4系でプロジェクト作成したことによって生成されたファイルとディレクトリの説明を解説しております。...

Vue.jsはES6の知識が必須なのですが、ES6を基礎から学習したい方は、以下の記事で紹介している教材がおすすめです。

【最新版】JavaScript(ES6)が学べるおすすめ書籍・Udemy講座まとめJavaScript(ES6)が学べるおすすめサイト(無料あり)や書籍、Udemy講座をまとめました。自身が参考にした教材の中でも非常に業務に役立ったものを厳選しております。...

VueJsの基礎知識についてより詳しく網羅的に学習したい方は、以下の記事で紹介しているUdemyの教材がおすすめです。

【これだけでOK!】おすすめのVue.js入門教材「Vue.jsを初めてみたいけど、どの教材から手をつけてよいか分からない」という方や「Vue.jsできるようになるためにどんなことをやったらよいのか?」という疑問をもった方向けにおすすめのVue.js入門教材の紹介とその教材の使い方について詳しく解説しております。...

さいごまで読んでいただき、ありがとうございました。

フリーランスエンジニア転職完全ロードマップ

知り合いから
「フリーランスエンジニアになれば、年収800万円以上の高報酬でかつ、自由な働き方をチョイスできる」
というのを聞いて、フリーランスエンジニアに興味を持ったのですが、
当時SIer企業でエンジニアをやっていたボクはなかなか一歩踏みだせませんでした。

というもの以下のような不安があったからです。

■フリーランスエンジニアってかなりの技術力がないとなれないのではないのか?

■フリーランスエンジニアって不安定なのではないのか?

■フリーランスエンジニアって人脈やコネ、営業力が必要なのではないのか?

しかし、実際にフリーランスエンジニアになってみて気づきました。

これらはすべて間違いです。

過去のボクのようにフリーランスエンジニアに興味あるけど一歩踏み出せないという方向けに
『フリーランスエンジニア転職完全ロードマップ』
という記事を書きました。

この記事読めば、どうすればフリーランスになれるのかが分かりますので、ぜひ一読ください。