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

技術ブログ更新しています。Next.js、railsあたりをメインに。

仕事はどうしてもプロジェクトの技術に縛られるので新しい機能とかのアップデートに自分でアプリ作ったり、ナレッジ化して習得しています。

日笠泰彰：過去の技術ブログ一覧

【Next.js 13を振り返る】App Router登場！フロントエンドの常識を再定義した革新的アップデート

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

https://zenn.dev/yasuhikasa/articles/284b425bb55a0a

Next.js App Router時代の設計論：Feature-Based × Server Firstで状態管理を最小化する

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

https://zenn.dev/yasuhikasa/articles/8df3eb981d7d42

モダンE2Eテストの決定版：Playwrightが従来のテスト自動化をどう変えたのか

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

https://zenn.dev/yasuhikasa/articles/27d7fdb1fa7ee0

Next.js (App Router) × Playwright で実現する、堅牢なE2Eテスト環境構築ガイド

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

https://zenn.dev/yasuhikasa/articles/11e741c8b8b869

Next.js App Router 時代に SWR を再評価する：インストールから実践的なキャッシュ戦略まで

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

https://zenn.dev/yasuhikasa/articles/23b06b13bd0105

【Next.js 16】Turbopack時代の幕開け？新機能と現実的な評価まとめ

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

https://zenn.dev/yasuhikasa/articles/cf9d2f2d77c014

SWRはもう不要？Next.js 16 "use cache" との棲み分けガイド

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

https://zenn.dev/yasuhikasa/articles/18688606e6f6d5

Next.js (App Router) で差をつける！モダンSEO対策完全ガイド - Qiita

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

https://qiita.com/hikasayasu/items/bacd4bf8e31c0294f305

Next.js App Routerがもたらす開発体験の変革｜エンジニア 日笠泰彰が徹底解説 - Qiita

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

https://qiita.com/hikasayasu/items/4abad2d33024a58f0faf

Ruby on Rails × Render.com：最短でセキュアにデプロイするための完全ガイド｜日笠泰彰| ITエンジニア

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

https://note.com/jazzy_gecko3968/n/nfc3bfdab439a

Next.js App Router時代Featured-baseのディレクトリ構造に学ぶ｜日笠泰彰｜日笠泰彰| ITエンジニア

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

https://note.com/jazzy_gecko3968/n/n71841ff36904

40歳、異業種からエンジニアへ。私が「コードを書くこと」に救いを見出した理由｜日笠泰彰| ITエンジニア

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

https://note.com/jazzy_gecko3968/n/nc5de150b8391