【写真とコード付き】Vue.jsの構築から基本的な書き方まで1から解説【超初心者向け】

<br>

## はじめに
最近Vue.jsを学習し初めて、ある程度知識のインプットができたので、アウトプットがてら**Vue.jsのコード**について、解説していこうと思います。

>主にDirectiveのについての解説になります。

では早速いきます。
<br>
<br>

## Vue.jsとは
簡単に言うと、開発効率を良くする為に作られた、**JavaScriptのフレームワーク**になります。**オープンソース**なので、誰でも気軽に使い始める事ができます。
<br>

### 使用方法
Vue.jsを始めるには、主に3つの方法があります。

<ul>
  <li>CDN</li>
  <li>ファイル直接読み込み</li>
  <li>NPM</li>
</ul>

オススメは簡単に使用する事ができる、`CDN` になります。公式サイトに `scriptタグ` で囲まれた `CDN` が記載されているので、それをコピーして `HTMLファイル` の `bodyタグ` 直前にペーストします。

Vue.js - 公式サイト
https://jp.vuejs.org/v2/guide/installation.html

```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</body>

</html>
```

これでVue.jsを使用する準備が整いました。
<br>
<br>

### 記述場所
記述できる場所は主に２箇所あります。

<ul>
  <li>HTMLにscriptタグで直書き</li>
  <li>JavaScriptファイルで書く</li>
</ul>

`HTMLファイル` に直書きしてしまうと、見通しが悪くなったりするので、基本的には `JavaScriptファイル` に書いていく方法がオススメです。

>CDNで読み込んでいる場合、JavaScriptファイルは必ずその後に読み込ませてください。

<br>

今回使用するディレクトリ階層は以下の通りです。

```html:ディレクトリ階層
─ root(任意のディレクトリ)
│
├─ index.html
│
├─ css
│   └ style.css
│
└─ js
    └ main.js
```


```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>

</html>
```

また今回の説明でCSSの解説はしませんが、実際に開発を行う際は、このような形がオーソドックスかと思われます。

<br>
<br>

## Vue.js - Directive
それでは `Vue.js` を使用する環境が整ったので、実際のコードを見ていきましょう。

今回解説していくのは、`Vue.js` の中でも `Directive(ディレクティブ)` と言うものの書き方についてです。
<br>

### Vue.jsの書き方
まず `Directive` の書き方の前に、`Vue.js` の基本的な書き方を解説します。

まずはこちらのコードをご覧ください。

```js:main.js
// Vueインスタンスを生成
const web = new Vue({

  // マウントする属性を記述(この場合 id=web と言う意味)
  el: '#web',

  // Vue.jsで使用するデータを格納
  data: {
    context: `Hello Vue.js!`
  }
})
```
<br>

コメントの通りですが、

①まず最初に `Vue()` の**インスタンスを生成**をします。
②次に `el:` で**マウントする属性**を記述します。
③最後の `data:` は**Vueインスタンス内で使用するデータの格納**になります。

これが最も基本的な `Vue.js` の記述方法になります。`el` と `data` はプロパティと呼ばれます。

>③に関しては、他のプロパティを使用する場合、不要な場合もあります。

<br>
<br>

### Directiveについて
`Directive` の説明を簡単にすると、`HTMLファイル` の属性を記述するところに、`Vue.js` 側で記述したスタイル(上記のファイル階層なら、`main.js` で記述したスタイル)を当てる為の記述のことになります。

言葉で説明してもわかりにくいと思うので、まずは実際のコードをご覧ください。

```html:index.html
<!-- head省略 -->
<body>

  <div id="web">
    <p>
      <!-- 通常の書き方(Mustache構文) -->
      {{ context }}
    </p>
    <p>
      <!-- v-bind が Directive -->
      <input type="text" v-bind:value="context">
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
```

```css:style.css
/* 見やすくする為にスタイルを当てています */
#web {
  margin: 20px;
}
```

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    context: `Hello Vue.js!`
  }
})
```
<br>

出力結果はこちら。

![スクリーンショット 2020-12-11 22.52.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/df081275-b40c-15dc-db7f-3d33263ab0da.png)

通常インスタンスで定義した値を利用するには、**マスタッシュ構文(中括弧２つで囲う記法)** を利用して出力しますが、上記のように、`HTMLタグ内` に使用するのが、`Directive` と呼ばれるものになります。(上記の場合、`v-bind`)

<br>
<br>

### Directiveの種類
様々な `Directive` の種類があるのですが、ここでは**基本的な４つのDirective**について、解説していきます。

一覧はこちらです。

<ul>
  <li>Directive
    <ul>
      <li>v-bind</li>
      <li>v-if
        <ul>
          <li>v-else</li>
          <li>v-else-if</li>
        </ul>
      </li>
      <li>v-show</li>
      <li>v-for</li>
    </ul>
  </li>
</ul>
<br>

### v-bind
`Vueインスタンス` で定義した値を利用するには、通常はマスタッシュ構文を利用しますが、`HTMLタグ` の属性で利用する場合は**マスタッシュ構文が使用できません。**

その為に利用するのが、上記でも紹介した `v-bind` になります。実際のコードは下記になります。

```html:index.html
<!-- head省略 -->
<body>

  <div id="web">
    <p>
      <!-- v-bind: の形で属性の手前に記述 -->
      <input type="text" v-bind:value="context">
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
```

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    context: `Hello Vue.js!`
  }
})
```

これで先ほどの画像のように、`inputタグ` の `value属性` に `Vueインスタンス` で定義したcontextの値を利用する事ができます。

>注意点は `v-bind` を使用した場合、マスタッシュ構文は不要になると言う部分です。

<br>
<br>

### v-if
ここからJavaScriptっぽくなっていきます。`v-if` とは、DOM操作で画面の表示・非表示を行う `Directive` になります。

まずは表示の際のコードが下記になります。

```html:index.html
<!-- head省略 -->
<body>

  <div id="web">
    <!-- 表示・非表示を行いたいタグに、v-if を使用 -->
    <p v-if="toggle">
      表示されました。
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
```

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    // toggle が true なら表示
    // toggle が false なら非表示
    toggle: true
  }
})
```

出力結果はこちら。

![スクリーンショット 2020-12-11 22.54.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/34022c62-d034-e172-0cf4-2292c1b23b4e.png)

次に非表示の際のコードが下記になります。

```js:main.js
const app = new Vue({
  el: '#web',
  data: {
    // toggle が true なら表示
    // toggle が false なら非表示
    toggle: false
  }
})
```

出力結果は何も表示されません。
<br>

仕組みとしては、`v-if` で取得した値を参照して、`true` なら表示、`false` なら非表示になると言う、シンプルな構造です。
<br>
<br>

#### v-else
ifがあればelseもあります。`Vue.js` でelseに相当するのが、`v-else` です。

実際のコードはこちら。

```html
<!-- head省略 -->
<body>

  <div id="web">
    <!-- toggle が true ならこちらが表示 -->
    <p v-if="toggle">
      表示されました。
    </p>

    <!-- toggle が false ならこちらが表示 -->
    <p v-else>
      表示されませんでした。
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
```
<br>

まずtoggleが `true` の場合。

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    toggle: true
  }
})
```

出力結果はこちら。

![スクリーンショット 2020-12-11 22.54.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/b4d4d6d0-12e5-a877-ca46-68533565569a.png)


<br>

次にtoggleが `false` の場合。

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    toggle: false
  }
})
```

出力結果はこちら。

![スクリーンショット 2020-12-11 22.56.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/7a6362da-a452-d8f1-b94f-d8247f659230.png)

このように、`v-else` を使用する事で、falseの時の表示を設定する事ができます。

>v-elseはv-ifと同じ階層で、直後のタグに指定する必要があります。

<br>
<br>

#### v-else-if
そしてif、elseがあれば、elseifもあります。`Vue.js` でelseifに相当するのが、`v-else-if` です。`v-else-if` を使用する場合は、属性値の部分に条件式を書く事で、場合分けを行う事ができます。

実際のコードはこちら。

```html:index.html
<!-- head省略 -->
<body>

  <div id="web">
    <p v-if="number === 1">
      number 1 が表示されました。
    </p>
    <p v-else-if="number === 2">
      number 2 が表示されました。
    </p>
    <p v-else-if="number === 3">
      number 3 が表示されました。
    </p>
    <p v-else>
      表示されませんでした。
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
```
<br>

まずは `Vueインスタンス` の `dataプロパティ` で、numberを1に定義した場合。

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    number: 1
  }
})
```

出力結果はこちら。

![スクリーンショット 2020-12-11 22.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/52961ca0-6e52-dd0b-81ad-f7e54078a195.png)

<br>

次に `Vueインスタンス` の `dataプロパティ` で、numberを2に定義した場合。

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    number: 2
  }
})
```

出力結果はこちら。

![スクリーンショット 2020-12-11 22.57.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/8cc79c11-ab46-10e0-625b-164945aa7d9e.png)

<br>

同じように `Vueインスタンス` の `dataプロパティ` で、numberを3に定義した場合。

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    number: 3
  }
})
```

出力結果はこちら。

![スクリーンショット 2020-12-11 22.58.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/517b9770-f931-f7eb-59db-2a3300fdc3e3.png)

<br>

そして `Vueインスタンス` の `dataプロパティ` で、numberをどの条件にも当てはまらない、4に定義した場合。

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    number: 4
  }
})
```

出力結果はこちら。

![スクリーンショット 2020-12-11 22.58.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/5385765d-7c80-63bc-68bc-b056bcdb7f29.png)

また上記のように、`v-else-if` は何度でも使用する事ができます。ページの表示形式をいくつかに分けたい場合は、重宝します。
<br>
<br>

### v-show
こちらも `v-if` と同じく、コンテンツの表示・非表示を行える `Directive` になります。コードの書き方も `v-if` とほぼ同じです。

違いは、`v-if` はDOM操作を行うので、描画にかかるコストが大きいですが、`v-show` の場合は、単にCSSで `display: none;` を付けるか付けないになるので、**描画コストを削減できる特徴**があります。

実際のコードはこちら。

```html
<!-- head省略 -->
<body>

  <div id="web">
    <p v-show="toggle">
      表示されました。
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
```
<br>

まず `Vueインスタンス` の `dataプロパティ` で、toggleをtrueにした場合。

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    toggle: true
  }
})
```

出力結果はこちら。

![スクリーンショット 2020-12-11 23.00.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/969ae857-b54a-a02f-22f8-8577a6a0d14b.png)


<br>

そして `Vueインスタンス` の `dataプロパティ` で、toggleをfalseにした場合。

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    toggle: true
  }
})
```

出力結果は何も表示されません。

<br>

ここでGoogle chromeの検証を開いてみると、次のようになっています。

![スクリーンショット 2020-12-11 22.14.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/732c4175-90cf-9814-7c4b-7e8208fadcfc.png)


このように、`v-show` を記述したpタグに `display: none;` が付いているのが、確認できます。

特に頻繁に切り替えを行うようなコンテンツに対しては、`v-if` よりも `v-show` の方に軍配が上がる感じです。
<br>
<br>

### v-for
最後はコンテンツの描画の繰り返し処理が行える、`v-for` についてです。

まずはこちらのコードをご覧ください。

```html:index.html
<!-- head省略 -->
<body>

  <div id="web">
    <ul>
      <li v-for="color in colors">{{ color }}</li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <script src="./js/main.js"></script>
</body>
```

```js:main.js
const web = new Vue({
  el: '#web',
  data: {
    colors: [
      'Red',
      'Blue',
      'yellow',
      'Green'
    ]
  }
})
```

まず `Vue.jsファイル` にて、配列(もしくはオブジェクト)を用意します。そしてこれを `HTMLファイル` で、1つずつ取り出していくと言う流れです。

上記の場合、HTMLタグ内にVueインスタンスの**colors**から、要素を**color**として1つずつ取り出していく感じです。
<br>

出力結果はこちら。

![スクリーンショット 2020-12-11 23.02.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/882660/8783befb-0f6f-1b3c-deb7-3505115a8ea1.png)

ちなみにこの操作は、`PHP` や `Ruby` などのバックエンド系の言語でも可能です。特別な理由が無い限り、どちらを利用しても大丈夫だと思います。
<br>
<br>

## まとめ
少し長くなってしまいましたので、最後にまとめておきます。

<ul>
  <li>Vue.js
    <ul>
      <li>使用方法
        <ul>
          <li>CDN(オススメ)</li>
          <li>直接読み込み</li>
          <li>NPM</li>
        </ul>
      </li>
      <li>記述場所
        <ul>
          <li>HTMLファイルに直書き</li>
          <li>JavaScriptファイルで書く<br>(オススメ)</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li>Directive
    <ul>
      <li>v-bind</li>
      <li>v-if
        <ul>
          <li>v-else</li>
          <li>v-else-if</li>
        </ul>
      </li>
      <li>v-show</li>
      <li>v-for</li>
    </ul>
  </li>
</ul>
<br>

`Vue.js` は `JavaScript` や `jQuery` などよりも単純で、かつ**記述量がかなり削減できます。** スピード感のある開発現場においては、使用されている場所も多いみたいなので、習得しておいて損は無いと思います。

ぜひ実際にコードを書いて試してみてください！

最後まで読んでいただき、ありがとうございました！
<br>
<br>
<br>

筆者：yuki｜IT業界のリアルな転職事情など発信｜元トップ営業マン(訪販)→未経験からエンジニア転職へ
Qiita：https://qiita.com/yuki4839
Twitter：https://twitter.com/yukifullstack
<br>