Vue.jsで作るハンバーガーメニュー - マーカーネット株式会社

こんにちは！Web制作業界に入って４ヶ月目の新人コーダーIです。よろしくお願いします！

私は社外の勉強会やセミナーが好きで色々参加してるのですが、そこで最近よく聞くのが「Vue.js」です。同時に「脱jQuery」というワードもよく聞きます。

職場の先輩にも「これから勉強し始めるならjQueryよりも断然Vue.jsやReact！」というアドバイスをいただいたので、とりあえず学習コストが低いという「Vue.js」を勉強し始めることにしました！

先輩におすすめしてもらったのがこの本。別名、「猫本（ねこほん）」とか呼ばれてるらしく、Vue.jsの勉強を始めるには打って付けの本みたいです。

本を読み進めながらCodePenなどのオンラインエディターを使って実際に動かしてみることができるのでおすすめです。コードが長くて書くの面倒くさいな〜〜なんて時は、サポートページに同じコードが書いてあるのでコピペできちゃいます。ありがたい・・・。後半はほとんどコピペでやりました・・・（小声）。

基礎から学ぶVue.js サポートページ

とりあえず、一通り読み終わったは読み終わったのです。でも読み終わったものの・・・・実際に自分がやりたいことをVue.jsで書こうとしてみると全然手が動かない。

ということで今回、WEB制作では欠かせない「ハンバーガーメニュー」を題材に実際にVue.jsで作ってみることにしました。

新人でも簡単に作れた！Vue.js爆速コーディング！

まず最初に完成形したコードがこちら。

See the Pen
OJLNpWe by ずみ (@akalingoo)
on CodePen.

【HTML】

<div id="app">
  <header class="header">
    <div class="header__menu">
      <div class="header__menu__line" @click="naviOpen" :class="{'is-active': active}">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </header>
   <transition name="navi">
  <nav class="navi" v-show="navi">
    <ul class="navi__wrap">
      <li><a href="#">AAA</a></li>
      <li><a href="#">BBB</a></li>
      <li><a href="#">CCC</a></li>
      <li><a href="#">DDD</a></li>
      <li><a href="#">EEE</a></li>
    </ul>
  </nav>
 </transition>
 </div>

【JS】

new Vue ({
  el: '#app', 
  data: {
    active: false,
    navi: false,
  },
  methods: {
    naviOpen: function() {
      this.active = !this.active;
      this.navi = !this.navi;
    }
  }
})

コードを見るとHTMLの中に見慣れないコードがあります。

まずこの部分。jQueryでいうところの「.on(‘click’)」。Vue.jsではこのようにHTMLで直接要素を指定することができます。jQuery用のクラスを付与する必要がないのでコードがシンプルになります。

@click="naviOpen"

「この要素をクリックしたら”naviOpen”を実行してね。」

“naviOpen”って？はい。Vueインスタンスの中にあるこれです。

methods: {
    naviOpen: function() {
      this.active = !this.active;
      this.navi = !this.navi;
    }
  }

ここで何をしてるかというと「this.active」と「this.navi」のBool値を切り替える処理をしています。「this」というのはこのVueインスタンスのことを指します。つまりその中の「active」と「navi」。この部分です。

  data: {
    active: false,　
    navi: false,　// 初期表示は非表示なのでfalseを指定しておく
  }

Vueで管理したいデータはこのdataの中で管理されます。つまり先ほど@clickの記述は「要素をクリックした時、データactiveとnaviのBool値（「true」⇔「false」）を切り替えてね」。

次にこの部分。データの状態に応じてクラスの付け外しをする記述です。

:class="{'is-active': active}"

「active（データ）が’true’の時に”is-active”というクラスを付与してね。」

このクラスを利用して、✖、と三本線の変化をCSSによって表現しています。

最後にこの部分。「v-show」と似たもので「v-if」がありますが、これらはどちらも表示/非表示を切り替えるために使われます。

v-show="navi"

これは「navi（データ）が’true’なら表示してね。」。今回は「v-show」を使っているのでnaviが’false’の時、この要素に「style=”display: none;”」が適応され非表示になりますが、「v-if」を使った場合は、要素が丸ごとコメントアウトされて非表示になります。

使い分けとしては今回のように頻繁に表示/非表示を切り替わる場合は「v-show」の方がいいそうです。ちなみにブラウザ上の見た目はどちらも同じです。

今回、こんな感じでVue.jsを使ってハンバーガーメニューを作ることができましたが、jQueryに慣れてしまっている私はまだ、やっぱりjQueryの方が書きやすいな～っていう印象でした。

「脱jQuery」への道のりは遠そうだなあと思いつつ、せっかくVue.jsを勉強し始めたので使いこなせるように頑張ります。

なんかVue.jsの良さを全然書けてない記事になってしまいましたが、本当はもっと便利な機能が山ほど山ほど山ほどあります。（まだ使いこなせないので記事としては紹介できませんでしたが次回紹介できるように頑張ります・・・）

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