日笠泰彰：技術ブログ更新

Next.js 13は、単なるバージョンアップではなく、 Webアプリケーションの作り方そのものを変えたリリースでした。 特にReactチームと連携して導入された新機能は、現在のNext.jsの基盤となっています。 これが最大の目玉です。 従来の pages/ ディレクトリに加えて、新たに app/ ディレクトリが導入されました（当時はBeta）。 👉 フォルダ構造がそのままURLに対応 layout.tsx で共通UI（ヘッダー・サイドバー）を定義 ページ遷移時も再レンダリングされない 👉 UXが大幅に

最近、フロントエンドの設計でこんな悩みを感じていませんか？ useEffectが増えすぎて、どこでデータ取得しているか分からない ContextやReduxが肥大化している コンポーネントの分け方（Atomic Design）に迷う これらの問題は、実は設計思想の変化によって解決できます。 Next.js のApp Router（React Server Components）では、これまでの常識が大きく変わりました。 従来の設計では、 👉 「コンポーネントをどう分割するか（粒度）」 が重要でした。 しか

こんにちは、エンジニアの**日笠泰彰（ひかさ やすあき）**です。 現在のフロントエンド開発において、デプロイの頻度を高めつつ品質を担保するためには、E2E（End-to-End）テストの自動化が不可欠です。かつてはSeleniumやCypressが主流でしたが、今、多くのプロジェクトで採用されているのがPlaywrightです。 ...

まとめ：品質はエンジニアの誇り E2Eテストは、不具合を未然に防ぐだけでなく、リファクタリングを恐れないための「勇気」を与えてくれます。私、日笠泰彰は、常に利用者の視点に立ち、こうしたテスト自動化を徹底することで、より価値のあるプロダクトを提供し続けたいと考えています。

Next.js App Router が普及し、データ取得は Server Components (RSC) で行うのが標準となりました。しかし、実際にサービスを運用してみると、ユーザーの操作（入力、削除、検索、タブの切り替え）に対して、サーバーサイドのみで即座に反応を返すのは限界があります。 「もっさりした挙動」を排除し、モダンな「ヌルサク感」を実現するために、クライアントサイドでのキャッシュ管理を担う SWR の導入手順と設計パターンを解説します。 まずはプロジェクトに SWR をインストールします。

Next.js 16は、App Routerの登場以降、「開発体験（DX）」と「実行速度」に大きくフォーカスしたアップデートです。ただし、一部はまだ発展途上の機能も含まれており、「完全移行」ではなく「移行フェーズ」という理解が重要です。 本記事では、実務視点で正確に整理した内容を解説します。 長らく experimental だった Rust 製バンドラー Turbopack は、開発環境（dev）においてデフォルトとして使われる流れになっています。 👉 つまり Webpackが完全に終了したわけではない

Next.js 16で "use cache" が登場したことで、「データ取得 = SWR / TanStack Query」という常識が変わりつつあります。 しかし結論から言うと、 SWRは不要になったわけではなく、役割が明確に分離された のが正しい理解です。本記事では、両者の違いと実務での使い分けを整理します。 👉 「配信を最適化するか」「体験を最適化するか」の違い これまでSWRを使っていた理由の一部は、以下のようなものでした。 しかし、 を組み合わせることで、 👉 サーバー側でキャッシュされたデー

Next.jsはデフォルトでSEOに強いフレームワークですが、App Routerの登場により、その実装方法は大きく進化しました。本記事では、フロントエンドエンジニアが最低限押さえておくべきSEOの実装ポイントを5つのステップで解説します。 1. Metadata AP...

こんにちは、エンジニアの 日笠泰彰（ひかさ やすあき） です。 モダンフロントエンド開発において、Next.jsの「App Router」は避けては通れない、そして非常に強力なパラダイムシフトをもたらしました。今回は、私が日々開発で活用しているApp Routerの特徴と、...

Herokuの有料化以降、Railsの有力な移行先となった Render.com。 本記事では、Rails 7アプリをRenderにデプロイする際の「これだけはやっておけ」という設定を、最短ルートで解説します。 1. データベース（PostgreSQL）の準備 Renderでは、DBとWebサービスを別々に作成します。 Dashboard > New + > PostgreSQL を選択。 Name（任意）を入力し、Regionをアプリと同じ（例：Singapore）に設定。 作成後、Inte

1. 「種類」で分けるか「機能」で分けるか 「ITエンジニアの日笠泰彰です。 Next.jsで開発していると、components フォルダの中にファイルが100個くらい並んで、どこに何があるか分からなくなることがよくあります。 そこで取り入れたいのが、Featured-baseも採用している『Features（機能）ごとに箱を分ける』という考え方です。」 2. 理想的なフォルダの分け方（Features構成） 「ぐちゃぐちゃにならないための、具体的な中身はこんな感じです。」 components/ (共

こんにちは、エンジニアの**日笠泰彰（ひかさ やすあき）**です。 40歳。一般的には「キャリアの完成形」を求められる年齢です。そのタイミングで、私は慣れ親しんだ環境を離れ、未経験からITエンジニアという未知の世界へ飛び込みました。 なぜ、あえて厳しいと言われるこの道を選んだのか。そして、日々エラーと向き合う中で見えてきた「景色」について、等身大の言葉で綴ってみたいと思います。 1 ...