Vue を整える。

＝単一ファイルコンポーネント（.vue）をブラウザ内でコンパイルして動かす

Vue が初めての方は、先にそもそも Vue とは・どんな場面で使うかをどうぞ。

サンプルコード（クリックでエディタに挿入）

App.vue Vue 3.5 SFC

Ctrl/⌘ + Enter で実行

PREVIEW

「実行」を押すとここにプレビューが表示されます。

コンソール

※ 無限ループを書くとタブが固まることがあります。その場合は「■ 停止」でプレビューを作り直せます。

そもそも Vue とは

画面とデータをつなぐ、とっつきやすさに定評のある JavaScript フレームワーク。

Vue は、画面（UI）をデータと結びつけて作る JavaScript のフレームワークです。データを書き換えると画面が自動で更新されるリアクティブな仕組みを持ち、HTML に近い書き方で画面を組み立てられます。Evan You 氏が作り、現在はコミュニティを中心に開発が続けられているオープンソースです。

「少しずつ導入できる（プログレッシブ）」ことを特徴にしており、既存のページの一部だけに使うことも、画面全体を Vue で作ることもできます。同じ種類の道具に React や Svelte があり、Vue はテンプレート（HTML に近い書き方）で書くのが大きな違いです。

どこで・どんな場面で使うか

社内システムの管理画面

入力フォームや一覧表が中心の業務画面で、データと表示を結びつける Vue の仕組みが活きます。
既存サイトの一部を動かす

今ある HTML に少しだけ Vue を足し、検索や絞り込みなどを動的にする使い方ができます。
Nuxt などの土台として

Vue を土台にしたフレームワークでサイト全体を作る構成もあります。
小規模チームや個人開発

決まりごとが分かりやすく、少人数でも作り始めやすいと感じる人が多い道具です。
求人・学習の場面

国内でも使っている会社があり、日本語の解説も充実しているので、学びやすい部類に入ります。

向いている場面・向いていない場面

向いている：HTML や CSS の経験があり、その延長で動く画面を作りたい人。
向いている：既存のページに少しずつ導入したい場合や、小〜中規模の業務アプリ。
向いていない：動きのほとんどない文章中心のサイト。画面を動かす仕組み自体が不要です。

上の練習場でデータを書き換えて「実行」を押し、画面が自動で更新される様子を試してみてください。

Vue が向いている場面／向かない場面

自分に合うのはどれ？選び方を見る →

テンプレート構文がHTMLに近く、1人・少人数での立ち上げが速い。

◎ 向いている場面

・ 1人・少人数で早く形にしたいとき（テンプレート構文がHTMLに近く学びやすい）
・既存のHTMLに<template>タグ感覚で機能を足していきたいとき
・日本語ドキュメント・日本語コミュニティの情報を重視するとき
・ SEOを狙うWebサイトをNuxtで組みたいとき

△ 向かない場面

・ Reactほどの求人量・ライブラリの選択肢を必要とするとき
・ HTMLの構文を一切増やさず素のJSだけで済ませたいとき

Vue は「値が変わったら、使っている場所だけ」描き直す。

ref() や computed() で作った値は、画面の中で使われている場所と結びつきます。値を書き換えるだけで、DOM操作を一切書かずに表示が更新されます。

①

ref() — 値をリアクティブにする

ref(0) で作った値は .value で読み書きします。テンプレートの中では .value なしで直接使え、値が変わると自動で再描画されます。
②

v-model — 入力欄と変数を双方向に結ぶ

入力欄に文字を打つと変数が更新され、変数を書き換えると入力欄の表示も変わります。裏側では :value と @input の組み合わせを Vue が自動生成しています。
③

v-for — 配列を並べて描画する

配列に要素を追加・削除すると、一覧の表示も自動で追従します。ループでは :key を付けて、各要素を正しく識別できるようにします。
④

computed() — 依存する値から自動で再計算

computed(() => price.value * qty.value) は、price か qty のどちらかが変わるたびに自動で再計算されます。手動で再計算を呼び出すコードは不要です。

このページについて

ライブラリは cdn.jsdelivr.net から読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。プレビューはサンドボックス化した iframe（sandbox="allow-scripts"）で動いており、このページや端末のデータには触れません。

🌐 このページを開いただけでは外部通信は発生しませんが、「実行」を押した最初の1回だけ、 SFC コンパイラ（@vue/compiler-sfc 3.5.42）と Vue 本体（vue 3.5.42）を配信元の cdn.jsdelivr.net から取得します。これはプログラムを受け取るだけの通信で、あなたが書いたコードや実行結果が送られることはありません。ただし通信である以上、配信元にはお使いの回線の IP アドレスが見えます。「入力は端末から出さない」という当サイトの原則に関わる点なので、隠さずに書いておきます。