VSCodeでVue.jsのモダンな開発環境を整えよう

## はじめに

みなさん、Visual Studio Code(以下VSCode)使ってますか？VSCodeはかなりの頻度で開発されており、色々と便利な機能が随時アップデートされているので、多くの現場で使われていることだと思います。今回は、VSCodeを使って、Vue.jsの開発環境の設定についてご紹介します。主にデバッグの部分に軸をおいて解説していますので、VSCodeでVue.jsの開発をされている方には有益な情報になるかと思います。

では、早速はじめましょう。
＼(^o^)／

## 前提条件

検証している環境は下記になります。

| 環境         |       バージョン |    
|:------------:|:------------------:|
| OS           |   Mac OS Mojave |    
| vue cli      |    3.11.0 | 
| VSCode       |       1.38.1 |  
| Node.js      |    10.15.3 | 

事前に下記のインストールが済んでいる前提となりますので、インストールがまだの場合は、インストールをお願いします。

* Node.js
* npm
* yarn
* Vue CLI
* VSCode
* Google Chrome


## 環境構築

### VSCodeにプラグインを追加

VSCodeに必要なプラグインを追加します。
プラグインの追加方法は解説しておりませんので、別途別の資料を参照頂ければ幸いです。

**Vue.js Extension Pack**
[リンク](https://marketplace.visualstudio.com/items?itemName=mubaidr.vuejs-extension-pack)
Vue.jsでよく使うプラグインをまとめたもの。

**Debugger for Chrome**
[リンク](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
Javascriptのデバッグをするためのプラグイン。
使い方は後ほど解説します。

### Google Chromeに拡張機能を追加

Google Chromeに必要な拡張機能を追加します。
拡張機能の追加方法は解説しておりませんので、別途別の資料を参照頂ければ幸いです。

**Vue.js devtools**
[リンク](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
Vue.jsのサイトのデバッグをするためのツール。
使い方は後ほど解説します。

### Vueのテンプレートを作成

```bash
# Vue.jsのテンプレートを作成する
$ vue create my-app

# 下記選択肢が表示されるので、「Manually select features」を選択しEnter
Vue CLI v3.11.0
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

# 下記選択肢が表示されるので、「Babel」、「TypeScript」、「Router」、「Vuex」、「Linter / Formatter」を選択し、Enter
(選択はSPACEキーで可能です)
? 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

# 下記の様に聞かれるので、「n」を入力し、Enter
? Use class-style component syntax? (Y/n) n

# 下記のように聞かれるので、「y」を入力し、Enter
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y

# 下記のように聞かれるので、「y」を入力し、Enter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

# 下記のように聞かれるので、「TSLint」を選択し、Enter
? Pick a linter / formatter config: (Use arrow keys)
❯ TSLint
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

# 下記のように聞かれるので、「Lint additional lint features」を選択し、Enter
? Pick additional lint features:
❯◉ Lint on save
 ◯ Lint and fix on commit

# 下記のように聞かれるので、「In dedicated config files」を選択し、Enter
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

# 下記のように聞かれるので、「n」を入力し、Enter
? Save this as a preset for future projects? (y/N) n

# 最終的には以下のようになっているはず
Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

$ cd my-app
$ yarn serve
```

ブラウザに「[http://localhost:8080/](http://localhost:8080/)」を入力し、下記画像のようにVue.jsのページが表示されることを確認して下さい。

<img width="735" alt="my-app_と_node.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/7f78049d-1b5c-4fad-e8e0-6a03c8e9acf3.png">


## VSCodeでVue.jsのデバッグを行う



```bash
# my-app内にいることを必ず確認した後、コマンドを実行して下さい。
$ yarn add axios
```

まず、先程作成したmy-appをVSCodeで開いて下さい。
HelloWorld.vueを開いて、`<script>`タグ内を下記コードで上書きして下さい。
郵便番号から住所を取得する処理を追加しております。

```vuejs:HalloWorld.vue(抜粋)

import Vue from 'vue';
import axios from 'axios';

export default Vue.extend({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  created: async ()=>{
    const response = await axios.get('https://api.zipaddress.net/?zipcode=6048151')
    window.console.log(response);
  }
});
```

最終的には下記のようになるかと思います。

<img width="1376" alt="HelloWorld_vue_—_my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/ac7f859b-961e-51b7-35bc-9d8a8fa99e1b.png">

次に、下記画像のようにして、44行目にブレークポイントを設定して下さい。

<img width="841" alt="HelloWorld_vue_—_my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/c2502577-e94c-d0a5-43c2-08a1e250bc93.png">


では、デバッグを実行していきましょう。
左のアイコンの中からデバッグアイコン(虫の形)をクリックして下さい。

<img width="513" alt="my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/e371c3f5-831d-961d-95a3-68bb6993c702.png">

「構成がありません」の右側にある、歯車アイコンをクリックして下さい。
ポップアップが表示されますので、「Chrome」をクリックして下さい。

<img width="1032" alt="my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/01998ee4-8bca-8ee7-342c-82d7a098268f.png">

「デバッグ」の右にある緑三角をクリックして下さい。(下記画像参照)

<img width="1173" alt="launch_json_—_my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/51de8a0b-b404-99e8-a3ac-ebc43356f484.png">

Google Chromeでページが開くので、上部にある「About」をクリック後、「Home」をクリックして下さい。
(下記画像参照)
もしページが開かない場合は、バックグラウンドで`yarn serve`コマンドが実行されている必要がありますので、実行されているかどうかを確認下さい。

<img width="831" alt="my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/102b25e5-0ab5-b665-d6f1-bf7b6e5a30d8.png">

すると、下記画像のようにデバッグ画面に遷移するかと思います。

<img width="1438" alt="HelloWorld_vue_—_my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/f122e426-495f-3923-d798-8f5117c6ceeb.png">

左の「変数」の部分では、変数の中身を見ることが出来ます。
中央上部のツールパネルでは、処理を進めたりなどの操作が可能です。
中央の黄色い背景の部分(44行目)で、処理がストップしている事がわかります。

<img width="228" alt="HelloWorld_vue_—_my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/4c497f91-76f2-f519-0cd3-d1f756d2647e.png">

ツールパネルについて、少し説明します。
アイコンが6個あるかと思いますが、左から順番に下記意味となります。

* 続行
* ステップオーバー
* ステップイン
* ステップアウト
* 再起動
* 停止

では、ツールパネルの一番左にある「続行」をクリックして下さい。
(下記画像参照)


<img width="228" alt="HelloWorld_vue_—_my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/8234b3ca-c2f8-40ea-1498-13fb2dd3fe5c.png">

すると、変数responseの中身が表示されています。
京都の郵便番号を入れているので、京都の住所がAPIで取得できていることがわかります。
(下記画像参照)

<img width="973" alt="HelloWorld_vue_—_my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/780e20cf-1126-20f9-7f77-49d0dcedddea.png">

### メモ

本来であれば、createdの中の処理は、画面を初回に表示した際にブレークポイントで止まってほしいのですが、なぜかそうなりませんでした。また、一度目にブレークポイントで止まったときには、responseには値が入っていません。このあたりの挙動は、Vue.jsのバックグラウンドのロジックが関係しているのかもしれないのですが、詳細にはわかりませんでした。もし詳しい方がいらっしゃいましたら、コメントでご教授頂ければ幸いです。


## Vue.js devtoolsでVue.jsでVue.jsのデバッグを行う

ブラウザに「[http://localhost:8080/](http://localhost:8080/)」を入力し、ページを開きます。
デベロッパーツールを開きます。(Macの場合は、Command+Option+i)
メニューの右側にある「Vue」をクリックします。(下記画像参照)

<img width="874" alt="my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/497ef554-9d89-1df1-8663-047a0808fca9.png">

Vueのパネルを開くと、Vueの構造が表示されます。(下記画像参照)

<img width="1266" alt="DevTools_-_localhost_8080__と_my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/c353c9fe-19d0-51dd-0921-c44153061b94.png">


試しに、HelloWorldコンポーネントを開いてみましょう。
propsで渡ってきた値やdata属性の中身などを見ることが出来ます。

<img width="855" alt="DevTools_-_localhost_8080_.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/757a4dca-65d6-9802-2ff3-23bc889afc7b.png">

date属性、propsの値も変更することが可能です。
propsの値を変更するためには、設定の変更が必要になります。(下記画像参照)
これは非常に便利ですね。

<img width="854" alt="DevTools_-_localhost_8080__と_my-app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/15dee67d-28e4-d1db-9d7a-1e365a6836e1.png">

<img width="851" alt="DevTools_-_localhost_8080_.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/820078da-3a04-b7d1-27dd-539b4fb78ca9.png">

Vuexとして保存されているデータを確認することも出来ます。
今回は何も保存していませんので、値は表示されていませんが、Vuexを利用している場合は確認することが出来ます。

<img width="855" alt="DevTools_-_localhost_8080__と_Releases_·_vuejs_vue.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/a2194d22-e374-d72c-2ca4-a54d1f7a6308.png">


次にイベントの表示です。
emitで発行したイベントの履歴を見ることが出来ます。
今回はemitを使っていないので何も表示されていませんが、emitを使う場合は、自分の想定しているタイミングでイベントが実行されているかを確認することが出来ます。

<img width="858" alt="DevTools_-_localhost_8080__と_「VSCodeでVue_jsのモダンな開発環境を整えよう」を編集_-_Qiita.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/6b466e95-afca-26a8-72c8-28702059f238.png">

次にルーターの表示です。
ルーターの遷移履歴、ルーターのパス一覧を見ることが出来ます。

<img width="860" alt="DevTools_-_localhost_8080__と_「VSCodeでVue_jsのモダンな開発環境を整えよう」を編集_-_Qiita.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/60ad26a3-68c0-bffe-3d3c-0eb6aca1041b.png">

<img width="759" alt="DevTools_-_localhost_8080_.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192873/c2721d4c-09b1-3ee5-e292-4b60bec295dd.png">


## 終わりに

今回の記事で、Vue.jsの開発環境、デバッグ手法についての基礎は解説できたのかなと思っています。デバッグは非常に難しいので、ツールに頼れる部分はどんどんツールに頼っていくのが効率の良い開発に繋がるのではないでしょうか。この記事が少しでも皆さんの開発、デバッグの助けになれば幸いです。