プログラミング Vue 3 の provide/inject が reactive で更新されない問題の解決法
Vue 3 の provide / inject は、親コンポーネントから子コンポーネントへ値を渡すための仕組みです。コンポーネントツリーをまたいで状態を共有できるため、グローバルストアを使うほどではない軽量なデータ共有に便利です。しかし、...
m1z0
プログラミング 
プログラミング Nuxt 3 で middleware が初回ロードで動かない原因と修正方法
Nuxt 3 でアプリケーションを構築していると、ルートごとにアクセス制御や処理を挟むために middleware を利用することが多くあります。しかし「初回ロード時に middleware が走らない」「SSR では効かない」といった問題...
プログラミング React 18 StrictMode で useEffect が2回実行される理由と対処法
React 18 以降、StrictMode を有効にしていると useEffect が「2回実行される」という挙動に驚いた開発者は少なくありません。特に、API へのリクエストやログ出力のような副作用が重複して起きると「バグではないか？」...
プログラミング Node.js の DEP（非推奨 API）警告を解消する：DEP0104 などと向き合う手順
Node.js を利用していると、ターミナルに以下のような警告を目にすることがあります。(node:12345) [DEP0104] DeprecationWarning: Some legacy API is deprecated and...
プログラミング React Suspense + lazy で隣接するコンポーネントがあるときの Hydration Mismatch 問題と回避法
React 18 以降では、Suspense と lazy を活用することでコード分割と非同期ロードを簡潔に実現できます。しかし、SSR (サーバーサイドレンダリング) と組み合わせたときに、Hydration Mismatch という厄介...
プログラミング Next.js / React でサーバーとクライアントで DOM 属性が異なり「Text content did not match」エラーになる原因と修正
Next.js を使ってアプリケーションを開発していると、Text content did not match というエラーに遭遇することがあります。これは React が サーバーサイドレンダリング (SSR) で生成した HTML と、...
プログラミング Nuxt 3 で runtimeConfig を useRuntimeConfig() で使うと @click が動かなくなるケースと原因
Nuxt 3 の useRuntimeConfig() をコンポーネント内で使うと、突如として @click やその他のイベントが発火しなくなるという報告が時々上がります。単純に “useRuntimeConfig を呼んだだけで動かなくな...
プログラミング .env ファイルが反映されない？Nuxt の環境変数ロードタイミングと prefix 問題
Nuxt 3 プロジェクトで .env ファイルを作成して環境変数を設定したのに、開発サーバーや本番デプロイで値が反映されず、undefined になってしまった経験はありませんか？特に process.env.MY_KEY や useRu...
プログラミング Nuxt 3 + Cloudflare Pages で whatwg-url パッケージ等のビルドエラー
Nuxt 3 を Cloudflare Pages にデプロイした際に発生する whatwg-url や tr46 の ENOTDIR エラーの原因と回避策を解説。バージョン固定、Nitro externals 設定、$fetch への移行など、安定デプロイのための実践的な対応方法を紹介。
プログラミング React Hydration Failed がブラウザ拡張 (extension) による script/tag の挿入で起きるケース
React SSR 環境で Hydration Failed が発生？実はブラウザ拡張が <head> や <body> にタグを挿入している可能性があります。原因特定の方法、suppressHydrationWarning の適切な使い方、クライアント専用レンダーでの回避策を解説。