はじめに

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

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

では早速いきます。

Vue.jsとは

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

使用方法

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

CDN
ファイル直接読み込み
NPM

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

Vue.js - 公式サイト
https://jp.vuejs.org/v2/guide/installation.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を使用する準備が整いました。

記述場所

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

HTMLにscriptタグで直書き
JavaScriptファイルで書く

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

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

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

ディレクトリ階層

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

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の解説はしませんが、実際に開発を行う際は、このような形がオーソドックスかと思われます。

Vue.js - Directive

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

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

Vue.jsの書き方

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

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

main.js

// Vueインスタンスを生成
const web = new Vue({

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

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

コメントの通りですが、

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

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

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

Directiveについて

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

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

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>

style.css

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

main.js

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

出力結果はこちら。

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

Directiveの種類

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

一覧はこちらです。

Directive
- v-bind
- v-if
  - v-else
  - v-else-if
- v-show
- v-for

v-bind

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

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

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>

main.js

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

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

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

v-if

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

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

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>

main.js

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

出力結果はこちら。

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

main.js

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

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

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

v-else

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

実際のコードはこちら。

<!-- 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>

まずtoggleが true の場合。

main.js

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

出力結果はこちら。

次にtoggleが false の場合。

main.js

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

出力結果はこちら。

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

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

v-else-if

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

実際のコードはこちら。

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>

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

main.js

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

出力結果はこちら。

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

main.js

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

出力結果はこちら。

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

main.js

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

出力結果はこちら。

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

main.js

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

出力結果はこちら。

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

v-show

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

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

実際のコードはこちら。

<!-- 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>

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

main.js

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

出力結果はこちら。

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

main.js

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

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

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

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

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

v-for

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

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

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>

main.js

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

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

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

出力結果はこちら。

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

まとめ

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

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

Directive
- v-bind
- v-if
  - v-else
  - v-else-if
- v-show
- v-for

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

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

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

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