みなさん、こんにちは！マイクです！今日は2024年11月23日、土曜日です。今日はZennでトレンドの記事をいくつかご紹介しますので、ぜひお楽しみに！

まず、前回紹介した記事についてですが、今回はお便りもいただいていないので、早速今日の内容に移りたいと思います。

さて、今日紹介する記事は全部で5本あります！それでは、さっそく最初の記事からいきましょう！

今、React Nativeがアツいらしいというタイトルの記事です。近年、React Nativeの人気が高まっていて、特にExpo関連の進化が注目されています。React Conf 2024では、React Nativeの状況が紹介され、ダウンロード数が2015年のリリース以来、週に270万回を超えるまで成長しています。多くの有名企業、例えばAmazonやMicrosoft、ShopifyなどがReact Nativeを採用しています。Expo製のBlueskyアプリがApp Storeで1位を獲得するなど、成功例が増えています。

コミュニティも活発で、アニメーションやカメラ機能を実装できる強力なライブラリが増加しています。パフォーマンス面では、「NewArchitecture」が導入され、JSI（JavaScript Interface）とConcurrent Reactを利用してパフォーマンスが大幅に改善されています。さらに、Expoも進化を続けており、ネイティブ機能のライブラリが70以上開発されています。Expo Modules APIにより、SwiftやKotlinでのネイティブ処理が簡単になります。

また、Expo Routerを使った簡単なナビゲーション設定や、CNG（Continuous Native Generation）による設定の簡素化が実現されています。EAS（Expo Application Service）は、ビルドやリリースプロセスを自動化し、アプリの迅速なアップデートを可能にしています。今後の展望として、React Server ComponentsやDOM Componentsの導入が検討されており、さらなる進化が期待されています。

。.

次にご紹介するのは、知らないとハマる Next.js のエラーハンドリングという記事です。この記事では、Next.jsアプリケーションにおけるエラーハンドリングの課題とその解決策について説明しています。特に、Server Componentで発生したカスタムエラーがClient ComponentのError Boundaryで正しく処理されない問題に焦点を当てています。

まず、Server Componentでのデータフェッチの際にカスタムエラー（HttpError）を投げる実装が挙げられます。このエラーはClient Componentに渡された際に標準のErrorクラスに変換されてしまうため、期待したエラーメッセージが表示されません。このため、error.tsxにおいて条件分岐が機能せず「Unexpected」が表示されてしまいます。

さらに、production modeではサーバー側のエラー詳細がクライアントに漏れないように制限されており、エラーのメッセージが省略されるため、エラーハンドリングがさらに複雑になります。この制約により、エラー処理の方法を工夫する必要があります。

解決策として、HttpErrorにserializeおよびdeserializeメソッドを追加し、エラーをプレーンなオブジェクトとして扱えるようにします。これにより、Server ComponentからClient Componentにエラーを安全に渡すことができ、error.tsxで適切に処理されるようになります。

要点としては、Server ComponentでのカスタムエラーはClient ComponentでのError Boundaryで標準のErrorクラスに変換され、production modeではエラーの詳細が隠されるため、エラーハンドリングの戦略を考慮する必要があります。

。.

さあ、次の記事に行きましょう！Flutterエンジニアのためのアーキテクチャ入門 - 公式（日本語）という記事です。この記事では、Flutterのアーキテクチャに関する公式ガイドが紹介されています。効果的なアプリケーション開発のための基本原則や推奨される設計パターンを解説しています。

優れたアーキテクチャの利点には、保守性、スケーラビリティ、テスト可能性、認知負荷の軽減、ユーザー体験の向上が含まれます。ガイドは主に三部構成となっており、第一部では一般的なアーキテクチャの原則を学び、第二部ではFlutterアプリ設計における具体的な推奨事項を示し、第三部では設計パターンとサンプルコードを提供しています。

アーキテクチャの基本原則では、「関心の分離」により機能を独立した単位に分割し、各レイヤー（UI層、ロジック層、データ層）の役割を明確にすることが強調されています。また、単一の真実の情報源（SSOT）を持つことや、単方向データフロー（UDF）を採用することで、アプリの状態管理を効率化します。

MVVM（Model-View-ViewModel）パターンは、UIとビジネスロジックを分離し、リポジトリパターンを用いてデータアクセスを管理します。データ層はサービスとリポジトリで構成され、信頼できるデータの管理を行います。

このガイドは、Flutterアプリケーションのスケーラビリティやメンテナンス性を向上させるための具体的な指針を提供しており、エンジニアが複雑なアプリを効果的に構築するための基盤となるでしょう。

。.

次は、TanStack TableのstateをURLパラメータに同期するライブラリを作ったという記事です。このTanStack Tableは、ReactやVueなどで利用できる高機能なテーブルライブラリです。本記事では、テーブルの検索やソートなどの状態をURLパラメータに同期するためのライブラリ「tanstack-table-search-params」を紹介しています。

まず、TanStack Tableの基本的な使い方を説明し、テーブルのデータやカラムの定義を行い、useReactTableフックを使ってテーブルを生成する方法を示します。次に、tanstack-table-search-paramsを利用して、テーブルの状態をURLパラメータに同期する方法に焦点を当てます。

Next.jsのuseRouterを用いて、useTableSearchParamsフックを呼び出し、その戻り値をuseReactTableに渡すことで、簡単に同期が実現できます。このフックは、URLパラメータをTanStack Tableの状態にデコードし、状態の変更をURLパラメータにエンコードして反映させる機能を持っています。

このライブラリは、行全体の検索、ソート、ページネーション、列ごとの検索が含まれています。URLパラメータ名やエンコード形式をカスタマイズする機能もあり、URLパラメータへの同期をより柔軟に制御できます。

。.

そして最後の記事です！Rustでごく簡単なCLIバリデーションツールを作ったというタイトルです。著者はRustに入門する過程で、シンプルなCLIバリデーションツールを作成しました。このツールは、数値、真偽値、日本語、電話番号の形式をバリデーションする機能を持っています。

使用した主なクレートは、対話型UIを提供する`dialoguer`、Rustマスコットのセリフ表示を行う`ferris-says`、正規表現を扱う`regex`です。ツールの設計では、まず`CheckerType`というenumを定義し、バリデーションの種類を管理します。

具体的なバリデーション関数は、数値は`f64`にパース可能か、真偽値は"true"または"false"か、日本語は特定のUnicode範囲に含まれるか、電話番号は正規表現にマッチするかを確認します。最終的に、結果はRustのマスコットであるフェリスが可愛く出力します。

著者はRustの文法を学びながら、実用的なツールを作成する楽しさを感じています。作成されたコードはGitHubで公開されており、初学者でも実際に動かして学ぶことができる内容となっています。

。.

さて、今日ご紹介した内容を駆け足でおさらいしましょう！React Nativeの人気の高まり、Next.jsのエラーハンドリング、Flutterのアーキテクチャ、TanStack TableのURLパラメータ同期、そしてRustのCLIバリデーションツールについてお話ししました。

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