Vue.jsでフォームバリデーションをつくろう！ー環境構築編ー

# はじめに
こちらは[サポーターズColab](https://supporterzcolab.com/) で開催の[勉強会](https://supporterzcolab.com/event/1007/)の説明資料その1です。

[Vue.jsでフォームバリデーションを作ってみよう！](https://qiita.com/matsumana07384/items/a8f940f681ad42c39a82) の内容を分割、アップデートしたものです。

----

## この記事に書いてあること
- [VueCLI](https://cli.vuejs.org/) を使った`Manually select features`の環境構築の手順
- 各項目のかんたんな説明

## この記事で省いていること
- CLIの説明
- 各ライブラリの説明

----

# 環境
- 端末
	- Mac OS X 10.15.1
- インストール済みのライブラリ
	- [node.js](https://nodejs.org/ja/)
		- v13.1.0
	- [npm](https://www.npmjs.com/)
		- 6.12.1
		
----

# 開発環境のインストール

Vue.jsの開発環境の構築方法として、下記の3つがあります。

|方法|ファイル|使うケース|
|---|---|---|
|scriptで直接埋め込む|.html/.css/.jsファイルで作成|プロトタイピングや学習目的<br>個人開発|
|npm を利用したインストール|.html/.css/.jsファイルで作成<br>.vueファイルで作成|大規模アプリケーション開発|
|CLIを利用したインストール|`.vue`ファイルで作成（以下、単一ファイルコンポーネント）|中規模以上のアプリケーション開発|

Webpackなどのモジュールハンドラの設定はせずに実装を進めたいので、ハンズオンではCLIを利用したインストールを行っていきます。
公式で提供されている `VueCLI`を利用します。

インストール手順は、[VueCLIの公式サイト](https://cli.vuejs.org/)にしたがって進めていきます。

----

## vue-cliのインストール

下記コマンドを実行します。

``` shell:shell
$ npm install -g @vue/cli
```

インストールが完了すると下記の表示されます。

```shell:shell
+ @vue/cli@4.0.5
added 1156 packages from 638 contributors in 62.341s
```

下記コマンドを叩いて、インストールの有無を確かめることもできます。

```shell:shell
$ vue --version
```

今回であれば、`@vue/cli 4.0.5` が表示されます。

----

#### VueCLIの `2.x` や `3.x` 系がインストールされていて、`4.x` に変更したい方

現在のバージョンをアンインストールの上、再度インストールをお願いします。

``` shell:shell
$ npm uninstall -g @vue-cli

$ npm install -g @vue/cli
```

----

## プロジェクトを作成

```shell:shell
$ vue create my-project
```

`my-project` の部分はファイル名になります。
そのため、自分が管理しやすい名称を指定してください。

※`vue create`コマンドを実行時に下記が表示された場合

```
Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? (Y/n)
```

npmレジストリのアクセスに時間がかかる際に表示されます。
急ぎでない場合は `n` （No）選択することをおすすめします。

----

### プリセットの選択

```
Vue CLI v4.0.5
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features
```

BabelとEslintを含む`default`か、その他のライブラリを選択できる`Manually select features`があります。
TypeScriptやCSSのプリプロセッサをインストールしたい場合は、`Manually select features`を選択しましょう。
ライブラリは、あとから追加することも可能です。

ハンズオンでは、 `Manually select features` を選択します。

----

### パッケージマネージャーの選択

```
Vue CLI v4.0.5
? Please pick a preset: Manually select features
? 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
```

インストールしたいライブラリの名称にカーソルをわせ、`space`キーで選択ができます。
`a`キーを押下すると全てを選択、解除することができます。
`i`キーを押下すると、選択しているものは解除され、解除されているものは選択されます。

選択後は、`Enter`を押下してください。


ハンズオンでは、ルーティングの制御を行うため、 `Router` を選択します。

※その他のライブラリはご興味があれば、調べてみてください😀

----

### vue-router のモードの選択

```
? Use history mode for router? (Requires proper server setup for index fall
back in production) (Y/n)
```

`histrory` モードを使用するかどうか尋ねられています。

デフォルトの設定は、`hash モード `で、URLにハッシュ(#)が付きます。
このハッシュを取り除けるモードが `histrory` モードです。

ハンズオンでは `history`モードで実装するため、`Y`を入力して、Enterを押下してください。

※historyモードについて詳しく知りたい方は、[Vue.js Router/HTML5 History モード](https://router.vuejs.org/ja/guide/essentials/history-mode.html)を参照ください。

----

### Babel、PostCSS、ESLintなどの設定箇所の選択

```
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
  In dedicated config files
❯ In package.js
```

`In dedicated config files` を選択すると、専用の設定ファイルで設定できます。
`In package.json` を選択すると、1つのファイルで設定できます。

ハンズオンでは筆者の独断と偏見で1つのファイルを推奨したいので、` In package.js` 選択して、Enterを押下してください。

----

### 設定の保存の選択 

```
? Save this as a preset for future projects? (y/N)
```

今回選択した設定を保存することができます。<br>

ハンズオンの設定を再利用する可能性は低いため、`N`（No）を選択してください。

----

### パッケージマネージャーの選択

※こちらが表示されない場合もあります。

``` 
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM
```

特にこだわりがなければ、 `Use NPM` を選択して、Enterを押下してください。

以上でインストールの準備が整うので、インストールが開始されます！

----

インストールが完了すると、下記が表示されます。

```
🎉  Successfully created project my-project.
```

----

## ローカル環境を立ち上げる

インストール完了後に表示されていたコマンドを実行します。

```
👉  Get started with the following commands:

 $ cd my-project
 $ npm run serve
 
```

実行が完了すると、下記が表示されます。

```
 Compiled successfully in 6040ms                                00:00:00


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://0.0.0.0:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
```

[http://localhost:8080](http://localhost:8080) にアクセスしてみてください。
下記が表示されていれば、環境構築は完了です！

![20191205_localhost8080_1](https://user-images.githubusercontent.com/35416089/69802755-9b797000-121d-11ea-8e07-7c7a6826d4fd.png)

上部の「About」をクリックすると、別のページが表示されます。

![20191205_localhost8080-2](https://user-images.githubusercontent.com/35416089/69802756-9b797000-121d-11ea-8ac4-6118452f148c.png)

---

# おわりに
VueCLIを使ったVue.jsの開発環境の構築手順をご紹介しました。

今回CLIを使用しましたが、こちらの方法について公式ドキュメントの[インストール — Vue.js](https://jp.vuejs.org/v2/guide/installation.html)には下記のように書かれております。

>CLI は Node.js および関連するビルドツールに関する事前知識を前提としています。Vue またはフロントエンドビルドツールを初めて使用している場合、CLI を使用する前に、ビルドツールなしでガイドを参照することを強くお勧めします。

…フロントエンドで求められる知識の幅は広いですね🤔

[Vue.jsでフォームバリデーションをつくろう！ー実装編ー](https://qiita.com/matsumana07384/items/aba99b4826841235b347)に続きます！