更新日: 2022年05月31日
公開日: 2020年11月25日

【初心者向け】Vue.jsを使ってみよう〜ボタン編〜

「ハンバーガーメニューを簡単に作ってみたい」
「Vueを使ってみたい」

プログラミングを学習するなかで、このように感じている方もいらっしゃると思います。VueはJavascriptやjQueryよりもはるかにシンプルなコードで簡単に書けるので、非常に人気が高いフレームワークです。

そこで今回はVueを使ってハンバーガーメニューを作成する方法について解説していきます。分かりやすく解説していきますので、ぜひ参考にしてみてくださいね。

完成形を確認しよう
Vue.jsの開発環境を準備しよう
必要なフォルダを作成しよう
Vue Devtoolsを導入しよう
HTMLで雛形を作ろう
CSSでデザインを整えよう
HTMLを修正しよう
Vueでボタンの表示を変えてみよう
dataプロパティの中身を見てみよう
クラスバインディングを見てみよう
methodsプロパティの中身を見てみよう
まとめ

完成形を確認しよう

今回はVue.jsを使用して下画像のようなハンバーガーメニューを作成していきます。ボタンをクリックすると、メニューの表示・非表示を変更可能です。

【メニューが閉じた状態】

【メニューが開いた状態】

Vue.jsの開発環境を準備しよう

それでは実際にVue.jsを使うための開発環境を準備しましょう。開発環境構築と聞くと難しく感じる方もいるかもしれないので、図を交えて分かりやすく解説していきますね。

必要なフォルダを作成しよう

まずは「VueButton」という名前のフォルダを作成してください。作成する場所はPCのデスクトップなど、好きな場所で構いません。

次にエディタで作成したフォルダを開いてみましょう。今回はVisual Studio Code（以下VScode）を使用します。

もしVscodeのインストールがまだの方は公式サイトからインストールしてください。Vscodeでフォルダを開けたら、index.htmlとscript.jsフォルダを作成します。

作成できたらindex.htmlファイルを開き、下記コードを貼り付けてください。また今回はFontAwesomeを使用するためタグ内でCDNを読み込んでいます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueButton</title>
</head>
<body>
    <h1>Hello!!</h1>
    <div id="app"></div>
</body>
</html>

vscodeのindex.htmlファイルをブラウザにドラッグ&ドロップすると、「Hello!!」と書かれたWebページを表示できます。もし上記方法でできない場合は、index.htmlファイルをダブルクリックしてみてください。

動作確認ができたら下記コードは今後不要になるので削除しておきましょう。

<h1>Hello!!</h1>

Vue Devtoolsを導入しよう

次にVue Devtools（以下Devtools）を導入していきましょう。DevtoolsはVueで開発する際に非常に便利なツールで、デバッグ（エラーを修正すること）や動作確認できます。

下記の記事で導入方法を紹介していますので、ぜひ参考にしてみてください。

参考記事

HTMLで雛形を作ろう

それではここから実際にコードを書いて、入力フォームを作成していきます。まずはindex.htmlファイルを開いて下記コードを貼り付けてみましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <title>VueButton</title>
</head>

<body>
    <div class="container" id="app">
        <i class="fas fa-bars fa-3x"></i>
        <i class="fas fa-times fa-3x"></i>
        <nav class="navi">
            <ul class="nav_wrap">
                <li>Home</li>
                <li>About</li>
                <li>Service</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="script/script.js"></script>
</body>

</html>

コードを貼り付けたら、一度ブラウザの画面に戻り下画面のようになっているか確認してください。

CSSでデザインを整えよう

HTMLで雛形を作成できたので、次はcssでデザインを整えていきましょう。 style.cssファイルを開き、下記コードを貼り付けてください。

html,body{
    margin:0;
    padding:0;
}

.container{
    display:flex;
    padding:15px;
    background-color: cornsilk;
}

.hidden{
    display:none;
}

.open{
    display:block;
}

.navi{
    margin-left:auto;
}

.nav_wrap{
    display:flex;
    justify-content:space-around;
    align-items:center;
    list-style: none;
    padding:0;
    width:100%;
}

.nav_wrap li{
    font-weight:bold;
    cursor:pointer;
    margin-right:30px;
}

.nav_wrap li:hover{
    color: cadetblue;
}

コードを貼り付けたら、ブラウザで画面を確認してみましょう。下画像のようにデザインが変わっていればOKです。

HTMLを修正しよう

HTML・CSSでメニューの雛形を作成することができました。次にボタンの表示・非表示を切り替えるためindex.htmlを修正していきます。

下記コードをhtmlファイルに貼り付けてください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <title>VueButton</title>
</head>

<body>
    <div class="container" id="app">
        <!-- ここを修正 -->
        <i class="fas fa-bars fa-3x" :class="{'hidden': isHidden}" @click="toggleButton"></i>
        <i class="fas fa-times fa-3x hidden" :class="{'open': isActive}" @click="toggleButton"></i>
        <nav class="navi" v-show="showNavi">
            <ul class="nav_wrap">
                <li>Home</li>
                <li>About</li>
                <li>Service</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="script/script.js"></script>
</body>

</html>

コードを貼り付けたらブラウザで画面を確認しましょう。先程表示されていた「×」ボタンが非表示になっていることが分かります。

しかし今のままではハンバーガーメニューをクリックしても、変化がないため次の章でVueのコードを作成していきます。

Vueでボタンの表示を変えてみよう

script.jsを開いて、下記コードを貼り付けてください。

new Vue({
    el: '#app',
    data() {
        return {
            isHidden: false,
            isActive: false,
            showNavi: false
        }
    },
    methods: {
        toggleButton() {
            this.isHidden = !this.isHidden,
                this.isActive = !this.isActive,
                this.showNavi = !this.showNavi
        }
    }
})

コードを貼り付けたらブラウザの画面を確認してみましょう。下画像のような挙動になればOKです。

【メニューが閉じた状態】

【メニューが開いた状態】

データの中身がどのように切り替わっているのか確認するために、Vue Devtoolsを使って確認してみます。Chromeの検証ツールを開き、「Vue」を選択します。

次に「Root」の文字をクリックすると、現状のdataの状態を確認できます。

ボタンをクリックすることで、isActiveなどの値がfalse→true,true→falseといった具合に切り替わるのが分かりますね。Vueを使用する際は、このようにDevtoolsでこまめに値を確認すると良いでしょう。

次章で今回使用したVueの知識を整理していきます。

dataプロパティの中身を見てみよう

『dataプロパティ』について解説していきます。

dataプロパティはVueで扱うデータを入れておく場所で、HTMLファイルから読み込んで画面に表示できます。

    data() {
        return {
            isHidden: false,
            isActive: false,
            showNavi: false
        }
    },

returnの中身でisHiddenやisActiveなどの初期値をfalseに設定されており、これらの値はHTML内に書くと使用できるようになります。

        <i class="fas fa-bars fa-3x" :class="{'hidden': isHidden}" @click="toggleButton"></i>

クラスバインディングを見てみよう

次に『クラスバインディング』について見ていきましょう。クラスバインディングとはHTMLのclass属性とデータを紐づけることを指します。

HTML内で記載した下記コードの「:class="{'hidden': isHidden}" 」がクラスバインディングに当たります。Vueのデータプロパティ内でhiddenの値である「isHidden」の初期値がfalseなので、最初はhiddenというクラスが適用されていない状態です。

後述するmethods内で定義した「toggleButton」によりisHiddenの値がfalseとtrueに入れ替わるようになっています。このメソッドによりボタンの表示・非表示を切り替えることが可能です。

methodsプロパティの中身を見てみよう

『methods』プロパティについて見ていきましょう。methodsはVue内で扱うメソッドを管理する場所です。

今回で言えば下記コードがmethodsです。例えばtoggleButton()というメソッドが実行されれば、isHiddenなどの値が切り替わるように設定されています。

「!」は入力値の逆を返すという役割があり、falseが入力されればtrue、逆にtrueが入力されればfalseを返します。

methods: {
        toggleButton() {
            this.isHidden = !this.isHidden,
                this.isActive = !this.isActive,
                this.showNavi = !this.showNavi
        }
    }

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら