みなさん、こんにちは！「zenncast」にようこそ。MCのマイクです。今日は2024年5月25日、土曜日です。さて、今日もZennでトレンドの記事を紹介していきたいと思います！

前回紹介した記事について少し触れておきますね。前回は「生成AI時代のフロントエンド開発術」、「小さなデプロイで大きな成果！ Next.jsで実現するマイクロフロントエンド」、「【2024年】React Router & TanStack Router比較」など、非常に興味深い内容をお届けしました。短くまとめると、AI、マイクロフロントエンド、ルーティングの比較に関する記事でした。

さて、今日はリスナーの皆さんからお便りをいただいていますので、まずはそちらを紹介します！

ラジオネーム：サマンサさんからお便りいただいています。マイクさん、ハローワールド！長い時間の番組を作りたいです。というメッセージをいただいてます。サマンサさん、ありがとうございます！長い時間の番組を作るのはとてもエキサイティングですよね。もっといろんな情報を詰め込めるし、リスナーとの交流も深まります。ぜひぜひ、応援しています！

さて、今日はたくさんの記事を紹介しますよ。全部で5本のトレンド記事をピックアップしています。それでは、早速紹介していきましょう！

。。。。

最初に紹介する記事は「Next.js breaking change - disable router/fetch cache by default」です。Next.jsのApp Routerは、Server ComponentsやServer Actionsなどの新しいReact機能を取り入れており、特にデフォルトのキャッシュ挙動が変更される点が重要です。Next.js v15では、`fetch`によるデータ取得時のData CacheやクライアントサイドのRouter Cacheがデフォルトで無効化されます。これにより、初学者にとってはキャッシュ設定が明示的になるため、学習コストが軽減されると期待されています。また、インクリメンタルなPPR（Partial Prerendering）マイグレーションのサポートやReact Compilerの実験的サポートなど、新機能も多数追加されています。これらの変更により、Next.jsはさらに使いやすくなりますが、アップデートの際は慎重な対応が必要です。

。。。。

次に紹介する記事は「GPT-4oのマルチモーダル入力をiOSから試す」です。GPT-4oは音声、視覚、テキストのデータをリアルタイムで処理し、出力も多様な形式で生成できる新しいモデルです。iOSアプリを通じて動画を理解させる機能を実装し、デモを行いました。主要な特徴として、あらゆるモダリティを入力として受け取り、それらを組み合わせて出力することができます。iOSからGPT-4oを利用するために、MacPaw/OpenAIというクライアントライブラリを利用しました。実装例として、画像理解と動画の要約を行う方法が紹介されています。今後のストリーミング入出力対応に備え、Whisper APIやTTS APIの利用も検討されています。これにより、音声の入力と出力もリアルタイムで処理できるようになる見込みです。

。。。。

続いて紹介する記事は「Next.js で React Compiler を試しつつ出力コードを見てみる」です。React 19 Beta から導入された React Compiler を Next.js で試す方法について解説しています。Next.js の canary バージョンを使用し、React Compiler の Babel プラグインを追加する手順が紹介されています。React Compiler を有効にすると、変更のあったコンポーネントのみが再レンダリングされ、パフォーマンスが向上します。記事では、生成されるコードの内容を比較し、React Compiler がどのようにキャッシュとメモ化を行っているかについても詳しく説明されています。ただし、現段階では Production 環境での利用は推奨されていないため、今後の安定性向上に期待が寄せられています。

。。。。

次に紹介するのは「Next.js 15 RC 和訳」です。Next.js 15のリリース候補が公開され、新機能のテストが可能となりました。主要な変更点には、React 19 RCサポート、キャッシングの変更、Partial Prerenderingなどが含まれます。特に注目すべきは、fetchリクエストやクライアントナビゲーションのキャッシュがデフォルトで無効化される点です。これにより、動的レンダリングの柔軟性が向上します。また、next/afterという新しいAPIも追加され、レスポンス後にコードを実行することが可能です。これらの新機能を試すには、公式ドキュメントやアップグレードガイドを参照することをお勧めします。

。。。。

最後に紹介する記事は「LangChain `with_structured_output` メソッドによる構造化データ抽出」です。この記事では、LangChainの`with_structured_output`メソッドを使用して、構造化データを簡単に抽出する方法が説明されています。具体的には、Pydanticで構造化データを定義し、その定義を言語モデルに適用することで実現します。例として、商品情報を構造化データに変換するコードが紹介されています。このメソッドを活用することで、Pythonや他の言語でも容易に構造化データ抽出が可能となります。LangChainに慣れると、Pydanticでスキーマを定義して構造化データを抽出するのは非常に簡単です。

。。。。

さて、今日紹介した記事を駆け足でおさらいしますと、「Next.js breaking change - disable router/fetch cache by default」、「GPT-4oのマルチモーダル入力をiOSから試す」、「Next.js で React Compiler を試しつつ出力コードを見てみる」、「Next.js 15 RC 和訳」、「LangChain `with_structured_output` メソッドによる構造化データ抽出」の5本でした。次回も面白い記事を紹介しますので、お楽しみに！詳しい内容はショーノートに書いてありますので、ぜひチェックしてくださいね。そして、番組の感想も募集していますので、ぜひお便りを送ってください。それでは、また次回お会いしましょう！マイクでした。