AgedCoffee

この週報は各地の内容をまとめたものです

• 技術
  • 四層負荷分散の考察
  • GLB: GitHub のオープンソース負荷分散器
  • Playwright を使ったページ要素のスクリーンショット取得の高度な使用パターン
  • 技術的負債の定義と対処法
  • 次の描画へのインタラクションは実際にユーザー行動と相関するのか？
  • React Native Skia の始め方
  • TanStack Router – 私たちのための現代の React
  • 完璧な印刷、React-to-Print を使った開発者の旅
• ツール
  • nft
  • JSPyBridge
  • stylex
  • tinyld
• 更新
  • XState v5 が登場
  • Astro 4.0
  • RTK-v2.0.0
  • Storybook 7.6
• AI
  • design2code
  • CopilotKit
• その他

技術#

四層負荷分散の考察#

四層負荷分散はネットワークで一般的な技術で、通常は TCP 層のリバースプロキシとして使用されます。これは TCP ヘッダーのポートとフラグに基づいてデータを転送し、完全な TCP 実装を維持しません。この負荷分散は、TCP プロキシではなく IP パケットの転送に近いです。この設計により、四層負荷分散は効率的な転送効率を持ちます。基本的な概念に加えて、サービス発見に依存するクライアント側の負荷分散とリバースプロキシモードの負荷分散技術についても紹介されています。後者では、負荷分散器をバックエンドインスタンスの前に配置し、トラフィックを均等にバックエンドインスタンスに転送することでスケーリングを実現します。しかし、負荷分散器自体も自身のスケーリングとサービス発見の問題を解決する必要があります。

• 四層負荷分散は TCP 層のリバースプロキシで、TCP ヘッダーのポートとフラグに基づいてデータを転送し、完全な TCP 実装を維持しません。
• 四層負荷分散は IP パケットの転送に近く、転送効率が高いです。
• サービス発見に依存するクライアント側の負荷分散は、クライアントが複数のサーバーの存在を知り、特定のポリシーに基づいて異なるサーバーにアクセスすることを可能にします。
• リバースプロキシモードの負荷分散は、バックエンドインスタンスの前に負荷分散器を配置することでスケーリングを実現し、トラフィックを均等にバックエンドインスタンスに転送します。
• 負荷分散器自体は自身のスケーリングとサービス発見の問題を解決する必要があります。

GLB: GitHub のオープンソース負荷分散器#

GitHub は彼らの負荷分散器 GLB Director の設計詳細を発表し、オープンソースとして公開しました。GLB Director は第四層負荷分散器で、1 つの IP アドレスを複数の物理マシンに分散させ、サーバーの変更時に接続の中断を最小限に抑えます。これは haproxy や nginx などのサービスを置き換えるものではなく、これらのサービス（または任意の TCP サービス）の前にレイヤーを追加し、各マシンにユニークな IP アドレスを持たせることなく、複数の物理マシンでスケールできるようにします。GLB Director は ECMP（Equal-Cost Multi-Path）ルーティングを利用して IP アドレスのスケーリングを実現し、ハッシュアルゴリズムを使用して接続を複数のパスに均等に分配します。接続の断裂の問題を解決するために、GLB Director はハッシュを制御し、接続に関連する状態を保存する新しいレイヤー「ディレクター」を導入しました。GLB Director は、プロキシサーバーの既存のフロー状態を利用することで、ディレクターレイヤーで接続状態を重複して保存する問題を回避しました。一貫性を保つために、GLB Director は「ランデブーハッシング」を使用して主サーバーとバックアップサーバーを選択し、サーバーの状態を調整してサーバーを追加および削除します。

• GitHub は彼らの負荷分散器 GLB Director の設計詳細を発表し、オープンソースプロジェクトとして公開しました。
• GLB Director は Layer 4 負荷分散器で、単一の IP アドレスを複数の物理マシンに分散させ、負荷分散を実現し、接続の中断を最小限に抑えます。
• GLB Director は ECMP ルーティングとフロー状態を利用して、従来の負荷分散器の設計を改善し、プロキシサーバーが無状態のままで追加および削除でき、接続の安定性を保ちます。

Playwright を使ったページ要素のスクリーンショット取得の高度な使用パターン#

この記事では、Playwright を使用してウェブページのスクリーンショットを取得し、カスタマイズする方法について説明しています。著者はまず、Playwright フレームワークを使用したスクリーンショットの基本的な使い方を紹介し、次に例を通じて Playwright の addScriptTag メソッドを使用してスクリーンショット前に DOM を変更する方法や、Sharp モジュールを使用してスクリーンショットを変更する方法を示しています。最後に、著者は Playwright の mask 機能についても紹介し、CSS セレクターを指定してスクリーンショット内の特定の要素を非表示にすることができます。

• Playwright ツールを使用すると、ページのスクリーンショットを簡単に取得でき、視覚的回帰テストやサードパーティのウェブページのクロールに利用できます。
• Playwright の addScriptTag メソッドを使用することで、スクリーンショット前にページの DOM 構造を変更し、スクリーンショットの内容を制御できます。
• Sharp モジュールを使用して、スクリーンショットをトリミング、リサイズ、処理し、画像の変更を実現できます。

技術的負債の定義と対処法#

この記事では、技術的負債の定義と対処方法について議論しています。技術的負債とは、開発プロセスにおいてコードを完成させるために行った妥協を指し、無謀な負債、慎重な負債、故意の負債、無意識の負債が含まれます。技術的負債は、コードベースの不安定性やパフォーマンスの問題などの悪影響をもたらします。技術的負債に対処するためには、すべての妥協を記録し、コメントを追加し、コーディングスタイルガイドラインを厳守し、コードレビューを行い、恥辱ファイルを使用して既知の負債を追跡および処理することが推奨されます。

• 技術的負債とは、開発プロセスにおいて問題を解決するために行った妥協であり、コードの安定性や保守性に影響を与える可能性があります。
• 技術的負債には 4 つのタイプがあり：無謀な負債、慎重な負債、故意の負債、無意識の負債があり、それぞれ異なる結果と対処方法があります。
• 技術的負債に対処する方法には、すべてを記録し、コーディングスタイルガイドラインを遵守し、コードレビューを行い、技術的負債リストを追跡することが含まれます。

次の描画へのインタラクションは実際にユーザー行動と相関するのか？#

この記事では、Google が導入した次の描画へのインタラクション（INP）指標について議論しています。この指標は、2024 年 3 月に最初の入力遅延（FID）の代わりにコア Web 指標の 1 つとなります。記事では、INP の定義、測定方法、影響要因について説明し、実際のデータを通じて INP とユーザー行動およびビジネス指標との相関関係を分析しています。著者はまた、異なるウェブサイトでの結果は異なる可能性があり、INP と転換率には負の相関関係があるが、Google の閾値との一貫した関連性はないと述べています。最後に、SpeedCurve で INP を測定する方法と関連リソースを紹介しています。

• 次の描画へのインタラクション（INP）は、ページがユーザーのインタラクションにどれだけ応答するかを測定する指標であり、実際のユーザー行動やビジネス指標との負の相関関係があります。
• INP の良し悪しはユーザー行動や転換率と負の相関を示しており、INP はユーザーの知覚性能に関連する意味のある指標です。
• INP と Google が設定した閾値（良好、改善が必要、悪い）との間には一貫した相関関係はないため、自分のデータに基づいて閾値を決定する必要があります。

React Native Skia の始め方#

Skia は、iOS、Android、macOS、Windows、Linux、およびブラウザ上でグラフィックスを描画するためのクロスプラットフォーム 2D グラフィックスライブラリです。@shopify/react-native-skia ライブラリは、Skia の機能を React Native 開発者に公開します。Skia は React Native 内でカスタムユーザーインタラクションを描画するために使用でき、パフォーマンスとアニメーション効果を最適化する特徴があります。この記事では、Skia を使用して基本的な形状やパスを描画する方法と、react-native-reanimated ライブラリを使用してアニメーション効果を実現する方法を紹介しています。

• React Native Skia は、複数のオペレーティングシステムやブラウザで動作するクロスプラットフォームの 2D グラフィックスライブラリです。
• RN Skia は強力な描画機能を提供し、カスタム形状を描画し、アニメーション効果を実現できます。
• React Native Skia を使用することで、通常の React Native コンポーネントとは異なるカスタムユーザーインタラクションを構築し、高性能な動的効果を実現できます。

TanStack Router – 私たちのための現代の React#

TanStack Router は、タイプセーフなルーティングとデータロード機能を提供する React ベースのルーティングライブラリです。その設計は Remix、NextJS、TRPC、Chicane からインスパイアを受けています。ルーティングをアプリの状態と UI に結びつけることで、アプリが URL とページの状態をより良く制御できるようにし、より良いマルチタスク処理とデータの事前読み込み効果を実現します。TanStack Router はファイルベースのルーティングとネストされたルーティングもサポートしており、開発者が次世代アプリをより簡単に構築できるようにします。現在はベータ版ですが、すでに開発者からの支持を受けています。

• Tanner は TanStack Router を通じて、私たちにタイプセーフなルーティングを提供し、次世代アプリの構築を容易にします。
• TanStack Router は、アプリケーションの状態と UI の制御の中にルーティングを組み込み、重要な UI の変化が新しい URL に関連付けられるようにし、ページの再構築とマルチタスク処理の能力を実現します。
• TanStack Router のネストされたルーティング機能は、異なる部分の UI を制御することで、より柔軟なページレイアウトを実現し、読み込みやエラーステータスの処理をサポートします。

完璧な印刷、React-to-Print を使った開発者の旅#

この記事では、著者が商業アプリケーションでカスタム印刷ソリューションを実現した経験について語っています。著者は "react-to-print" ライブラリを使用してブラウザのネイティブ印刷 API を活用し、デフォルトの印刷レイアウトの問題を解決しました。著者はこのライブラリを選んだ理由、直面した課題、および解決策を共有しています。この記事は、Web 開発の分野における継続的な学習、問題解決、コミュニティの重要性を強調しています。

• より良い印刷レイアウトを実現するためには、時にはブラウザのデフォルトの印刷ソリューションを使用する必要があります。
• "react-to-print" は、ブラウザのネイティブ印刷 API に基づいて構築されたライブラリで、高いダウンロード数と広範なユーザーを持っています。
• 実装中には、コンポーネントの参照、非表示の要素、キーボードイベントなどの問題を解決することに注意が必要で、理想的な印刷効果を実現します。

ツール#

nft#

Node.js 依存追跡ツール

JSPyBridge#

Node.js と Python の相互運用のためのブリッジ

stylex#

野心的なユーザーインターフェースのためのスタイルシステム

tinyld#

NodeJS のシンプルで効率的な言語検出ライブラリ

更新#

XState v5 が登場#

XState v5 は、状態機械、状態図、およびアクターモデルに基づくオープンソースの状態管理およびオーケストレーションソリューションです。主にアクターの使用に焦点を当てており、開発者が複雑なアプリケーションロジックをより簡単に記述および管理できるようにします。このバージョンでは、XState はアクターを抽象単位として導入し、Promise ロジック、Transition 関数ロジック、Observable ロジック、Callback ロジックなどのさまざまなタイプのロジックを作成するために使用できます。また、XState v5 は Inspect API、深い永続化、アクターシステムなどの新機能も導入しています。このバージョンは API を簡素化し、パッケージサイズを小さくし、ドキュメントの改善と新しい例の追加も行われています。

• XState v5 は、状態機械、状態図、およびアクターモデルに基づくオープンソースの状態管理およびオーケストレーションソリューションで、ロジック管理と協調開発を簡素化することを目的としています。
• XState v5 の主な焦点はアクターであり、これによりシステム内の複数の部分間の通信と協力をシミュレートできます。
• XState v5 は新しいアクター論理作成器を導入し、アクターを作成することで Promise、遷移関数、Observable、Callback などの異なるタイプのロジックを実現します。

Astro 4.0#

Astro 4.0 は、コンテンツ駆動型ウェブサイトを構築するためのウェブフレームワークで、新しい API、より高速なビルド速度、再設計されたドキュメント、およびローカル開発環境を強化する開発ツールを提供します。新バージョンのハイライトには、Astro 開発者ツールバー、国際化ルーティング、インクリメンタルコンテンツキャッシュ、新しいビュー変換 API、再設計されたログとドキュメントが含まれています。Astro 4.0 は国際化ルーティングやインクリメンタルコンテンツキャッシュなどの新機能も導入し、開発を簡素化し、ビルド速度を向上させます。npm を通じて Astro 4.0 をインストールし、Astro 開発者ツールバーを使用してローカルブラウザ開発体験を向上させることができます。

• Astro 4.0 は、コンテンツ駆動型ウェブサイトを構築するためのウェブフレームワークで、迅速な読み込みと強力な SEO 機能を備えています。
• Astro 4.0 は Astro Dev Toolbar を導入し、ローカルブラウザ開発体験を強化およびカスタマイズできます。
• Astro 4.0 は国際化（i18n）ルーティング、インクリメンタルコンテンツキャッシュ、新しいビュー遷移 API、再設計されたログとドキュメントなどの機能を追加しました。

RTK-v2.0.0#

この重要なバージョン更新は、古い構文の削除、中間ウェアとエンハンサーオプションの更新、新しいメソッドと中間ウェアの追加、他の依存関係の更新など、いくつかの重要な変更をもたらします。また、TypeScript のサポートやビルド出力の現代化も改善されています。このバージョンは Redux シリーズのすべての関連パッケージの重要な更新の 1 つです。具体的な変更点や移行ガイドは Redux ドキュメントで確認できます。

• RTK 2.0 の主な更新には、非推奨のオブジェクト構文の削除、configureStore の中間ウェアとエンハンサーオプションの更新、combineSlices や動的中間ウェアなどの新機能の追加、RTK Query や他のライブラリの更新が含まれます。
• RTK 2.0 では、createReducer と createSlice.extraReducers はオブジェクト形式の構文をサポートしなくなり、builder コールバック形式の使用が推奨されます。
• configureStore の中間ウェアとエンハンサーオプションは、コールバック関数の形式で使用する必要があり、デフォルトの中間ウェアとエンハンサーの使用が推奨されます。
• RTK Query の動作が変更され、常にキャッシュエントリを追跡し、サブスクリプション状態の同期が最適化されました。
• Redux は ESM/CJS 互換のパッケージをリリースし、ビルド出力とツールチェーンを最適化し、UMD ビルドを提供しなくなりました。
• RTK は Redux core 5.0、Reselect 5.0、Redux Thunk 3.0、Immer 10.0 に依存しています。

Storybook 7.6#

Storybook 7.6 は Storybook 7 シリーズの最後のマイナーバージョンで、パフォーマンスとユーザー体験を向上させ、フロントエンドエコシステム内のツールとの統合を強化し、次の主要バージョンである Storybook 8 への道を開きました。更新内容には、SWC サポートの改善、新しいテストツールと高速ビルドモード、NextJS SWC + avif サポートと修正、SvelteKit ページとナビゲーションのシミュレーション、React-docgen のアップグレード、背景テーマ、ビューポートと改善されたアクセシビリティ、診断エラーなどが含まれています。また、Storyshots や Vue2 のサポートなど、一部の機能が削除されています。Storybook 7.6 は 7.x シリーズの最後のバージョンで、次の Storybook 8 の準備を整えています。

• Storybook 7.6 の改善には、パフォーマンスの向上とユーザー体験の改善が含まれ、フロントエンドエコシステム内のツールとの統合がより密接になり、次の主要バージョンである Storybook 8 の準備が整いました。
• Storybook 7.6 は Speedy Web Compiler（SWC）を使用して Webpack プロジェクトの起動時間を 50％以上短縮し、Preact と React の fast-refresh の SWC 問題を修正しました。
• Storybook 7.6 は Next.js ユーザーに SWC と avif のサポートを提供し、Image コンポーネントの ref forwarding 問題や Jest の互換性問題を修正しました。

AI#

design2code#

任意のウェブデザインのスクリーンショットをクリーンな HTML/CSS コードに変換します。

CopilotKit#

組み込みの AI チャットボット🤖と AI ベースのテキストエリア✨を React Web アプリケーションに統合します。

その他#

キャリアを特定の事柄として捉えないでください。これは人間が発明した最も危険で、最も窮屈な概念の一つであり、大多数の夢や直感の敵でもあります。
キャリアは、日常の仕事や生活の中で、絶えず探求し、訓練し、実践し、徐々に進歩していくプロセスを指す抽象的な概念であるべきです。

--《ジョブズの遺産》