フレームワークを整える
中級Vue を整える。
＝ 単一ファイルコンポーネント（.vue）をブラウザ内でコンパイルして動かす
サンプルコード（クリックでエディタに挿入）
「実行」を押すとここにプレビューが表示されます。
CONSOLE
※ 無限ループを書くとタブが固まることがあります。その場合は「■ 停止」でプレビューを作り直せます。
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 アドレスが見えます。
「入力は端末から出さない」という当サイトの原則に関わる点なので、隠さずに書いておきます。
このツールについて
Vue の単一ファイルコンポーネント（.vue）を、ブラウザの中だけでコンパイルして動かします。ref で値を変えると画面が追従し、v-for で並べた一覧が増え、computed が自動で再計算される様子を、実際に手を動かして確認できます。
ブラウザ内で Vue 3 の SFC（.vue） をコンパイルして実行する Playground。ref・v-model・v-for・computed の4本で、値を変えると画面が追従する様子を体験できます。
主な機能
- 4サンプル（ref・v-model／@click・v-for・computed）
- @vue/compiler-sfc で事前コンパイルしてから実行（CSP の new Function 禁止に対応）
- 左エディタ・右プレビュー＋console・停止ボタン
- Vue 本体とコンパイラは cdn.jsdelivr.net から初回のみ・送信ゼロ
よくある質問
Q. 入力した Vue のコードはサーバーに送られますか？
A. 送られません。@vue/compiler-sfc でのコンパイルも Vue の実行もブラウザ内で完結します。外へ出る通信はコンパイラと Vue 本体のダウンロード（初回のみ）だけです。
Q. なぜ普通の Vue（vue.global.js）ではなくコンパイラを使うのですか？
A. 本番のセキュリティ設定（CSP）が new Function を禁止しているためです。テンプレート文字列を実行時にコンパイルする方式は動かせないので、@vue/compiler-sfc で事前に JavaScript へ変換してから実行しています。
Q. 無限ループを書いたらどうなりますか？
A. プレビューのタブが固まることがあります。「■ 停止」でプレビューの iframe を作り直せます。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
