Notes
Rust・Go・TypeScriptを中心に、Web開発の実践知識をまとめたコンテンツ一覧
Articles
TypeScript inferの使い方 — 条件型で型の中身を取り出す仕組みと実務パターン
inferが必要になる場面 — 型情報を動的に取り出す課題 TypeScriptで関数やPromise、配列などを扱うとき、「この関数の戻り値の型だけ取り出したい」「Promiseの中身の型を参照した …
TypeScript Mapped Typesの仕組みと実践パターン｜型変換を自在に操る技術
TypeScriptのコードベースが大きくなると、似たような型定義を何度も書く場面が増えます。「全プロパティをオプショナルにした型」「読み取り専用にした型」「特定のキーだけ抽出した型」——こうした派生 …
TypeScript Conditional Typesの完全ガイド｜型レベル条件分岐の構文・infer・実践パターン
TypeScriptで高度な型定義を行う際、避けて通れない機能がConditional Types（条件付き型）です。三項演算子に似たT extends U ? X : Yという構文を使い、型の世界で …
Nuxt 3にOpenTelemetryを導入する完全ガイド｜モジュール比較から本番運用まで
Nuxt 3はSSR（サーバーサイドレンダリング）とCSR（クライアントサイドレンダリング）が混在するフルスタックフレームワークです。サーバー側のNitroとブラウザ側のVueアプリが連携して動作する …
Nuxt Test Utils入門｜v4対応セットアップからUnit Test・E2Eテストまで
Nuxtアプリケーションでは Auto Import やプラグイン、ミドルウェアといった独自のランタイム機能が多く組み込まれています。これらの機能はVitestやJest単体のテスト環境では正しく動作 …
Vue 3.6の新機能を徹底解説｜Vapor ModeとAlien Signalsで変わるフロントエンド開発
Vue.jsで大規模SPAを運用していると、バンドルサイズの肥大化やリアクティビティ処理のオーバーヘッドが徐々に表面化します。Vue 3.6は「Vapor Mode」と「alien-signals」と …
Nuxtのバンドルサイズを効率的に削減する方法｜分析・最適化・監視の実践ガイド
Nuxtアプリケーションの表示速度が遅い原因の多くは、JavaScriptバンドルの肥大化にあります。バンドルサイズが大きいとダウンロード・パース・実行に時間がかかり、Core Web Vitals …
Vue3 Teleportの使い方 — モーダル・通知・ドロップダウンを正しく実装する全手法
モーダルやドロップダウンを実装したとき、z-index が意図どおりに効かず表示が崩れた経験はないでしょうか。原因の多くは CSS のスタッキングコンテキストにあります。Vue3 の組み込みコンポーネ …
Nuxt Imageで画像を最適化する方法 ― 導入からCore Web Vitals改善まで
Webページの表示速度を左右する最大の要因は画像です。HTTP Archiveのデータによると、Webページの総転送量のうち画像が占める割合は約40〜50%に達します（出典: HTTP …
Vue Vapor Modeとは？仮想DOMを排除した次世代レンダリングの全貌と導入手順
Vue.jsのアプリケーションが重い。レンダリングのたびに仮想DOMの差分計算が走り、大量コンポーネントを抱えるページではパフォーマンスがボトルネックになる――そんな課題に正面から応えるのがVapor …