Vue.js

Vue 3でリアルタイムの文字カウンターを作る方法を解説します。lengthが絵文字や一部の漢字でずれる理由、Intl.Segmenterによる数え方、日本語入力中も更新する方法、maxlengthに頼らない上限の設計、読み上げ対応、文字数とバイト数の違いまで動くコードで紹介します。

Vue 3でトースト通知を作る方法を解説します。どこからでも呼べるuseToast、複数同時表示、読み上げソフトに伝えるrole=statusとrole=alert、ホバーで一時停止、TransitionGroupでのアニメーション、続けて通知したときにタイマーが干渉しない作り方まで動くコードで紹介します。

Vue 3でアクセシブルなモーダルウィンドウを作る方法を解説します。Teleportでbody直下に描画する理由、スロットの中のemitが動かない落とし穴、Escキーとフォーカスの管理、HTML標準のdialog要素との比較、確認ダイアログとしての使い方まで動くコードで紹介します。

Vue 3でページネーション付きのリストを作る方法を解説します。computedによる表示範囲の計算、ページ番号を省略記号でまとめる方法、データが減ったときの対処、aria-currentによるアクセシビリティ、ページサイズの切り替えとURLクエリの同期まで動くコードで紹介します。

Vue 3で検索フィルター付きのリストを作る方法を解説します。日本語入力の変換中も絞り込む方法、全角・半角やひらがな・カタカナの違いを吸収する正規化、複数項目の横断検索、件数の読み上げ、デバウンスまで動くコードで紹介します。

Vue 3で入力フォームのバリデーションを実装する方法を解説します。触れた項目と送信後にだけエラーを出す設計、送信ボタンを無効にしない理由、aria-invalidとlabelによるアクセシビリティ、ブラウザ標準の検証との関係、非同期の重複チェックの考え方まで動くコードで紹介します。

Vue 3でキーボード操作にも対応したタブ切り替えUIを作る方法を解説します。buttonとrole=tab、aria-selectedの付け方、矢印キーの操作、KeepAliveによる状態の保持、URLクエリとの連動まで動くコードで紹介します。

Vue Router 4でネストしたルートと動的ルートを整理する方法を解説します。子ルートのパス規則、レイアウトの切り替え、同じコンポーネントが再利用される落とし穴、props:true、正規表現パラメータ、404ページとモジュール分割まで動くコードで紹介します。

Vue 3のComposable関数の作り方を、状態を呼び出しごとに持つ仕組み、onUnmountedによる後始末、共有状態の置き方から解説します。ルールを引数で受け取るuseFormと、URLの変化に追従するuseFetchを動くコードで紹介します。

Vue 3でAPI取得の状態をComposableにまとめる方法を解説します。idle・loading・success・errorをstatusで一元管理し、URLの変更で再取得、AbortControllerで古いリクエストを中止、空データやHTTPエラーの扱いまで動くコードで整理します。

Vue 3のprovide/injectの使い方を、prop drillingを避ける目的から解説します。refと更新関数を提供する安全な設計、readonlyによる書き換え防止、デフォルト値、Symbolキー、props・emit・Piniaとの使い分けまで動くコードで整理します。

Vue Routerのmeta情報を使って、ログインや権限による画面の出し分けとページタイトルの更新を実装する方法を解説します。nextを使わない戻り値方式のガード、metaの親子マージ、RouteMetaの型定義、クライアント側ガードの限界までまとめます。

Vue 3でなめらかに開閉するアコーディオンを作る方法を解説します。TransitionのJavaScriptフックで高さを動かす方法と、テンプレート参照（ref）で高さを測る方法を比較し、heightアニメーションの注意点やprefers-reduced-motionへの配慮まで紹介します。

Vue 3のwatchとwatchEffectの違いを、依存の指定・初回実行・旧値・追跡範囲で整理します。同じ処理を両方で書いて比較し、awaitの後の値が追跡されない落とし穴、onCleanup、flush、停止の方法、使い分けの指針まで動くコードで解説します。

Vue 3で項目を追加・削除できる動的フォームを作る方法を解説します。固有idをkeyにする理由、項目ごとのエラー表示、上限数と最後の1件を残す設計、VeeValidateのuseFieldArrayとtoTypedSchemaによる実装まで動くコードで紹介します。

Vue 3のv-modelの仕組みを解説します。ネイティブ要素での展開とIME変換中の違い、コンポーネントでのmodelValueとupdate:modelValue、defineModelによるカスタム実装、v-modelの引数とカスタム修飾子、Vue 2からの変更点まで整理します。