Vue 3入門｜ref・computed・コンポーネントの基本と始め方

Vueは、データと画面を結び付けて、操作に応じて表示が変わるWebアプリを作るためのフレームワークです。まずはVue 3で「数字を変えると画面も変わる」という小さな例を作り、仕組みをつかみましょう。市場シェアや条件の不明な速度ランキングではなく、実際に書くコードを中心に説明します。

更新：2026年10月24日。旧版の時点が混在したバージョン説明、根拠不明の普及率・性能数値を見直しました。

データを変えると、画面が変わる

この「状態が変わったことを捉え、表示へ反映する仕組み」がリアクティビティです。仕組みの説明はVue公式のリアクティビティの基本で確認できます。

Vueのプロジェクトを作る

まずnode --versionとnpm --versionで環境を確認します。確認時点の公式Quick Startは、Node.jsの要件を^22.18.0 || >=24.12.0としています。古い環境で作業を続けず、要件を満たすサポート中のバージョンを使います。

npm create vue@latest

プロジェクト名をvue-startとし、この最小例では追加機能を必要なものだけ選びます。生成後は次を実行してください。

cd vue-start
npm install
npm run dev

ターミナルに表示されたURLをブラウザで開きます。使用中のポートによってURLが変わることがあるので、固定の番号を推測するより、実際の表示を確認します。

refとcomputedを使う最小例

src/App.vueを次に置き換えます。JavaScriptで書いたVue 3の単一ファイルコンポーネントです。

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value += 1
}
</script>

<template>
  <main>
    <h1>カウンター</h1>
    <p>回数：{{ count }}</p>
    <p>2倍の値：{{ doubled }}</p>
    <button type="button" @click="increment">1増やす</button>
  </main>
</template>

ボタンを3回押したとき、「回数」が3、「2倍の値」が6になれば、状態と表示の関係を確認できます。doubledを別々に増やす必要はなく、countから計算します。考え方は公式のComputed Propertiesで詳しく説明されています。

画面が増えたらコンポーネントへ分ける

コンポーネントは、表示と処理をまとめた部品です。例えば商品一覧なら「商品カード」を部品にし、親から商品データを渡すと、同じ作りを繰り返し利用できます。親から渡す値はprops、子から親へ知らせる操作はイベントとして考えると、データの流れを整理できます。

ただし、短い文章まで機械的に部品化すると、かえって追いにくくなります。「繰り返すもの」「独立して変更したいもの」を目安に分割してください。基本は公式のComponents Basicsにあります。

Vite・Router・Pinia・Nuxtの役割

すべてを最初から使う必要はありません。詳細はVue Router、Pinia、Nuxtの各公式資料で確認します。

Vapor Modeの話と、基本の学習を分ける

Vueの描画には、テンプレートをどのような更新処理へ変換するか、という別の設計上の話があります。Vapor Modeの対応状況を調べる際は、対象バージョンのリリース資料と、利用するライブラリ・SSRとの互換性を確認してください。構文を1つ加えればすべての既存アプリで同じ性能向上が得られる、と考えないことが大切です。

本記事の例は通常のVue 3を対象とし、Vapor Modeを有効にする手順ではありません。描画の背景は公式のRendering Mechanismが参考になります。

次に確かめること

まずはカウンターにリセットボタンを足し、入力欄や一覧表示へ進むと、状態・イベント・表示の関係を繰り返し確認できます。公開前にはnpm run buildでビルドを確認し、利用するホストに合う配信方法を選びます。開発サーバーを、そのまま本番の運用方法と混同しないようにします。

関連：Next.jsとViteの違い／ホスティングの選び方。

＼ 最新情報をチェック ／