【入門】Vue.jsとは？初心者でも理解できるように現役エンジニアが徹底解説！【JavaScriptフレームワーク】

Reactに多少押されてはいるものの、まだ需要が高いVue.js。今回はVue.jsとはどんなフレームワークで実際どのようにコーディングしていくのかが分かるように概要から具体的な実践内容について解説していきます。

対象となるのはある程度JavaScriptの知識や経験がある方ではありますが、JavaScriptの経験が浅くても「あ、こんな風に書いていくんだ」と分かるように出来るだけ詳細にまとめました。

本記事では、Vue.jsの特徴・基本となる知識・Vue CLIの使い方・データバインディングについて・イベント処理・ルーティング・状態管理・テストについて出来るだけ簡潔にまとめてました。

Vue.jsの特徴や実際の実装方法に焦点を絞って記載しましたので、お力になれれば幸いです。

概要と特徴
基礎知識（ディレクティブ、コンポーネント、ライフサイクルフックなど）
Vue CLIの使い方
データバインディングの実装方法
イベント処理の実装方法
ルーティングの実装方法
Vuexを使った状態管理の実装方法
API通信の実装方法
テストの実行方法
関連・参考サイト
まとめ

概要と特徴

柔軟性と拡張性：Vue.jsは、コンポーネントベースのアーキテクチャを採用しており、アプリケーションを小さな部品に分割することができます。

このため、複雑なアプリケーションでも、コードの保守性や可読性を高めることができます。また、他のライブラリやフレームワークと組み合わせて使うこともできるため柔軟性が魅力的です。
リアクティブなUI：双方向バインディングをサポートしており、アプリケーション内のデータの変更が即座にUIに反映されます。これにより、開発者は手動でDOMを更新する必要がなくなり、開発効率が向上します。
簡単な学習曲線：Vue.jsは、AngularやReactと比較して、学習曲線が緩やかであり、初心者でも扱いやすいです。Vue.jsのドキュメントやコミュニティも充実しており、情報収集や問題解決に役立ちます。
高速なレンダリング：Virtual DOMを採用しており、効率的なレンダリングを実現しています。また、Vue.jsはコンポーネントレベルでの最適化を行うため、パフォーマンスが向上します。
充実したエコシステム：開発者が利用できる多くのライブラリ、プラグイン、ツールが存在しており、開発効率を向上させることができます。

基礎知識（ディレクティブ、コンポーネント、ライフサイクルフックなど）

Vue.jsにはいくつかの基礎的な概念があります。以下に、ディレクティブ、コンポーネント、ライフサイクルフックについて説明します。

１．ディレクティブ

ディレクティブは、Vue.jsが提供するテンプレート構文における、HTML要素に付与する命令です。
例えば、v-ifやv-forなどがあります。

v-ifは、条件式に応じて要素の表示・非表示を切り替えるディレクティブで、v-forは、配列の要素数に応じて要素を繰り返し表示するディレクティブです。文法を考察すると、v-ifはおそらく「visualize-if」の略だと思われます。

ディレクティブは、Vue.jsが提供する機能の中でも非常に重要な機能であり、Vue.jsのテンプレート構文を理解する上で必要不可欠な概念です。

<template>
  <div>
    <h2 v-if="showTitle">Title</h2>
    <p v-if="showParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <button v-if="showButton" @click="buttonClicked">Click me!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true,
      showParagraph: false,
      showButton: true
    }
  },
  methods: {
    buttonClicked() {
      console.log('Button clicked!')
    }
  }
}
</script>

上記の例では、v-ifディレクティブを使用して、showTitle、showParagraph、showButtonの値に応じて、h2要素、p要素、button要素を表示または非表示にしています。また、buttonClickedというメソッドが定義されており、ボタンがクリックされたときにコンソールにメッセージを表示するようになっています。

２．コンポーネント

Vue.jsにおいて、コンポーネントは、アプリケーションを構成する小さな部品です。コンポーネントは、再利用可能であり、単一のファイルにまとめることができます。

コンポーネントを使うことで、アプリケーションの構造を分割することができ、保守性や可読性が向上します。コンポーネントは、Vue.jsが提供する機能の中でも非常に重要な機能であり、Vue.jsを使ったアプリケーション開発において、コンポーネントの理解は必須です。

３．ライフサイクルフック

Vue.jsにおいて、コンポーネントはライフサイクルを持っています。ライフサイクルとは、コンポーネントが生成され、更新され、破棄されるまでの各段階を表す概念です。Vue.jsでは、コンポーネントのライフサイクルにフックをかけることができます。

フックとは、ライフサイクルの各段階で実行される関数のことで、例えば、コンポーネントが生成される前に実行されるcreatedメソッドや、コンポーネントが破棄される前に実行されるbeforeDestroyメソッドなどがあります。ライフサイクルフックを使うことで、コンポーネントの振る舞いをカスタマイズすることができます。

Vue CLIの使い方

Vue CLIは、Vue.jsアプリケーションを開発するためのツールキットで、Vue.jsプロジェクトのセットアップや開発に必要なコマンドを提供しています。以下に、Vue CLIのインストール、PJの作成、サーバーの起動、コンポーネント生成、ビルドを説明します。

１．Vue CLIのインストール

Vue CLIを使用するためには、まずNode.jsがインストールされている必要があります。Node.jsがインストールされている場合は、以下のコマンドを実行してVue CLIをインストールします。

npm install -g @vue/cli

２．Vue.jsプロジェクトの作成

Vue CLIを使って、新しいVue.jsプロジェクトを作成するには、以下のコマンドを実行します。

vue create プロジェクト名

これにより、Vue.jsのプロジェクトが作成されます。プロジェクトが作成されると、Vue CLIはプロジェクトの依存関係をインストールし、必要なファイルを生成します。

３．開発用サーバーの起動

Vue.jsプロジェクトを開発するには、ローカルサーバーを起動する必要があります。Vue CLIを使用して、開発用サーバーを起動するには、以下のコマンドを実行します。

npm run serve

これにより、開発用サーバーが起動し、Vue.jsアプリケーションがブラウザで表示されます。

４．コンポーネントの生成

Vue CLIを使用して、新しいコンポーネントを作成するには、以下のコマンドを実行します。

vue generate コンポーネント名

これにより、新しいコンポーネントが生成されます。生成されたコンポーネントは、src/componentsディレクトリに保存されます。

５．ビルド

Vue.jsアプリケーションをビルドするには、以下のコマンドを実行します。

npm run build

これにより、Vue.jsアプリケーションがビルドされ、distディレクトリに出力されます。

以上が、Vue CLIの基本的な使い方です。Vue CLIを使用することで、Vue.jsアプリケーションの開発をより簡単に行うことができます。

データバインディングの実装方法

Vue.jsでは、データバインディングを簡単に実装することができます。データバインディングとは、JavaScriptのデータとHTMLの要素を結びつけることで、データの変更を自動的に反映する仕組みのことです。以下に、Vue.jsでのデータバインディングの実装方法を説明します。

１．テンプレート内でのデータバインディング

Vue.jsでは、{{}}を使用して、JavaScriptの変数をHTMLにバインドすることができます。例えば、以下のようなコードを記述することで、変数messageの値をHTMLに表示することができます。

<div>{{ message }}</div>

２．v-bindディレクティブを使用した属性のバインド

HTMLの属性を動的に変更する場合は、v-bindディレクティブを使用してバインドすることができます。例えば、以下のようにv-bindディレクティブを使用して、画像のsrc属性を動的に変更することができます。

<img v-bind:src="imageSrc">

３．v-modelディレクティブを使用したフォームのバインド

フォームの入力値をVue.jsのデータとバインドする場合は、v-modelディレクティブを使用することができます。例えば、以下のようなコードを記述することで、input要素の値を変数messageにバインドすることができます。

<input type="text" v-model="message">

５．computedプロパティを使用した計算結果のバインド

Vue.jsでは、computedプロパティを使用して、複雑な計算を実行して結果をHTMLにバインドすることができます。computedプロパティは、データに依存する計算結果をキャッシュしてくれるため、パフォーマンスを向上させることができます。例えば、以下のようなコードを記述することで、fullNameというcomputedプロパティを定義し、firstNameとlastNameの値を結合して表示することができます。

data() {
  return {
    firstName: 'John',
    lastName: 'Doe'
  }
},
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

<div>{{ fullName }}</div>

以上が、Vue.jsでのデータバインディングの実装方法です。データバインディングをうまく利用することで、JavaScriptとHTMLをより密接に結びつけることができ、開発効率の向上につながります。

イベント処理の実装方法

Vue.jsでは、@（アットマーク）を使用してイベントをバインディングすることができます。@を使用することで、DOMイベントやコンポーネントのカスタムイベントなど、さまざまな種類のイベントを処理することができます。

例えば、ボタンがクリックされたときに、message変数の値を変更する場合は、以下のように書くことができます。

<template>
  <div>
    <button @click="changeMessage">Change Message</button> <!-- // ←ここの記述 -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Changed Message!'
    }
  }
}
</script>

この例では、@clickディレクティブを使用して、changeMessageメソッドをクリックイベントにバインドしています。changeMessageメソッドでは、messageデータプロパティを変更することで、画面上のテキストも同期的に変更されます。

また、Vue.jsでは@以外にも、.stop、.prevent、.capture、.selfなどの修飾子を使用することができます。これらの修飾子は、イベントの振る舞いをカスタマイズするために使用されます。

ルーティングの実装方法

Vue.jsでは、Vue Routerというルーティングライブラリを使用してルーティングを実装することができます。Vue Routerを使用することで、シングルページアプリケーション（SPA）を作成することができます。

Vue Routerを使用するためには、以下の手順が必要です。

１．Vue Routerをインストールする

まずは、npmを使用してVue Routerをインストールします。

npm install vue-router

２．Vue RouterをVue.jsアプリケーションに登録する

Vue RouterをVue.jsアプリケーションに登録するために、main.jsファイル（または必要に応じて、別のエントリーポイントファイル）に以下のコードを追加します。

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // ルートの定義
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

このコードでは、Vue RouterをVue.use()メソッドでVue.jsに登録し、VueRouterインスタンスを作成しています。

３．ルートを定義する

Vue Routerを使用して、ルートを定義するためには、ルート定義オブジェクトを作成し、routesプロパティにルートの配列を渡します。各ルートには、path、componentなどのプロパティが含まれます。

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

上記の例では、3つのルートが定義されています。/、/about、/contactはそれぞれ、Home、About、Contactというコンポーネントを表示します。

４．ルートを表示する

ルートを表示するには、Vue Routerのrouter-viewコンポーネントを使用します。このコンポーネントは、URLに応じて、ルートで定義されたコンポーネントを表示します。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

router-linkコンポーネントは、指定したURLに対応するルートに移動するためのリンクを表示します。to属性には、移動先のURLを指定します。

以上の手順を踏むことで、Vue.jsアプリケーションにルーティングを実装することができます。

Vuexを使った状態管理の実装方法

VuexはVue.jsでの状態管理を行うための公式のライブラリです。以下は、Vuexを使った状態管理の実装方法の例です。

１．Vuexのインストール

まずは、npmコマンドを使ってVuexをインストールします。

npm install vuex --save

２．ストアの定義

Vuexでは、ストアと呼ばれるオブジェクトでアプリケーションの状態を管理します。ストアは、以下のように定義します。

import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

上記の例では、countという状態を管理するstateと、countをインクリメントするincrementというミューテーションを定義しています。

３．ストアの利用

ストアを利用するには、Vueコンポーネントで以下のように宣言します。

export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
}

上記の例では、computedプロパティでcountを取得し、methodsプロパティでincrementを定義しています。countの値を更新するには、incrementメソッドを呼び出します。incrementメソッドでは、$store.commitメソッドを呼び出して、incrementミューテーションを実行しています。

以上が、Vuexを使った状態管理の実装方法の例です。Vuexでは、ストア、ミューテーション、アクション、ゲッターなどの機能が提供されていますので、必要に応じて利用してください。

API通信の実装方法

Vue.jsでAPI通信を実装する方法はいくつかありますが、以下では、Axiosを使ったAPI通信の実装方法について説明します。

１．Axiosのインストール

まずは、npmコマンドを使ってAxiosをインストールします。

npm install axios --save

２．API通信の実装

API通信を実装するには、以下のようにAxiosを使用して、HTTPリクエストを送信します。

import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('https://example.com/api/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

上記の例では、fetchDataメソッドでAxiosを使って、https://example.com/api/data にGETリクエストを送信しています。レスポンスが成功した場合は、thenメソッドでレスポンスのデータを処理し、失敗した場合はcatchメソッドでエラーを処理しています。

３．API通信の結果をVueコンポーネントに反映

API通信の結果をVueコンポーネントに反映するには、以下のようにデータプロパティを定義し、APIから取得したデータをセットします。

export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    fetchData() {
      axios.get('https://example.com/api/data')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}

上記の例では、dataプロパティでitemsを定義し、fetchDataメソッドでAPIから取得したデータをセットしています。itemsの値が更新されると、Vueのリアクティブシステムによって、自動的にコンポーネントの表示が更新されます。

以上が、Vue.jsでAPI通信を実装する方法の例です。Axios以外にも、Vue.jsではfetch APIやjQuery.ajaxなど、様々なHTTPクライアントが利用可能です。

テストの実行方法

Vue.jsのテストは、JestやMochaなどのテストランナーを使用して実行できます。ここでは、Vue CLIを使用したテストの実行方法について説明します。

１．テストの準備

まずは、Vue CLIを使ってプロジェクトを作成します。

vue create my-project

次に、Vue CLIでJestをインストールします。

vue add @vue/unit-jest

これで、Jestがインストールされ、テスト環境がセットアップされます。

２．テストの作成

テストコードは、testディレクトリ内に作成します。以下のような例で、HelloWorld.vueコンポーネントが正しく表示されるかをテストします。

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

上記の例では、shallowMountを使用してHelloWorld.vueコンポーネントをレンダリングし、propsにmsgを渡しています。expectで、コンポーネントのテキストにmsgが含まれることを確認しています。