<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[akfm_satoさんのフィード]]></title><description><![CDATA[Zennのakfm_satoさん（@akfm）のRSSフィードです]]></description><link>https://zenn.dev/akfm</link><image><url>https://static.zenn.studio/user-upload/avatar/9e3861d78f.jpeg</url><title>akfm_satoさんのフィード</title><link>https://zenn.dev/akfm</link></image><generator>zenn.dev</generator><lastBuildDate>Mon, 10 Aug 2026 07:47:39 GMT</lastBuildDate><atom:link href="https://zenn.dev/akfm/feed" rel="self" type="application/rss+xml"/><language><![CDATA[ja]]></language><item><title><![CDATA[ユーザーストレスを低減するローディング体験の4原則]]></title><description><![CDATA[昨今AI Agentの進化は凄まじく、ある程度AI Agent任せでもそれなりに良いUIが実装できるようになってきました。一方UX[1]を細かく作り込むには、AI Agentは明確な指示を必要とします。特にローディング体験[2]は細かい指示がなくともAI Agentがある程度よしなに実装してくれますが、筆者の理想とするような作り込みまでしてくれることはありません。これはおそらくモデルやツールの性能的な問題ではなく、プロンプトやルールを通じて行う目標設定の問題が大きいと筆者は考えています。AI Agentは実行に特化したツールであるため、明確な目標設定は人間側の責務であり、今後もしばらくは...]]></description><link>https://zenn.dev/akfm/articles/better-loading-ux</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/better-loading-ux</guid><pubDate>Sun, 10 May 2026 01:07:34 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--MLWPKONf--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2583%25A6%25E3%2583%25BC%25E3%2582%25B6%25E3%2583%25BC%25E3%2582%25B9%25E3%2583%2588%25E3%2583%25AC%25E3%2582%25B9%25E3%2582%2592%25E4%25BD%258E%25E6%25B8%259B%25E3%2581%2599%25E3%2582%258B%25E3%2583%25AD%25E3%2583%25BC%25E3%2583%2587%25E3%2582%25A3%25E3%2583%25B3%25E3%2582%25B0%25E4%25BD%2593%25E9%25A8%2593%25E3%2581%25AE4%25E5%258E%259F%25E5%2589%2587%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[ポップコーンUIとReact]]></title><description><![CDATA[ページアクセス時に複数のローディングスピナーがランダムに表示され、徐々にコンテンツに置き換わっていくような体験に遭遇したこと、もしくは実装した経験はあるでしょうか？ReactチームはこのようなUIを、ポップコーンが弾ける様子に例えてポップコーンUIと揶揄しています。
このようなUIはユーザー体験として好ましくありませんが、よくみられるUIでもあります。Reactにおいて、コンポーネント内でデータフェッチを扱う方法は様々ありますが、複数のコンポーネントでローディング状態をハンドリングしてしまうとポップコーンUIになりがちです。
開発者が意図してより良い体験を実装すべきとも考えられますが、単...]]></description><link>https://zenn.dev/akfm/articles/popcorn-ui-anti-pattern</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/popcorn-ui-anti-pattern</guid><pubDate>Fri, 06 Mar 2026 06:00:37 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--lu4tUKbW--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2583%259D%25E3%2583%2583%25E3%2583%2597%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%25B3UI%25E3%2581%25A8React%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Next.js Cache回想]]></title><description><![CDATA[!
この記事はJSConf JP 2025で発表した内容を、記事として執筆しなおしたものです。

Next.jsは従来より、デフォルトで高いパフォーマンスを実現するフレームワークであることを重視してきました。App RouterにおいてもSSR・Streaming・Cacheなど様々な最適化により、高いパフォーマンスの実現を目指してきました。しかし一方で、積極的なCache活用や複雑すぎるCacheの影響範囲は、開発者に多くの混乱をもたらしました。
v16で導入されたCache Componentsは、Next.jsのCacheのメンタルモデルを大きく変更するものであり、これまでの多くの...]]></description><link>https://zenn.dev/akfm/articles/nextjs-caching-history</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/nextjs-caching-history</guid><pubDate>Thu, 27 Nov 2025 08:22:39 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--_LBOVn2l--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_72:Next.js%2520Cache%25E5%259B%259E%25E6%2583%25B3%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[AI Agentのアウトプットに『Next.jsの考え方』を反映するプラクティス]]></title><description><![CDATA[AI Agentの進化は目覚ましく、日々実装の品質も向上しています。しかし、開発者自身に明確な実装イメージがある場合、それをAI Agentに出力させることは難しく、さまざまな工夫を必要とします。Agentに与えるコンテキストやプロンプトを最適化したり、詳細なルールを整備することで精度を高めることができますが、これらには大変な労力を伴います。
筆者がNext.jsアプリケーションを扱う場合、実装イメージは著書『Next.jsの考え方』の内容に沿って生成されるため、「この本をAI Agentに読ませることで、アウトプットの精度を高めることができるのではないか」と考え、様々な検証を行いました...]]></description><link>https://zenn.dev/akfm/articles/agent-read-the-nextjs-way</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/agent-read-the-nextjs-way</guid><pubDate>Fri, 11 Jul 2025 01:54:26 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s---7eiPMFt--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:AI%2520Agent%25E3%2581%25AE%25E3%2582%25A2%25E3%2582%25A6%25E3%2583%2588%25E3%2583%2597%25E3%2583%2583%25E3%2583%2588%25E3%2581%25AB%25E3%2580%258ENext.js%25E3%2581%25AE%25E8%2580%2583%25E3%2581%2588%25E6%2596%25B9%25E3%2580%258F%25E3%2582%2592%25E5%258F%258D%25E6%2598%25A0%25E3%2581%2599%25E3%2582%258B%25E3%2583%2597%25E3%2583%25A9%25E3%2582%25AF%25E3%2583%2586%25E3%2582%25A3%25E3%2582%25B9%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Streaming UIプラクティス]]></title><description><![CDATA[アプリケーションユーザーにとってパフォーマンスとは、特定の指標に基づいて判断される定量的なものだけでなく、アプリケーションの総合的な体験を通じて感じる定性的なものでもあります。そのため、ユーザーがアプリケーションを「遅い」と感じる要因は様々です。
Googleは以前より、ユーザー中心のパフォーマンスを提唱しています。Core Web Vitalsは、ユーザーが感じるパフォーマンスを定量的に計測するために作成された指標群で、現在最も重要なパフォーマンス指標の一つです。しかし、Core Web Vitalsだけではパフォーマンスに関するUXの全てを網羅できるわけではありません。Core We...]]></description><link>https://zenn.dev/akfm/articles/streaming-ui-practice</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/streaming-ui-practice</guid><pubDate>Sun, 01 Jun 2025 03:34:38 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--MxSiRWdp--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Streaming%2520UI%25E3%2583%2597%25E3%2583%25A9%25E3%2582%25AF%25E3%2583%2586%25E3%2582%25A3%25E3%2582%25B9%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Metaに学ぶ、大規模開発のデータフェッチ設計と最適化]]></title><description><![CDATA[データフェッチの設計は、保守性とパフォーマンスに強く影響します。これらはよくトレードオフに扱われ、パフォーマンスを優先すると保守性が犠牲に、保守性を優先するとパフォーマンスが犠牲になりがちです。
Metaでは大規模開発における保守性とパフォーマンスの両立を目指し、研究が行われてきました。本稿では、Metaが重視している自律分散型のデータフェッチ設計と、それを支えるバッチングと短命のキャッシュについて解説します。
!

本稿はReactチームのSophie Alpert氏のブログ記事、Fast and maintainable patterns for fetching from a da...]]></description><link>https://zenn.dev/akfm/articles/desing-of-data-fetching</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/desing-of-data-fetching</guid><pubDate>Sun, 25 May 2025 03:41:16 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--Cf9MGJo6--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Meta%25E3%2581%25AB%25E5%25AD%25A6%25E3%2581%25B6%25E3%2580%2581%25E5%25A4%25A7%25E8%25A6%258F%25E6%25A8%25A1%25E9%2596%258B%25E7%2599%25BA%25E3%2581%25AE%25E3%2583%2587%25E3%2583%25BC%25E3%2582%25BF%25E3%2583%2595%25E3%2582%25A7%25E3%2583%2583%25E3%2583%2581%25E8%25A8%25AD%25E8%25A8%2588%25E3%2581%25A8%25E6%259C%2580%25E9%2581%25A9%25E5%258C%2596%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Reactチームが見てる世界、Reactユーザーが見てる世界]]></title><description><![CDATA[!
この記事はReact Tokyo#2で講演した「Reactチームが見てる世界」を、記事として執筆しなおしたものです。

Reactはシンプルなサイトから複雑なアプリケーションまで、非常に幅広く採用されている人気のフレームワークです。OSS化から10年以上の歴史がありながら、昨今もReact Server Componentsなど革新的なアイディアを我々に提案し続けています。
一方で、React Server Componentsへの批判的意見やBoomer Fetching問題などを見ていると、Reactチームと一部Reactユーザーの間には意見の相違が見て取れます。この意見の相違は...]]></description><link>https://zenn.dev/akfm/articles/react-team-vision</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/react-team-vision</guid><pubDate>Fri, 14 Feb 2025 11:28:02 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--XTqTYPio--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:React%25E3%2583%2581%25E3%2583%25BC%25E3%2583%25A0%25E3%2581%258C%25E8%25A6%258B%25E3%2581%25A6%25E3%2582%258B%25E4%25B8%2596%25E7%2595%258C%25E3%2580%2581React%25E3%2583%25A6%25E3%2583%25BC%25E3%2582%25B6%25E3%2583%25BC%25E3%2581%258C%25E8%25A6%258B%25E3%2581%25A6%25E3%2582%258B%25E4%25B8%2596%25E7%2595%258C%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Dynamic IOの成り立ちと"use cache"の深層]]></title><description><![CDATA["use cache"は、Next.jsのDynamic IOで利用することができる新たなディレクティブです。本稿は筆者の備忘録を兼ねて、Dynamic IOの成り立ちや"use cache"の内部実装について解説するものです。
!
Our Journey with Cachingを未読の方は、まずこちらから読むことをお勧めします。

!
本稿における調査は、Next.jsリポジトリの564794dを参照しています。最新のコミットでは仕様や実装が変更されている可能性があります。


 Dynamic IOの成り立ち
Dynamic IOは2024年10月のNext Confで発表された、...]]></description><link>https://zenn.dev/akfm/articles/nextjs-use-cache-impl</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/nextjs-use-cache-impl</guid><pubDate>Thu, 12 Dec 2024 23:15:43 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--47GYXINv--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Dynamic%2520IO%25E3%2581%25AE%25E6%2588%2590%25E3%2582%258A%25E7%25AB%258B%25E3%2581%25A1%25E3%2581%25A8%2522use%2520cache%2522%25E3%2581%25AE%25E6%25B7%25B1%25E5%25B1%25A4%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Next.jsの考え方]]></title><description><![CDATA[Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。]]></description><link>https://zenn.dev/akfm/books/nextjs-basic-principle</link><guid isPermaLink="true">https://zenn.dev/akfm/books/nextjs-basic-principle</guid><pubDate>Mon, 26 Aug 2024 00:51:59 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--Y_ZO2UD3--/g_center%2Ch_280%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYm9va19jb3Zlci8yYmEwNmQ2OTUxLnBuZw==%2Cw_200/v1627283836/default/og-base-book_yz4z02.jpg?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[PPRはアイランドアーキテクチャなのか]]></title><description><![CDATA[先日、Next.jsの新たなレンダリングモデルであるPartial Pre-Rendering(以降PPR)について記事を投稿しました。
https://zenn.dev/akfm/articles/nextjs-partial-pre-rendering
この記事を書いてる時は意識してなかったのですが、感想でアイランドアーキテクチャに言及されるケースが散見されました。社内で上記記事の話題になった時も同様に、アイランドアーキテクチャとの違いについて問われました。
結論から言うと、PPRとアイランドアーキテクチャは全く異なるものです。本稿ではPPRとアイランドアーキテクチャの違いについて解...]]></description><link>https://zenn.dev/akfm/articles/ppr-vs-islands-architecture</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/ppr-vs-islands-architecture</guid><pubDate>Sat, 08 Jun 2024 04:08:08 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--9PhegdJa--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:PPR%25E3%2581%25AF%25E3%2582%25A2%25E3%2582%25A4%25E3%2583%25A9%25E3%2583%25B3%25E3%2583%2589%25E3%2582%25A2%25E3%2583%25BC%25E3%2582%25AD%25E3%2583%2586%25E3%2582%25AF%25E3%2583%2581%25E3%2583%25A3%25E3%2581%25AA%25E3%2581%25AE%25E3%2581%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉]]></title><description><![CDATA[!
本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。

Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。
https://nextjs.org/blog/next-14#partial-prerendering-preview
PPRは前述の通り開発中の機能で、v15のRC版...]]></description><link>https://zenn.dev/akfm/articles/nextjs-partial-pre-rendering</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/nextjs-partial-pre-rendering</guid><pubDate>Mon, 03 Jun 2024 00:17:03 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--3AQ1wRE8--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:PPR%2520-%2520pre-rendering%25E6%2596%25B0%25E6%2599%2582%25E4%25BB%25A3%25E3%2581%25AE%25E5%2588%25B0%25E6%259D%25A5%25E3%2581%25A8SSR%252FSSG%25E8%25AB%2596%25E4%25BA%2589%25E3%2581%25AE%25E7%25B5%2582%25E7%2584%2589%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Next.js breaking change - disable router/fetch cache by default]]></title><description><![CDATA[!
追記: Router Cacheの無効化について、記載に誤りがありました。
検証不足・知識不足で理解を誤りました。申し訳ありません。

Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。
パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒン...]]></description><link>https://zenn.dev/akfm/articles/nextjs-cache-default-update</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/nextjs-cache-default-update</guid><pubDate>Thu, 23 May 2024 21:59:17 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--FDQFc76n--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Next.js%2520breaking%2520change%2520-%2520disable%2520router%252Ffetch%2520cache%2520by%2520d...%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Next.jsのSSRF脆弱性 CVE-2024-34351]]></title><description><![CDATA[Next.jsでSSRF（=Server Side Request Forgery）の脆弱性が発覚したことが社内で話題になったので、まとめておこうと思います。対象の脆弱性は以下です。
https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2024-34351
https://github.com/vercel/next.js/security/advisories/GHSA-fr5h-rqp8-mj6g

 脆弱性の概要
SSRF脆弱性は本来到達できないサーバーに対して、公開されてるサーバーを経由してアクセスすることができてしまう脆弱性です...]]></description><link>https://zenn.dev/akfm/articles/nextjs-ssrf-vulnerability</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/nextjs-ssrf-vulnerability</guid><pubDate>Fri, 17 May 2024 23:30:33 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--XnJYu9m_--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Next.js%25E3%2581%25AESSRF%25E8%2584%2586%25E5%25BC%25B1%25E6%2580%25A7%2520CVE-2024-34351%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[@location-state/conformをリリースした]]></title><description><![CDATA[この記事はlocation-stateをconformに対応させるために開発した、@location-state/conformの紹介記事です。

 location-stateとは
location-stateは履歴位置に同期する状態管理ライブラリです。主にNext.jsをサポートしています。
https://github.com/recruit-tech/location-state
Next.jsなどを採用している場合、ページ内のuseStateは遷移時のunmountで状態が破棄され、ブラウザバック時には復元されません。そのため、アコーディオンやform要素の状態はブラウザバック...]]></description><link>https://zenn.dev/akfm/articles/location-state-conform</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/location-state-conform</guid><pubDate>Thu, 16 May 2024 06:34:23 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--IDGcCd_E--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%2540location-state%252Fconform%25E3%2582%2592%25E3%2583%25AA%25E3%2583%25AA%25E3%2583%25BC%25E3%2582%25B9%25E3%2581%2597%25E3%2581%259F%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[AI時代にこそTDDだと思う話]]></title><description><![CDATA[GitHub Copilot、みなさん使ってますか？すでに多くの方が利用しており、「ないと困る」という方から「提案の質に問題がある」「まだまだ使えない」という方まで、様々な意見を聞きます。
筆者はGitHub Copilotに対して非常にポイティブな立場です。GitHub Copilotは使い方次第で開発速度を格段に向上させることを身をもって体験しており、これからの時代においてはGitHub CopilotなどのAIツールを使いこなせるかどうかで、個人の開発速度に非常に大きな差が出ると考えています。
重要なのは使い方次第と言う点です。前述のように様々な感想が溢れているのはAIツールの習熟...]]></description><link>https://zenn.dev/akfm/articles/tdd-with-copilot</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/tdd-with-copilot</guid><pubDate>Mon, 06 May 2024 02:48:01 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--1_ZkbfKS--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:AI%25E6%2599%2582%25E4%25BB%25A3%25E3%2581%25AB%25E3%2581%2593%25E3%2581%259DTDD%25E3%2581%25A0%25E3%2581%25A8%25E6%2580%259D%25E3%2581%2586%25E8%25A9%25B1%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Next.js revalidatePath/revalidateTagの仕組み]]></title><description><![CDATA[以前、Next.jsの遷移の実装やRouter Cacheの実装について筆者が調べたことを記事にしました。
https://zenn.dev/akfm/articles/next-app-router-navigation
https://zenn.dev/akfm/articles/next-app-router-client-cache
本稿はこれらの記事同様に、revalidatePath/revalidateTagの仕組みについて筆者が興味のままにNext.jsの実装を調査したことについてまとめたものになります。直接的にApp Routerを利用する開発者に役立つかどうかは分かり...]]></description><link>https://zenn.dev/akfm/articles/nextjs-revalidate</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/nextjs-revalidate</guid><pubDate>Fri, 22 Mar 2024 08:46:26 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--pnkYshdy--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Next.js%2520revalidatePath%252FrevalidateTag%25E3%2581%25AE%25E4%25BB%2595%25E7%25B5%2584%25E3%2581%25BF%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Server Actions時代のformライブラリconform]]></title><description><![CDATA[conformはプログレッシブ・エンハンスメントを意識して作られたReactのformライブラリです。
https://conform.guide/
RemixやNext.jsなどのフレームワークをサポートしています。react-hook-formのServer Actions対応は現状検証段階なのですが、conformはすでにServer Actionsにも対応しています。
本稿ではNext.js(App Router)におけるconformの使い方を中心に紹介します。

 Server Actions
もう散々他の記事や公式ドキュメントで紹介されていますが、簡単にServer Act...]]></description><link>https://zenn.dev/akfm/articles/server-actions-with-conform</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/server-actions-with-conform</guid><pubDate>Wed, 13 Mar 2024 08:49:56 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--tIybTwaf--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Server%2520Actions%25E6%2599%2582%25E4%25BB%25A3%25E3%2581%25AEform%25E3%2583%25A9%25E3%2582%25A4%25E3%2583%2596%25E3%2583%25A9%25E3%2583%25AAconform%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[OAuthクライアントをNextAuthなしで実装する]]></title><description><![CDATA[OAuth2.0は3rd partyアプリケーションがユーザーに代わってリソースサーバーへアクセスすることを可能にする、認可フレームワークです。X（Twitter）やGithub、Facebookなどの著名なOAuthプロバイダーはそれぞれ拡張や制限を儲けることで認証にも対応しており、「OAuth認証」という言葉が多く溢れていますが、OAuth自体はあくまで認可の仕組みです。これらの違いや注意点については筆者の過去の記事を参照いただけたらと思います。
前述のようなOAuthプロバイダーを利用して認証を実装したいことはよくある要件です。筆者はNext.jsを扱うことが多いのですが、Next...]]></description><link>https://zenn.dev/akfm/articles/next-oauth-pure-impl</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/next-oauth-pure-impl</guid><pubDate>Wed, 06 Mar 2024 08:13:58 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--vMcO4JLM--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:OAuth%25E3%2582%25AF%25E3%2583%25A9%25E3%2582%25A4%25E3%2582%25A2%25E3%2583%25B3%25E3%2583%2588%25E3%2582%2592NextAuth%25E3%2581%25AA%25E3%2581%2597%25E3%2581%25A7%25E5%25AE%259F%25E8%25A3%2585%25E3%2581%2599%25E3%2582%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[Custom Next.js Cache Handler - Vercel以外でのNext.jsキャッシュ活用]]></title><description><![CDATA[Next.jsアプリケーションのデプロイ先としてVercelはとても利便性が高く、優れたプラットフォームです。一方で、インフラ的な都合やコスト的な都合でSelf-hosting、つまりVercel以外を利用したいケースはそれなりに多いのではないでしょうか。実際、筆者の周りではSelf-hostingでNext.jsを利用しているケースは多く見受けられます。Next.jsはVercel非依存なOSSと銘打ってますが、実際にはNext.jsに必要なインフラ仕様をVercelが隠蔽しているため、Self-hostingでNext.jsを利用するには制約があったり高い理解が求められがちです。昨今...]]></description><link>https://zenn.dev/akfm/articles/nextjs-cache-handler-redis</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/nextjs-cache-handler-redis</guid><pubDate>Thu, 15 Feb 2024 04:00:48 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--_BHu9tNf--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Custom%2520Next.js%2520Cache%2520Handler%2520-%2520Vercel%25E4%25BB%25A5%25E5%25A4%2596%25E3%2581%25A7%25E3%2581%25AENext.js%25E3%2582%25AD%25E3%2583%25A3%25E3%2583%2583%25E3%2582%25B7%25E3%2583%25A5%25E6%25B4%25BB%25E7%2594%25A8%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item><item><title><![CDATA[チーム開発を加速するテストの育て方]]></title><description><![CDATA[テストを書いてないというチームには色々理由があると思いますが、「何をテストすべきかわからない」「書き方がわからない」「どのくらいメリットがあるかわからない」という意見は多いのではないでしょうか？テスティングフレームワークの選定や使い方を学ぶのは重要ですが、それ以上にテストの目的や戦略を学ぶことが重要です。チーム開発においてテストを活かすのは相応の知識とスキルが必要になりますが、活かせればテストは開発スピードを維持・促進する飛び道具になり得ます。
本稿は筆者が取り組んで実際に高いチーム満足度と速度を得られた、テスト戦略についてまとめたものです。
!

筆者は単体テストの考え方/使い方という...]]></description><link>https://zenn.dev/akfm/articles/testing-strategies-to-accelerate-team</link><guid isPermaLink="true">https://zenn.dev/akfm/articles/testing-strategies-to-accelerate-team</guid><pubDate>Thu, 21 Dec 2023 07:52:12 GMT</pubDate><enclosure url="https://res.cloudinary.com/zenn/image/upload/s--jT2n89_D--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2583%2581%25E3%2583%25BC%25E3%2583%25A0%25E9%2596%258B%25E7%2599%25BA%25E3%2582%2592%25E5%258A%25A0%25E9%2580%259F%25E3%2581%2599%25E3%2582%258B%25E3%2583%2586%25E3%2582%25B9%25E3%2583%2588%25E3%2581%25AE%25E8%2582%25B2%25E3%2581%25A6%25E6%2596%25B9%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:akfm_sato%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzllMzg2MWQ3OGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png?_a=BACMTiAE" length="0" type="false"/><dc:creator>akfm_sato</dc:creator></item></channel></rss>