← クエスト一覧
クエスト5：リアクティブデータ（ref / reactive）
スライド
1
/
1
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
💚 Vue.js基礎
/
Quest 5
/ 10
クエスト5：リアクティブデータ（ref / reactive）
応用
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
ユーザー情報を reactive で管理し、ボタンで年齢を1歳増やして表示しよう！
📖 解説を見る
⚡ データが変わると画面も自動更新！
ref()
はプリミティブ値に、
reactive()
はオブジェクトに使います。
ヒントを見る
function birthday() { user.age++ } — reactive はオブジェクトなので .value 不要
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
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>{{ user.name }}（{{ user.age }}歳）</p> <button @click="birthday">誕生日！</button> </div> <script>const { createApp, reactive } = Vue createApp({ setup() { const user = reactive({ name: "たろう", age: 16 }) // birthdayを定義してageを増やそう return { user } } }).mount('#app')</script> </body> </html>
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 0 正解
レッスンに戻る
全問正解でクエストクリア！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
