site iconKoei's Digital Garden

Archive

Vue.js Introduction - 基礎概念

3 min read

Vue.js Introduction - 基礎概念

ロードマップ: Vue.js学習ロードマップ

What（何についてか）

VueはUI構築用のJavaScriptフレームワーク。標準HTML・CSS・JSの上に構築され、宣言的レンダリングとリアクティビティを提供する。

Why（なぜ必要か）

  • 宣言的レンダリング: JSの状態に基づいてHTML出力を宣言的に記述できる。手動のDOM操作が不要になる
  • リアクティビティ: 状態変更を自動検知してDOMを効率的に更新する。document.getElementById() での手動書き換えが不要
  • プログレッシブ: 小規模（HTMLの強化）から大規模（SPA/SSR）まで段階的に導入可能。どの規模でも核心の知識は共通

How（どう動くか）

2つのコア機能

graph LR
    A["JavaScript State"] -->|Declarative Rendering| B["Template (HTML)"]
    A -->|Reactivity| B
    B -->|User Action| A
  1. 宣言的レンダリング: テンプレート構文で状態 → HTML出力を記述
  2. リアクティビティ: 状態変更を自動追跡 → DOM更新

プログレッシブフレームワーク

graph TB
    A["HTMLに直接埋め込み<br/>(ビルド不要)"] --> B["Web Components"]
    B --> C["SPA"]
    C --> D["SSR / SSG"]
    C --> E["Desktop / Mobile"]

規模に応じた柔軟な導入が可能。いずれの場合も基礎知識は共通。

Single-File Components (SFC)

.vue ファイルに3つのブロックをカプセル化：

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
 
<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>
 
<style scoped>
button { font-weight: bold; }
</style>
ブロック役割
<script setup>ロジック（状態・関数）
<template>HTMLテンプレート
<style scoped>コンポーネント限定CSS

scoped を付けるとCSSがそのコンポーネントにだけ適用される。

API Styles

項目Options APIComposition API
状態の定義data() の中ref() / reactive() で直接
関数の定義methods の中普通の関数として直接
ライフサイクルmounted() 等onMounted() 等（import必要）
this必要不要
コード構成オプション種別ごとロジック単位でまとめられる
TypeScript相性普通抜群

本格的なアプリ開発には Composition API + SFC が推奨。

Key Concepts

用語説明
宣言的レンダリング状態に基づいてHTMLを宣言的に記述する仕組み
リアクティビティ状態変更を自動検知してDOMを更新する仕組み
SFC.vueファイルでロジック・テンプレート・スタイルを1つにまとめる形式
プログレッシブFW小規模から大規模まで段階的に導入できる柔軟性
<script setup>Composition APIを簡潔に書くためのSFC構文。コンパイル時変換でboilerplate削減
scopedCSSをそのコンポーネントにだけ適用する属性

Graph View

Backlinks