Frontend on たかおの解説

Tailwind CSS v4.0リリースとCSSベース設定への完全移行

Thu, 05 Feb 2026 00:00:00 +0900

はじめに

Tailwind CSS v4.0 は JavaScript ベースの設定から CSSファーストアーキテクチャ への大きな転換点です。tailwind.config.js は廃止され、デザイントークンはすべて CSS 内の @theme で定義します。本リリースでは Lightning CSS を統合し、CSS ネスティングや @layer といったモダンCSS機能をフル活用します。本記事では v3 からの移行手順を中心に解説します。

Next.js 15正式リリース後の変更点と実運用ベストプラクティス

Sun, 05 Oct 2025 00:00:00 +0900

はじめに

Next.js 15 は React 19 サポート、再設計されたキャッシュモデル、非同期リクエスト処理 API の刷新を特徴とする安定版リリースです。fetch リクエストと GET Route Handler のデフォルトが キャッシュなし に変更され、挙動の予測可能性が大幅に向上しました。本記事ではプロダクション移行に必要な変更点を網羅します。

Next.js App Routerのキャッシュ機構を整理する

Thu, 10 Apr 2025 00:00:00 +0900

はじめに

Next.js の App Router は、静的・動的レンダリングを細かく制御するための非常に洗練されたキャッシュ機構を備えています。

しかし、キャッシュの種類が多く、それぞれ「どこで」「何を」「どれくらいの期間」保持するのかが直感的に理解しづらいため、「データが更新されたはずなのに古い画面が表示されたままになる」「意図しないAPIコールが発生してパフォーマンスが低下する」といった課題が多々発生します。

View Transitions APIによる滑らかなページ遷移アニメーション

Sat, 05 Apr 2025 00:00:00 +0900

はじめに

WebサイトやWebアプリケーションにおける「ページ遷移時のアニメーション」は、ユーザー体験（UX）を向上させる重要な要素です。

これまで、画面と画面を滑らかに繋ぐトランジションを実現するためには、Next.jsなどのフレームワークや、Framer Motion、GSAPといった複雑なJavaScriptアニメーションライブラリを利用し、要素のフェードアウトやマウント・アンマウントを制御する必要がありました。

React 19正式リリースと実践的な新機能ガイド

Wed, 05 Mar 2025 00:00:00 +0900

はじめに

React 19は、フロントエンド開発のパラダイムを大きく変える重要なアップデートです。

これまでNext.jsなどのフレームワーク機能として先行提供されていた React Server Components (RSC) や、データ更新とフォーム送信を劇的に簡素化する Actions API が、ついにコアライブラリの安定版機能として統合されました。