Vueの始め方 — refとcomputedで買い物の合計を表示しよう
数量が変わると、合計も変わる
- 公式create-vueでアプリを作成する
- App.vueの3つのブロックを知る
- refとcomputedで数量と合計を持つ
- クリック後の画面更新と本番ビルドを確認する
ひよこ 
ペンギン先生 ひよこ ひよこ ペンギン先生 ひよこ ペンギン先生 ひよこ ペンギン先生 ひよこ ペンギン先生 ひよこ ペンギン先生 ひよこ 最初のゴール：2回押すと3個・360円
HTMLとJavaScriptでボタンを動かしたことがあると、Vueが担当する部分を見つけやすくなります。JavaScript入門から進んでも構いません。
1. 公式ツールで最小のプロジェクトを作る
公式の確認時点のNode.js要件は ^22.18.0 || >=24.12.0。対応するLTS系列の更新版を用意し、次を実行します。
node --version
npm create vue@latestプロジェクト名は my-vue-app にします。この例ではTypeScript・Router・Pinia・テストなどの追加機能を選ばない最小構成にします。作成後は次を実行します。
cd my-vue-app
npm install
npm run dev表示されたローカルURLを開きましょう。ポートが使用中なら別の番号になることがあるため、常に5173と決めつけず、ターミナルを確認します。
2. src/App.vueを置き換える
<script setup>
import { ref, computed } from 'vue'
const unitPrice = 120
const quantity = ref(1)
const total = computed(() => quantity.value * unitPrice)
</script>
<template>
<main>
<h1>ひよこのお買い物</h1>
<p>1個 {{ unitPrice }}円</p>
<p>数量: {{ quantity }}個</p>
<p aria-live="polite">合計: {{ total }}円</p>
<button type="button" @click="quantity += 1">1個ふやす</button>
</main>
</template>
<style scoped>
main { padding: 1rem; }
button { padding: 0.5rem 1rem; }
</style>保存してブラウザを確認します。初期表示は1個・120円、2回押したら3個・360円です。生成テンプレートのグローバルCSSが残ると見た目は異なる場合がありますが、数量と合計は同じです。
scriptの.valueと、画面の更新を区別する
computed の中はJavaScriptなので quantity.value と書きます。テンプレートでは今回のトップレベルrefが展開されるため quantity のままで使えます。VueはDOM更新をまとめて次の更新タイミングへ送るので、JavaScriptで値を変えた直後の同じ処理中にDOMも必ず更新済みとは限りません。DOM更新後に処理する場合は nextTick を使う場面があります。
表示されない場合はApp.vueを編集したか、importのスペルやConsoleの最初のエラーを確認します。Missing script: devなら、作成したプロジェクトのフォルダにいるか確認しましょう。
公開用の確認は開発サーバーをCtrl+Cで止めてから npm run build、続いて npm run preview。実際の公開先への配置はホスティングの手順に従います。画面を分ける学習へ進むなら公式コンポーネントガイド、他との比較ならReact・Vue・Svelteへ。