おはようございます！「zenncast」の時間です。今日も元気にお届けします、MCのマイクです。今日は2024年7月17日、水曜日です。

さて、今日もZennでトレンドの記事を紹介していきますよ。前回は「ロードバランサー」や「ローカルLLM」、「ユーザーパスワードの保存方法」についてご紹介しましたが、覚えていますか？これらの記事は多くの反響をいただきました。

今日紹介する記事は全部で5本あります。それでは、さっそく一つ目の記事からご紹介します。

....

最初の記事は、「\[K, U\] extends \[U, K\] ← ナニコレ」です。この記事では、TypeScriptの型互換性チェックについて掘り下げています。\[K, U\] extends \[U, K\]という表現が出てきますが、これはKとUが互いに置き換え可能かを確認するものです。

具体的な例を挙げると、\[1, 1\] extends \[1, 1\]はtrueを返しますが、\[1, 2\] extends \[2, 1\]はfalseを返すんですね。この原理を理解すると、TypeScriptの型システムでのチェックが可能になります。

記事では、この知識を使って、JavaScriptのArray.includes関数を型システムに実装する方法も紹介しています。再帰的にチェックを行うコードの具体例も載っていて、かなり実践的な内容です。

また、Equal型という、2つの型が同じかどうかをチェックするための型関数についても解説しています。これにより、TypeScriptでの型チェックやロジックの実装方法がより深く理解できるようになります。

最後に、TypeScriptの知識を深めるためのコミュニティ「Kobe.ts」についても紹介されており、興味がある方はぜひ参加してみてください。

....

次に紹介するのは、「ELYZA-tasks-100を人間が解くと何点取れるのか？」です。この記事では、日本語の大規模言語モデル（LLM）評価データセット「ELYZA-tasks-100」を、人間が解いた場合の点数を検証しています。

著者は地方大学の数学科を卒業し、現在地方の中小メーカーで事務作業を担当している普通の労働者です。インターネットや辞書の使用を禁止し、制限時間なしで挑戦した結果、人間の著者のスコアは3.69点でした。「Claude 3.5 Sonnet」は4.42点を記録しましたから、なかなかの結果ですよね。

特に難しかった問題として、古代ギリシャやSFに関する知識が必要な問題、曖昧な指示やひっかけ問題が挙げられています。LLMの視点から見ると、問題の指示が明確であること、回答フォーマットが決まっていること、背景情報が提供されることが重要だと感じています。

この記事は、LLMの応答の正確性を高めるための改善点や、Perplexity（困惑度）を活用した推論システムの構築の可能性についても触れています。

....

続いてのお話は、「OAuthの仕組みを説明してHonoで実装してみる」です。この記事では、認証・認可の基礎とOAuthの仕組みについて学び、WebフレームワークHonoとJavaScriptランタイムBunを使ってOAuthクライアントを実装する方法を解説しています。

認証と認可の違いについて、認証はユーザーが誰であるかを確認するプロセス、認可はユーザーが特定の権限を持っているかを確認するプロセスです。認証の方法として、知識情報や所有情報、生体情報などの要素が使われます。

OAuth2.0は、サードパーティーアプリケーションにHTTPサービスへの限定的なアクセスを許可するための認可フレームワークです。主要な登場人物として、リソースオーナー、リソースサーバー、クライアント、認可サーバーの4つが紹介されています。

具体的な実装方法として、Google Drive APIを利用した簡易的なアプリの作成手順が詳しく説明されています。この記事を通じて、OAuthの基本的な仕組みと具体的な実装手順を理解することができます。

....

次の記事は、「Nuxt 3・Nuxt 4 の useFetch() を完全に理解する（したい）」です。この記事では、Nuxt 3およびNuxt 4における主要なデータ取得コンポーザブルである`useFetch`の使い方について解説しています。

`useFetch`と`$fetch`の使い分けについて説明し、`$fetch`は標準の`fetch`APIやAxiosの代替として使われ、リクエストパラメータの処理やレスポンスのパースが容易になります。一方、`useFetch`はコンポーネント内のデータ取得やSSRにおけるデータ取得、リアクティブな値に連動した再取得、キャッシュの利用などに適しています。

具体的な使い方としては、コンポーネント内のsetup関数で`useFetch`を用い、データ取得完了まで描画を停止するために`await`をつけて呼び出します。Nuxt 4では`pending`が非推奨となり、代わりに`status === 'pending'`を使います。

さらに、データ加工のための`transform`オプションや、キャッシュを利用するための`getCachedData`オプション、重複リクエストを防ぐための`dedupe: 'defer'`設定などが紹介されています。

最後に、Nuxt 4のリリースに向けて、Nuxt 3.12.xへアップデートし、新しい変更を試すことを勧めています。

....

最後に紹介するのは、「クライアント・サーバー間の一貫したバリデーション管理: Conform + Server Actions」です。この記事では、React Hook Form（RHF）とConformを使ったクライアント・サーバー間で一貫したバリデーション管理を実現する方法を紹介しています。

ConformはRHFと異なり、Server Actionsに対応しており、サーバーサイドとクライアントサイドの両方でバリデーションを行うことができます。これにより、バリデーションロジックを一箇所にまとめることができ、コードの保守性や一貫性が向上します。

具体的な実装方法として、フォームコンポーネント`TagForm`の作成方法が紹介されています。`useTagForm`カスタムフックを利用してフォームの状態管理とバリデーションを行い、`Conform`ライブラリの`getFormProps`と`getInputProps`を使用してアクセシビリティとコードの可読性を向上させています。

また、サーバーアクションの`createTag`と`updateTag`についても説明されています。これらを使用して、タグの新規作成と更新を行い、その結果をクライアントに返す方法が解説されています。

この記事を通じて、ConformとServer Actionsを組み合わせることで、クライアントとサーバー間で一貫したバリデーションを実現する方法を学ぶことができます。

....

さて、今日は5本の記事を紹介しました。「\[K, U\] extends \[U, K\] ← ナニコレ」、「ELYZA-tasks-100を人間が解くと何点取れるのか？」、「OAuthの仕組みを説明してHonoで実装してみる」、「Nuxt 3・Nuxt 4 の useFetch() を完全に理解する（したい）」、「クライアント・サーバー間の一貫したバリデーション管理: Conform + Server Actions」の5本でした。

それでは、次回の「zenncast」でお会いできるのを楽しみにしています。今日紹介した記事の詳しい内容はショーノートに書いてありますので、ぜひチェックしてみてください。番組の感想やおたよりも募集していますので、どしどしお送りくださいね。それでは、またお会いしましょう！