はい、みなさん、こんにちは。
エンジニアの山田です。

最近、巷ではVue.jsとかいうものが流行ってると聞きました。
色々と検索してみると様々な情報があって、
中には「jQueryからVue.jsに乗り換えました！」
「jQueryからVue.jsにステップアップしました！」
との声も。

Vue.jsについて書いた記事には、とりあえず触ってみてテキストを書き換えました、リスト項目を追加しましたというモックの数々。
でもこれ、実際には案件でどこに活かせばいいのやら。

ということで、レスポンシブの案件なら絶対的にやらなきゃいけない、ハンバーガー押すとモーダルでグローバルナビが出てくる、アレを実装してみようと思います。

1. まずはマークアップする

まずは他のフレームワークと同様、ごく普通にHTMLとCSSをマークアップして見た目を作ります。

マークアップが完了したら、javascriptを書いていきます。
Vueのインスタンスを生成。
elというオプションの値にセレクタを入れてVue.jsが動作する範囲を定義します。
今回は、body直下ですべてを囲っているのdivタグにid="app"を付与して、この中で展開していきます。
要するにページ全体に適応させてしまう訳です。

この状態では、まだjavascriptでの動作がないため、グローバルナビが全体の上に見えたままです。

<!-- HTML -->
<div id="app">
　　<!-- このなかの要素に対してVue.jsが展開されます。 -->
</div>

/*-- JavaScript --*/
const vue = new Vue({
  el: '#app'
});

2. v-show、v-ifで表示・非表示を切り替える

次に表示・非表示する要素にv-showまたはv-ifというディレクティブを設定します。

v-show

こちらは、最初からDOM要素が存在します。
CSSのdisplayプロパティの値を変化することで、表示が切り替えるとのことです。

v-if

対してこちらはDOM要素がコメントアウトされて、イベントが発火するまで存在しなくなります。
イベントの発火によって、DOM要素が生成されて表示がされるようになります。

今回は、表示が切り替わるだけでよいので、v-showを使うことにします。
こちらの値に今回はgnavと入れました。

このオプションは、javascript側でインスタンスのデータとして定義します。
プロパティ名は任意のため、ご自身で設定してください。
このプロパティの状態がtrueなら表示している状態、falseなら非表示の状態となります。
これらを設定するだけで表示が切り替わるため、自分でCSSを書く必要はありません。

これで、グローバルナビは非表示になりました。
しかしボタンを押しても何も起こりません。
続いては、イベントハンドラを設定していきます。

<!-- HTML -->
<nav id="gnav" class="nav" v-show="gnav">
  <div class="nav__body">
    <ul class="nav__lst">
      <li class="nav__item"><a>Works</a></li>
      <li class="nav__item"><a>Blog</a></li>
      <li class="nav__item"><a>People</a></li>
      <li class="nav__item"><a>Recruit</a></li>
      <li class="nav__item"><a>Company</a></li>
      <li class="nav__item"><a>Contact</a></li>
    </ul>
  </div>
</nav>

/*-- JavaScript --*/
const vue = new Vue({
  el: '#app',
  data: {
    gnav: false
  }
});

3. v-onでイベントハンドラを設定する

v-onというディレクティッブにイベントリスナをアタッチし、関数を与えることで動作をつけることができます。
今回はこちらでクリックイベントを使って、表示を切り替えて行きます。

methodsというオプションに関数を定義し、そちらでdataオプションの値を操作することで表示状態を切り替えます。

<!-- HTML -->
<button class="button" type="button" name="button" @click="show">

/*-- JavaScript --*/
const vue = new Vue({
  el: '#app',
  data: {
    gnav: false
  },
  methods: {
    show: () => {
      vue.$data.gnav = true;
    }
  }
});

これでgnavの値がtrueになるため、グローバルナビが表示されるようになりました。
しかし、このままでは一方通行になってしまうため、関数の中に条件分岐するなどして工夫していきます。
こちらはVue.jsではなく、単純にJavaScriptで操作してclassをトグルしているだけなので割愛させていただきます。
codepenの方でご覧ください。

4. トランジションで動きをつける

ただの表示・非表示だけでは味気ないため、最後にトランジションを付けたいと思います。

動きを付けたい要素、つまり表示が切り替えられる要素をtransitionというタグで囲みます。
こうすることで、トランジションの始まり、途中、完了時でそれぞれclassが付与されます。
それらに対してCSSを当てて、動きをつけていきます。
詳しくは公式ドキュメントで解説されています。
Vue.js：Enter/Leave とトランジション一覧

<!-- HTML -->
<transition>
  <nav id="gnav" class="nav" v-if="gnav">
    <div class="nav__body">
      <ul class="nav__lst">
        <li class="nav__item"><a>Works</a></li>
        <li class="nav__item"><a>Blog</a></li>
        <li class="nav__item"><a>People</a></li>
        <li class="nav__item"><a>Recruit</a></li>
        <li class="nav__item"><a>Company</a></li>
        <li class="nav__item"><a>Contact</a></li>
      </ul>
    </div>
  </nav>
</transition>

/*-- CSS --*/
.v-enter,
.v-leave-to {
  opacity: 0
}

.v-enter-to,
.v-leave {
  opacity: 1
}

.v-enter-active,
.v-leave-active {
  transition: opacity 1s ease
}

これでレスポンシブ案件で毎回つくるアレが完成しました！

5. まとめ

結局のところ、jQueryと比べてどうなのか。
目的も用途もまったく異なるため、乗り換えだとかステップアップといった言葉は適していないように思います。

SPA（シングルページアプリケーション）のようなWebサイトが普及してきたことでニーズが増えてきたのだと思いますが、静的コンテンツがメインのサイトで今回作ったグローバルナビのようなものはjQueryの方が使いやすい印象です。
（Vue.jsに慣れてないだけというツッコミは受け付けません。）

今後Webサイトも変化していき、Vue.jsに限らず様々なフレームワークが登場してくるのでしょう。
jQueryが使われなくなる時代もそう遠くないのかなぁと感じたのは確かです。

いろいろ引き出しを増やしていかないとなぁ。
みなさんも見て見ぬ振りせず、一緒に立ち向かっていきましょうね。
それでは、最後まで読んでいただいてありがとうございました。