Vue イントロダクション

Volardev 編集部 April 28, 2026

1. Vueとは？

Vueは JavaScriptフレームワーク です。<script> タグを使用するだけで、既存のHTMLページに簡単に追加することができます。

Vueは ディレクティブ（Directives） を使用してHTML属性を拡張し、エクスプレッション（Expressions） を通じてデータをHTMLにバインド（紐付け）します。

2. JavaScriptフレームワークとしてのVue

VueはJavaScriptで記述されたフロントエンド向けのJavaScriptフレームワークです。

ReactやAngularといった類似のフレームワークが存在しますが、Vueはそれらに比べてより 軽量（Lightweight） であり、学習を始めやすいのが大きな特徴です。

VueはJavaScriptファイルとして配布されており、以下のように script タグを使用してWebページに追加できます。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

3. なぜVueを学ぶのか？

シンプルで使い勝手が非常に良い。
小規模なものから複雑なプロジェクトまで、幅広く対応可能。
急速に成長している人気と、オープンソースコミュニティによる強力なサポート。
通常のJavaScript（バニラJS）では、HTMLとJavaScriptが「どのように（HOW）」接続されるかを細かく記述する必要があります。しかしVueでは、接続が「ある（IS）」ことさえ定義すれば、残りの処理はすべてVueが自動で行ってくれます。
テンプレートベースの構文、双方向データバインディング（Two-way Data Binding）、および集中型の 状態管理（State Management） により、非常に効率的な開発プロセスを実現します。

※もしこれらの概念が今は難しく感じられても、心配ありません。チュートリアルを終える頃には、すべてを理解できているはずです。

4. Options APIについて

Vueには、コードを記述する2つの主要な方法があります：Options API と Composition API です。

根本的なコンセプトはどちらも共通しているため、一方を習得すればもう一方への切り替えもスムーズに行えます。このチュートリアルでは、構造が把握しやすく初心者にとってより親しみやすいとされる Options API を採用して解説を進めます。

Options APIとComposition APIの詳細な違いについては、本チュートリアルの最後で改めて紹介します。

5. 最初のページを作成する

それでは、最初のVue Webページを作成してみましょう。基本は以下の5つのステップです：

ベースとなるHTMLファイルを用意する。
Vueが接続するための id="app" を持った <div> タグを追加する。
Vueへのリンクを含む <script> タグを追加し、ブラウザがVueのコードを解釈できるようにする。
Vueインスタンス（Vue Instance）を含む <script> タグを記述する。
Vueインスタンスを <div id="app"> タグに接続（マウント）する。

これらの手順の詳細は以下の通りです。

6. ステップごとの詳細解説

6.1 ステップ1: HTMLページの作成

まずはシンプルなHTMLページから始めます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>マイ・ファースト Vue ページ</title>
</head>
<body>

</body>
</html>

6.2 ステップ2: の追加

Vueは、接続先となるHTML要素を必要とします。
<body> タグの中に <div> タグを配置し、id を割り当てます。

<body>
  <div id="app"></div>
</body>

6.3 ステップ3: Vueへのリンクを追加

ブラウザがVueのコードを理解できるように、ライブラリを読み込む <script> タグを追加します。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

6.4 ステップ4: Vueインスタンスの追加

次に、Vueのロジック部分を記述します。
これは Vueインスタンス と呼ばれ、データやメソッドなどを保持できます。ここではシンプルにメッセージだけを定義します。
この <script> タグの最後の行で、Vueインスタンスを <div id="app"> に接続しています。

<div id="app"></div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
  // Vueアプリケーションの作成
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!（こんにちは、世界！）"
      }
    }
  })

  // id="app" の要素にマウント
  app.mount('#app')
</script>

6.5 ステップ5: テキスト補間（Text Interpolation）で'message'を表示

最後に、二重中括弧 {{ }} を使ったVueの構文である テキスト補間（Text Interpolation） を使用して、データのプレースホルダーを配置します。

<div id="app"> {{ message }} </div>

ブラウザは、この {{ message }} をVueインスタンス内の message プロパティに格納されたテキストに置き換えます。

7. 最初のVueページ：完成例

こちらが完成したコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>マイ・ファースト Vue ページ</title>
</head>
<body>

  <div id="app">
    {{ message }}
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: "Hello World!（こんにちは、世界！）"
        }
      }
    })

    app.mount('#app')
  </script>
</body>
</html>

8. テキスト補間（Text Interpolation）の仕組み

テキスト補間とは、VueインスタンスからWebページへテキストを取り出して表示する仕組みのことです。

ブラウザがコードを受け取った時点では以下の状態です：
<div id="app"> {{ message }} </div>

その後、ブラウザはVueインスタンスの message プロパティ内にあるテキストを見つけ、Vueのコードを以下のように変換してレンダリングします：
<div id="app">Hello World!（こんにちは、世界！）</div>

9. テキスト補間内でのJavaScript実行

二重中括弧 {{ }} の中には、簡単な JavaScriptエクスプレッション（式） を記述することも可能です。

9.1 サンプル：JavaScript構文の利用

JavaScriptの構文を使用して、メッセージの横にランダムな数値を表示する例です。

<div id="app">
  {{ message }} <br>
  {{ '乱数: ' + Math.ceil(Math.random()*6) }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "Hello World!"
      }
    }
  })

  app.mount('#app')
</script>

10. 学習を始めるにあたって

このチュートリアルでは、Vueの基礎を網羅していきます。
学習を進めるにあたり、HTML、CSS、および JavaScript に関する基本的な知識があることを前提としています。