Front End Programming

Vue.js の基本の「き」を自分なりにまとめてみた

JS Vue.js

ただいまVue.js を絶賛勉強中で、どうやったら初心者コーダーでも理解できるか考えつつ、Vue.js の基本の「き」を自分なりにまとめてみました。

Vue.jsってなんぞ

Vue.js(ヴュージェイエス)、またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。

Google の AngularJS を使用した開発に携わったエヴァン・ヨー氏によって開発されたらしいです。

なので Vue.js を覚えたら AngularJS もわかるようになるのかな、と淡い期待を抱いております。

ざっくりいうと特徴はこんな感じらしい

  • テンプレート データをバインド
  • リアクティブ 変更されるとViewが更新し最適な再レンダリングを提供
  • コンポーネント 基本的なHTML要素を拡張して再利用可能なコードをカプセル化

とりあえず、再利用可能でなんかあったらDOMを再構成してレンダリングできてテンプレートにデータを突っ込めるリアクティブなJSです。

あとトランジョンなどのアニメも豊富で、jQueryを使わず様々な効果なんかも実現可能なのも嬉しいところ。

とりあえず Vue.js 基本の「き」

要素とデータを指定しどんな処理をするかをざっくり書いてみましょう。

<div id="app">{{ text }}</div>
<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
let vm = new Vue({
  el: '#app',
  data: {
    text: 'こんにちは、世界'
  }
})
</script>

{{}}の中に記述することを mustache記法というそうです。なるほどー、口髭(くちひげ)!
id:appの中に text の内容が反映されたはずです。

先ほどのコードの下に以下コードを追記すると、<div id="app">内のテキストが変わります。データは簡単に後から上書き可能です。

vm.text = 'こんにちは、Vue'

DOM構成時何かしら処理をする

Vue.js ではライフサイクルフックと言うものがあります。

beforeCreate

インスタンスが生成され、データが初期化される前

created

インスタンスが生成され、データが初期化された後

beforeMount

インスタンスが DOM要素にマウントされる前

mounted

インスタンスが DOM要素にマウントされた後

beforeUpdate

データが変更され、DOMに適用される前

updated

データが変更され、DOMに適用された後

beforeDestroy

Vueインスタンスが破棄される前

destroy

Vueインスタンスが破棄された後

データの変更がかかると beforeUpdate と updated のタイミングで再描画されます。

クリエイトフック

クリエイトフックを使うと、以下のようにデータを更新できます。
この段階では DOM要素とインスタンスが紐づいてませんので、DOM要素は取得できません。

本来であれば this.$el で DOM要素を取得できるのですがこの時点では紐付いていないので、開発者ツールを確認すると、console.log(this.$el)のデバッグ結果は undifined になります。

let vm = new Vue({
  el: '#app',
  data: {
    text: 'こんにちは、世界'
  },
  created: function(){
    console.log(this.$el)
    return this.text = 'こんにちは、Vue'
  }
})

マウントフック

インスタンスがDOM要素と紐づいた後に処理できます。DOM操作やイベントリスナーなど登録できます。

let vm = new Vue({
  el: '#app',
  data: {
    text: 'こんにちは、世界'
  },
  mounted: function () {
    this.$el.setAttribute('class', 'test')
  }
})

もっと動的に処理してみる

クリックしたら描画が変わる的なものを作ってみます。

v-onとメソッドを使うと、簡単にリアクティブな処理を行えます。v-onはクリックやキーアップなどのディバイス状の処理に紐づけることができます。

v-on:click は @clickに置き換えることができます。

単純ですがクリックしたら、数字が増える処理を実装してみます。

<div id="app">
  <p>{{ count }}</p>
  <button type="text" @click="addNumber">Add Number</button>
</div>
<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      addNumber: function () {
        return this.count++
      }
    }
  })
</script>

処理した値にフィルターをかけてみる

計算した数値にフィルターを使ってテキストフォーマットの処理をかけてみます。数字に,をつけるだけです。

<div id="app">
  <p>{{ fruits.name }}:{{ count }}個</p>
  <button type="text" @click="addNumber">数を増やす</button>
  <button type="text" @click="reduceNumber">数を減らす</button>
  <p>{{ fruits.price * count|numberWidthDelimiter }}円</p>
</div>
<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      count: 0,
      fruits: {
        name: 'みかん',
        price: 250
      }
    },
    methods: {
      addNumber: function () {
        return this.count++
      },
      reduceNumber: function () {
        if (this.count !== 0) return this.count--
      }
    },
    filters: {
      numberWidthDelimiter: function (value) {
        if (!value) {
          return 0
        }
        return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
      }
    }
  })
</script>

Code Pen でサンプルを見る

まとめ

今回はVue.jsの基本の「き」をできるだけ初心者でもわかりやすく書いたつもりです笑。

少しずづ、テンプレートやコンポーネント化などにも触れていこうと思います。
最後までお読みいただきありがとうございました。

関連記事もあわせてお読みください

Read More

記事のジャンル

管理人について

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に10年以上Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me