はじめに
今回はこんな悩みに答えていきます。
Vue初学者の方でも簡単にVueのローカル開発環境が構築できるvue-cliでの開発環境構築方法を解説します。
vue-cliでは対話式でコマンドラインで必要なオプションを選択していくのですが、各対話で聞かれている内容についても解説しておりますので、自分好みの環境構築を行うことが可能です。
本記事の内容は以下の通りです。
本記事の内容
■ node.jsのインストール方法
■ vue-cli4系のインストール方法
■ vueプロジェクトの作成方法
■ 作成したプロジェクトをGitのリモートリポジトリへ登録する方法
この記事を読み終えることで、自分好みのVue開発環境が構築でき、Vue.js開発のスタートラインに立つことができるでしょう。
Contents
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がインストールされているか確認します。
ターミナルより以下のコマンドを実行します。
|
1 |
$ node -v |
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を使うメリット
■ 最終的なコードの軽量化(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についても詳しく学びたい方は以下の記事をご覧ください。
vue-cliのインストール方法
ターミナルで以下のいずれかのコマンドを実行してください。
|
1 2 |
$ npm install -g @vue/cli@4.3.0 ## 本記事のバージョンと同じにする場合 $ npm install -g @vue/cli ## 最新のバージョンにする場合 |
バージョン確認
以下のコマンドを実行してください。
問題なくバージョン番号が表示されればOKです。
|
1 |
$ vue --version |
vueプロジェクトの作成方法
vue-cliを用いてvueプロジェクトの作成を行います。
vue-cliを用いると対話形式のコマンドラインで今回の開発に必要な項目を選択するだけでプロジェクト作成ができます。
まず、以下のコマンドを実行します。
（ここではアプリ名は「simple-vue-website-sample」としています）
|
1 2 |
$ npm install -g @vue/cli@4.3.0 ## 本記事のバージョンと同じにする場合 $ vue create simple-vue-website-sample |
すると、以下の画面が表示されますので、デフォルト設定（babel/ESlint）か手動設定かを、上下キーで選択します。
今回は手動設定ができる「Manually select features」を選択します。
|
1 2 3 4 |
Vue CLI v4.3.0 ? Please pick a preset: default (babel, eslint) ❯ Manually select features |
次に、プロジェクトでどのような機能を使用するのか確認されます。
開発で使用する機能を選択してください。
本記事のハンズオンでは「Babel」と「CSS Pre-processors」と「Linter/Formatter」を選択します。
|
1 2 3 4 5 6 7 8 9 10 |
? Check the features needed for your project: ❯◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing |
次に、CSSプリプロセッサに何を使うか確認されます。
「Sass/Scss(dart-sass or node-sass)」「Less」「Stylus」の３つから選択可能です。
dart-sassはSassのコンパイラです。
node-sassでもよいのですが、「インストールが遅い」、「Node.jsのバージョンが上がったときbugる」というようなことがよく起きるみたいで、Sassのコンパイラは「dart-sass」を使ったほうがよいです。
本記事のハンズオンでは、「Sass/SCSS (with dart-sass)」を選択します。
|
1 2 3 4 5 |
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus |
次にlinter(エラーや潜在的なバグを警告するライブラリ)とフォーマッター(スペースやインデント、改行等のコーディングスタイルを統一するもの)は何を選択するか確認されます。
本記事のハンズオンでは、「ESLint + Standard config」を選択します。
|
1 2 3 4 5 |
? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ❯ ESLint + Standard config ESLint + Prettier |
次にlinterをいつ実行するように設定するのか確認されます。
今回は保存したときにlinterを実行させる「Lint on save」を選択します。
ちなみに「Lint and fix on commit」を選択すると、Gitコミットしたときにlinterが実行されます。
|
1 2 3 4 |
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Lint on save ◯ Lint and fix on commit |
次に各configファイルをpackage.jsonにまとめるのか、それとも個別に作成するのかを確認されます。
package.jsonはなるべくシンプルにしたいので、本記事のハンズオンではconfigファイルを個別作成する「In dedicated config files」を選択します。
|
1 2 3 |
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json |
次に以下のように今回の設定内容を次回以降使用するために保存するかどうか確認されます。
保存しておくと、次回以降「vue create」したときにテンプレートの選択候補として出現します。
保存する場合は「y」、保存しない場合は「N」を入力します。
|
1 |
? Save this as a preset for future projects? (y/N) |
すると、プロジェクトが数分で作成されますので、最後に以下のコマンドを実行してください。
|
1 2 3 |
$ cd simple-vue-website-sample $ npm run serve |
以下のURLにアクセスして、下記のような画面が出力されればOKです。
作成したプロジェクトをGitのリモートリポジトリへ登録する方法
次に作成したプロジェクトをGitのリモートリポジトリへ登録します。
以降、Gitのアカウントは作成されている前提で解説しますので、作成されていない方は以下の記事がわかりやすかったので、ご参考ください。
まず、GitHubへログインし、「Start a project」をクリックして、新規の「リモートリポジトリ」を作成します。
次に、下図のようにリポジトリ名（ここでは「simple-vue-website-sample」としています）とprivateリポジトリもしくはpublicリポジトリかを選択し、クリックします。
publicリポジトリを選択する場合は、インターネット上に公開されるため、個人情報等はプッシュしないようにしてください。
クリック後、以下のような画面になったらOKです。
下図の赤枠部分は次の手順で使用するのでコピーしておきましょう。
次にターミナルを開き、先ほどコピーしたGitHubリポジトリのURLを下図のURL部分にペーストして、リモートブランチとして設定してください。
|
1 |
$ git remote add origin https://github.com/yacchi1123/simple-vue-website-sample.git |
次に、ローカルで作成したvueのプロジェクトをリモートリポジトリへpushします。
|
1 |
$ git push -u origin master |
さいごに先程リモートリポジトリを作成した画面に戻り、リロードし、以下のようにローカルで作成したプロジェクトがアップロードされていればOKです。
Gitについてもっと学びたいという方は以下の記事を参考にしていただければと思います。
さいごに
ここまででvue-cliを用いた開発環境構築は完了です！
お疲れ様でした！
次は自分好みのVue開発環境を構築し、ガンガンVue.jsの開発をしていきましょう。
環境構築してみたものの、作成されたファイルがどういう役割を担っているのか分からないという方は以下の記事を参考にしていただければと思います。
Vue.jsはES6の知識が必須なのですが、ES6を基礎から学習したい方は、以下の記事で紹介している教材がおすすめです。
VueJsの基礎知識についてより詳しく網羅的に学習したい方は、以下の記事で紹介しているUdemyの教材がおすすめです。
さいごまで読んでいただき、ありがとうございました。
知り合いから
「フリーランスエンジニアになれば、年収800万円以上の高報酬でかつ、自由な働き方をチョイスできる」
というのを聞いて、フリーランスエンジニアに興味を持ったのですが、
当時SIer企業でエンジニアをやっていたボクはなかなか一歩踏みだせませんでした。
というもの以下のような不安があったからです。
■フリーランスエンジニアってかなりの技術力がないとなれないのではないのか？
■フリーランスエンジニアって不安定なのではないのか？
■フリーランスエンジニアって人脈やコネ、営業力が必要なのではないのか？
しかし、実際にフリーランスエンジニアになってみて気づきました。
これらはすべて間違いです。
過去のボクのようにフリーランスエンジニアに興味あるけど一歩踏み出せないという方向けに
『フリーランスエンジニア転職完全ロードマップ』
という記事を書きました。
この記事読めば、どうすればフリーランスになれるのかが分かりますので、ぜひ一読ください。
