【Vue.js】CDNを使った簡単なデモ

2025-07-29

はじめに

Vue.jsを始める最も簡単な方法は、CDN（Content Delivery Network）を利用することです。この方法では、ビルドツールやNode.jsのインストールが不要で、HTMLファイルにscriptタグを追加するだけでVue.jsを使い始めることができます。この記事では、CDNを使ったVue.jsの基本的な使い方から、実際に動くデモアプリケーションの作成までをステップバイステップで解説します。

CDNとは？

CDNは、世界中に分散したサーバーからコンテンツを配信するネットワークです。Vue.jsのCDNを利用すると、以下の利点があります：

サーバー設定が不要
ビルドプロセスが不要
すぐにコーディングを始められる
学習用やプロトタイピングに最適

基本的なセットアップ

まずは最もシンプルなVue.jsアプリケーションを作成してみましょう。このコードは、CDNから読み込んだVue.js 3を使って、画面に動的なメッセージを表示する最も基本的なサンプルです。<div id="app"> の中には最初はただ {{ message }} と書かれていますが、Vueアプリを作成して #app にマウントすることで、この部分がVueの管理下に入り、data() が返すオブジェクト内の message プロパティの値に自動的に置き換わります。ここでは 'こんにちは、Vue.js!' が表示されます。CDN経由で <script src="...vue.global.js"> を読み込んでいるため、ビルド環境を用意しなくてもブラウザだけでVueを試せる構成になっています。createApp({...}).mount('#app') の流れで「アプリを定義 → データを用意 → HTMLに結びつける」というVueの基本的な書き方を確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js CDNデモ</title>
  <!-- Vue.jsのCDNを追加 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    // Vueアプリケーションの作成
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: 'こんにちは、Vue.js!'
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

データバインディングのデモ

次に、双方向データバインディングのデモを作成してみましょう。このコードは、Vue.jsを使って「双方向データバインディング（two-way data binding）」の仕組みを体験できるデモです。CDNからVue 3を読み込み、#app要素をVueアプリとして管理しています。data()ではnameとmessageという2つのデータプロパティを定義し、それぞれ入力欄（<input>と<textarea>）にv-modelディレクティブで結び付けています。これにより、ユーザーがテキストを入力すると即座にVue内部のデータが更新され、同時に画面上の表示（{{ name }}や{{ message }}）もリアルタイムで変化します。つまり、データの変更が画面表示に、画面操作がデータに即反映されるというVueの特徴をわかりやすく示しています。CSSでは中央寄せのレイアウトやフォーム要素のスタイルを整え、簡潔ながら実用的なUIを提供しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双方向データバインディングデモ</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .demo-container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    input, textarea {
      width: 100%;
      margin-bottom: 10px;
      padding: 8px;
    }
  </style>
</head>
<body>
  <div id="app" class="demo-container">
    <h1>双方向データバインディングデモ</h1>

    <div>
      <label for="name">名前:</label>
      <input id="name" v-model="name" placeholder="名前を入力">
    </div>

    <div>
      <label for="message">メッセージ:</label>
      <textarea id="message" v-model="message" rows="4"></textarea>
    </div>

    <div>
      <h3>プレビュー:</h3>
      <p><strong>{{ name }}</strong> さんのメッセージ:</p>
      <p>{{ message }}</p>
    </div>
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          name: '',
          message: ''
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

イベントハンドリングのデモ

次に、ボタンクリックなどのイベントを処理するデモを作成します。このコードは、Vue.jsの「イベントハンドリング」と「リアクティブデータ更新」を学ぶためのシンプルなカウンターアプリの例です。CDNからVue 3を読み込み、#app内のcountデータをリアルタイムに操作できるようにしています。data()で初期値count: 0を定義し、methods内に3つのメソッド（increment・decrement・reset）を用意しています。各ボタンには@clickディレクティブを使ってクリックイベントをバインドしており、ボタンを押すたびにcountの値が即座に変更され、画面上に反映されます。また、v-ifとv-else-ifを使い、カウントが10を超えると「10を超えました！」、0未満になると「0未満です！」というメッセージが条件に応じて切り替わります。CSSでは中央寄せのレイアウトや大きな数値表示を整え、直感的に操作できるデザインに仕上げられています。このコードはVueにおけるデータバインディング、条件分岐、イベント処理の基礎を理解するのに最適な教材です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>イベントハンドリングデモ</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .counter-container {
      max-width: 300px;
      margin: 50px auto;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .counter-value {
      font-size: 3rem;
      margin: 20px 0;
    }
    button {
      padding: 10px 20px;
      font-size: 1rem;
      margin: 0 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app" class="counter-container">
    <h2>カウンターアプリ</h2>
    <div class="counter-value">{{ count }}</div>
    <div>
      <button @click="increment">増やす (+1)</button>
      <button @click="decrement">減らす (-1)</button>
      <button @click="reset">リセット</button>
    </div>
    <p v-if="count > 10">10を超えました！</p>
    <p v-else-if="count < 0">0未満です！</p>
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          count: 0
        }
      },
      methods: {
        increment() {
          this.count++;
        },
        decrement() {
          this.count--;
        },
        reset() {
          this.count = 0;
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

条件付きレンダリングのデモ

v-ifとv-showの違いを理解するためのデモを作成します。このコードは、Vue.jsにおける「条件付きレンダリング」の仕組みを理解するためのデモです。v-ifとv-showという2つのディレクティブの違いを、実際のDOM操作を通じて確認できるよう設計されています。アプリではisVisible（表示状態）とuseIf（制御方法の選択）という2つのデータを定義し、toggleVisibility()で表示・非表示を切り替え、toggleMethod()でv-ifとv-showの切り替え方法を変更します。

v-ifを使う場合は、条件がfalseになると対象の要素がDOMから完全に削除され、再度trueになると再生成されます。一方、v-showでは要素はDOMに残ったままで、CSSのdisplay: noneで非表示になるだけです。これにより、頻繁に表示を切り替える要素にはv-show、初期ロードの軽量化を重視する場合はv-ifが適しています。

このデモでは2つのボタンを使い、表示方法をリアルタイムで変更しながら挙動を比較できます。また、開発者ツールでDOM構造を確認することで、VueがどのようにDOMを操作しているかを視覚的に学べる実践的な教材です。CSSでは見やすいボックスデザインで情報を整理し、学習者が違いを直感的に理解できるよう工夫されています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>条件付きレンダリングデモ</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .demo-container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    .box {
      padding: 20px;
      margin: 10px 0;
      border: 1px solid #ccc;
      background-color: #f9f9f9;
    }
    button {
      padding: 8px 16px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div id="app" class="demo-container">
    <h1>条件付きレンダリングデモ</h1>

    <button @click="toggleVisibility">表示切り替え</button>
    <button @click="toggleMethod">切り替え方法変更 (現在: {{ useIf ? 'v-if' : 'v-show' }})</button>

    <div v-if="useIf ? isVisible : true" v-show="!useIf ? isVisible : true" class="box">
      <h2>{{ useIf ? 'v-ifで制御' : 'v-showで制御' }}</h2>
      <p>このコンテンツは {{ useIf ? 'v-if' : 'v-show' }} で表示を制御しています。</p>
      <p>開発者ツールでDOMの変化を確認してみましょう。</p>
    </div>

    <div class="box">
      <h3>v-ifとv-showの違い</h3>
      <ul>
        <li><strong>v-if</strong>: 条件がfalseの場合、DOMから要素が完全に削除される</li>
        <li><strong>v-show</strong>: 条件がfalseの場合、要素はDOMに残り、display: noneが適用される</li>
      </ul>
    </div>
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          isVisible: true,
          useIf: true
        }
      },
      methods: {
        toggleVisibility() {
          this.isVisible = !this.isVisible;
        },
        toggleMethod() {
          this.useIf = !this.useIf;
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

リストレンダリングのデモ

v-forディレクティブを使ったリストレンダリングのデモを作成します。このコードは、Vue.jsを用いて「リストレンダリング（v-for）」と「リアクティブデータ管理」を体験できるToDoリストアプリのデモです。CDNでVue 3を読み込み、#appをアプリケーションのルート要素としてマウントしています。data()には、初期ToDoリスト（3件のサンプルタスク）と新規入力用のnewTodoを定義。ユーザーが入力欄に文字を入力しEnterキーを押すか「追加」ボタンをクリックすると、addTodo()メソッドが実行され、todos配列に新しいタスクがオブジェクトとして追加されます。

各タスクはv-forディレクティブを使って<li>要素としてリスト表示され、:keyで一意の識別子を指定。チェックボックスにv-model="todo.completed"を設定しているため、完了状態がリアルタイムでデータに反映されます。完了タスクにはcompletedクラスが動的に付与され、CSSで打ち消し線と灰色表示になる視覚的効果を持たせています。また、「削除」ボタンを押すとremoveTodo(index)メソッドが呼ばれ、該当のタスクが配列から削除されます。

さらに、computedプロパティcompletedCountによって完了済みタスク数を自動的に計算し、合計件数・完了件数・未完了件数が動的に表示されます。これにより、Vue.jsの「データの双方向バインディング」「リストレンダリング」「算出プロパティ」「イベント処理」といった基本概念を一度に理解できる構成になっています。CSSで中央寄せや柔らかなレイアウトを整え、シンプルながら実用的なUIを実現しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>リストレンダリングデモ</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .todo-container {
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    .todo-list {
      list-style: none;
      padding: 0;
    }
    .todo-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
    .todo-item input[type="checkbox"] {
      margin-right: 10px;
    }
    .todo-item.completed {
      text-decoration: line-through;
      color: #888;
    }
    .add-todo {
      display: flex;
      margin-top: 20px;
    }
    .add-todo input {
      flex-grow: 1;
      padding: 8px;
    }
    .add-todo button {
      margin-left: 10px;
      padding: 8px 16px;
    }
  </style>
</head>
<body>
  <div id="app" class="todo-container">
    <h1>ToDoリスト</h1>

    <ul class="todo-list">
      <li v-for="(todo, index) in todos" :key="todo.id" class="todo-item" :class="{ completed: todo.completed }">
        <input type="checkbox" v-model="todo.completed">
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(index)" style="margin-left: auto;">削除</button>
      </li>
    </ul>

    <div class="add-todo">
      <input v-model="newTodo" @keyup.enter="addTodo" placeholder="新しいToDoを追加">
      <button @click="addTodo">追加</button>
    </div>

    <div class="stats">
      <p>合計: {{ todos.length }}件 | 完了: {{ completedCount }}件 | 未完了: {{ todos.length - completedCount }}件</p>
    </div>
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          newTodo: '',
          todos: [
            { id: 1, text: 'Vue.jsを学ぶ', completed: false },
            { id: 2, text: 'CDNの使い方を理解する', completed: false },
            { id: 3, text: 'デモアプリを作成する', completed: false }
          ]
        }
      },
      computed: {
        completedCount() {
          return this.todos.filter(todo => todo.completed).length;
        }
      },
      methods: {
        addTodo() {
          if (this.newTodo.trim() === '') return;

          this.todos.push({
            id: Date.now(),
            text: this.newTodo,
            completed: false
          });

          this.newTodo = '';
        },
        removeTodo(index) {
          this.todos.splice(index, 1);
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

まとめ

この記事では、Vue.jsをCDNで利用する方法と、基本的なデモアプリケーションの作成方法を紹介しました。CDNを利用することで、以下のようなアプリケーションを簡単に作成できます。

双方向データバインディングのデモ
イベントハンドリングのデモ
条件付きレンダリングのデモ
リストレンダリングを使ったToDoアプリ

CDNを使った方法は、Vue.jsを学び始めるのに最適な方法です。簡単に試せるので、さまざまな機能を実験しながらVue.jsの基本概念を理解していきましょう。本格的なアプリケーション開発に進む際は、Vue CLIやViteを使ったプロジェクト構成も検討してください。

同じカテゴリーの記事

【Vue.js】CDNを使った簡単なデモ

はじめに

CDNとは？

基本的なセットアップ

データバインディングのデモ

イベントハンドリングのデモ

条件付きレンダリングのデモ

リストレンダリングのデモ

まとめ

同じカテゴリーの記事

Vue.jsのmethods, computed, watch 演習

Vue Router 動的ルーティング完全ガイド

Vue Router ルーティングの設定：完全ガイド

Vue.js ルーティング演習問題