Vue 3・TypeScriptでよく使う用語集
Vue 3とTypeScriptを学習している中で、よく登場する用語を自分なりに整理しました。
初学者の方や、これからVue 3・TypeScriptを学ぶ方の参考になれば幸いです。
Composition API
概要
Vue 3で追加された新しい記述方法です。
従来のOptions APIではdata、methods、computedなど機能ごとにコードを書く必要がありましたが、Composition APIでは関連する処理を1つにまとめて記述できます。
特徴
- ロジックを機能単位で管理できる
- 再利用しやすい
- TypeScriptとの相性が良い
ref
概要
リアクティブ（変更を検知して画面を更新する）な値を管理するためのAPIです。
const count = ref(0)
count.value++
値を変更すると画面も自動的に更新されます。
利用例
- カウンター
- 入力フォーム
- ボタンのON/OFF状態
reactive
概要
オブジェクト全体をリアクティブに管理するためのAPIです。
const user = reactive({
name: "山田",
age: 20
})
refとの違い
ref
単一の値を管理する場合に利用します。
const name = ref("")
reactive
オブジェクト全体を管理する場合に利用します。
const user = reactive({
name: "",
age: 20
})
computed
概要
既存の値から新しい値を計算するためのAPIです。
const total = computed(() => price.value * quantity.value)
依存する値が変わると、自動的に再計算されます。
利用例
- 合計金額
- フィルター結果
- 件数表示
watch
概要
値の変更を監視し、変更されたタイミングで処理を実行します。
watch(keyword, () => {
})
利用例
- API呼び出し
- バリデーション
- ログ出力
Props
概要
親コンポーネントから子コンポーネントへデータを渡す仕組みです。
親
↓
子
<UserCard :name="userName" />
Emit
概要
子コンポーネントから親コンポーネントへイベントを通知する仕組みです。
子
↑
親
emit("save")
親側
<UserForm @save="saveUser" />
Propsとの違い
| Props | Emit |
|---|---|
| 親 → 子へデータを渡す | 子 → 親へイベントを通知する |
Provide / Inject
概要
離れたコンポーネント同士でデータを共有する仕組みです。
通常はPropsを何段階も渡す必要があります。
親
↓
子
↓
孫
Provide / Injectを利用すると
親
↓
孫
のように直接データを取得できます。
メリット
- Propsのバケツリレーを防げる
- コンポーネント構造がシンプルになる
InjectionKey
概要
Provide / Injectで利用するキーに型を付けるための仕組みです。
export const userKey =
Symbol() as InjectionKey<User>
TypeScriptで安全にデータを扱えます。
Symbol
概要
重複しない一意の値を作成するJavaScriptの機能です。
const key = Symbol("user")
Provide / Injectのキーとして利用されることが多いです。
Symbol.for()
概要
同じ名前であれば同じSymbolを取得します。
const key = Symbol.for("user")
利用されるケース
- HMR利用時
- ライブラリ開発
- 複数モジュールでキーを共有したい場合
コンポーネント分割
概要
画面を小さな部品へ分割する設計方法です。
Header
Sidebar
Button
Modal
Footer
メリット
- 再利用しやすい
- 保守しやすい
- 可読性が向上する
Type
概要
TypeScriptで型を定義する方法です。
type User = {
id: number
name: string
}
Interface
概要
オブジェクトの構造を定義するための仕組みです。
interface User {
id: number
name: string
}
Typeとの違い
| 項目 | interface |
type |
|---|---|---|
| 主な用途 | オブジェクトやクラスの構造を定義 | 幅広い型を定義できる |
| 継承 |
extendsで継承できる |
&（Intersection型）で型を組み合わせられる |
| Union型 | × | ○ |
| Intersection型 | ×（直接は不可） | ○ |
| 宣言のマージ | ○（同名ならマージされる） | ×（エラーになる） |
| Mapped Types | × | ○ |
v-model
概要
フォーム入力とデータを双方向に同期するディレクティブです。
<input v-model="name">
入力内容が自動的にデータへ反映されます。
defineProps
概要
Composition APIでPropsを定義するためのマクロです。
const props = defineProps<Props>()
defineEmits
概要
Composition APIでEmitを定義するためのマクロです。
const emit = defineEmits<{
(e: "save"): void
}>()
defineExpose
概要
親コンポーネントから利用できるメソッドやプロパティを公開するためのマクロです。
親コンポーネントがref経由で子コンポーネントを操作したい場合に利用します。
onMounted
概要
コンポーネントが画面に表示された後、一度だけ実行されるライフサイクルフックです。
利用例
- API取得
- 初期データの読み込み
- 初期化処理
onUnmounted
概要
コンポーネントが破棄される直前に実行されます。
利用例
- タイマー解除
- イベントリスナー解除
nextTick
概要
DOMの更新が完了した後に処理を実行するためのAPIです。
画面更新後の要素を操作したい場合に利用します。
Teleport
概要
コンポーネントを現在のDOM階層とは別の場所へ描画する機能です。
利用例
- モーダル
- ダイアログ
- ツールチップ
Suspense
概要
非同期コンポーネントの読み込み中にローディング画面などを表示するための機能です。
Pinia
概要
Vue公式の状態管理ライブラリです。
コンポーネント間で共有したい状態を一元管理できます。
利用例
- ログインユーザー情報
- テーマ設定
- ショッピングカート
Vue Router
概要
Vueアプリケーションの画面遷移を管理するライブラリです。
/login
/users
/posts
のようなルーティングを実現できます。
Vite
概要
Vue公式でも推奨されている高速なビルドツールです。
特徴
- 起動が高速
- ビルドが高速
- HMRに対応
HMR（Hot Module Replacement）
概要
ページ全体を再読み込みせず、変更したモジュールだけを更新する機能です。
メリット
- 状態を維持したまま変更を反映できる
- 開発効率が向上する
ESLint
概要
コードの書き方やルール違反をチェックするLinterです。
TypeScriptと組み合わせるメリット
型情報も利用して静的解析できるため、
- 未使用変数
- 型安全でないコード
-
anyの過度な利用
などを検出できます。
Prettier
概要
コードを自動で整形してくれるツールです。
チーム開発ではESLintと組み合わせて利用されることが多く、コードスタイルを統一できます。
Vercel
概要
フロントエンドアプリケーションを簡単にデプロイできるクラウドサービスです。
GitHubと連携することで、リポジトリへPushするだけで自動デプロイできます。
まとめ
Vue 3・TypeScriptでは、リアクティブな状態管理、コンポーネント間のデータ受け渡し、型安全性など、多くの重要な概念があります。
最初は覚えることが多く感じますが、実際にアプリケーションを作りながら学ぶことで理解が深まります。私自身もVue 3とTypeScriptを用いたアプリ開発を通じて、各APIや仕組みへの理解を深めています。
今後も学習を継続し、理解した内容を整理しながらアウトプットしていきたいと思います。