こんにちは！マイクです。今日の日付は、2024年8月10日、土曜日です。今日はZennでトレンドの記事をいくつか紹介していきますよ〜！

それでは、今日の内容に入る前に、前回紹介した記事についておさらいしてみましょう。「EC2ってなんやねん」「バージョンアップ対応に苦労した過去の自分に送りたい7つの心得」「Azure OpenAI 東日本リージョン(Japan East)でGPTの標準デプロイのモデルが利用できなくなる？」という内容でした。興味深いテーマが多かったですね！

さて、今日はおたよりは届いていないようですので、さっそく今日の紹介に移りましょう。

今日紹介する記事は全部で5本あります。それでは、早速最初の記事からご紹介しますね。

1つ目の記事は「RAGを作って学ぶCloudflareスタック」です。この内容では、RAG、つまりリトリーバル・オーグメンテッド・ジェネレーションを使ったアプリケーションをCloudflareの技術スタックで実装する方法を解説しています。RAGは生成AIを補完する手法で、シンプルながらも非常に効果的です。Cloudflare WorkersやD1、Vectorize、Workers AIを使用して、シンプルなRAGアプリを構築するプロセスが詳しく説明されています。

まず、Cloudflare Workersを用いて基本的なHTTPリクエストを受けるコードを作成し、その後Honoフレームワークを導入してルーティングやミドルウェアを活用します。続いて、D1を使ってSQLデータベースの操作を行い、コンテンツの挿入や取得をします。

Workers AIでは、テキストのエンベッディングを生成し、質問応答モデルを選択し、Vectorizeを使用して関連コンテンツを取得します。最終的に、ユーザーの質問に応じた応答を生成するエンドポイントを実装し、特定の質問に対して的確なコンテキストを考慮した応答を作成します。この記事では、Cloudflareの各サービスを利用しながらRAGを実現する具体的な手順やコード例が提供されていて、エンジニアの皆さんにとってとても役立つ内容となっています。

。...。

2つ目の記事は「王道か邪道か？　タイムスタンプによるステート管理」です。Reactでのステート管理において、状態が変化する際に連動して他の状態も変更する必要があることがありますが、これにはパフォーマンス低下やバグの原因になることもあります。この記事では、タイムスタンプによる新たなステート管理手法が提案されています。

具体的には、APIから取得するデータとユーザー操作による状態にそれぞれタイムスタンプを付与し、どちらが新しいかで優先すべき状態を判断します。このアプローチにより、`useEffect`を使わずに状態を独立して管理できるようになり、計算可能な値として扱うことが可能になります。また、Jotaiのようなステート管理ライブラリとも相性が良く、簡潔にステート管理を行うことができます。最終的には、Reactのステートを最小限にして、必要な状態は計算によって求めることがベストプラクティスとして強調されています。

。...。

3つ目の記事は「FlutterエンジニアのためのRust製TUIツール「flx」を作りました」です。このツールは、Flutter開発者向けに開発されたもので、ターミナル内でFlutterのDevToolsのような機能を利用できます。特にネットワーク情報の監視やフレームレートの確認が可能です。

「flx」はFlutterの「flutter run」コマンドの代わりに使われ、ホットリロードやログ確認、ウィジェットツリーの確認、複数アプリの同時実行をサポートしています。Rustを使用することで非同期処理の効率化が図られており、インストールも簡単で、macOSユーザーはHomebrewを利用して手軽に導入できます。将来的には、DevToolsのフレームグラフレンダリングやAIを活用したログ分析機能の追加が予定されています。これはターミナルで作業するエンジニアにとって、非常に便利な選択肢となることでしょう。

。...。

4つ目の記事は「Declarative Shadow DOMを利用したWeb ComponentsをSSR・CSRで実現する」です。Web Componentsはカスタム要素を定義し、スタイルや機能を他の要素から隔離して再利用可能なコンポーネントを提供します。ここで新たに登場したDeclarative Shadow DOMや関連APIにより、SSRとCSRでの利用が拡大しています。

DSDはJavaScriptを使わずにShadow DOMを構築でき、SEOやレイアウトの安定性を向上させます。HTMLの`<template>`要素を用いて、HTML解析時にShadow DOMを生成することが可能です。そして、クライアントサイドでDSDを動的に追加するには、特定のAPIを使用する必要がありますが、セキュリティ上の懸念もあるため、慎重に取り扱う必要があります。全体として、DSDの導入によりWeb Componentsの動作環境が広がり、さらなる進化が期待されています。

。...。

5つ目の記事は「Next.jsのApp Routerを使ってマインスイーパーを作った」です。この記事では、Next.jsのApp Routerを利用してマインスイーパーを作成する過程が解説されています。著者は以前に素のReactでマインスイーパーを開発した経験があり、そのロジックを再利用することで効率的に開発しています。

実装には状態をURLに持たせる手法が採用され、初期マップのシード値やマップサイズ、爆弾の数などをURLパラメータで管理します。ユーザーの操作は全てフォームのsubmitで行われ、900個のsubmitボタンを配置するというユニークなアプローチが取られました。Server Actionsを利用して、フォームから送信されたデータによって状態を更新し、ゲームの状態を毎回計算し直しています。最終的には、Pure React版のロジックを活用して2日間でマインスイーパーを完成させ、著者は新たなアプローチやWebサービスの特徴についての考察を行っています。

さて、今日は5本の記事をご紹介しましたね！それぞれの内容が非常に興味深く、エンジニアの皆さんにとって役立つ情報がたくさんありました。次回も楽しみにしていてくださいね！詳しい内容はショーノートに書いてありますので、ぜひチェックしてみてください。

最後に、番組の感想もお待ちしています！それでは、また次回お会いしましょう！バイバーイ！