2026.07.27【初心者向け】Vue.jsの基本的な使い方と特徴をわかりやすく解説！TECH BLOG

  • HOME
  • TECH BLOG
  • 【初心者向け】Vue.jsの基本的な使い方と特徴をわかりやすく解説！

Vue.js（ビュー・ジェイエス）とは？

Vue.jsは、WebサイトのUI（ユーザーインターフェース）を効率よく構築するためのJavaScriptフレームワークです。学習コストが低く、直感的にコードが書けることから、フロントエンド開発の初心者から実務まで幅広く人気を集めています。

特徴 メリット
学習コストが低い HTML / CSS / JavaScript の基礎知識があればすぐに始められる
リアクティブ（自動更新） データ（変数）が変わると、画面の表示がリアルタイムで自動更新される
コンポーネント指向 ボタンやフォームなどの部品を小分けにして使い回せるため、コード管理が楽になる

Vue.jsの始め方：CDNで手軽に試す

Vue.jsを始めるには複雑な開発環境の構築も可能ですが、最も手軽なのはCDN（Content Delivery Network）を利用する方法です。HTMLファイルに<script>タグを1行追加するだけで、すぐにVue.jsの機能を使えるようになります。

以下のスクリプトタグをHTMLの<head>または<body>内に記述します。

<!-- Vue 3 のCDN読み込み -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

覚えておきたい！Vue.jsの主要なディレクティブ（指示文）

Vue.jsでは、HTMLタグの中にv-から始まる独自の属性（ディレクティブ）を書き込むことで、複雑なDOM操作を簡単に行えます。

  • v-model（双方向データバインディング）： 入力フォームの値とJavaScriptのデータを同期させます。
  • v-on（または @）： ボタンのクリックなどのイベントを処理します。（例：@click="methodName"）
  • v-bind（または :）： HTML属性（hrefやsrc、classなど）に動的なデータをセットします。（例：:src="imageUrl"）
  • v-if / v-else： 条件によって要素の表示・非表示を切り替えます。
  • v-for： 配列データを取り出して、リストなどを繰り返し描画します。

【実践】簡単なカウンターアプリを作ってみよう

実際のコード例を見てみましょう。以下はボタンを押すと数字が増えるシンプルなカウンターのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js サンプル</title>
  <!-- Vue.jsの読み込み -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

  <!-- Vueが管理するエリア -->
  <div id="app">
    <h1>{{ message }}</h1>
    <p>現在のカウント: {{ count }}</p>
    <button @click="increment">カウントアップ</button>
  </div>

  <script>
    const { createApp, ref } = Vue;

    createApp({
      setup() {
        // リアクティブな変数の定義
        const message = ref('Hello Vue.js!');
        const count = ref(0);

        // ボタンが押されたときの関数
        const increment = () => {
          count.value++;
        };

        return {
          message,
          count,
          increment
        };
      }
    }).mount('#app'); // #app 要素にマウント
  </script>

</body>
</html>

💡 ここがポイント！
従来のJavaScript（jQueryなど）のように「要素を取得して、テキストを書き換えて…」という手順を踏む必要はありません。Vue.jsではcountの値を更新するだけで、画面側の表示が勝手に切り替わります。

まとめ：まずはCDNから触ってみよう

Vue.jsは、直感的な構文と手軽な導入が魅力的なフレームワークです。まずは1枚のHTMLファイルとCDNを使って、小さなアプリや動的な処理を作ってみることから始めてみましょう。

©OfficeWill LLC. All rights reserved.