皆さん、こんにちは！「zenncast」へようこそ！MCのマイクです。今日は2024年6月29日、土曜日です。さあ、今日もZennで話題の記事をいくつかご紹介していきますよ。
前回は「JavaScriptで100行で作る！数式言語のインタプリタ」と「Next.jsとHono RPCで安全・爆速開発」についてお届けしましたね。数式言語や安全な開発について、皆さんも興味津々だったのではないでしょうか。
さて、今日はなんと5つの記事をご紹介します。それでは早速、1つ目の記事から参りましょう！
....
1つ目の記事は「React Server Componentsを理解したい」です。これはReactの新しいレンダリングアーキテクチャ、React Server Components（RSC）についての解説記事です。RSCは従来のクライアントサイドレンダリング（CSR）やサーバーサイドレンダリング（SSR）の問題点を解決するために導入されました。
CSRでは初期表示に時間がかかりますし、SSRもページ単位でしか機能しないため、サーバー側の処理が重くなるとプリレンダリングに時間がかかる問題があります。これに対してRSCは、サーバー側でのみ実行されるコンポーネント（Server Components, SC）とクライアント側で実行されるコンポーネント（Client Components, CC）を組み合わせることで、これらの問題を解決します。
RSCのレンダリングプロセスは2段階に分かれており、SCがサーバー側で実行され、その結果がシリアライズされてクライアントに送信されます。クライアント側では、このデータを基にReactツリーを再構築し、CCのレンダリングを行います。
この仕組みにより、JSバンドルサイズの削減、データフェッチスピードの高速化、初期表示の改善、セキュリティの向上など、多くのメリットが得られます。特にStreaming HTMLとの組み合わせにより、FCPやTTIの改善が期待できます。ユーザーエクスペリエンスを向上させるためのJSが必要な場合のみCCを使用し、それ以外はSCを使用するのが適切です。
この記事は、React Server Componentsの基本的な理解から実践的な使い方までを網羅しており、エンジニアにとって有益な情報が詰まっています。
....
次に2つ目の記事、「NotionとSwiftBarによるタスク管理のすゝめ」をご紹介します。この記事では、タスク管理が苦手な著者がNotionとSwiftBarを活用して実施したタスク管理の方法を詳しく解説しています。特に、MacユーザーでNotionを使用している、または使用予定の方を対象としています。
著者が抱えていた主な悩みは「タスクの追加忘れ」と「見直す習慣がない」という2点で、これを解決するために以下のポイントを重視しました。
まず、SwiftBarを使用し、どのアプリを開いていてもメニューバーからタスク管理を行えるようにしました。また、Zenityを用いた簡単なGUIを構築し、突発的なタスクも迅速に追加できるようにしています。
具体的な設定方法としては、Notionでタスク管理用のデータベースを作成し、必要なカラムを設定します。次に、SwiftBarをインストールし、プラグインディレクトリを設定します。最後に、Zenityをインストールし、簡単なダイアログを作成します。
実際のディレクトリ構成や環境変数設定、メインファイルの記述方法についても細かく説明されています。著者は1ヶ月以上の運用を通じて、タスクの追加や管理がスムーズになったと感じており、今後の改良点としてプロパティの選択肢を柔軟に設定できるようにしたり、音声でタスクを追加できる機能を検討しています。
この記事は、タスク管理に悩むエンジニアにとって有益な情報を提供しています。
....
続いて3つ目の記事、「みんなで粘土をこねる web アプリを hono で作った」をご紹介します。この記事は、リアルタイムで反応が見れるアプリを作りたいという欲求から開発されたWebアプリ「Clayish」についてのものです。
「Clayish」は、ユーザーが粘土をこねる体験を共有できるアプリで、WebSocketを活用してリアルタイム通信を実現しています。CloudflareのR2、D1、KVなどのサービスを活用し、自動スケールやグローバルデプロイメントなどの機能を提供しています。特にhonoを使った開発は、ネイティブ機能を最大限に活用する点で魅力的で、Viteとの組み合わせでサーバサイドとクライアントサイドでjsxが動く点も評価されています。
DurableObjectsを用いたWebSocket管理についても触れられており、WebSocketのインスタンスをリクエスト間で保持する方法が具体的に解説されています。wrangler.tomlの設定や、DurableObjectsの実装方法、さらにWebSocketのハンドリングコードが紹介されています。
また、クライアントサイドの実装についても言及され、Solid.jsとRxJSを用いて簡潔かつ効率的なコード作成が行われたことが示されています。著者はDurableObjectsを利用することでコストを抑えながら高機能なアプリを開発できる点に満足しており、今後もCloudflareを活用していく意向を示しています。
この記事は、エンジニアにとってリアルタイム通信を実現するための技術選択や実装方法の参考になる内容です。
....
次に、4つ目の記事「Gemini API の Function Calling 機能で LLM Agent を実装する」です。Google CloudのGemini APIにはFunction Calling機能が実装されており、これによりLLM（大規模言語モデル）Agentを実装できます。
Geminiは、適切なAPIを選んで情報を収集し、質問への回答を生成します。例えば、特定の都市の気温差を知りたい場合、気象情報APIを使って各都市の気温を取得し、気温差を計算します。この一連の処理は、プロンプトとAPIの応答を繰り返すことで実現されます。
実際の実装例として、NYC TLC Tripsデータセットを使ったタクシー利用に関する質問に答えるLLM Agentを作成しました。BigQueryから必要なデータを取得し、LLMが生成したSQLクエリを実行して結果を返します。
実装手順は以下の通りです：
1. 必要なAPIの有効化
2. Workbenchインスタンスの作成
3. APIサービスの定義（OpenAPI形式）
4. LLMモデルの設定とプロンプトテンプレートの用意
5. Agentの処理を実装し、プロンプトを送信して応答を解析
この仕組みを応用すれば、「部屋が暑いからなんとかして」という指示に対して温度を下げるリクエストを自動で生成することも可能になります。
Function Callingを活用することで、エンジニアは柔軟かつ強力なLLM Agentを簡単に実装でき、実用性の高いシステムを構築することができます。
....
最後に5つ目の記事、「プロンプトの試行錯誤をラクにしたい！プロンプトのマネージメントツールの調査✏️」をご紹介します。この記事では、プロンプトエンジニアリングにおけるトライアンドエラーを効率化するためのツールを紹介しています。特にセルフホスティング可能なアプリケーションが中心です。
まず紹介されているのは「LangFuse」です。これはGitHubスター4.4kの人気ツールで、プロンプトをDBにアップロードし、バージョン管理が可能です。GUI上で履歴追跡可能で、他環境でダウンロードして再利用できる点が特徴です。また、LangChainとのインテグレーションがスムーズで、Playground機能は課金ユーザーのみ利用可能です。
次に「Agenta」です。GitHubスター968で開発途中ながらも便利なツールで、SplitView機能でプロンプトを並べて同時にテスト可能です。A/Bテストにも対応し、要約のようなタスクに便利です。バージョニングは課金ユーザーのみで、モニタリング機能はベータ版です。
最後に「promptfoo」です。GitHubスター3.4kで、日本語記事も多いツールです。テスト駆動開発を目指すツールで、CLIを使用してプロンプトやテストを定義し、カバレッジを確認できます。ブラウザのビューワーもあり、結果を共有可能です。ただし、初期設定が重く、プロダクション向けの改善に便利です。
まとめとして、どのツールを選ぶかが重要であり、著者は評価の重要性からテスト駆動のpromptfooを推奨しています。プロンプトエンジニアリングを楽しむために、これらのツールを活用することを勧めています。
....
さて、今日はReact Server Components、NotionとSwiftBarによるタスク管理、粘土をこねるWebアプリ、Gemini APIのFunction Calling機能、そしてプロンプトエンジニアリングツールについてお送りしました。どれもエンジニアの皆さんにとって役立つ情報が満載でしたね。
詳しい内容はショーノートに書いてありますので、ぜひチェックしてください。また、番組の感想もお待ちしています。それでは次回もお楽しみに！マイクでした。バイバイ！