この週報は主に各地の内容のまとめです。
- summary: ''
- 技術
- ESLint ガイド:自信を持って使う方法
- React は Angular.js の瞬間を迎えているのか?
- 2023 年の React 対 Vue 対その他についての考え
- アイソモーフィック開発
- Vite はどのように旧バージョンのブラウザと互換性を持つのか
- Express.js でサーバー送信イベントを使用して検索レイテンシを改善する方法
- ハイドレーションは木、再開可能性は地図
- モバイル H5 ページの異なる Android および iOS デバイスでの互換性適応
- block () の裏側
- Node.js でスケーラブルなバックエンドを設計する
- RSC をゼロから。パート 1: サーバーコンポーネント
- ツール
- 更新
- その他
技術#
ESLint ガイド:自信を持って使う方法#
- ESLint は静的コード分析ツールで、コードの作成に伴いコードの品質を維持・改善するのに役立ちます。
- ESLint はチームが設定ファイルに記録された規範に従うことを許可し、毎回これらの規範を再コーディングして適用する必要がなくなります。
- 新しい ESLint 設定システム Flat config は、プロジェクト内で ESLint を設定する方法に大きな変革をもたらし、CLI でサポートされ、バージョン 8.23.0 から公式ドキュメントが提供されています。
この記事は、ESLint 設定を外部依存関係として共有し、コード標準を自動化する方法を説明する一連の記事の一部です。最初に ESLint を静的コード分析ツールとして紹介し、ルールに基づいて自動的に意見を形成し、ルールが破られたときに警告を発することでコードの品質を維持・改善するのに役立ちます。この記事では、ルールやオーバーライドなど、ESLint 設定オブジェクトの主要な属性を振り返ります。その後、従来のシステムを置き換える新しい ESLint 設定システム「Flat config」を紹介し、プロジェクト内で ESLint を設定する方法に大きな変革をもたらします。最後に、ESLint を習得し、flat config に移行し、ESLint の共有可能な設定を作成し、より多くのツールのサポートを得るための体験を改善する計画の概要をまとめます。
React は Angular.js の瞬間を迎えているのか?#
- React サーバーコンポーネント(React Server Components)は、React 開発に重大な変化をもたらし、データ取得からスタイルまでのすべてを再学習する必要があります。
- 既存の React サードパーティライブラリはサーバーコンポーネントに適しておらず、開発者は手動でコーディングするか、ライブラリの作者が修正するのを待つ必要があります。
- React サーバーコンポーネントは、現在の React エコシステムの利点を破壊し、UI ツールキット、フォームフレームワーク、API クライアント、SaaS 統合などのツールが非常に困難になります。
React サーバーコンポーネントは、React と Next.js チームによって推進されている Web アプリケーションを構築するための新しい方法です。これは、React アプリケーションの構築方法に重大な変化をもたらし、再学習を必要とします。たとえば、データ取得は現在、非同期コンポーネント内の fetch メソッドに依存しており、通常の React フックはサーバーコンポーネント内でエラーを引き起こします。さらに、CSS-in-JS はサーバーコンポーネントと互換性がなく、デバッグも非常に困難です。React サーバーコンポーネントは、ほぼすべての既存の React サードパーティライブラリを破壊します。これは重大な変革であり、既存の React エコシステムを破壊し、開発者は多くのコードを手動で記述する必要があるかもしれません。
2023 年の React 対 Vue 対その他についての考え#
- 専門的な目的のために React と Next.js を学ぶことをお勧めします。これらは現在業界で最も広く使用されているフロントエンドプラットフォームです。
- フロントエンド開発の状況は非常に複雑でリソースを消費し、全体のツールチェーンなしで簡単なインタラクションを構築することさえ難しいです。
- 個人の成長や副業プロジェクトにおいては、Vue の方が望ましいかもしれません。なぜなら、使いやすく、誤用されにくいからです。
この記事では、フロントエンドフレームワークとプラットフォームの状況について議論し、初心者にどれを学ぶべきかのアドバイスを提供します。著者は、React + Next.js が専門家の選択プラットフォームであるが、Vue も個人プロジェクトには良い選択肢であると指摘しています。著者はまた、現代のフロントエンド開発の複雑さとリソース使用に対するフラストレーションを表明しています。彼らは TypeScript を学び、React コード内でパフォーマンスに注意を払うことを提案しています。記事は、React と Vue のレンダリングサイクルについての議論で締めくくられています。
アイソモーフィック開発#
- アイソモーフィック開発は、サーバーとクライアント環境の両方で安全かつ効率的に実行できるコードを書くことを含み、必ずしもフロントエンド開発者が簡単に完了できるわけではありません。
- フルスタック開発者にとって、コードはフロントエンドとバックエンドの間で分割され、彼らは 2 つの独立したデバッグ環境でバランスを取る必要があり、データ漏洩やセキュリティの脆弱性を防ぐ必要があります。
- フルスタック開発者は、クライアントとサーバー間のパフォーマンスの違いや、主データベースのパフォーマンス、クエリの最適化、インデックスなどの問題にも注意を払う必要があります。
この記事では、サーバーとクライアント環境でコードが実行されるアイソモーフィック開発の課題について議論します。著者は、このパラダイムシフトが必ずしも開発を容易にするわけではなく、デバッグ、安全性、パフォーマンス、データクエリに関連する新たな複雑さをもたらすと考えています。著者はまた、現在の開発ツールがこれらの課題に対処するために完全に装備されていないことを指摘し、開発者はこのような環境で効果的に作業するために新しい知識とスキルを習得する必要があります。著者は、このアプローチを説明するために「アイソモーフィック開発」という新しい用語を使用することを提案しています。
Vite はどのように旧バージョンのブラウザと互換性を持つのか#
- Vite は @vitejs/plugin-legacy を使用して、babel でトランスパイルされたコードを生成する旧ファイルを生成することで旧バージョンのブラウザをサポートします。
- index.html ファイルにはスクリプトが含まれ、__vite_is_modern_browser 変数に基づいて旧コードを動的に読み込みます。
- スクリプトタグで type="module" と nomodule 属性を使用することで、ブラウザのモジュール読み込みと ES6 構文のサポートに応じてコードを選択的に実行します。
この記事では、@vitejs/plugin-legacy プラグインを使用して Vite を旧バージョンのブラウザと互換性を持たせる方法について議論します。このプラグインは、各ファイルに対して旧版ファイルを生成して互換性のあるコードを生成します。記事では、index.html ファイル内のコードを説明し、主スクリプトファイルをインポートするために "type=module" 属性を持つスクリプトタグを作成します。また、旧バージョンのブラウザと互換性を持たせるために polyfills-legacy ファイルと index-legacy ファイルを読み込むスクリプトタグも作成します。記事では、ブラウザがモジュールをサポートしているが最新の構文をサポートしていない場合、プラグインに潜在的なバグがある可能性があることも指摘しています。
Express.js でサーバー送信イベントを使用して検索レイテンシを改善する方法#
- サーバー送信イベント(Server-sent Events、SSE)を使用して稀なクエリで検索結果を転送することで、ユーザーエクスペリエンスを改善でき、認証やリクエストの状態を変更する必要がありません。
- SSE イベントには、イベントやデータなどのフィールドが含まれ、\n\n で区切られます。
- クライアント側で React を使用して SSE を統合するのは少し厄介ですが、EventSource の周りにカスタムラッパーを作成することで実現できます。
この記事では、HyperDX プラットフォームで検索結果をストリーミングするためにサーバー送信イベント(SSE)を実装する方法について議論します。そのシンプルさと HTTP との互換性から、Websockets の代わりに SSE が選ばれました。記事では、Express.js ルートに SSE を追加する方法や、SSE イベントをフォーマットする方法の例を提供します。また、クライアントからのクエリを EventSource を使用して行う方法についても議論し、実装に関する提案を提供します。著者は、SSE を実装する際にアプリケーション固有および React 固有の機能を考慮し、フィードバックに基づいて続編を書く意欲を示しています。
ハイドレーションは木、再開可能性は地図#
- ハイドレーション(Hydration)は、ブラウザ内の木の各コンポーネントを実行することで、HTML にシリアル化される際に失われた状態やイベントハンドラを復元し、シングルページアプリケーション(SPA)フレームワークがブラウザ内でインタラクションを実現できるようにするアルゴリズムです。
- 部分的ハイドレーション(Partial hydration)は、「インタラクティブな島」を作成することでブラウザの負担を軽減しますが、境界を作成し、アプリケーションの異なる部分間の通信を妨げる可能性があります。
- 再開可能性(Resumability)は、異なるアルゴリズムで、イベントハンドラをルートに配置し、すべてのコンポーネントを静的と見なし、ハイドレーションやコンポーネントの走査の必要性を排除します。
この記事では、Web アプリケーションにインタラクティビティを追加するための異なる方法について議論し、特にハイドレーションと再開可能性の概念に焦点を当てています。ハイドレーションは、ルートからアプリケーション全体を再実行して HTML にシリアル化される際に失われた状態やイベントハンドラを復元するのに対し、再開可能性はイベントハンドラをルートとして扱い、すべてのインタラクティブコンポーネントをダウンロードして実行する必要がありません。部分的ハイドレーションと React サーバーコンポーネントはハイドレーションの異なるバリエーションであり、異なるトレードオフを提供し、再開可能性は根本的に異なるアルゴリズムです。開発者は、自身のニーズに最も適した方法を選択できます。
モバイル H5 ページの異なる Android および iOS デバイスでの互換性適応#
この記事では、モバイルインターネット時代における H5 ページのモバイルアプリケーション開発における重要性について議論し、異なるスマートフォンモデル、オペレーティングシステムのバージョン、ブラウザのカーネル環境における互換性の問題を探ります。文中では、モバイル H5 ページの互換性適応の重要性と、Android および iOS デバイスでの互換性適応の実践について重点的に説明しています。異なる解像度の画面や WebView の違いに対する適切な処理方法やコード例を提供します。また、モバイルデバイスのデフォルトフォントサイズ、Safari ブラウザの問題、一般的な互換性バグとその解決策についても言及しています。合理的な互換性適応策を通じて、モバイルアプリケーションの互換性とユーザーエクスペリエンスを向上させることができます。
block () の裏側#
- Million.js で block () 関数を使用することで、React コンポーネント内で Million.js を使用して超最適化されたレンダリング速度を実現できます。
- コンパイラは React コンポーネントから状態を抽出し、それを Million.js が理解できる prop に変換し、ランタイム実装の制限を回避します。
- コンポーネント間で異なるレンダリング方法を使用することで、両者の利点を最大限に活用し、特定のタスクに適した正しいツールを選択できます。
この記事では、Million.js のブロックを React の高階コンポーネント(HOC)として使用する方法を説明し、これらのコンポーネントはレンダリング速度が超最適化されています。著者は block () 関数の動作原理、実装方法、およびコンパイラを使用してネストされたコンポーネントから状態を抽出する方法を説明します。記事では、この方法を使用することがパフォーマンスが移行のトレードオフではなくなる可能性があることを指摘し、類似の概念が「島アーキテクチャ」で使用されていることを示しています。記事の最後では、Ryan Carniato に感謝し、この概念実証がこの記事にインスピレーションを与えたことを述べています。
Node.js でスケーラブルなバックエンドを設計する#
この記事では、ユーザーの取引を分類して個人の予算管理を支援する架空の Node.js バックエンドシステムにおける 3 つのスケーリングの課題について議論します。最初の課題は、ユーザーがログインする際に発生する問題で、ログイン時間が長く、平日の午後 3 時から 4 時に頻繁に失敗します。記事では、CPU、メモリ、IOPS などの重要なリソースを監視してスケーリングの問題の根本原因を診断し、ボトルネックや故障点を排除することを提案します。2 つ目の課題は、突発的な作業負荷を処理することで、データベースの負荷のピークがシステム外部から発生します。記事では、ピークを平滑化し、スループットを制御するためにキューを使用することを提案します。3 つ目の課題は、パフォーマンスとスケーラビリティを向上させるためにデータベースクエリを最適化することです。
- CPU やメモリ消費、データベース指標などの重要なリソースを監視することは、バックエンドシステムのスケーリングの問題を診断する上で非常に重要です。
- 遅いクエリの監視は、システム内の故障点を特定し、ボトルネックを軽減するのに役立ちます。
- 突発的な作業負荷に直面した場合、
キュー
を使用することでピークを平滑化し、スループットを制御できます。
RSC をゼロから。パート 1: サーバーコンポーネント#
ゼロから RSC を探求する
ツール#
traf#
モノレポ内で実際に影響を受けたパッケージを見つける
usellm#
あなたの React アプリで大規模言語モデルを使用する
monolith#
⬛️ 完全なウェブページを単一の HTML ファイルとして保存するための CLI ツール
tinylibs - ts-writer#
TS Writer は 1.5Kb のテンプレート文字列テンプレートエンジンで、実行時にコードを生成するために指定されます
queue#
同時実行可能な非同期関数キュー
framed#
プロジェクト管理のための CLI ツール
mods#
コマンドラインとパイプで AI を使用するためのシンプルなツールで、OpenAI と LocalAI をサポート
react-spreadsheet-import#
自動列マッチングと検証機能を持つ Excel (.xlsx) および CSV ファイルのインポートプロセス
highlight#
highlight.io:オープンソースのフルスタック監視プラットフォーム。エラーモニタリング、セッションリプレイ、ログ記録など
sd-webui-txt-img-to-3d-model#
OpenAI Shap-E に基づいて txt または画像から 3D モデルを生成するための sd-webui のカスタム拡張
更新#
Vercel AI SDK の紹介#
Vercel AI SDK は、開発者が JavaScript と TypeScript を使用して対話型、ストリーミング、チャットユーザーインターフェースを構築するのを支援するオープンソースライブラリです。この SDK は React/Next.js、Svelte/SvelteKit をサポートし、Nuxt/Vue のサポートも予定されています。Vercel の AI SDK は相互運用性をサポートし、OpenAI、LangChain、Hugging Face Inference に対する一流のサポートを提供します。同社はまた、開発者がさまざまな言語モデルの結果をリアルタイムで比較し、Next.js、Svelte、Node.js のコードを生成できる Chat & Prompt Playground を発表しました。
- Vercel は、Vercel AI SDK や Chat & Prompt Playground を含む新しいツールを発表し、プラットフォーム上の AI 体験を改善することを目指しています。
- Vercel AI SDK は、開発者が JavaScript と TypeScript を使用して対話型、ストリーミング、チャットユーザーインターフェースを構築するのを支援するオープンソースライブラリです。
- この SDK は React/Next.js、Svelte/SvelteKit をサポートし、Nuxt/Vue のサポートも予定されており、OpenAI、LangChain、Hugging Face Inference に対する一流のサポートを提供します。
その他#
パフォーマンスは重要ではない... 重要になるまで。#
パフォーマンスは重要ですが、すべての企業が高性能な技術やフレームワークを必要とするわけではありません。アプリケーションを構築する際に最も重要なのは、ユーザーの問題を解決することです。ユーザー数が増えるにつれて、新機能の需要は減少し、安定性と反復速度がより重要になります。各企業やプロジェクトは、長期的な機能の増加と反復を考慮し、適切な転換点を定義する必要があります。
- 安定性と反復速度は、ユーザー数が増加するにつれてより重要になります。
- 各企業やプロジェクトは、長期的な機能の増加と反復を考慮し、適切な転換点を定義する必要があります。
- 技術の選択は、プロジェクトの不確実性とニーズに基づいて行うべきです。
この世界は日々、あなたを他の誰かにしようと全力を尽くしています。もしあなたが自分自身でありたいのなら、最も困難な戦いをしなければなりません。
-- E・E・カミングス(E. E. Cummings)、20 世紀のアメリカの著名な詩人
人々は機械に依存し、それが彼らにより多くの自由をもたらすことを望んでいますが、それは機械を持つ者によって彼らが奴隷にされるだけです。
-- フランク・ハーバート、SF 小説『デューン』の著者