その週報は、さまざまな場所の内容をまとめたものです
技術#
この記事では、TypeScript での infer キーワードの使用方法について説明しています。このキーワードを使用すると、開発者は既存のコードから型情報を抽出および推論することができます。infer キーワードを使用すると、既存の型や式から型を抽出し、条件型、関数、マップ型などのシナリオで使用することができます。infer キーワードを使用すると、コードの型安全性が向上し、効率的で明確なコードになります。記事では、このキーワードのいくつかの注意点と実際の応用例も紹介しています。
Vercel の代替としてオープンソースの解決策を使用する方法
この記事では、Vercel が最近発表したサーバーレスのストレージソリューションについて、Postgres、Redis、Blob を含むものを取り上げています。これらのサービスはスムーズなワークフローを提供していますが、価格が高いです。記事では、代替案として WunderGraph を使用することを提案しています。WunderGraph は無料でオープンソースであり、タイプセーフで DX が向上し、ローカル開発が容易です。記事では、WunderGraph のクイックスタートガイドを提供し、Neon for PostgreSQL、Upstash for Redis、Cloudflare R2 for blob storage の実装方法も説明しています。
セマンティクスとポップオーバー属性：どちらを使用するべきか？
この記事では、HTML の新しいポップオーバー属性が要素に動作を追加することなく要素に追加できるようにする方法について議論しています。著者は、ポップオーバー属性と一緒に使用できるさまざまな役割（メニュー、ダイアログ、リストボックスなど）について探求し、それぞれの役割の使用例を提供しています。記事では、各役割のキーボードおよびフォーカスの期待値も説明し、ポップオーバー属性が実験的であり、広くサポートされていないことも指摘しています。
- React Server Components は、サーバードライブンの思考モデルを使用して、モダンな UX を実現し、クライアント側の JavaScript パッケージを大幅に削減します。
- Server Components は Server-side Rendering（SSR）の代替ではありませんが、併用することで、早期レンダリングを実現するための中間形式をサポートし、それを HTML にレンダリングするための SSR インフラストラクチャを使用できます。
- Server Components は、クライアントコンポーネント内のすべての一般的なインポートを可能なコード分割ポイントとして扱う自動コード分割を導入し、クライアントがレンダリングプロセス中にコンポーネントをより早く取得できるようにします。
Next.js アプリルーターを本番環境に導入する際に学んだ 5 つの教訓
- Next.js 13 の App Router には、ネストされたレイアウト、サーバーコンポーネント、ストリーミングなど、いくつかの新機能が提供されています。これは、React 18 のプリミティブを完全に活用した最初のオープンソース実装です。
- App Router には、クライアントキャッシュとサーバーキャッシュの 2 つのキャッシュがあり、それらがどのように相互作用するかを理解する必要があります。
- ストリーミング機能により、すべてのデータの読み込みを待つ必要なく、ページの一部をより早く表示することができます。
- URL の検索パラメータは、レイアウトサーバーコンポーネントでは使用できず、代わりに URL パスで使用することが最適です。
- App Router の規格に従ったファイル構造には、React プリミティブの使用を促進するなど、多くの利点があります。
- App Router のような新しい技術を採用することは挑戦的な場合がありますが、多くの利点を提供します。
ツール#
zact
React 用のサーバーアクション
その他#
スタートアップには、「最小限の実行可能な製品」という原則があります。これは、製品が実行可能な最も単純な状態になれば、市場にリリースし、その実行可能性を検証するという意味です。
私は逆の概念を提案したいと思います。それは「最大限の実行可能な製品」と呼ばれ、主要な機能が完全であれば、そこで終了し、新しい機能を追加しないというものです。私は、優れたソフトウェアがますます複雑になり、機能が増え続けて使いにくくなるまで見てきました。