Vue.js入門｜とは何か・何が作れるか・最初の一歩まで

Vue.js（ビュージェイエス）とは、Webページに動きや対話性を加えるためのJavaScriptフレームワークです。HTMLファイルに script タグを1行足すだけで使い始められる点が最大の特徴で、専用の開発環境を用意しなくても、いま手元にあるページにそのまま組み込めます。

フレームワークの学習で最初に詰まるのは、文法ではなく環境構築です。ターミナルを開き、Node.jsのバージョンを合わせ、コマンドで雛形を生成し、開発サーバーを起動する。ここまで進めた時点で力尽きて、肝心の「何が書けるのか」に到達しないまま終わってしまう。JavaScriptの基礎を終えた人がフレームワークで挫折する典型的なパターンです。

この記事では、Vue.jsで具体的に何が作れるのかを、国内企業が実際にどう使っているかも含めて示したうえで、コマンドを一切使わずCDNで動かす最初のコードから、Viteを使った本格的な構成へ進む手順までを順に扱います。書いたコードが正しく動いているかを自分で確認する手順まで含めているので、上から順に進めれば1つのループを完走できます。

Vue.jsとは｜HTMLに1行足すだけで動くJavaScriptフレームワーク

Vue.jsは、画面の表示とデータを自動的に同期させるためのJavaScriptフレームワークです。素のJavaScriptでは「値が変わったら、その値を表示している場所を探して書き換える」という手順を自分で書く必要がありますが、Vue.jsでは値と表示場所を最初に結び付けておけば、値が変わった時点で表示が勝手に追随します。

公式ドキュメントは、Vue.jsを「プログレッシブフレームワーク」と位置づけています。全部を使うことも、必要な部分だけを使うこともできるという意味です。ページの一部分にだけ組み込む使い方から、サイト全体をVue.jsで組み立てる使い方まで、同じ道具のまま段階的に広げられます。

この「必要な分だけ使える」性質が、学習の入口としては大きな利点になります。最初にプロジェクト全体を作る必要がなく、既存のHTMLファイル1枚から始められるからです。

項目	内容
種類	フロントエンド（画面側）のJavaScriptフレームワーク
最新の安定版	Vue 3.5.41（2026年8月5日リリース）
ライセンス	MIT
始めるのに必要なもの	HTMLファイルとブラウザだけ（CDNを使う場合）
公式ドキュメント	日本語版あり

バージョンについては、Vue公式のリリース情報によると、2026年8月20日時点の最新安定版はVue 3.5.41です。次期版となる3.6はリリース候補（RC）の段階で、正式リリースはまだされていません。

どれくらい使われているかは、調査によって数字が変わります。Stack Overflowの開発者調査2025（回答者49,079人・177カ国、当該設問の回答は23,678件）では、Vue.jsを過去1年で本格的に使ったと答えた開発者は17.6%でした。一方、JavaScript開発者に対象を絞ったState of JS 2025（回答者13,002人・2025年9〜11月実施）では、利用経験率52%、利用者の満足度84%と報告されています。

3倍の開きがありますが、これは母集団と質問が違うためです。前者は全分野の開発者に「過去1年で本格的に開発したか」を聞いており、後者はJavaScript開発者に「使ったことがあるか」を聞いています。どちらか一方だけを「Vueのシェア」として読むと実態を見誤ります。

Vue.jsで何が作れるか

Vue.jsで作れるものは、小さな部品から本格的なサービスまで幅があります。ここでは「自分で今日から作れるもの」と「実際の企業が作っているもの」を分けて見ていきます。規模のふり幅を先に知っておくと、自分がどこを目指すのかを決めやすくなります。

既存ページに足せるもの

学習の最初に作るなら、いま持っているページに部品を足すのがもっとも早く動きます。いずれも素のJavaScriptで書くと状態管理が煩雑になりがちな部分で、Vue.jsの効果が体感しやすい題材です。

入力フォームのその場チェック。文字数や必須項目の過不足を、送信前にリアルタイムで表示する。
一覧の絞り込みと検索。カテゴリのチェックボックスやキーワード入力に応じて、表示中のリストを即座に絞る。
モーダル・タブ・アコーディオン。開閉の状態を持つUI。表示するかどうかを真偽値1つで切り替えられる。
入力内容のプレビュー。フォームに打った内容を、別の場所へその場で反映して見せる。

既存サイトへ少しずつ入れていく｜GMOペパボの例

すでに動いているサイトを止めずに、部分的にVue.jsへ置き換えていく使い方があります。GMOペパボは、カラーミーショップの開発において、既存のサーバサイドテンプレートにVueコンポーネントをWeb Components化して差し込む方法を採り、管理画面をVue 3へ段階的に移行していると公開しています（ペパボテックブログ・2025年7月7日）。

全部を一度に作り直さなくてよい、という点が実務では大きな意味を持ちます。学習の入口で「HTMLに1行足すだけ」から始められる性質が、そのまま業務での導入しやすさにつながっている例です。

サービス本体をまるごと作る｜アンドパッドの例

反対に、フロントエンド全体をVue.js系で構築する使い方もあります。アンドパッドは「ANDPAD 引合粗利管理」のフロントエンドをNuxtで構築しており、2020年にNuxt 2で開始したのち、2023年にNuxt 3へ移行したと公開しています（ANDPAD Tech Blog・2026年2月16日）。

NuxtはVue.jsを土台にしたフレームワークで、サーバー側でHTMLを生成するサーバーサイドレンダリング（SSR）などを標準で扱えます。Vue.jsを覚えたあとに進む先の1つだと考えておけば十分です。

大規模サービスの画面を作り替える｜ラクスルの例

すでにVue.jsで作られたものを、新しいバージョンへ移していく仕事もあります。ラクスルは印刷事業部のプロダクトについて、少なくとも70以上のファイルを対象にVue 2からVue 3への移行を進めた記録を公開しています（RAKSUL TechBlog・2025年12月18日）。

いま学ぶ人にとっては、Vue 3の書き方を最初から身につけておけばこの移行作業に巻き込まれずに済む、という話でもあります。学ぶバージョンの選択については後の見出しで扱います。

Webの外にも出せる

Vue.jsで書いた画面は、ブラウザの外にも持ち出せます。公式ドキュメントの「Vueのさまざまな活用方法」では、次の組み合わせが挙げられています。すぐに使う知識ではありませんが、学んだものがWebサイト以外にも通用すると分かっていれば、学習の投資判断がしやすくなります。

作るもの	組み合わせる道具
デスクトップアプリ	Electron / Wails
モバイルアプリ	Ionic Vue
デスクトップとモバイルの両対応	Quasar / Tauri
3D表現（WebGL）	TresJS

出典はVue公式ドキュメント「Ways of Using Vue」です（2026年8月20日閲覧）。

まずCDNで動かす｜コマンドを使わずにカウンターを作る

ここから実際に動かします。Vue公式のクイックスタートには現在もCDNから読み込む方法が掲載されており、「CDNからVueを使用する場合はビルドステップは必要ありません」と説明されています。Node.jsのインストールもコマンド操作も不要です。

次の内容を index.html という名前で保存し、ブラウザで開いてください。これだけでボタンを押すたびに数字が増えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js カウンター</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <p>押した回数: {{ count }}</p>
    <button @click="count++">押す</button>
  </div>

  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const count = ref(0)
        return { count }
      }
    }).mount('#app')
  </script>
</body>
</html>

やっていることは3つだけです。script タグでVue.js本体を読み込み、createApp() でアプリを作り、.mount('#app') で「このHTMLのどこを担当させるか」を指定しています。#app の外側は今までどおりの静的なHTMLのままです。

注目してほしいのは、count++ と書いただけで画面の数字が変わる点です。表示を書き換える処理は一行も書いていません。「値と表示場所を結び付けておけば、値の変更に表示が追随する」という冒頭の説明が、ここで実際に効いています。

素のJavaScriptで同じものを書くと、querySelector で表示場所を取得し、クリックのたびに textContent を更新する処理が必要になります。表示箇所が増えるほどこの更新処理も増えていきますが、Vue.jsでは増えません。

最初に覚えるのは3つだけ｜表示・入力・条件と繰り返し

Vue.jsの機能は多いですが、最初の1つを作り切るのに必要な文法は3つです。この3つで、前の見出しに挙げた「既存ページに足せるもの」はひととおり作れます。

値を画面に出す

二重の波かっこで囲むと、その位置に値が表示されます。中では簡単な式も書けます。

<p>{{ userName }} さん、こんにちは</p>
<p>合計: {{ price * quantity }} 円</p>

入力欄と値を同期させる

v-model を付けると、入力欄と値が双方向に同期します。打った内容が即座に値へ入り、値を変えれば入力欄の表示も変わります。フォームのその場チェックやプレビューは、これだけで形になります。

<input v-model="message" type="text">
<p>入力中: {{ message }}</p>
<p>残り {{ 100 - message.length }} 文字</p>

出し分けと繰り返し

v-if は条件によって要素を出すかどうかを決め、v-for は配列の要素数だけ同じ形を繰り返します。モーダルの開閉は前者、一覧表示は後者です。

<p v-if="items.length === 0">該当する項目はありません</p>

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

:key は繰り返した要素を見分けるための目印です。付け忘れても動いてしまうことがありますが、並び替えや削除をしたときに表示がずれる原因になるので、最初から付ける習慣にしてください。

いま学ぶならVue 3｜Vue 2はサポートが終了している

学ぶバージョンは選ぶ必要がありません。Vue 3の一択です。

Vue公式ブログ（2023年12月15日）によると、Vue 2は2023年12月31日にサポート終了（EOL）を迎えました。公式は、この日以降Vue 2は新機能・更新・修正を一切受け取らないと明言しています。Vue 3が既定のバージョンになったのは2022年2月7日で、すでに4年以上が経っています。

	Vue 2	Vue 3
状態	2023年12月31日にサポート終了	現行。2022年2月から既定
最終バージョン	2.7.16	3.5.41（2026年8月時点）
今後の更新	なし	継続中
これから学ぶ人	対象外	こちら

ここで実務上の注意が1つあります。ネット上のVue.js解説記事には、Vue 2時代に書かれたものがまだ多く残っています。書き方が古いと、コピーしても動かなかったり、動いても非推奨の書き方だったりします。

見分け方は単純で、new Vue({...}) で始まっていればVue 2、createApp({...}) で始まっていればVue 3です。参考にする記事を開いたら、まずこの1行を確認してください。

Options APIとComposition API｜公式が学習段階で勧めている書き方

Vue 3には書き方が2種類あります。Options APIとComposition APIです。入門者がここで足を止めやすいので、公式の見解を先に確認しておきます。

公式はどちらも非推奨としていません。Vue公式ガイドは「Options APIはComposition APIを土台にしている」と説明したうえで、学習が目的の場合は「自分で理解しやすいと思うスタイルをお選びください」としています。

さらに公式は、Options APIについて「初心者にとって分かりやすいモデルでもあります」と明記しています。「初学者もComposition APIから始めるべき」と書いている解説を見かけることがありますが、公式ドキュメントはそう言っていません。Composition APIを推奨しているのは、アプリケーション全体をVueで構築する本番用途の文脈です。

場面	公式が挙げている選び方
学習が目的	自分が理解しやすいほう。Options APIは初心者に分かりやすいモデルとされている
ビルドツールを使わない・複雑さが低い用途	Options API
アプリケーション全体をVueで構築する	Composition API＋単一ファイルコンポーネント

同じカウンターを両方の書き方で並べます。動作はまったく同じです。

// Options API：役割ごとに置き場所が決まっている
createApp({
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}).mount('#app')

// Composition API：関連する処理をまとめて書く
createApp({
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
}).mount('#app')

Options APIは data と methods という決まった箱に入れていく形なので、どこに何を書くか迷いません。Composition APIは箱の縛りがないぶん自由度が高く、機能が増えたときに関連する処理をまとめて置けます。

迷ったら、まず片方で1つ作り切ってください。両方を同時に覚えようとすると、どちらも身に付かないまま時間だけが過ぎます。

ビルドを入れる｜Viteでプロジェクトを立てる

CDNで一通り書けるようになったら、次はビルドツールを入れた構成へ進みます。ファイルを分割できるようになり、後述する単一ファイルコンポーネントが使えるようになります。

Vue公式のクイックスタートが推奨しているのは、次のコマンドで公式のプロジェクト作成ツール create-vue を使う方法です。生成されるプロジェクトはViteベースの構成になります。

npm create vue@latest

実行するとプロジェクト名や使う機能を対話形式で聞かれます。最初はTypeScriptもテストもすべて「いいえ」で構いません。必要になった時点で足せます。

実行前にNode.jsのバージョンを確認してください。公式は ^22.18.0 || >=24.12.0 を要求しています（2026年8月20日閲覧）。古いNode.jsのままだと、コマンドの途中でエラーになります。

Vite自体が何をしている道具なのかは、Viteの基礎知識で扱っています。導入手順や設定を細かく見たい場合はViteの特徴・導入・使い方ガイドへ進んでください。この記事ではVue.js側の話に絞ります。

単一ファイルコンポーネント（SFC）とは

単一ファイルコンポーネント（SFC）とは、1つの部品に必要なHTML・JavaScript・CSSを .vue という拡張子のファイル1枚にまとめる書き方です。ビルドツールを入れると使えるようになります。

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <p>押した回数: {{ count }}</p>
  <button @click="count++">押す</button>
</template>

<style scoped>
button {
  padding: 8px 16px;
}
</style>

3つのブロックに分かれています。<script setup> が処理、<template> が見た目の構造、<style scoped> がスタイルです。scoped を付けると、そのCSSはこのファイル内の要素にしか効きません。他の場所のスタイルを壊す心配がなくなります。

この書き方はCDN版では使えません。公式ドキュメントにも、CDNから読み込む場合は単一ファイルコンポーネントの構文が使えないと明記されています。SFCを使いたくなった時点が、ビルドツールを導入するタイミングだと考えてください。

書いたVueが正しく動いているかを確認する

Vue.jsで厄介なのは、間違っていてもエラーが出ず、ただ「何も起きない」で終わることです。書いたコードが動いているかどうかを、次の順で確認してください。

画面に {{ }} がそのまま出ていないか見る。波かっこが文字として表示されているなら、Vue.jsがそのHTMLを担当できていません。読み込み失敗か、マウント先の指定ミスです。
ブラウザの開発者ツールでコンソールを開く。赤いエラーが出ていないかを確認します。Vue.jsは警告文に原因と対処を書いてくれることが多いので、英文でもそのまま読む価値があります。
値を変えて、表示が追随するか試す。ボタンを押す、入力欄に打つなど、値が変わる操作をして画面が変わるかを見ます。ここまで通れば、Vue.jsは正しく動いています。

合否ラインは3番目です。「表示されている」だけでは足りません。値を変えたときに画面が追随してはじめて、Vue.jsを使えていることになります。表示は出ているのに操作しても何も変わらない場合、Vue.jsの外側に静的なHTMLとして書いてしまっている可能性が高いです。

3番目まで通ったら、次はブラウザ拡張のVue Devtoolsを入れてください。いま値がいくつなのかを画面上で直接確認できるようになり、原因の切り分けが一段速くなります。

詰まりやすい3箇所と対処

前の見出しの確認で引っかかったときは、まずこの3つを疑ってください。入門段階のつまずきはほぼここに集中します。

症状	よくある原因	対処
波かっこが文字のまま出る	マウント先の指定と、HTML側のid名が一致していない	`.mount('#app')` と `<div id="app">` の名前を突き合わせる
値は出るが変化しない	Composition APIで `.value` を付け忘れている	JavaScript側では `count.value`、テンプレート側では `count` と書き分ける
一覧の並び替えで表示が崩れる	`v-for` に `:key` が無い	各要素を一意に識別できる値を `:key` に渡す

2番目の .value は、Composition APIを使い始めた人がほぼ全員通る箇所です。ref() で作った値は、JavaScriptの中では .value を経由して読み書きしますが、テンプレートの中では自動的に外されるため付けません。この非対称が混乱の原因になります。

次の一手

カウンターが動いたら、次に進む先は3つに分かれます。どこで止まったかによって選んでください。

JavaScriptの基礎に不安が残った場合

配列の操作やアロー関数で手が止まったなら、フレームワークより先に土台を固めたほうが速く進みます。JavaScript学習ガイドから、いまのレベルに合うものを選んでください。

環境構築で止まった場合

npm create vue@latest でエラーが出たなら、原因はVue.jsではなくビルドツール側にあります。Viteの特徴・導入・使い方ガイドで導入部分を分けて確認してください。CDN版のまま学習を進めても問題ありません。

ほかの選択肢も見ておきたい場合

フロントエンドの選択肢はVue.jsだけではありません。React入門も同じ構成で扱っています。それぞれの立ち位置を整理して見たい場合はReact.js・Vue.js・Node.jsの特徴と用途へ進んでください。

まとめ

Vue.jsは、環境構築を後回しにできる数少ないフレームワークです。まず動かして、必要になった時点で道具を足していくという順序が取れます。

script タグ1行で始められる。Node.jsもコマンド操作も最初は不要。
作れるものは、既存ページに足す小さな部品から、Nuxtで組むサービス本体まで幅がある。
最初に覚える文法は、値の表示・v-model・v-if／v-for の3つで足りる。
学ぶのはVue 3。Vue 2は2023年12月31日にサポートが終了している。
公式は学習段階で「理解しやすいほうを選べ」としており、Options APIを初心者に分かりやすいモデルと位置づけている。
動作確認の合否ラインは「値を変えたときに表示が追随するか」。表示されるだけでは足りない。

読み終えたら、まず index.html を1枚作ってカウンターを動かしてください。そのうえでJavaScript側の手が止まるようなら、基礎を練習問題で埋め直すのが最短です。

JavaScript練習問題で基礎を固める

よくある質問

Q. Vue.jsとは何ですか？

Webページに動きや対話性を加えるためのJavaScriptフレームワークです。値と表示場所を結び付けておくと、値が変わった時点で画面が自動的に追随します。HTMLに script タグを1行足すだけで使い始められるため、専用の開発環境がなくても既存のページに組み込めます。

Q. Vue.jsを学ぶ前に何が必要ですか？

HTMLとCSSに加えて、JavaScriptの基礎があれば始められます。具体的には、変数・関数・配列・オブジェクトの扱いと、イベントで処理を動かす感覚です。逆に、Node.jsやビルドツールの知識は最初の段階では要りません。CDNから読み込む方法ならコマンド操作なしで動かせます。

Q. Vue.jsでは何が作れますか？

既存ページに足すフォームの入力チェックや一覧の絞り込みといった小さな部品から、Nuxtを使ったサービス本体の構築まで扱えます。国内でも、既存サイトへ部分的に導入している例や、フロントエンド全体をNuxtで構築している例が公開されています。Electronでデスクトップアプリ、Ionic Vueでモバイルアプリなど、Webの外へ出すこともできます。

Q. Vue 2とVue 3のどちらを学ぶべきですか？

Vue 3です。Vue公式ブログによると、Vue 2は2023年12月31日にサポート終了を迎えており、以降は新機能・更新・修正を受け取りません。参考にする解説記事が古いかどうかは、コードの書き出しで見分けられます。new Vue({...}) ならVue 2、createApp({...}) ならVue 3です。

Q. 初学者はComposition APIから始めるべきですか？

公式はそう言っていません。Vue公式ガイドは学習が目的の場合について「自分で理解しやすいと思うスタイルをお選びください」としており、Options APIを「初心者にとって分かりやすいモデル」と明記しています。Composition APIを勧めているのは、アプリケーション全体をVueで構築する本番用途の文脈です。どちらも非推奨ではないので、片方で1つ作り切ることを優先してください。

Q. 書いたコードが動かないときは何を見ればいいですか？

まず画面に波かっこがそのまま出ていないかを見てください。出ているならマウント先の指定とHTML側のid名が一致していません。次にブラウザの開発者ツールでコンソールのエラーを確認します。表示は出るのに値が変わらない場合は、Composition APIで .value を付け忘れているケースがほとんどです。

Vue.js入門｜何が作れるかとCDN 1行で動かす最初の一歩