「frontend」タグのついた28記事

Composable をサーバーでも描画する構成に置いたときに壊れる書き方を扱います。window を呼び出し時点で読む形、onMounted に閉じ込めていない副作用、モジュールスコープに置いた状態がリクエスト間で漏れる問題を、実測した挙動とともに説明します。

状態とロジックをまとめて再利用する Composable の作り方を扱います。戻り値と引数の形、副作用の後片付けをどこに預けるか、呼べる位置の制約を、実装の挙動から説明します。

Core Web Vitals の 3 指標 (LCP・INP・CLS) の定義と閾値を押さえたうえで、計測結果の組み合わせから原因を絞り込む手順を解説します。INP がサーバー応答の遅さでは悪化しない理由、CLS が寸法未指定の遅延コンテンツで悪化する仕組みを扱います。

サーバーとの通信をどこに書くかを扱います。取り消しと競合状態の扱い、環境変数で接続先を切り替える方法とビルド出力に何が残るか、Nuxt の useFetch と $fetch の使い分けを扱います。

Nuxt 4 の土台を扱います。app/ 配下のディレクトリ規約、ファイル名から決まるルーティング、レイアウトの当て方、server/api のファイル名規約とメソッドの絞り方を実挙動で確かめます。

コンポーネントをまたいで状態を共有する Pinia を扱います。Option Store と Setup Store の違い、storeToRefs が必要になる理由、$patch と $subscribe の通知のタイミングを実測で確かめます。

props のバケツリレーを避ける provide と inject を扱います。値の探し方、既定値が使われない条件、InjectionKey による型付け、そしてテンプレートの記法では書けない DOM 操作をカスタムディレクティブへ寄せる方法を説明します。

defineProps と defineEmits で親子の境界を型として宣言する方法を扱います。Vue 3.5 で安定化した props の分割代入と、テンプレート参照の取得方法も含みます。

要素を DOM ツリーの別の場所へ描く Teleport と、非同期の準備が終わるまでの表示を 1 か所にまとめる Suspense を扱います。元の位置に何が残るか、fallback が出る条件、2 度目以降に戻らない理由を実測で説明します。

URL とコンポーネントを対応づけるルート定義を扱います。リンクとプログラムからの遷移、パラメータを含む動的ルート、レイアウトを共有する入れ子のルート、そして遅延ローディングとコード分割の現行の書き方までを実測で説明します。

Vue 3.5 の Composition API を土台に、リアクティビティの仕組みからコンポーネント設計、Vue Router、Pinia、Nuxt 4 までを全 20 章で体系化するガイド。script setup と TypeScript を前提に、なぜその書き方になるのかを各 API の設計意図から説明します。

イベントハンドラの書き方と修飾子、v-model による双方向のバインディングを扱います。ハンドラに括弧を付けるかどうかでイベントオブジェクトの渡り方が変わる仕組みも説明します。

自作コンポーネントに v-model を持たせる方法を扱います。props と emit の組を defineModel でまとめる書き方、値が親と子のどちらに置かれるか、複数の値を双方向にするときの名前の付け方、修飾子の受け取り方を説明します。

子コンポーネントの内部に親のマークアップを差し込むスロットを扱います。フォールバックが出る条件、スロットが渡されたかの判定、子の持つデータを親へ渡すスコープ付きスロット、defineSlots による型宣言までを扱います。

CSS セレクタの種類と結合子の違い、疑似クラスと疑似要素の区別、詳細度の計算方法を解説します。ID とクラスの重みの順序、全称セレクタと結合子が詳細度に寄与しないこと、カスケードが詳細度以外の何を見ているかまでを扱います。

属性のバインディング、クラスとスタイルの動的な切り替え、条件分岐、リスト描画を扱います。v-for の key に一意な値が必要な理由と、v-if と v-show の使い分けまで整理します。

要素の表示と非表示にアニメーションを付ける仕組みを扱います。クラスが付く順序、Vue が終わりを判定する方法、JavaScript で制御するときに done を待つ条件、リストの並べ替えに追従させる仕組みまでを実測で説明します。

ルート遷移の途中に割り込むガードを扱います。公式の 12 段の解決フローを実測で確かめ、return 形式と非推奨になった next()、meta の統合、無限リダイレクトの避け方までを説明します。

React・Vue・Tailwind CSS・shadcn/ui などフロントエンド開発に関するノートをまとめるドメインのハブ。UI 構築・スタイリング・コンポーネント設計を扱います。

CSS のボックスモデルを、コンテンツ・パディング・ボーダー・マージンの 4 領域と box-sizing による width の解釈の違いから解説します。背景がどこまで描かれるか、マージンの相殺がいつ起きるか、border-box をリセットで当てる定石までを扱います。

コンポーネントの生成から破棄までのフックを順序とともに整理します。DOM 操作をどこに書くか、後片付けをどこで行うかの判断を扱います。

値の変更が画面に反映される仕組みを ref と reactive の違いから解説します。再代入でリアクティブ性が失われる理由、分割代入が壊れる条件、toRefs が何を保つのかを扱います。

CSR・SSR・SSG・ISR の 4 つのレンダリングパターンを「どこで HTML を作るか」という一つの軸で整理します。それぞれの初回表示・鮮度・SEO・サーバー負荷のトレードオフと、要件からパターンを選ぶ手順を扱います。

ログイン処理を通して認証状態の持ち方を扱います。トークンを localStorage に置かない理由、httpOnly cookie とミドルウェアでの遷移の保護、ビルド成果物とホスティングの設定までを実挙動で確かめます。

宣言的 UI と命令的 UI の違いを、同じ画面を 2 通りで書き比べながら解説します。なぜ宣言的 UI で状態と表示の不整合が減るのか、それでも DOM を直接触る必要が残るのはどこか、どんな代償を払っているのかを扱います。

楽観的更新 (Optimistic Update) の仕組みを、成功を前提に UI を先へ進めてから失敗時にロールバックする流れで解説します。何が速くなり何は速くならないか、使ってよい場面と避けるべき場面、サーバー側バリデーションを省略できない理由を扱います。

create-vue で Vue 3 と TypeScript のプロジェクトを作る手順と、単一ファイルコンポーネントの 3 ブロック構成を扱います。対話で聞かれる機能の選び方と、生成されるディレクトリの役割まで整理します。

computed のキャッシュと watch の副作用を対比し、どちらを選ぶかの判断基準を示します。watchEffect の自動追跡と、非同期処理のクリーンアップまで扱います。