皆さん、おはようございます！「zenncast」の時間がやってきました。今日は2024年6月17日、月曜日です。今日もZennでトレンドの記事を紹介していきますよ。

前回は、「IP Anycast について」、「TypeScriptユーザーに贈るGleam入門」、「Terraformを採用する前に知っておくべき6つの課題」といった記事を紹介しましたね。TypeScriptやTerraformについて学びたい方にはとても参考になったのではないでしょうか。

さて、今日はどんな記事がトレンドに上がっているのでしょうか。今日は5つの記事を紹介しますので、お楽しみに！

まず1つ目の記事は「一瞬で理解するHydration」です。
Hydration（ハイドレーション）とは、静的なHTMLにJavaScriptを結びつけてインタラクティブにするプロセスのことを指します。例えば、ReactでSSR（サーバーサイドレンダリング）を行う場合、ブラウザはサーバーにリクエストを送り、サーバーはJavaScriptを実行してHTMLを生成し、ブラウザに返します。この時点で受け取ったHTMLは静的でインタラクションがありません。

ここで必要になるのがHydrationです。受け取った静的なHTMLにJavaScriptをダウンロードして実行し、インタラクティブ性を付加します。この記事では、Hydrationの基本概念をSSRの具体例を用いて解説しています。エンジニアにとって、Hydrationの理解はフロントエンド開発において重要です。

....

次に紹介するのは、「VSCodeで生産性を上げる」という記事です。
本記事は、Visual Studio Code (VSCode)を活用してエンジニアリングの生産性を向上させるための具体的な設定や拡張機能について解説しています。VSCodeは多機能であり、拡張機能の開発が活発で、ユーザーフレンドリーなUIを持つ人気のエディターです。

主要な内容としては、パンくず機能の設定、拡張機能の導入方法、便利なショートカット、Go言語のデバッグ環境、Go言語の拡張機能の活用方法、ソースコードの検索機能が含まれています。これらの設定や機能が他のエンジニアの参考になれば嬉しいと締めくくっています。

....

続いて、「【iOS 18】コントロールウィジェット入門」をご紹介します。
iOS 18からサードパーティ製アプリの開発者が、独自のコントロールをコントロールセンター、ロック画面、アクションボタンに配置できるようになりました。この記事では、WWDC24のセッションに基づいて、コントロールウィジェットの追加手順と主要なプロトコル、構造体について解説しています。

WidgetKitを使用し、Xcodeプロジェクトで「Widget Extension」を追加することで、コントロールウィジェットが作成されます。具体的な手順やファイル構成、主要なプロトコルについても詳述されています。次回の記事では、コントロールのインテントやライフサイクルについて詳しく解説する予定です。

....

次に紹介するのは、「集合で理解する Typescript」という記事です。
この記事では、集合論の観点からTypescriptの型システムを理解する方法について説明しています。基本的な型は、割り当て可能な値の集合として考えられ、例えば`number`型はすべての数値の集合です。型チェックは、ある集合が別の集合の部分集合かどうかを確認することで行われます。

Union型（和集合）やIntersection型（共通部分）、特殊な型である`never`、`unknown`、`any`についても説明しています。オブジェクト型の場合、共通部分（Intersection）はすべてのプロパティを持つ型として扱われます。和集合（Union）は共通プロパティのみアクセス可能です。このような集合論を利用してTypescriptの型システムをより深く理解するためのガイドとして役立つ内容です。

....

最後に紹介するのは、「軽量なStorybook駆動開発を支えるコンポーネント設計」という記事です。
この記事では、Storybook駆動開発をゼロから導入するためのコンポーネント設計とテスト手法について解説しています。テストを開発フローに簡単に組み込むことが重要で、そのためのアプローチとしてStorybook駆動開発を紹介します。

具体例として、フォームバリデーションのテストをStorybookの「Play function」を使って実装する方法を示しています。軽量なStoryを構築するためには、APIモックツールを必要最小限に抑え、UIレイヤーの責務にフォーカスしたコンポーネント設計が重要です。C/Pパターンによる関心の分離も推奨されます。

技術スタックとしては、React、@tanstack-query/react、react-hook-fromを使用しています。Storybookを使ったIntegration Testと、ビジネスロジックに対するUnit Testの実践例も紹介されています。APIモックコードの実装に依存しない効率的な開発が実現できるアプローチが述べられています。

さて、今日は「一瞬で理解するHydration」、「VSCodeで生産性を上げる」、「【iOS 18】コントロールウィジェット入門」、「集合で理解する Typescript」、「軽量なStorybook駆動開発を支えるコンポーネント設計」の5つの記事を紹介しました。次回もお楽しみに！

詳しい内容はショーノートに書いてありますので、ぜひご覧ください。また、番組の感想も募集していますので、お気軽にお便りくださいね。それでは、次回の「zenncast」でお会いしましょう。さようなら！