Tag: vuejs
35 items with this tag.
LiteratureNotes
Custom Directives - 低レベルDOM操作の再利用
Vue 3 の Custom Directives で、plain DOM element に対する低レベル DOM 操作を再利用する設計を整理する。directive hooks、binding 引数、function shorthand、component への適用制約をまとめる。
LiteratureNotes
Plugins - アプリ全体への機能注入
Vue 3 の Plugins で、app レベルの機能追加や依存注入をまとめて初期化する設計を整理する。install()、globalProperties、provide/inject、plugin の責務範囲をまとめる。
LiteratureNotes
Tooling - Vue開発環境とツールチェーン
Vue 3 の SFC 中心開発を支えるツール群を整理する。Vite, IDE, Devtools, TypeScript, lint, format, testing, 下位パッケージの役割を実務判断軸とともに記録する。
LiteratureNotes
Single-File Components - Vueコンポーネントの標準単位
Vue Single-File Components (SFC) の役割、ビルド時の変換、関心の分離の考え方、そして実務での位置づけを整理したノート。Vue 3 における `.vue` ファイル中心の開発体験を、Composition API 前提でまとめる。
LiteratureNotes
Routing - URLを状態として扱う画面遷移基盤
VueのRoutingの基本概念と、クライアントサイドルーティングがURLを状態として画面コンポーネントを切り替える仕組みを整理する。Vue Routerが抽象化する責務と、実務でRouting基盤が必要になる判断軸も記録する。
LiteratureNotes
State Management - 共有状態の設計とPiniaが必要になる理由
Vueにおけるstate managementの基本概念と、shared stateが複数コンポーネントにまたがるときに発生する設計課題を整理する。reactive() による簡易store、SSRでの注意点、Piniaが公式推奨となる理由を記録する。
LiteratureNotes
Testing - Vueアプリの品質を守る3層戦略
VueアプリケーションにおけるTestingの目的と、Unit / Component / End-to-End の3層戦略を整理する。Vitest、Vue Test Utils、Cypress、Playwright の使い分けと、Component Testingで重視すべきblackboxな観点を記録する。
LiteratureNotes
Server-Side Rendering (SSR) - 二相実行モデルとHydrationの制約
VueにおけるServer-Side Renderingの基本構造と、SSRが初回表示速度やSEOに効く理由を整理する。renderToString、hydration、universal code、SSGとの違い、singleton stateやhydration mismatchなどSSR特有の制約も記録する。
LiteratureNotes
Using Vue with TypeScript - 型付き開発基盤の全体像
Vue 3 で TypeScript を利用する際の開発基盤全体像を整理する。Vite と型チェックの分業、SFC と template への型適用、tsconfig の要点、Composition API を中心とした実務上の前提をまとめる。
LiteratureNotes
TypeScript with Composition API - 推論中心の型設計
Composition API で TypeScript を使う際の中核パターンを整理する。props と emits の契約定義、ref / reactive / computed の推論、DOM・inject・template ref といった境界での明示型付けをまとめる。
LiteratureNotes
Slots - 親が描画責務を差し込むコンポーネント拡張ポイント
Vue.js の Slots によるコンポーネント拡張ポイントを整理する。default slot, named slots, scoped slots, renderless component の責務分担と、Composition API 時代の composable との関係をまとめる。
LiteratureNotes
Provide / Inject - 深い子孫へ文脈依存を直接渡す仕組み
Vue.js の Provide / Inject による dependency 共有を整理する。prop drilling の解消、reactive な共有、更新責務の置き方、app-level provide、Symbol key による衝突回避までをまとめる。
LiteratureNotes
Async Components - 必要時にコンポーネントを遅延ロードする
Vue.js の Async Components による lazy loading を整理する。defineAsyncComponent, dynamic import, loading/error state, lazy hydration, Suspense との関係、および実務での採用判断をまとめる。
LiteratureNotes
Composables - 状態を持つロジックの再利用
Vue 3 の Composables で、状態・副作用・ライフサイクル依存ロジックを再利用する設計を整理する。Composition API における責務分解、reactive input の受け方、返り値設計、他手法との比較をまとめる。
LiteratureNotes
Event Handling - イベント処理と modifier
Vue.js の Event Handling における handler の書き分け、DOM Event の受け渡し、event modifier・key modifier・mouse button modifier の役割と実務上の判断軸を整理する。
LiteratureNotes
Form Input Bindings - v-model とフォーム状態同期
Vue.js の Form Input Bindings における v-model の基本挙動、入力種別ごとの状態同期、value binding、modifier、IME や型変換の実務上の注意点を整理する。
LiteratureNotes
Lifecycle Hooks - コンポーネントの時間軸と副作用配置
Vue.js の Lifecycle Hooks におけるコンポーネントの時間軸、onMounted / onUpdated / onUnmounted の役割、hook 登録タイミング、値監視との役割分担を整理する。
LiteratureNotes
Watchers - state変化に反応する副作用管理
Vue.js の Watchers における watch / watchEffect の役割差、監視対象の指定、deep・immediate・once・cleanup・flush timing・停止条件など、副作用管理の実務判断を整理する。
LiteratureNotes
Template Refs - DOM参照と子コンポーネント参照
Template ref を使って DOM 要素や子コンポーネントの参照を取得する方法と、宣言的UIを崩しすぎずに使うための判断軸を整理する。useTemplateRef、component ref、v-for 内 ref、function ref の使い分けを扱う。
LiteratureNotes
Component Basics - 親子コンポーネント通信の基礎
Vue コンポーネントを再利用可能な UI 部品として定義し、親子間で props・emit・slot を使って責務分離する基本設計を整理する。dynamic components と SFC 前提の実務判断も扱う。
LiteratureNotes
Component Registration - グローバル登録とローカル登録
Vueコンポーネントを利用可能にする登録方法として、global registration と local registration の違い、および <script setup> における実務的な使い方を整理する。名前付け規則と保守性の観点も含めて記録する。
LiteratureNotes
Props - 親子コンポーネント間の入力契約
Vue 3 における props の宣言、受け渡し、一方向データフロー、バリデーションを整理する。<script setup> と TypeScript を前提に、保守性を意識した props 設計の実務判断も記録する。
LiteratureNotes
Events - 子から親への通知契約
Vue 3 における component events の発火、受信、payload 受け渡し、defineEmits による契約定義を整理する。props と対になる子→親通信として、TypeScript ベースの実務的な設計判断も記録する。
LiteratureNotes
Component v-model - 親子双方向バインディングの契約
Vue 3.4以降の defineModel() を中心に、コンポーネント v-model の実体である prop と event の契約、複数 v-model、modifier の扱いを整理する。
LiteratureNotes
Fallthrough Attributes - コンポーネント外部属性の着地点
props や emits で消費されない属性が root 要素や下位コンポーネントへどう継承されるか、inheritAttrs: false と $attrs / useAttrs() による明示制御を整理する。
LiteratureNotes
Vue.js Reactivity Fundamentals - リアクティビティの基礎
Vue 3のリアクティビティシステムの基礎。ref()による状態宣言、.valueの仕組み（getter/setterによる変更検知）、<script setup>との関係、Deep Reactivity、reactive()の制限、DOM更新タイミング（nextTick）、refのアンラップルールを扱う。
LiteratureNotes
Computed Properties - 派生値とキャッシュ
Vue 3 の computed properties について、派生値の定義、methods との違い、キャッシュ、writable computed、設計上の注意点を整理したノート。
LiteratureNotes
Class and Style Bindings - 状態に応じた見た目の制御
Vue 3 における class と inline style の動的バインディングについて、object / array 構文、computed との組み合わせ、component への継承、ベンダープレフィックスの扱いを整理したノート。
LiteratureNotes
Conditional Rendering - 条件による描画制御
Vue 3 の conditional rendering について、v-if / v-else-if / v-else / template v-if / v-show の違いと、実務での使い分けを整理したノート。
LiteratureNotes
List Rendering - 配列とオブジェクトの反復描画
Vue 3 の list rendering について、v-for の基本、object/range/template への適用、v-if との関係、key の役割、配列更新と filtered/sorted 表示の設計方針を整理したノート。
LiteratureNotes
Vue.js Creating an Application - アプリの起動フロー
Vueアプリケーションの起動に必要な概念。アプリケーションインスタンス、ルートコンポーネント、マウント、アプリ設定、複数インスタンス構成を扱う。ViteプロジェクトとCDN版の違い（In-DOMテンプレート制約）も含む。
LiteratureNotes
Vue.js Template Syntax - テンプレート構文
Vueのテンプレート構文の全体像。テキスト補間、v-html、v-bindによる属性バインディング、テンプレート内JS式、ディレクティブの構造（引数・動的引数・修飾子）を扱う。
LiteratureNotes
Vue.js Quick Start - プロジェクト作成と環境構築
Vue.js 3プロジェクトの作成方法。npm create vue@latestによるVite + SFC構成のプロジェクト生成、CDN版の3つの使い方（Global Build / ES Module / Import Maps）、ビルドなし環境でのモジュール分割を扱う。
LiteratureNotes
Vue.js Introduction - 基礎概念
Vue.js 3の全体像。宣言的レンダリング・リアクティビティの2つのコア機能、プログレッシブフレームワークの設計思想、SFCの構造、Options APIとComposition APIの比較を扱う。
StructureNotes
Vue.js 学習ロードマップ
Vue.js 3（Composition API + TypeScript）の学習ロードマップ。Vueビギナーがゼロから実務レベルの開発力を身につけることを目的とする。