Vue.jsがGoogleトレンド1位だったので触ってみた

2018年11月5日 17:18

中国で圧倒的人気 JavaScript ライブラリ

「高収入エンジニア」のマガジンで世の中から人気のある JavaScritp ライブラリを調べていたら、Vue.js が圧倒的でした。

そこで、早速 Vue.js のキャッチアップをしてみたので、それについてまとめてみました。完全に Vue.js 入門の方向けです。

Vue.js とは？

・フロントエンドの JavaScript フレームワーク
・簡単にアプリや本格的な SPA が作れる
・Vue アプリはブラウザ上で動作する
・豊富な外部ライブラリやツールがある
・UI の更新が簡単にできる

通常のウェブページはブラウザからのリクエストによってサーバーに表示するデータを問い合わせ、その結果を画面上に表示します。ただ、Vue.js ではフロントエンドのデータを全て Vue.js がコントロールします。（毎回サーバーに問い合わせなくても良くなります。）

なぜ Vue.js を使用するのか？

・ファイルサイズが小さい（速度に良い）
・開発に必要な全ての機能が提供されている（色々セットアップしなくて良い）
・学習コストが低い（簡単で初心者に優しい）
・めっちゃシンプルでかっこいい！

はじめての Vue.js

Vue.js のチュートリアルが公式サイトに日本語で記載されています。これに沿って学習したら良さそうです。

ただ、全て読むのは大変なので、必要そうなところをピックアップしてまとめます。

Vue.js のセットアップ

index.html に以下を記載。

<!-- 開発バージョン -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

or

<!-- 本番バージョン -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vueインスタンスを使う

さっそく、Vue.js を使っていきます。Vue で行う開発では、Vueインスタンスを作る必要があります。

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue Basics</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app">
      {{ message }}
    </div>
  
    <script src="app.js"></script>
</body>
</html>

// app.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

画面に表示される結果

Hello Vue!

このように、el で対象のエレメントを指定して、Vueインスタンスがそのエレメントを全てコントロールできるようになります。{{ message }} のところで、app.js の data.message の値がバインドされます。

メソッドを使う

JavaScript で書かれたメソッドを使用することもできます。

// index.html

// 省略

    <div id="app">
      {{ greet() }}
    </div>

// 省略

// app.js

var app = new Vue({
  el: '#app',
  data: {
    title: 'Hello Vue!'
  },
  methods: {
    greet() {
      return this.title  
    }
  }
})

画面に表示される結果：

Hello Vue!

もちろん、properties を渡すことも可能です。

// index.html

// 省略

    <div id="app">
        <h2>{{ greet('morning') }}</h2>
    </div>

// 省略

// app.js

new Vue({
  el: '#app',
  data: {
    title: 'Vue'
  },
  methods: {
    greet(time) {
      return `Good ${time}, ${this.title}!`
    }
  }
})

画面に表示される結果：

Good morning, Vue!

データバインディングを使う

Vue.js でのデータバインディングは次のように行います。

// index.html

// 省略

    <div id="app">
        <a v-bind:href="url">YouTube</a>
    </div>

// 省略

// app.js

new Vue({
  el: '#app',
  data: {
    url: 'https://www.youtube.com/?gl=JP'
  }
})

画面に表示される結果：

YouTube

イベントを使う

オンクリックなどのイベント次のように使用します。

// index.html

// 省略

    <div id="app">
        <p>いいね！：{{ count }}</p>
        <button v-on:click="countUp">クリック</button>
    </div>

// 省略

// app.js

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    countUp() {
      this.count++
    }
  }
})

画面に表示される結果：

クリック前：　いいね！：0
クリック後：　いいね！：1

双方向データバインディング

双方向データバインディングは次のようになります。

// index.html

// 省略

    <div id="app">
        <p>入力値：{{ name }}</p>
        <input type="text" v-model="name">
    </div>

// 省略

// app.html

new Vue({
  el: '#app',
  data: {
    name: ''
  }
})

画面に表示される結果：

入力前：　
入力後：　いいね！

Modifierを使う

onイベントの後に、modifier をつけることができます。（ @click.alt ）これによって、alt キーと一緒にクリックされたときに onClick イベントが発火されるようになります。

// index.html

// 省略

    <div id="app">
        <button @click.alt="logMessage"></button>
    </div>

// 省略

// app.js

new Vue({
  el: '#app',
  methods: {
    logMessage(e) {
      console.log(e);
    }
  }
})

条件式を使う（if）

条件式は、v-if で使用できます。

// index.html

// 省略

    <div id="app">
        <h1 v-if="show">Hello Vue!</h1>
    </div>

// 省略

// app.js

new Vue({
  el: '#app',
  data: {
    show: false
  }
})

画面に表示される結果：

（何も表示されない）

ループ処理を使う（for）

繰り返し処理は次のように使用します。

// index.html

// 省略

    <div id="app">
        <div v-for="fruit in fruits">
            <p>{{ fruit }}</p>
        </div>
    </div>

// 省略

// app.js

new Vue({
  el: '#app',
  data: {
    fruits: ['apple', 'orange', 'banana']
  }
})

画面に表示される結果：

apple
orange
banana

最後に

このように Vue.js はとても簡単で直感的に使用できますね。今後も使っていきたいと思います。中国で人気のライブラリのため高収入エンジニアにもなれる可能性もありますしね。高収入エンジニアになりたい方は次の note を読んでみてください。

よろしければサポートお願いします！もっと質の高い Bootcamp を提供していきたいと思います！