初心者向け　Vue.jsの使い方

環境構築

まずは作業用のフォルダを作成したのち、下記ファイルを準備してください。

index.html

main.css

main.js

今回はCDNを利用してVus.jsのファイルを読み込みます。

index.htmlファイルのbodyタグの直前に下記コードを貼り付けてください。このコードによりVue.jsが使用可能になります。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

これで準備が整いましたので、まずは文字列の出力を行ってみましょう。

文字列の出力

htmlファイルのbodyタグの中身に以下を追加してください。

<div id="app">
  {{ message }}
</div>   

次にmain.jsを編集していきます。

VueクラスからVueインスタンスを作成し、{}の中にプロパティ（キー）と値（バリュー）のセットを挿入して使います。

const app = new Vue({

})

elプロパティを作成し、どの部分を対象に変更を行うか指定します。

今回では、作成したindex.htmlのid: appの要素ということになります。

const app = new Vue({
  el:'#app'
})

次にdataプロパティを追加します。dataプロパティはVue.jsで扱うデータを保管しておく場所です。

dataの中にある情報を引き出してHTMLに反映させることができます。では、script.jsのコードを下記のように変更してみましょう。

const app = new Vue({
  el:'#app',
  data: {
    message: "Hello World",
  }
})

これによりhtmlの{{ message }}部分に値が適用されます。index.htmlをブラウザで開き、下記のように表示されれば成功です。

ハンバーガーメニュー

次に、vueを使って見た目を整える練習として、ハンバーガーメニューを実装してみようと思います。

ハンバーガーメニューを作るうえで必要な機能は、以下２点です。

ボタン

・ボタンを押したときにボタンが×に変わる

・もう一度押したときに元に戻る

サイドバー

・ボタンが押されたらメニューを表示する

・もう一度ボタンが押されたらメニューを閉じる

・表示切替のときのアニメーション

先程のhtmlに以下の記述を追加しましょう

<div id="hamburger">
    <!--ハンバーガーメニューのボタン-->
    <div class="hamburger_btn" v-on:click='ActiveBtn=!ActiveBtn'>
      <span class="line line_01" v-bind:class="{'btn_line01':ActiveBtn}"></span>
      <span class="line line_02" v-bind:class="{'btn_line02':ActiveBtn}"></span>
      <span class="line line_03" v-bind:class="{'btn_line03':ActiveBtn}"></span>
    </div>
    <!--サイドバー-->
    <transition name="menu">
      <div class="menu" v-show="ActiveBtn">
          <ul>
              <li><a href="#">項目1</a></li>
              <li><a href="#">項目2</a></li>
              <li><a href="#">項目3</a></li>
              <li><a href="#">項目4</a></li>
              <li><a href="#">項目5</a></li>
          </ul>
      </div>
  </transition>
  </div>

style.cssは以下になります。

ボタン*/
.hamburger_btn {
  position: fixed; /*常に最上部に表示したいので固定*/
  top: 0;
  right: 0;
  width: 70px;
  height: 72px;
  cursor: pointer;
  z-index: 50;
}

.hamburger_btn .line {
  position: absolute;
  top: 0;
  left: 20px;
  width: 32px;
  height: 2px;
  background: #333333;
  text-align: center;
}

.hamburger_btn .line_01 {
  top: 16px;
  transition: 0.4s ease;
}
.hamburger_btn .line_02 {
  top: 26px;
  transition: 0.4s ease;
}
.hamburger_btn .line_03 {
  top: 36px;
  transition: 0.4s ease;
}


.btn_line01 {
  transform: translateY(10px) rotate(-45deg);
  transition: 0.4s ease;
}
.btn_line02 {
  transition: 0.4s ease;
  opacity: 0;
}
.btn_line03 {
/*
  transform: translateY(-10px) rotate(45deg);
  transition: 0.4s ease;
}

/*サイドバー*/
.menu-enter-active, .menu-leave-active {
  transition: opacity 0.4s;
}
.menu-enter, .menu-leave-to {
  opacity: 0;
}
.menu-leave, .menu-enter-to{
  opacity: 1;
}

.menu li {
  list-style: none;
  line-height: 1;
  padding: 1rem;
}
.menu {
  background-color: rgba(197, 197, 197, 0.671);
  z-index: 30;
  padding: 2rem 1rem;
  position: fixed;
  width: 20rem;
  height: 80rem;
  top: 0;
  right: 0;
}
.menu a {
  color: rgb(66, 66, 66);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 0 2rem;
}
.menu ul{
  margin: 1rem;
  padding: 0;
}

elプロパティを作成し、#hamburgerを制御する対象として指定します。

v-on:clickを使うと、イベントの制御ができるので「ボタンがクリックされたらActiveBtnの真偽値を逆にする（反転する）」という処理を書きます。

var hamburger = new Vue({
    el: '#hamburger',
    data: {
        ActiveBtn:false
    }
})

ボタン

Vue.jsでclassを操作したい場合、v-bind:classを使います。

以下のコードはActiveBtnがtrueだったらbtn_line01,btn_line02,btn_line03のそれぞれのクラス属性を付与するという意味になります。

<span class="line line_01" v-bind:class="{'btn_line01':ActiveBtn}"></span>
<span class="line line_02" v-bind:class="{'btn_line02':ActiveBtn}"></span>
<span class="line line_03" v-bind:class="{'btn_line03':ActiveBtn}"></span>

サイドバー

共通部分として作ったActiveBtnのデータをv-show="ActiveBtn"と書いて紐づけます

そうすることで、ボタンを押したときに表示を切り替えることが可能になります。

<div class="menu" v-show="ActiveBtn">
  <ul>
      <li><a href="#">項目1</a></li>
      <li><a href="#">項目2</a></li>
      <li><a href="#">項目3</a></li>
      <li><a href="#">項目4</a></li>
      <li><a href="#">項目5</a></li>
  </ul>
</div>

最後に、サイドバーの表示切替時のアニメーションを作ります

表示切替のアニメーションにはVue.jsのトランジションという機能を使います。
cssトランジション・アニメーションを簡単に使えるようにした機能で、使う際は、<transion>タグで囲んで使います。今回名前はmenuとしておきます。

<transion>タグで囲んだ場所には、トランジションクラスを使ってアニメーションを適用できる。
対象をDOMに追加するとき（表示するとき）のアニメーションはenter~、DOMから削除されるとき（非表示にするとき）はleave~を使う。

<transition name="menu">
  <div class="menu" v-show="ActiveBtn">
      <ul>
          <li><a href="#">項目1</a></li>
          <li><a href="#">項目2</a></li>
          <li><a href="#">項目3</a></li>
          <li><a href="#">項目4</a></li>
          <li><a href="#">項目5</a></li>
      </ul>
  </div>
</transition>

以下のように表示されるかと思います。

API連携

最後にvueを使ったAPI連携をやってみます。

JSONPlaceholderという開発者向けに無料でテスト用のAPIを提供しているサービスを利用します。

今回はその中のランダムなユーザー情報を返してくれるAPIを利用します。

https://jsonplaceholder.typicode.com/

Vue.jsでAPIからデータを取得してくる最もメジャーな方法としてaxiosがあります。

axiosとは非同期通信でデータを取得するためのモジュールです。

今回はCDNを使ってaxiosを使用するため、headタグに次のスクリプトタグを挿入します。

<script src="https://unpkg.com/axios/dist/axios.min.js"><script>

これでaxiosを使う準備はこれで完了です。index.htmlに以下を追記してください。

<div id="userInfo">
  <ul>
    <li v-for="user in users">{{ user.name }}</li>
  </ul>
</div>

main.jsの完成形は以下となります。

const vm = new Vue({
  el: '#userInfo',
  data () {
      return {
          users: [],
      }
  },
  mounted :function(){
      axios.get('https://jsonplaceholder.typicode.com/users')
          .then(response => this.users = response.data)
          .catch(error => console.log(error))
  }
})

Dataオプションにより、取得したデータを格納するための変数を定義します。今回は架空の人物の名前を格納する配列を用意します。

data () {
  return {
      users: [],
  }
},

mountedはビューインスタンスを生成するタイミングで実行する処理を記述します。簡単に言うと、ブラウザからぺージにアクセスがあった際に、実行させたい処理のことです。

mountedの中のaxiosがAPIからデータを取得する処理になります。

thenは通信に成功した場合に実行される処理です。取得してきたデータは指定した変数に格納されます。catchは通信に失敗したときに行う処理です。

catchの変数には、errorやeが使われることが多く、エラーの内容が入ります。

mounted :function(){
  axios.get('https://jsonplaceholder.typicode.com/users')
    .then(response => this.users = response.data)
    .catch(error => console.log(error))
}

以下のように画面上に取得した人物名が表示されていれば成功です。