【完全版】Vue.jsとは？初心者にもわかる基本・仕組み・使い方をやさしく解説

「JavaScriptのコード量を減らしたい…」
「リアルタイムで画面が変わるサイトを作ってみたい！」
そんなときに役立つのが Vue.js（ヴュー・ジェイエス） です。

本記事では、初心者でも理解できるように、Vue.jsの基礎から実際に動くサンプルコードまで丁寧に解説していきます。

---

Vue.jsとは？

Vue.jsは、Webページを動的に操作するためのJavaScriptフレームワークです。
特に「画面の一部分だけを効率的に更新したい」ときに強い力を発揮します。

Vue.jsの特徴

• 学習コストが低い（初心者向け）
• 小規模～中規模の開発に最適
• HTMLをそのまま扱えるので直感的
• データと画面表示が自動的に同期される

---

Vue.jsを使うと何が嬉しいの？

✔ HTMLが“生きた状態”になる

JavaScriptで1行ずつDOMを操作しなくても、
Vue.jsなら データを書き換えるだけで画面も自動的に更新されます。

✔ コード量が大きく減る

イベント処理・条件分岐・繰り返し処理などが、
HTMLに直接書けるため、コードがスッキリまとまります。

✔ 保守性が高い

「どこで何をしているかわからない…」という混乱が減り、
後から修正しやすいコードになります。

---

Vue.jsの仕組み（超簡単に）

Vue.jsでは次の2つを結びつけて自動的に更新を行います。

1. データ（JavaScript側）
2. テンプレート（HTML側）

この仕組みを リアクティブシステム と呼びます。

---

Vue.jsの基本書き方

ここでは、Vue.jsの最も簡単な構文「CDN読み込み」を使います。

▼ 最小構成の例（そのまま動くサンプル）

<div id="app">
  <h2>{{ message }}</h2>
  <button @click="changeMessage">メッセージを変更</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
  data() {
    return {
      message: "こんにちは、Vue.js！"
    };
  },
  methods: {
    changeMessage() {
      this.message = "メッセージが変わったよ！";
    }
  }
});
app.mount('#app');
</script>

---

Vue.jsでよく使う基本構文

✔ データの表示（{{ }}）

<p>{{ message }}</p>

✔ クリックイベント（@click）

<button @click="count++">カウント</button>

✔ if文（v-if）

<p v-if="isShow">表示されるテキスト</p>

✔ 繰り返し（v-for）

<li v-for="item in items">{{ item }}</li>

---

実際のWeb制作でどう使える？（応用例）

① タブ切り替え

クリックでタブ内容を変更するUIを簡単に実装できます。

<div id="app">
  <button @click="tab='about'">About</button>
  <button @click="tab='service'">Service</button>

  <div v-if="tab === 'about'">
    <h3>私たちについて</h3>
    <p>会社紹介ページです。</p>
  </div>

  <div v-if="tab === 'service'">
    <h3>サービス紹介</h3>
    <p>サービス内容です。</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      tab: 'about'
    };
  }
}).mount('#app');
</script>

---

② フォームのリアルタイムバリデーション

<div id="app">
  <input v-model="name" placeholder="名前を入力">
  <p v-if="name.length < 3">3文字以上入力してください</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      name: ""
    };
  }
}).mount('#app');
</script>

---

③ 絞り込みフィルター（検索機能）

<div id="app">
  <input v-model="keyword" placeholder="Search">

  <ul>
    <li v-for="item in filteredList" :key="item">{{ item }}</li>
  </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      keyword: "",
      items: ["りんご", "みかん", "ぶどう", "バナナ"]
    };
  },
  computed: {
    filteredList() {
      return this.items.filter(i =>
        i.includes(this.keyword)
      );
    }
  }
}).mount('#app');
</script>

---

「Vue.jsを始めると何ができる？」まとめ

できること	内容
SPA開発	ページ遷移のないアプリが作れる
UI効率化	JavaScriptを書く量が減り保守性UP
動的画面	表示・検索・切替などがリアルタイム

Vue.jsは「初心者でも扱いやすく、現場でも使われる」非常にバランスの良いフレームワークです。

---

Summary

• Vue.jsは初心者でも扱えるJavaScriptフレームワーク
• データと表示が自動で同期される
• DOM操作を自分で書く必要が減る
• WordPressテーマやWeb制作でも活躍する
• 小〜中規模の開発に最適

その他関連記事はこちら→Programming Notes