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

さて、前回紹介した記事について少し触れてみましょう。「なぜDependency Injectionなのか？」や「RDBの主キー、UUID使った方がいいの？(DDD, CleanArchitecture対応)」、そして「CQRS設計パターンをモダナイズする」などでしたね。関心の分離や疎結合、主キーの選定、設計パターンの最新動向についての内容でした。

今日ご紹介する記事は全部で5本です。それでは、早速いってみましょう！

....

**1つ目の記事**は「Remix v3 の今後についてなど : Cybozu Frontend Weekly (2024-05-21号)」です。

サイボウズのフロントエンドエキスパートチームが毎週火曜日に開催する「Frontend Weekly」で、2024年5月21日に取り上げたフロントエンド関連のニュースや話題について紹介しています。まず、HTML attributesとDOM propertiesの違いを解説し、Validationや値のチェック、デフォルト値について説明しています。また、ReactのStream/Serializeに関連するRSC Payloadの読み方を解説する資料についても触れています。

さらに、ParcelのコアをRustに置き換えることで約20倍の高速化を実現したというXポストや、pnpmのnode_modulesを探検して理解する方法も紹介しています。React Server Components (RSCs)の特徴やデバッグ方法、Node.jsの進化に伴い不要となったパッケージについても詳しく解説しています。

そのほか、Safari 17.5でのWebKitの新機能、FigmaがTypeScriptへ移行した経緯、React Compilerの使い方、Remix v3の今後の位置づけ、WCAG 3.0のWorking Draftの概要など、多岐にわたる話題が盛りだくさんです。サイボウズでは毎月最終火曜日にFrontend Monthlyというイベントも開催しており、フロントエンドエンジニアの仲間も募集しています。

....

**2つ目の記事**は「【2024年】React Router & TanStack Router比較」です。

React RouterとTanStack Routerは、SPA開発における主要なルーティングライブラリです。2024年5月時点では、React Router v6.23.1とTanStack Router v1.32.12が最新バージョンです。React RouterはRemixと統合され、Web標準に準拠したFull-Stackなライブラリとして進化しています。一方、TanStack Routerは開発者体験（DX）に特化し、ルーティングに責務を限定することで、TanStack Queryなどのライブラリと相性が良いです。

共通点として、File-Based Routing、Nested / Layout Routes、Route Prefetching、Router Loaders、Path Params、Search Param Hooksなどがあります。React RouterはWeb標準に準拠し、`useSearchParams`フックを使って`URLSearchParams`オブジェクトを扱うのに対し、TanStack Routerは独自のSearch Params実装を持ち、状態管理として効率的に使用できます。

React Routerはデータの更新を含むData Flowを提供し、Full-Stackなアプローチを取ります。一方、TanStack Routerはデータ更新の責務を持たないため、TanStack Queryのようなライブラリとの組み合わせが必要です。どちらを選ぶかはプロジェクトの要件に応じて判断する必要があります。

....

**3つ目の記事**は「ログラスの非同期処理基盤の設計と導入」です。

ログラスのエンジニアである南部氏が、非同期処理基盤の設計と導入について解説しています。非同期処理とは、プログラムの処理を他の処理と並行して行う方法で、ユーザーの操作をブロックせずに時間のかかる処理をバックグラウンドで実行できます。ログラスではKotlinのCoroutinesを用いて非同期処理を行っていましたが、インフラへの負荷が増加し、特定のユーザーの処理が他のユーザーの体験に影響を与える問題が発生していました。

そこで、APIとは別のインフラで重い処理を実行し、処理を非同期に行う新しい基盤をSpringBoot上で構築しました。AWSのSQSを利用し、QueueをポーリングするWorkerをECS上で立てる構成で、既存のAPIがSQSにタスクを投げ、Workerがポーリングして処理を行います。異常終了やタイムアウト時にはタスクがDLQに移動し、再実行が可能です。

行レベルセキュリティ（RLS）も導入され、開発者が意識せずに安全に実装できるようにしています。今後もさらに負荷に耐えられるような改善を視野に入れています。

....

**4つ目の記事**は「小さなデプロイで大きな成果！ Next.jsで実現するマイクロフロントエンド」です。

マイクロフロントエンドは、複雑なウェブアプリケーションを小さな独立したモジュールに分割し、異なるチームがそれぞれのモジュールを開発・保守できるアーキテクチャパターンです。これにより、開発速度と保守性の向上、チームの自律性、技術スタックの自由度などの利点があります。

令和トラベルのNEWTアプリでは、ツアー予約、ホテル予約、旅行ガイドの3つのアプリをマイクロフロントエンドとして分割し、Turborepoを用いたモノレポ構成で管理しています。Next.jsのrewrites機能を使い、各アプリ間でのルーティングを実現しています。これにより、小さな独立したデプロイが可能となり、開発者体験が向上します。

NEWTでは、垂直分割と水平分割の両方を採用しています。垂直分割では、ツアー予約アプリがエントリーポイントとなり、他のアプリへのリクエストをルーティングします。水平分割では、Webflowを用いてデザイナーがLPを作成し、動的コンテンツはiframeを介して表示しています。また、ISRにより静的コンテンツのキャッシュを行い、効率的なパフォーマンスを実現しています。

課題としては、コードの重複、Next.js固有のrewritesやbasePathの問題、観測性の低下が挙げられます。これらの課題を理解し、適切に対策を講じることで、効率的な開発を実現できます。

....

**5つ目の記事**は「生成AI時代のフロントエンド開発術」です。

本記事では、ChatGPTを利用したフロントエンド開発の効率化について紹介しています。FigmaのデザインからReactコンポーネントを作成する方法、仕様を満たすビジネスロジックの実装、開発したReactコンポーネントのテストコード作成の3つのパターンについて詳しく説明しています。

FigmaからCSSをエクスポートし、ChatGPTにそのCSSを渡してReactとCSS Moduleのコードを生成してもらうことで、ゼロから開発するよりも時間短縮が可能です。フォームのバリデーションやAPI通信、クリックなどのインタラクションの実装方法についてもChatGPTに尋ねることで、自分の設計案を確認できます。

また、プロダクトのコードをChatGPTに渡し、単体テストコードを生成してもらうことで、設計の見通しを良くすることができます。ChatGPTを利用することで、フロントエンド開発の効率化だけでなく、学ぶ機会も得られます。エンジニアの皆さんもぜひ取り入れてみてください。

....

今日ご紹介した記事をおさらいしましょう。

1つ目は「Remix v3 の今後についてなど : Cybozu Frontend Weekly (2024-05-21号)」、
2つ目は「【2024年】React Router & TanStack Router比較」、
3つ目は「ログラスの非同期処理基盤の設計と導入」、
4つ目は「小さなデプロイで大きな成果！ Next.jsで実現するマイクロフロントエンド」、
5つ目は「生成AI時代のフロントエンド開発術」でした。

詳しい内容はショーノートに書いてありますので、ぜひチェックしてみてくださいね。次回もお楽しみに！番組の感想も募集していますので、どしどしお寄せください。それでは、またお会いしましょう！