Vue.jsDevtoolsを使用してコンポーネント、状態、およびイベントをデバッグする方法

getdocs

2年前

著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。

序章

Vueアプリケーションをデバッグするときは、コードを繰り返し処理してからサーバーを再起動して、ブラウザーでレンダリングされたサイトの問題が修正されたかどうかを確認するのが一般的です。ただし、ソースコードとブラウザの間を移動するのは時間のかかるプロセスになる可能性があります。デバッグをより効率的にするために、 Vue.jsDevtoolsのようなブラウザー拡張機能を使用できます。 Vue.js Devtoolsは、ChromeとFirefoxのブラウザー拡張機能であり、Vue.jsコアチームのGuillaumeChauとEvanYouによって作成されたスタンドアロンのElectronアプリです。開発者にVueアプリケーションの内部動作の視覚的表現を提供し、ブラウザからコンポーネント、データ、計算されたプロパティ、イベント、およびを検査できるようにします。 X223X] Vuexアクション、ゲッター、およびミューテーション。

Devtoolsを使用すると、イベントがいつ実行され、どのペイロードが含まれているかを正確に確認できます。イベントに加えて、 DOM のような形式で表示されたすべてのコンポーネントを表示して、次のようなコンポーネントのプロパティを分析することもできます。 data, computed プロパティ、および props.

このチュートリアルでは、サンプルのVueアプリケーションをセットアップし、ブラウザーにVue.js DevToolsをインストールしてから、ブラウザー拡張機能を使用してテストしながら、アプリに新しい機能を追加します。これは、Vue.jsDevtoolsを使用してコードをデバッグするための最初のステップとして機能します。

前提条件

Node.jsバージョン 14.16.0 以上がコンピュータにインストールされています。これをmacOSまたはUbuntu20.04にインストールするには、 Node.jsをインストールし、macOSまたはオプション2にローカル開発環境を作成する方法—NodeSourceを使用したAptでのNode.jsのインストールの手順に従います。 Ubuntu20.04にNode.jsをインストールする方法のPPAセクション。
マシンにインストールされたVueCLI。これは、VueCLIを使用してVue.jsシングルページアプリを生成する方法のステップ1に従って取得できます。
また、JavaScript、HTML、およびCSSの基本的な知識も必要です。これは、 HTMLを使用してWebサイトを構築する方法シリーズ、CSSを使用してWebサイトを構築する方法シリーズにあります。、およびJavaScriptでコーディングする方法。
開発マシンにインストールされているChromeまたはFirefoxWebブラウザー。

ステップ1—サンプルアプリケーションのセットアップ

このステップでは、後のステップでDevtoolsブラウザー拡張機能を試すために使用できるサンプルアプリケーションをまとめます。開始するには、 VueCLIを介して新しいVueアプリケーションを生成します。これを行うには、ターミナルウィンドウを開き、次のコマンドを実行します。

vue create favorite-airports

Vueアプリのセットアップオプションの入力を求められたら、[ Manually select features. 次に、 Choose Vue version, Babel、と Vuex. 選択したら、 RETURN キーを押して、次のようにプロンプトに入力し続けます。

Output
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Vuex
? Choose a version of Vue.js that you want to start the project with 3.x
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

一度 favorite-airports プロジェクトが作成されたら、ターミナルウィンドウを開いて cd に favorite-airports ルートフォルダ。ディレクトリに変更したら、次のコマンドを使用して新しいディレクトリを作成します。 mkdir 指図：

mkdir src/data

選択したテキストエディタで、を作成して開きます data/airports.js ファイルを作成し、以下を追加します。

お気に入り-airports/src / data / airports.js

export default [
  {
    name: 'Cincinnati/Northern Kentucky International Airport',
    abbreviation: 'CVG',
    city: 'Hebron',
    state: 'KY',
  },
  {
    name: 'Seattle-Tacoma International Airport',
    abbreviation: 'SEA',
    city: 'Seattle',
    state: 'WA',
  },
  {
    name: 'Minneapolis-Saint Paul International Airport',
    abbreviation: 'MSP',
    city: 'Bloomington',
    state: 'MN',
  },
  {
    name: 'Louis Armstrong New Orleans International Airport',
    abbreviation: 'MSY',
    city: 'New Orleans',
    state: 'LA',
  },
  {
    name: `Chicago O'hare International Airport`,
    abbreviation: 'ORD',
    city: 'Chicago',
    state: 'IL',
  },
  {
    name: `Miami International Airport`,
    abbreviation: 'MIA',
    city: 'Miami',
    state: 'FL',
  }
]

これは、米国内のいくつかの空港で構成されるオブジェクトの配列です。このアプリケーションでは、このデータを反復処理して、 name , abbreviation, city、と state プロパティ。このデータを使用して、Vue.jsDevtoolsでイベントとディスパッチを調査します。

を助けて airports.js ファイル、次に名前で単一ファイルコンポーネント（SFC）を作成します AirportCard.vue. このファイルは components プロジェクトのディレクトリであり、空港カードのすべてのスタイルとロジックが含まれます。

作成して開く components/AirportCard.vue テキストエディタで、以下を追加します。

お気に入り-airports/src / components / AirportCard.vue

<template>
  <div class="airport">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}</p>
  </div>
</template>

<script>
export default {
  props: {
    airport: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.airport {
  border: 3px solid;
  border-radius: .5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.airport p:first-child {
  font-weight: bold;
  font-size: 2.5rem;
  margin: 1rem 0;
}

.airport p:last-child {
  font-style: italic;
  font-size: .8rem;
}
</style>

このコードスニペットにCSSが含まれていることに気付くかもしれません。の中に AirportCard.vue コンポーネント、ラッパー <div> のクラスが含まれています airport. このCSSは、各空港に「カード」の外観を与えるために境界線を追加することにより、生成されたHTMLにスタイルを追加します。 The :first-child と :last-child 最初と最後に異なるスタイルを適用する疑似セレクターです p 内部のHTMLのタグ div のクラスで airport. それに加えて、このコンポーネントには prop が含まれていることに気付くかもしれません。これは、Vue.jsでは親コンポーネントから子コンポーネントにデータを渡す方法です。

ファイルを保存して終了します。

セットアップを完了する前に、既存のものを交換してください App.vue 次のコードを持つコンポーネント：

お気に入り-airports/src / App.vue

<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import allAirports from '@/data/airports.js'
import AirportCard from '@/components/AirportCard.vue'

export default {
  components: {
    AirportCard
  },
  setup() {
    const airports = ref(allAirports)
    return { airports }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

p,
h3 {
  grid-column: span 3;
}
</style>

このコードには、v-forループが含まれています。 airports.js データと一連のレンダリング AirportCard.vue 小道具を介して渡された空港データを含むコンポーネント :airport. このコードを保存して、コマンドラインに戻ります。

プロジェクトを設定したら、を使用してローカル開発サーバーを実行します。 npm run serve ターミナルのコマンド：

npm run serve

これにより、サーバーが起動します localhost、通常は港で 8080. 選択したWebブラウザを開き、次のWebサイトにアクセスします。 localhost:8080 以下を参照してください。

これで、サンプルアプリケーションが正常にセットアップされました。このチュートリアル全体を通して、このアプリケーションを使用してDevtoolsブラウザー拡張機能を探索します。

次のステップでは、Vue.jsDevtoolsをChromiumおよびFirefoxブラウザーにインストールします。

ステップ2—VueDevtoolsをインストールする

Vue.js Devtoolsを使用する前に、まずプログラムをコンピューターにダウンロードする必要があります。この手順では、ChromiumベースのブラウザまたはFirefoxにDevtoolsをインストールすることに焦点を当てます。

注：先に進む前に、ステップ1で設定したサンプルプロジェクトがVue.js3を使用していることに注意してください。つまり、このチュートリアルの公開時にこの最新バージョンのVueでVue.js Devtoolsを使用するには、Vue.jsDevtoolsのベータチャネルバージョンをインストールする必要があります。

Chromiumブラウザへのインストール

Chromiumブラウザを使用している場合は、Chrome拡張機能としてDevtoolsをダウンロードできます。より一般的なChromiumブラウザーは、Google Chrome、 Microsoft Edge 、およびOperaです。 BraveやVivaldiなどの他のブラウザを使用している場合は、この手順も同様に機能します。

インストールするには、まずChromeウェブストアにアクセスしてください。左上の検索バーで、「VueDevtools」を検索します。次の画像に示すように、いくつかの結果が表示されます。

Vue.jsまたは「vuejs-dev」によって提供されるDevtoolsのみをインストールするようにしてください。これらは公式チームによって維持されており、最も信頼できるソリューションです。アプリはVue3を使用しているため、「vuejs-dev」が提供するBetaチャネルをダウンロードする必要があります。

それをクリックすると、次の画像に示すように、スクリーンショットや概要など、この拡張機能に関する追加情報を表示できます。

準備ができたら、ブラウザの右上にあるChromeに追加ボタンをクリックします。次に、ブラウザが拡張機能をダウンロードしてインストールします。

Firefoxへのインストール

Mozilla Firefoxを使用している場合は、Firefox ExtensionStoreにアクセスしてください。ブラウザの右上に検索バーが表示されます。その中で、次の画像に示すように、「VueDevtools」を検索します。

これにより、 Evan You によって公開されたエントリを含む、多数の検索結果が表示されます。

「EvanYou」の拡張機能をクリックします。ここから、スクリーンショットや概要など、拡張機能に関する追加情報を表示できます。

Firefoxに追加ボタンをクリックして拡張機能をダウンロードし、ブラウザにインストールします。

注：たとえば、 Safari などのサポートされていないブラウザーを使用している場合でも、npmを介してVue.jsDevtoolsをスタンドアロンのElectronアプリケーションとして使用できます。 VueのDevToolドキュメントには、アプリケーションをローカルまたはリモートでデバッグするためのスタンドアロンアプリとしてのDevtoolsのインストールに関するページがあります。

これで、Devtools拡張機能がブラウザにインストールされました。固定された拡張機能がブラウザバーに表示されるVue.jsロゴが表示されます。デフォルトでは、このロゴはグレー表示されます。ただし、Vueを使用しているアプリケーションまたはWebサイトにアクセスすると、そのロゴはVueロゴの色で色付けされます。

このセクションでは、ChromiumまたはFirefoxブラウザにDevtoolsを正常にインストールしました。次のセクションでは、アプリケーションのユーザーインターフェイスに飛び込んで、のプロパティを表示します。 AirportCard ブラウザからのコンポーネント。

ステップ3—Devtoolsインターフェイスを使用してコンポーネントのプロパティを表示する

次に、Devtoolsインターフェイスをナビゲートして、サンプルアプリケーションのコンポーネントのプロパティを調べます。

ステップ1では、次のローカル開発サーバーでプロジェクトを開始しました。 localhost:8080. ブラウザでそのURLに移動し、右クリックするか、 CMD+ALT+I Macまたは CTRL+ALT+I Windowsでブラウザ検査ツールを開きます。インスペクターウィンドウのトップバーに、Vueというタイトルの新しいタブが表示されます。そのタブをクリックすると、Devtoolsが初期化されます。

Vue.js Devtoolsには、最初はリストビューと詳細ビューの2つのセクションがあります。リストビューには、VueコンポーネントまたはVuex名前空間のリストが含まれています。 Devtoolsが起動すると、左側にコンポーネントのリストが表示されます。サンプルアプリケーションには合計6枚の空港カードが表示されているため、6枚になります。 AirportCard リストビューに表示されるコンポーネントと App 成分。

リストビューで、最初のビューを選択します App 成分。詳細ビューには、そのコンポーネントに関する追加の詳細が表示されます。この場合、あなたはすべてを見つけるでしょう data と computed に関連付けられているプロパティ App.vue、この場合は次のものが含まれます setup の空港を表すオブジェクトの配列 airports.js.

今最初をクリックします AirportCard 直下 App. あなたはすべてを見つけるでしょう data と computed そのインスタンスに関連付けられているプロパティ AirportCard.vue 成分。この場合、それは CVG カードなので、次のようなプロパティが表示されます abbreviation: "CVG" と state: KY. このコンポーネントにカーソルを合わせると、Devtoolsはブラウザでレンダリングされたコンポーネントも強調表示します。

このセクションでは、Vueアプリで生成されたコンポーネントのプロパティを確認できるDevtoolsインターフェイスの基本的なナビゲーションについて説明しました。次のステップでは、Devtoolsを介してVueアプリケーションにいくつかの変更を加えます。これらの小さな編集で、Devtoolsを使用してコンポーネントへの変更をテストする方法がわかります。

ステップ4—Devtoolsを使用してコンポーネントへの変更をテストする

Vue.js Devtoolsを使用すると、ソースコードを変更することなく、ブラウザーからコンポーネントのプロパティを変更できます。これにより、実際のコードを調整しなくても、アプリケーションをより迅速にデバッグできます。このステップでは、条件付きスタイルを追加して、この機能を試してみます。 AirportCard コンポーネントとブラウザでのテスト。

現在、アプリケーションには6つの異なる空港があります。空港が建設中の場合にカードの色を変更するコードを追加します。これを行うには、に移動する必要があります AirportCard.vue 成分。手動で移動することも、Vue.js Devtoolsを利用して、選択したテキストエディタでこのファイルを開くこともできます。

ブラウザで、Devtoolsウィンドウを開いた状態で、開発ツールの右上にある十字線をクリックします。それをクリックすると、さまざまな空港カードにカーソルを合わせることができます。 Devtoolsは、コンポーネントが選択されていることを示す緑色でコンポーネントを強調表示します。強調表示されたら、カードをクリックします。

コンポーネントを選択したので、右上にある斜めの矢印の付いた正方形のアイコンをクリックします。このアイコンは通常、アプリケーションの外部で何かが開かれることをユーザーに通知するために使用されます。これをクリックすると開きます AirportCard.vue エディターで。コンポーネントファイルを開いた状態で、先に進み、次の強調表示されたコードを追加します。

お気に入り-airports/src / components / AirportCard.vue

<template>
  <div class="airport">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
  </div>
</template>
...

これにより、データが construction 空港オブジェクトのプロパティ。それが完了したら、にデータを追加します src/data/airports.js 空港が建設中であるかどうかを示すファイル：

お気に入り-airports/src / data / airports.js

export default [
  {
    name: 'Cincinnati/Northern Kentucky International Airport',
	...
    construction: false
  },
  {
    name: 'Seattle-Tacoma International Airport',
	...
    construction: false
  },
  {
    name: 'Minneapolis-Saint Paul International Airport',
	...
    construction: false
  },
  {
    name: 'Louis Armstrong New Orleans International Airport',
	...
    construction: false
  },
  {
    name: `Chicago O'hare International Airport`,
	...
    construction: false
  },
  {
    name: `Miami International Airport`,
	...
    construction: false
  }
]

このデータファイルを保存して閉じます。

アプリケーションにデータを追加したら、CSSを記述してクラスを追加します。 construction プロパティは true. を開きます AirportCards.vue 以下を追加するコンポーネント：

お気に入り-airports/src / components / AirportCard.vue

<template>
  <div class="airport" :class="{ 'is-under-construction': airport.construction }">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
  </div>
</template>

<style scoped>
...
.airport.is-under-construction {
  border-color: red;
  color: red;
}
</style>

に <div> とともに airport クラス、あなたはオブジェクトをにバインドしています class 属性。このオブジェクトのキーは適用されるクラスであり、プロパティはクラスを適用する前に満たす必要のある条件です。のCSS <style> タグは、クラスの場合、カードの境界線とテキストの色を赤に変更します is-under-construction カードに適用されます。

次に、ブラウザーを開き、Vue.jsDevtoolsを開きます。左側のペインで、 <App> 成分。右の列では、 setup メソッドとそのプロパティが表示されます。あなたはの配列を見つけるでしょう airports. その配列を展開してから、その中のオブジェクトの1つを展開します。省略形で最初のオブジェクトを開きます CVG. このコードが機能するかどうかをテストするには、の鉛筆アイコンをクリックします construction データプロパティを次のように変更します true.

を押すと ENTER または、保存アイコンをクリックすると、そのデータがフロントエンドで更新されます。カードはすぐに赤に変わります。要素を調べてDOMを確認すると、 is-under-construction クラスは最初の空港カードに適用されました。

Devtoolsでプロパティを変更してアプリケーションロジックをテストしたので、次にブラウザから発行されたイベントをテストする方法を確認します。

ステップ5—Devtoolsを使用してイベントエミッティングをテストする

コンポーネントのデータとプロパティのデバッグに加えて、Devtoolsを使用して組み込みイベントとカスタムイベントをデバッグすることもできます。 Vue.js Devtoolsは、イベントとそのペイロードを視覚化するためのツールを提供します。

イベントのテストを試すには、最初にイベントをに追加します AirportCard 成分。空港カードをクリックすると、アプリは親コンポーネントにイベントを送信します（App.vue）クリックした空港データを使用します。

テキストエディタを開き、 AirportCard.vue コンポーネント、以下を追加します click とのイベント $emit 最も外側に <div>:

お気に入り-airports/src / components / AirportCard.vue

<template>
  <div class="airport" :class="{ 'is-under-construction': airport.construction }" @click="$emit('favorite-airport', airport)">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}, Under Construction? {{ airport.construction }}</p>
  </div>
</template>
...

最も外側に <div>、JavaScriptクリックイベントを呼び出しています。その中で click イベント、あなたはというカスタムイベントを開始しています favorite-airport. そのイベントのペイロードは、に関連付けられたデータです。 airport からの変数 v-for ループ。

変更を保存します AirportCard 成分。

次に、ブラウザでVue.jsDevtoolsを開きます。コンパスアイコン（インスペクター）の右側の上部バーには、タイムラインインスペクターがあります。アイコンをクリックして、Devtoolsタイムラインを開きます。

このタイムラインインスペクターを使用すると、一定期間に発生するイベント、キーボードストローク、ミューテーションなどを検査できます。ツールを開いた状態で、ブラウザのビューポートで空港カードの1つをクリックします。これを行うと、タイムラインに一連のドットが表示されます。

これらのドットは、舞台裏で発生するさまざまなイベントを表しています。 mousedown と mouseup クリックで実行されたイベント。マウスイベントは常に紫色で強調表示されます。緑の点は、 click イベント。次の画像に示すように、緑色の点をクリックして、そのイベントに関する詳細情報を検索します。

このペインでは、イベントがいつ実行されたか、および親に渡されたデータを確認できます。この場合、イベントのペイロードは、コードが記載されたシカゴ空港でした。 ORD. これは、イベントが正しく発生したことを示しており、このイベントを引き続き使用して追加機能を開発できます。次のステップでは、このイベントを使用してペイロードデータをVuexストアに保存し、ユーザーのお気に入りの空港を追跡します。

ステップ6— Devtoolsを使用したVuexアクション、ミューテーション、および状態の表示

Vue.js Devtoolsには、Vuexのアクション、ミューテーション、および保存された状態を監視するために確保された特定のペインがあります。このビューを使用すると、ソースコードの変更を繰り返すことなく、問題の状態を検査できます。このセクションでは、Vuexを実装して、ユーザーが空港カードをクリックして追加できるお気に入りの空港のリストを作成します。次に、Vue.jsDevtoolsを使用してこれらの機能を監視します。

カスタムイベントを作成して実行したら、そのデータを取得して、Vuexアクションとミューテーションを呼び出します。 Vuexに慣れていない場合は、VuexチュートリアルでVuexの詳細を読むことをお勧めします。

テキストエディタで、 src/store/index.js ファイルを作成し、次のコードを追加します。

お気に入り-airports/src / store / index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    favorites: [],
  },
  mutations: {
    UPDATE_FAVORITES(state, payload) {
      state.favorites = payload
    }
  },
  actions: {
    addToFavorites({ state, commit }, payload) {
      const airports = state.favorites
      airports.push(payload)
      commit('UPDATE_FAVORITES', airports)
    }
  }
})

このスニペットでは、に追加しています index.js ステップ1で生成されたファイル。具体的には、 favorites 状態プロパティ（の配列 airports.js オブジェクト）、 mutation と呼ばれる UPDATE_FAVORITES、と action と呼ばれる addToFavorites. その目的は、ユーザーがカードをクリックすることです。これにより、アクションが実行され、ミューテーションが実行され、ストアが更新されます。

あなたの中で App.vue コンポーネントの場合、次のコードを追加してディスパッチします action あなたの習慣が favorite-airport イベントが実行されます：

お気に入り-airports/src / App.vue

<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" @favorite-airport="$store.dispatch('addToFavorites', $event)"/>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import allAirports from '@/data/airports.js'
import AirportCard from '@/components/AirportCard.vue'

export default {
  components: {
    AirportCard
  },
  setup() {
    const airports = ref(allAirports)
    return { airports }
  }
}
</script>
...

Vuexプロパティを追加したら、ブラウザを開いてDevtoolsを開きます。ペインの上部にあるComponentsドロップダウンに、Vuexオプションがあります。クリックしてVuexビューに切り替えます。

コンポーネントセクションと同様に、左側のパネルは状態ツリーを視覚化したもので、名前付きモジュールとルート状態が含まれています。右側には、Vuex状態のそのモジュールまたはセクションのデータの完全なリストがあります。

右側のパネルには、次の空の配列があります。 favorites. 次に、いくつかのカードをクリックして、各空港オブジェクトがその配列にプッシュされるのを確認します。

状態が機能していることがわかったので、セクションを追加してこれを拡張できます。 App.vue ファイル：

お気に入り-airports/src / App.vue

<div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" @favorite-airport="$store.dispatch('addToFavorites', $event)"/>
    </div>

  <div v-if="$store.state.favorites.length">
    <h1>Favorites <template v-if="$store.state.favorites.length">({{ $store.state.favorites.length }})</template></h1>
    <div v-for="airport in $store.state.favorites" :key="airport.abbreviation">
      <airport-card :airport="airport" />
    </div>
  </div>
</div>
...

ファイルを保存し、ブラウザでカードをクリックします。追加された空港のカードを含む新しいセクションが表示されます。

結論

Vue.js Devtoolsは、ChromiumまたはFirefoxブラウザに追加できる無料のブラウザ拡張機能です。また、ダウンロードして、アプリケーションに関連付けることができるスタンドアロンアプリケーションとしてダウンロードすることもできます。このチュートリアルでは、それぞれが独自のデータを持つ多数のカードコンポーネントをレンダリングするデータセットからアプリケーションを構築しました。次に、Devtoolsを使用してコンポーネントのプロパティを調べ、プロパティを変更して条件付きスタイルの変更をテストし、イベントが適切に発生するかどうかをテストし、Vuex状態管理が正しく設定されていることを確認しました。

Vue.js Devtoolsの詳細については、公式のVueDevToolsドキュメントにアクセスしてください。 Vueのその他のチュートリアルについては、Vue.jsシリーズページを使用してWebサイトを開発する方法を確認してください。