こんにちは、マイクです！今日は2024年7月23日、火曜日ですね。今日の「zenncast」では、Zennで話題になっているトレンド記事をいくつかご紹介しますよ！

それでは、さっそく今日の内容に入っていきましょう！

今日紹介する記事は全部で5本です。まずは1つ目の記事からお話ししますね。

1つ目の記事は「Next.js って App Router が出てきて平和じゃなくなったよね」です。この記事では、Next.jsに新たに導入されたApp Routerの影響について触れています。導入から約1年が経過しましたが、設計のベストプラクティスがまだ確立されていないため、多くのフロントエンドエンジニアが導入に慎重になっているとのことです。

App Routerによって、ディレクトリ設計やコンポーネント設計、データ取得方法が複雑化しました。特に新たに登場した`layout.tsx`や`template.tsx`の使い分けが求められ、Nesting Layoutsの設計がより重要に。加えて、サーバー上で非同期処理を行うServer Actionsの導入により、セキュリティ面の配慮も必要になったそうです。

また、従来のレンダリング方法が廃止され、新しいfetch関数が自動的に判定するようになりました。これにより、複数のレンダリング方法が組み合わさった際の挙動を理解するのが難しくなっているとも。

導入のハードルが高くなり、特に以前のNext.jsで問題がなかった場合にはApp Routerの採用に対する熱意が薄れてしまうことが多いとのこと。Next.jsの使いこなしが難しくなっていると感じられているようです。

さて、次に進みますよ！2つ目の記事は「React 19によって状態管理はどのように変わるのか」です。この記事では、React 19の新機能が特にVite+Reactスタックにおいて状態管理の方法をどう変えるのかについて考察しています。

新機能の中で特に注目すべきは、`use`、`useActionState`、`useOptimistic`の3つです。`use` APIを使うことで、Promiseやコンテクストから値を読み取ることができ、Suspenseと組み合わせてリソース取得が可能に。Promiseのキャッシュ管理が重要になり、TanStack QueryやSWRなど外部ライブラリの存在も依然として大切です。

次に、`useActionState`はフォームの状態を効率よく管理できるフックで、従来のライブラリに依存せずにフォームデータの管理が直感的に行えるようになりました。そして、`useOptimistic`は楽観的更新を簡単に実装できるフックで、これにより複雑なプロセスが簡素化されるとのこと。

これらの機能により、外部ライブラリに依存せずに状態管理を行うケースが増え、学習コストの低減やバンドルサイズの削減が期待できるというお話でした。

さて、続いて3つ目の記事に行きます！タイトルは「入社3週間で同僚からアニメ作品のオススメを捌ききれなくなったので審議用Botを作ってみました」です。この記事では、著者が株式会社マネーフォワードに入社したばかりのエンジニアで、同僚からのアニメおすすめが多すぎて困った結果、アニメの視聴判断を行うBot「審議マン」を作成したというお話です。

このBotはAWSのLambdaとBedrockを利用して構築されていて、特定のアニメ作品が著者の好みに合うかどうかを判定する機能を持っています。技術的には、AWS CDKを使って環境を整え、リクエストを処理するLambda関数と生成AIに問い合わせるLambda関数を分けて設計することで、効率的な判断が可能になっています。

著者は、同僚からのオススメが次々と寄せられる中で、時間がないためにBotを作る必要があったと説明しています。そして、この技術を通じて新たな挑戦ができたことに感謝しているとのことです。

さて、次は4つ目の記事です。「状態を復元できるhooksを作ってみた」というタイトルの記事です。この内容では、Reactで状態を復元するための2つの異なるアプローチについて提案しています。

最初のアプローチは「シンプルヒストリー」で、状態を配列で管理する方法です。これにより、undo/redoを簡単に実装できるんですが、カーソル位置の管理が難しいという欠点があります。

次のアプローチは「コマンドパターン」に基づいた方法で、操作履歴を管理することで、カーソル位置を正確に復元することが可能になります。具体的には、テキスト入力コンポーネントでカーソル位置を返し、適切な位置に戻す工夫がされているそうです。

これらのアプローチは、特にテキスト入力のユーザー体験を向上させるために役立つ手法だとのこと。

そして最後、5つ目の記事は「vim-jp ラジオ オフィシャルサイト制作の舞台裏！」です。このポッドキャストのランディングページ制作の詳細を紹介しています。

デザイン面では夜のバーをイメージし、背景アニメーションにこだわったとのこと。技術的にはSvelte5とSvelteKit2を使用し、表示速度の最適化にも取り組んでいます。特にSvelte5の新機能を活用し、開発効率を向上させる工夫があったようです。

また、画像の最適化やテキストの自然な改行、URLの検証など、多くの工夫が盛り込まれています。そして、背景アニメーションにはCanvasを利用し、アクセシビリティにも配慮がなされているとのこと。最後には、イースターエッグも隠されているので、ぜひ探してみてくださいね！

それでは、今日のおさらいをしましょう！1つ目はNext.jsのApp Routerについて、2つ目はReact 19の状態管理の新機能、3つ目はアニメ審議用Botの開発、4つ目は状態を復元するhooks、そして5つ目はvim-jpラジオのオフィシャルサイト制作の舞台裏についてお話ししました。

次回もまたお会いできるのを楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひチェックしてくださいね。そして、番組の感想もお待ちしています！それでは、皆さん素敵な一日をお過ごしください！