Vue.js

Vue.jsでリストの順序をユーザーが自由に並び替えられるようにしたい場合、ドラッグ＆ドロップの仕組みを導入するのが効果的です。

Vue.jsを使えば、フォーム入力欄に対してリアルタイムで文字数をカウントし、残りの入力可能文字数を表示する機能も簡単に実装でき

シンプルなトースト通知は便利ですが、実務では「複数の通知を同時に表示したい」「どこからでも呼び出したい」といったニーズ

Vue.jsを使えば、ユーザーに一時的なメッセージを表示する「トースト通知」も簡単に実装できます。本記事では、ボタンクリックなど

Vue.jsでは、クリック一つで開閉できるモーダルウィンドウも簡単に作成できます。本記事では、再利用性の高いモーダルコンポーネン

Vue.jsを使えば、大量のリストデータをページ単位で表示する「ページネーション機能」も簡単に実装できます。本記事では、1ページあ

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からの変更点まで整理します。