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アプリケーションを作成してみましょう。

<!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>

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

次に、双方向データバインディングのデモを作成してみましょう。

<!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>

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

次に、ボタンクリックなどのイベントを処理するデモを作成します。

<!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の違いを理解するためのデモを作成します。

<!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ディレクティブを使ったリストレンダリングのデモを作成します。

<!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 ルーティング演習問題

Vue.jsのmethods, computed, watch 演習

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

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