【とりあえず動かしたい超初心者向け】はじめてのVue.js環境構築

## はじめに
Javascriptのモダンフレームワーク周りに関する知見がほとんどない人にVue.jsの環境構築をレクチャーする機会があったので、この機に構築手順をまとめてみます。
~~30分~~1時間で最低限のツールと手順を把握しつつ環境構築することを目指したため、全体的に雑さが目立ちますがご了承ください。

## 前提
### コマンドラインツール(コマンドプロンプトとかターミナル)が使える
衝撃的だったのですが、レガシーな環境で開発されている場合、意外と基本操作を知らない方がいるようなので念のため。
今後登場するコマンドも、これを使って実行していきます。
開発を進める上で必須なので、よくわからない方はこちらから基本を学びましょう。
https://tutorial.djangogirls.org/ja/intro_to_command_line/

## 筆者の実行環境 (参考までに)
```bash
Node: v12.13.1
npm: 6.12.1
yarn: 1.19.1
Vue-CLI: @vue/cli 4.1.1
```

## Vue.js
https://jp.vuejs.org/index.html
### Vue.jsとは
- JavaScriptフレームワーク(フロントコーディングの処理の一部を自動化したり簡略化してくれるツール)の1つ
- 単一のページ(要は1つのhtmlファイル)でコンテンツを切り替えるシングルページアプリケーション(SPA)を実現できる
- 基本はJavaScriptだが、フレームワーク独自の書き方やルールが存在する
- 他のモダンフレームワークとしてはAngular, Reactなどが有名だが、これら2つと比べると軽量・簡単で学習コストが低いのが特徴で、比較的中小規模のプロジェクト向き

## Node.js
https://nodejs.org/ja/

### Node.jsとは
- サーバサイドで動くJavaScriptの実行環境
- 今回はこれの一部機能を使うだけなので、詳細は割愛します

### Nodeのインストール

#### Windows
こちらを参照
すみませんが、Windowsに関してはあまり詳しくないのでネット記事を参考にインストールしてみてください。
https://techacademy.jp/magazine/16050

#### MacOS
こちらを参照
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

#### バージョンについて
2020/09/07現在、Nodeはv14.9.0が最新バージョンだが、公式サイトを見るとv12.18.3がLTS(推奨版)とのことなので、とりあえずわからなかったらこれをインストールすることをおすすめする。

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

上記記事にも書いてあるが、以下で安定版をインストールできる。

```bash
nodebrew install-binary stable
```

## npm
- npmは、Node.jsに含まれるパッケージ管理ツール
- パッケージ(JavaScriptのモジュールやライブラリ)をダウンロードからインストールまでよしなにやってくれる上に、依存関係(他にもこのライブラリがないと正常に動作しないよ、みたいな関係のもの)もいい感じにインストールして解決して読み込んで使える状態にしてくれる優れもの
- 現代のモダンフレームワークを用いた開発は大半がこれ（系）を使ってライブラリを管理している。
- Nodeをインストールした時点でこれもインストールされているため、特に追加操作はなし。

```bash
# バージョン確認
npm -v
```

## Yarn
https://qiita.com/lelouch99v/items/c97ff951ca31298f3f24
- npmと同じ、JavaScriptのパッケージ管理ツール。
- npmより高速で何かと便利なので、入れておくとよいかも

```bash
npm i -g yarn
yarn -v
```

## npmとyarnの各種コマンド
こちらが参考になります
https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8

## Vue-CLI
https://cli.vuejs.org/

### Vue-CLIとは
- Vue.jsの開発を手早く進めるためのシステム
- コマンド1つで、後は案内されるがままにオプションを選んでいけばいい感じのスタートアップ環境が作れる便利ツール

### インストール
```bash
npm i -g @vue/cli
# OR
yarn global add @vue/cli
```

### プロジェクトの作成
カレントディレクトリにプロジェクトディレクトリが作成されるため、まずは場所を用意してください。

```bash
vue create vue-sample-project
```

`? Please pick a preset: `と聞かれるので、`Manually select features`を選択してください。
上下で移動、Enterで決定です。
![スクリーンショット 2020-09-07 22.03.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136254/f7ac2243-d9de-6ff9-9570-847bf75561ee.png)

次に入れる機能を聞かれますが、`Router`だけ追加してください。
上下で移動、Spaceで選択、Enterで決定です。
![スクリーンショット 2020-09-07 22.07.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136254/67152a5f-4ae7-076b-efb5-55c100987c55.png)

他にも色々聞かれますが、全部EnterでOKです。
しばらくするとプロジェクト作成が完了するので、プロジェクトディレクトリに移動しましょう。

```bash
cd vue-sample-project
```

### ローカルで実行
```bash
npm run serve
# OR
yarn serve
```

成功すると、デフォルトではhttp://localhost:8080/ にサーバが立ち上がるのでブラウザからアクセスしてください。

ここで、ページトップの`About`を押してみましょう。

**実行前**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136254/c9f7ff19-7119-a296-79db-865c951c04fb.png" width=70%>

**実行後**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136254/15d0a7ae-ed2f-e682-e2af-3d55a4b975c4.png" width=70%>

あたかも別のページに遷移したかのように見えたかと思いますが、同じページ(htmlファイル)の中でJavaScriptを使って内容を切り替えています。これを、ルーティングといいます。
これにより、ページ全体を読み込み直す必要がないため動作が軽くなると共に、ヘッダやフッタといった共通部品をより簡単に定義できるようになります。

### ビルド
```bash
npm run build
# OR
yarn build
```

成功すると、ルートディレクトリ直下に`dist`というフォルダが作成され、中にプロジェクトデータが出力されます。

### 最低限知っておくべきディレクトリ構成
![スクリーンショット 2020-09-07 22.54.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136254/b98ea421-54f0-9a7d-7a6c-087e61ff0ab9.png)

#### public
Vueシステムによっていい感じに包括処理されない、外側のエリア。
build時にそのまま出力される。
index.htmlもここにある。

#### src > assets
imageとかsoundみたいなアセットを配置する。

#### src > components
共通ボタンのような、UIコンポーネント(ページの中に配置される部品)を配置する。

#### src > router
先ほど体験した、`About`押下時に表示されるページがどれか、というルーティング設定がここに定義されている。

#### src > views
単一ページのコンポーネントを配置する。
ルーティングにより切り替えられるページがここに定義される。

#### src > App.vue
エントリーポイントとなる大元のコンポーネント。

大雑把な各コンポーネント構成のイメージは以下
![スクリーンショット 2020-09-07 22.57.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136254/9c128c9a-c860-309a-fee9-27f06800c82d.png)

#### src > main.js
エントリーポイントとなる大元のスクリプトファイル

#### package.json
npm(yarn)の管理パッケージや`yarn serve`のようなアクションタスクが定義されている。

## 最後に
擦られまくったネタな上にとんでもなく駆け足でしたが、以上になります。
この記事ではとりあえずプロジェクトをセットアップしてとにかく動かす所まで実施しましたが、細かい動作原理、コーディングにおけるVueの作法等には一切触れていないため、このまま開発に移るのは難しいと思います。

Vueは[公式サイト](https://jp.vuejs.org/v2/guide/)がかなり親切(しかも日本語対応)ですし、Qiitaをはじめとするリファレンスもかなり充実しています。
ハマりどころもよく見たら公式に書いてあったりすることが結構あるので、まずは公式を見てみて、よく分からなければQiitaとかで分かりやすい解説記事を探してみる、を繰り返していくことで、きっとツールの魅力に気付いていけるようになると思います。

いざ、Vueのせかいへ！レッツゴー！

## [2020/12/07]追記: Advent Calendarへの参加
いつか参加してみたいと思っていたAdvent Calendarに、この記事にて参加させていただきました。
[Vue Advent Calendar 2020](https://qiita.com/advent-calendar/2020/vue)