【初心者向け】最初に覚えるべき2つのディレクティブ機能【Vue.js2】

HTMLとCSSは書けるJavaScript初心者が、覚えたてのVue.jsの基本ディレクティブについて解説した記事です！
Vue.js興味あるけど何から覚えればいいの？という方の参考になればうれしいです。

## Vue.jsとは

Vue.jsは、データの変更に応じて自動的にDOMを更新し、表示や動作を変えることができるJavaScriptフレームワークです。データを変更すると自動的にUIに反映され、DOMを操作する必要がほとんどありません。

そのため、HTMLテンプレート内で条件分岐や動的なコンテンツの制御が可能になります。

私のようなJavaScript初心者にとっては、馴染みのあるHTMLの書き方でプログラミングっぽいことができるので、取っつきやすいのではないかと思います！

## 最初に覚えるべき2つのディレクティブ機能

ディレクティブを使えば、HTML要素に特定の動作を追加することができます。
Vue.js初心者が最初に覚えるべき2つのディレクティブについて説明します。

### 1．条件によってコンテンツを出しわける（v-if）
条件によって要素の表示を切り替えたい、ということありませんか？
例えば、在庫の有無で表示を切り替えたいとか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575684/3ef77871-91d1-4907-9f5a-3cd84c656a19.png)

そんな時に、`v-if`のディレクティブが使えます。

:::note info
v-if="条件式"
:::

以下は商品の在庫の有無で、金額部分の表示を切り替える場合の記述例です。

```vue
<!-- 在庫の有無で表示テキストを切り替える -->
<div id="sample">
    <!-- 在庫がない場合 -->
    <p v-if="stock === 0" class="price_outofstock">売り切れ</p>
    <!-- 在庫がある場合 -->
    <p v-else class="price">{{price}}円</p>
</div>

<script>
  new Vue({
    el: '#sample',
    data: {
      stock: 0, // 在庫数をここで設定
      price: 2500 // 商品の価格をここで設定
    }
  });
</script>
```

上記では、ストックが0の場合（`v-if="stock === 0"`）は売り切れ、それ以外（`v-else`）は金額を表示、という条件分岐を行っています。

scriptタグ内の`price`が更新されると、HTMLの`{{price}}円`も更新されます。

#### ■`v-if`と`v-show`の違い

`v-if`の他に`v-show`という種類もあります。
どちらも表示・非表示を切り替えるディレクティブですが、条件に一致しない場合、`v-if`の要素はそもそもDOMにレンダリングされないのに対し、`v-show`の要素は`display: none`で非表示になります。

はじめからDOMに存在することが前提の要素を`v-if`で出しわけてしまうと不具合の元なので、そんなときは`v-show`を使うと安心です。

また、`v-show`だとtemplateタグが使えないので注意です。

### 2．属性を動的に変える（v-bind:）
この条件に合致するときだけここのスタイルを変えたい、ということありませんか？
例えば、必須項目がすべて入力されたときにボタンの色をグレーから緑に変えたいとか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575684/6dbb3016-4d65-41c3-a677-bea977ce76c4.png)

vue.jsなら、バインディング機能で動的にスタイルを変更できます。

:::note info
v-bind:属性名="条件式"
:::

以下は条件によって`disabled`属性をつけ、ボタンの色を動的に変える場合の記述例です。
```vue
<!-- disabledの有無でボタンの色を変える -->
<!-- ※「isFormComplete」は関数例です -->
<div id="app">
  <!-- ボタンのスタイルを動的に変更 -->
  <button
    v-bind:disabled="!isFormComplete"
    class="form_button"
    type="button"
  >
    <span>この内容で申し込む</span>
  </button>
</div>

<style>
    /* ボタンのスタイル */
    .form_button {
        margin: 20px auto 40px;
        padding: 20px;
        position: relative;
        text-align: center;
        width: 100%;
    }
    /* ボタンが無効な状態 */
    .form_button[disabled] {
        background: gray;
        cursor: no-drop;
    }
    /* ボタンが有効な状態 */
    .form_button:not([disabled]) {
        background: green;
    }
</style>
```
※`isFormComplete`は関数の例で、関数の記述は割愛しています。

`v-bind:`部分で、`!isFormComplete`（フォーム入力が完了していない）場合に、ボタンに`disabled`属性がつけるという動作を行っています。（!は否定の意味です）

すべてが入力されると`disabled`が外れ、ボタンが有効化されます。
それらがDOMに出力されると以下のような記述になります。

```html
<!-- ボタンが無効な状態 -->
<button class="form_button" type="button" disabled>
    <span>この内容で申し込む</span>
</button>

<!-- ボタンが有効な状態 -->
<button class="form_button" type="button">
    <span>この内容で申し込む</span>
</button>
```

これはクラス名でも同様のことが可能です。
以下は条件によって動的にクラスをつける場合の記述例です。

```vue
<!-- クラスをつけてボタンの色を変える -->
<button
    v-bind:class="{ 'disabled-button': !isFormComplete }"
    class="form_button"
    type="button"
>
    <span>この内容で申し込む</span>
</button>

<style>
    /* ボタンのスタイル */
    .form_button {
        margin: 20px auto 40px;
        padding: 20px;
        position: relative;
        text-align: center;
        width: 100%;
        background: green;
    }

    /* ボタンが無効な状態 */
    .disabled-button {
        background: gray;
        cursor: no-drop;
    }
</style>
```
こちらの場合、`v-bind:`の条件に一致する場合と`.disabled-button`のクラスが動的に入ります。

## Vue.jsは仕組みがわかるとかなり便利！

Vue.jsは見た目がわかりやすい一方で、JavaScriptのデータが更新されると画面も更新されるリアクティブな仕組みなので、それを理解するのがかなり難しいです。

HTML要素とデータの依存関係をちゃんと理解・整理できるようになると、かなり便利なフレームワークなのではないかと思います！（私はまだ勉強中です…）

初心者の方は、ぱっと見わかりやすいディレクティブから覚えると、Vue.jsに入門しやすいのではないかと思うので、この記事をぜひ参考にしてみてください！