Vue.jsの基本概念とコンポーネントの理解

フロントエンド Javascript Vue.js

Vue.jsは、ユーザーインターフェイスを作成するためのプログレッシブフレームワークです。Vue.jsは、データバインディング、コンポーネント、トランジション、ルーティングなどの機能を提供し、シンプルで使いやすいAPIを持っています。

この記事では、Vue.jsの基本概念とコンポーネントの理解について説明します。

Vue.jsとは

Vue.jsは、 Evan You によって開発されたオープンソースのJavaScriptフレームワークです。Vue.jsは、リアクティブなデータバインディングと宣言的なビューのレンダリングを組み合わせて、モダンなウェブアプリケーションを構築することを目的としています。

Vue.jsは、プログレッシブと呼ばれることがあります。これは、Vue.jsが必要に応じて他のライブラリや既存のプロジェクトと統合できることを意味します。例えば、Vue.jsは、VuexやVue Routerなどの公式ライブラリを使って、状態管理やルーティングなどの高度な機能を実現できます 。また、Vue.jsは、Nuxt.jsやQuasarなどのフレームワークを使って、サーバーサイドレンダリングやモバイルアプリケーションなどのさらに複雑なシナリオに対応できます 。

Vue.jsは、人気が高く、成長しているフレームワークです。Vue.jsは、GitHubで18万以上のスターを獲得し、Stack Overflowの2023年の開発者調査では、最も愛されているウェブフレームワークの一つに選ばれました。Vue.jsは、NetflixやFacebookなどの大手企業や、LaravelやWordPressなどの有名なプロジェクトにも採用されています。

Vueインスタンスとは

Vueインスタンスとは、Vue.jsで作成されたオブジェクトのことです。Vueインスタンスは、new Vue()というコンストラクタ関数を使って生成されます。Vueインスタンスは、以下のようなオプションを受け取ることができます。

以下は、Vueインスタンスの作成とオプションの使用の例です。

// Vueインスタンスの作成
var app = new Vue({
  // elオプション: idがappの要素にマウントする
  el: '#app',
  // dataオプション: messageというデータを定義する
  data: {
    message: 'Hello Vue!'
  },
  // computedオプション: reversedMessageという算出プロパティを定義する
  computed: {
    reversedMessage: function () {
      // messageの文字列を逆順にする
      return this.message.split('').reverse().join('')
    }
  },
  // methodsオプション: greetというメソッドを定義する
  methods: {
    greet: function () {
      // 現在時刻を取得する
      var date = new Date()
      var hour = date.getHours()
      // 時刻に応じて挨拶を返す
      if (hour < 12) {
        return 'Good morning'
      } else if (hour < 18) {
        return 'Good afternoon'
      } else {
        return 'Good evening'
      }
    }
  },
  // watchオプション: messageの変化に反応する関数を定義する
  watch: {
    message: function (newValue, oldValue) {
      // messageが変わったときにコンソールにログを出力する
      console.log('message changed from ' + oldValue + ' to ' + newValue)
    }
  },
  // lifecycle hooksオプション: createdというフックを定義する
  created: function () {
    // Vueインスタンスが作成されたときにコンソールにログを出力する
    console.log('Vue instance created')
  },
  // componentsオプション: button-counterというコンポーネントを登録する
  components: {
    'button-counter': {
      // コンポーネントの詳細は後述
    }
  }
})

データバインディングとは

データバインディングとは、Vueインスタンスのデータとビュー（HTML要素）との連携のことです。Vue.jsでは、ディレクティブと呼ばれる特別な属性を使って、データバインディングを実現します。ディレクティブは、v-という接頭辞で始まり、HTML要素に追加することで、Vue.jsに対して何らかの命令を与えます。

Vue.jsには、以下のような組み込みのディレクティブがあります。

  • v-bind: HTML要素の属性とVueインスタンスのデータをバインドします。例えば、v-bind:href="url"というディレクティブは、a要素のhref属性とVueインスタンスのurlデータをバインドします。v-bindは省略記法として:を使うことができます。例えば、:href="url"と書くこともできます。
  • v-model: HTML要素の入力とVueインスタンスのデータを双方向にバインドします。例えば、v-model="message"というディレクティブは、input要素の入力とVueインスタンスのmessageデータを双方向にバインドします。
// v-modelの例
<input type="text" v-model="message">
<p>{{ message }}</p>
  • v-if: HTML要素の表示/非表示をVueインスタンスのデータに基づいて切り替えます。例えば、v-if="show"というディレクティブは、showデータが真のときに要素を表示し、偽のときに要素を非表示にします。v-ifは、v-elseやv-else-ifと組み合わせて、条件分岐を表現できます。
  • v-for: HTML要素をVueインスタンスのデータに基づいて繰り返し生成します。例えば、v-for="item in items"というディレクティブは、itemsデータの各要素に対して要素を繰り返し生成します。v-forは、v-bind:keyと組み合わせて、一意な識別子を付与することが推奨されます。
  • v-on: HTML要素のイベントとVueインスタンスのメソッドを紐付けます。例えば、v-on:click="greet"というディレクティブは、要素がクリックされたときにgreetメソッドを実行します。v-onは省略記法として@を使うことができます。例えば、@click="greet"と書くこともできます。

以下は、ディレクティブの使用例です。

<div id="app">
  <!-- v-bindでhref属性とurlデータをバインドする -->
  <a v-bind:href="url">Vue.js公式サイト</a>
  <!-- v-modelで入力とmessageデータを双方向にバインドする -->
  <input type="text" v-model="message">
  <!-- v-ifでshowデータに応じて要素の表示/非表示を切り替える -->
  <p v-if="show">{{ message }}</p>
  <!-- v-forでitemsデータの各要素に対して要素を繰り返し生成する -->
  <ul>
    <li v-for="item in items" v-bind:key="item.id">{{ item.name }}</li>
  </ul>
  <!-- v-onでクリックイベントとgreetメソッドを紐付ける -->
  <button v-on:click="greet">挨拶する</button>
</div>

コンポーネントとは

コンポーネントとは、Vue.jsで作成された再利用可能な部品のことです。コンポーネントは、テンプレート、スクリプト、スタイルの三つの要素から構成されます。テンプレートは、コンポーネントの見た目を定義するHTMLのような構文です。スクリプトは、コンポーネントの機能を定義するJavaScriptのコードです。スタイルは、コンポーネントの装飾を定義するCSSのコードです。

コンポーネントは、グローバルに登録することも、ローカルに登録することもできます。グローバルに登録したコンポーネントは、どのVueインスタンスでも使用できます。ローカルに登録したコンポーネントは、登録したVueインスタンスやコンポーネントの中でのみ使用できます。

コンポーネントは、親子関係を持つことができます。親コンポーネントは、子コンポーネントを自分のテンプレートの中で使用できます。親子コンポーネントは、プロパティやイベントを使ってデータやメッセージをやり取りできます。

以下は、コンポーネントの作成と使用の例です。

<!-- button-counterというコンポーネントのテンプレート -->
<template id="button-counter-template">
  <!-- ボタンをクリックするとcountデータを増やす -->
  <button v-on:click="count++">{{ count }}</button>
</template>

<!-- appというコンポーネントのテンプレート -->
<template id="app-template">
  <div>
    <!-- button-counterコンポーネントを三つ使用する -->
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
  </div>
</template>

<script>
  // button-counterというコンポーネントをグローバルに登録する
  Vue.component('button-counter', {
    // テンプレートの参照を指定する
    template: '#button-counter-template',
    // コンポーネントのデータは関数で返す
    data: function () {
      return {
        count: 0
      }
    }
  })

  // appというコンポーネントをローカルに登録する
  var app = new Vue({
    // テンプレートの参照を指定する
    template: '#app-template',
    // コンポーネントの登録を指定する
    components: {
      'app': app
    }
  })


## コンポーネント間の通信
コンポーネント間の通信とは、親子コンポーネントが**データ**や**メッセージ**をやり取りすることです。Vue.jsでは、以下のような方法でコンポーネント間の通信を実現できます。

- **プロパティ**: 親コンポーネントが子コンポーネントに**データ**を渡す方法です。子コンポーネントは、**props**というオプションでプロパティを受け取ることができます。親コンポーネントは、**v-bind**ディレクティブを使ってプロパティにデータをバインドすることができます。
- **イベント**: 子コンポーネントが親コンポーネントに**メッセージ**を送る方法です。子コンポーネントは、**this.$emit**というメソッドでイベントを発火することができます。親コンポーネントは、**v-on**ディレクティブを使ってイベントにメソッドを紐付けることができます。
- **Vuex**: 複数のコンポーネントが共通の**状態**を管理する方法です。Vuexは、**ストア**と呼ばれるオブジェクトを作成し、そこに状態を保持します。コンポーネントは、**getters**や**mutations**や**actions**などのメソッドを使ってストアとやり取りすることができます。

以下は、プロパティとイベントを使ったコンポーネント間の通信の例です。


## まとめ
Vue.jsは、ユーザーインターフェイスを作成するためのプログレッシブフレームワークです。Vue.jsは、データバインディング、コンポーネント、トランジション、ルーティングなどの機能を提供し、シンプルで使いやすいAPIを持っています。Vue.jsは、必要に応じて他のライブラリや既存のプロジェクトと統合できるプログレッシブなフレームワークです。Vue.jsは、人気が高く、成長しているフレームワークです。