皆さん、こんにちは！「zenncast」の時間がやってきました。MCのマイクです！今日は2024年6月5日、水曜日です。今日もZennでトレンドの記事を紹介していきますので、どうぞお楽しみに！

まずは、前回紹介した記事に軽く触れておきましょう。

前回紹介した記事は、「PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉」でしたね。新しいレンダリング技術についての話題でした。そして、「とあるQAエンジニアによる日本語へのこだわりのススメ」も印象的でしたね。QAと日本語、どちらも大事です！「SQLクエリに対するスナップショットテストの実践例」も紹介しました。テストの実践例って、具体的で役立ちますよね。

さてさて、今日はどんなトレンド記事があるのでしょうか？今日はなんと、5本の記事を紹介します！では、早速始めましょう。

。。。。

まず1つ目の記事、「Python + VSCode の環境構築 20240604」です。このドキュメントでは、PythonとVSCodeを使ったモダンな開発環境の構築方法が詳細に解説されています。特に注目すべきポイントは、Ryeを使って環境を管理し、システムのPythonに触れずに開発を進めるという方針です。MacとWindows (WSL) で同じ環境をセットアップする方法も紹介されています。

プロジェクトのセットアップでは、`rye init` コマンドでプロジェクトを作成し、バージョンを固定 (`rye pin 3.12`)している点が特徴です。必要なパッケージは`rye sync`で簡単にインストールできます。

フォーマッタとしては`ruff`が推奨されており、VSCodeの設定で`ruff`をデフォルトフォーマッタに設定することで、保存時に自動フォーマットが実行されるようになります。

型チェックには`mypy`を使用し、VSCodeでの型エラー表示のために拡張機能を追加する方法も説明されています。さらに、`numpy`などのライブラリ補完の設定や、`dataclass`を使ったシンプルなデータモデルの作成もカバーされています。

テストランナーには`pytest`が使われており、テストコードの記述と実行方法も詳細に解説されています。最後に、`FastAPI`と`uvicorn`を使ってサーバーを立てる方法や、TypeScriptとの連携についても触れられています。

この記事を読めば、効率的でクリーンなPython開発環境を構築する手助けになること間違いなしです。

。。。。

次に2つ目の記事、「React Hooksもりもり構成のチャット機能を考える[React 19 / Next.js 15]」です。この記事では、React 19で追加された新しいHooks、`useActionState`と`useOptimistic`を活用し、非同期状態管理ライブラリを使わずにチャット機能を実装する方法が紹介されています。

Next.jsをフレームワークとして用い、データベースにはNeon DB、ORMにはDrizzle ORMを使用しています。認証には`Auth.js(v5)`を採用しています。主要なコンポーネントとしては、`Messages`コンポーネントと`MessageFooter`コンポーネントが紹介されています。

`Messages`コンポーネントでは、`useOptimistic`を使用してメッセージ送信時に即座に画面に反映する楽観的更新を実現しています。また、`MessageFooter`コンポーネントでは、`useActionState`を利用してメッセージ送信のアクション状態を管理しています。

エラーハンドリングとして、送信が失敗した場合には再送信ボタンが表示され、ユーザーに適切なフィードバックを提供する仕組みが整っています。このように、React 19の新しいHooksを活用することで、非同期状態管理ライブラリに頼らずにチャット機能を実装する方法が詳しく解説されています。

。。。。

3つ目の記事は、「vuejs/core のソースコードを探検する楽しさ」です。この記事では、フロントエンドエンジニアのhiroさんが、Vue.jsのソースコードを探検する楽しさを紹介しています。hiroさんがVueのソースコードに興味を持ったきっかけは、「chibivue」という本で、これを通じてVueの基本機能を自分で実装することで理解を深めたそうです。

具体的には、`createApp()`関数を例に取り、その使用方法と型について解説しています。`createApp()`はVueアプリケーションを作成するための関数で、戻り値は`App`型、引数はルートコンポーネントです。また、`template`構文がコンパイルされて`render()`メソッドになることもコードを書き換えて確認しています。

ソースコードを探検する手順としては、ドキュメントの解説を読み、コードを書き換え、コンソールを確認し、ソースコードと見比べて、再度ドキュメントを読むことが推奨されています。この記事を通じて、Vue.jsのソースコードを探検する楽しさと、その過程で得られる知識の深まりを多くの人に知ってもらいたいというhiroさんの思いが伝わります。

。。。。

4つ目の記事、「100秒で理解するHTTP Cookie」です。この記事では、HTTP Cookieの基本概念とその利用方法について解説されています。HTTP Cookieとは、サーバーがユーザーのブラウザに送信する小さなデータで、ブラウザに保存され、後のリクエストと共に同じサーバーに返送されるものです。

HTTPはステートレスなプロトコルなので、ユーザーのログイン状態などを維持するためにCookieが利用されます。具体的な流れとしては、ユーザーがログインするとサーバーはレスポンスと共にCookieを送信し、そのCookieにはユーザー情報やセッションIDが含まれます。ブラウザはこのCookieを保存し、次回以降のリクエスト時にCookieをサーバーに送り返すことで、ユーザーの状態を認識します。

このように、Cookieを使うことでユーザーのログイン状態の維持やショッピングカートの中身の保持など、ユーザー体験を向上させることが可能です。この記事は「100秒で理解する」シリーズの一部で、他の記事も紹介されていますので、ぜひチェックしてみてください。

。。。。

最後に5つ目の記事、「TypeScriptは26以上のメンバーを絞り込めない！」です。この記事では、TypeScriptで26以上のメンバーを持つMappedTypeで型の絞り込みができない問題について解説されています。具体的には、26のキーを持つオブジェクトを元にMappedTypeを作成し、特定のキーに対して型を絞り込む際に型推論に失敗するという問題です。

これは、TypeScriptの内部処理で可能性のあるすべての値を列挙し、それが特定のオブジェクトに割り当て可能かどうかを確認する過程で、組み合わせ爆発を避けるためのハードコードされた制限（24）が原因です。この制限により、25以上のメンバーを持つMappedTypeでは型推論が正しく機能しません。

この問題を回避する方法としては、タグ付きUnionを使用することが挙げられます。タグ付きUnionでも同様の制約が存在しますが、特定のUnionに絞り込む際には別の手法を用いることで回避可能です。例えば、タグ付きUnion全体を引数として渡し、関数内で絞り込みを行う方法があります。

この記事を通じて、TypeScriptで26以上のメンバーを持つMappedTypeでの型絞り込みは組み合わせ爆発を防ぐための制限により正常に機能しないため、タグ付きUnionなど他の手法を検討する必要があることが分かります。

。。。。

さて、今日は5本の記事を紹介しました。「Python + VSCode の環境構築 20240604」、そして「React Hooksもりもり構成のチャット機能を考える[React 19 / Next.js 15]」、さらに「vuejs/core のソースコードを探検する楽しさ」、「100秒で理解するHTTP Cookie」、最後に「TypeScriptは26以上のメンバーを絞り込めない！」でしたね。

次回もまた面白い記事を紹介していきますので、お楽しみに！詳しい内容やリンクはショーノートに書いてありますので、ぜひチェックしてみてください。そして、番組への感想もお待ちしています！

それでは、また次回お会いしましょう。マイクでした！