2023-第24週 - AgedCoffee

この週報は主に各地の内容のまとめです

summary: ''
技術
ツール
更新
- Vercel AI SDK の紹介
その他
- パフォーマンスは重要ではない... 重要になるまで。
- 優れたエンジニアになるための八つの法則

技術#

ESLint ガイド：自信を持って使う方法 #

ESLint は静的コード分析ツールで、コードの作成に伴いコードの品質を維持・改善するのに役立ちます。
ESLint はチームが設定ファイルに記録された規範に従うことを許可し、毎回再コーディングしてこれらの規範を適用する必要がなくなります。
新しい ESLint 設定システム Flat config は、プロジェクト内で ESLint を設定する方法に激しい変革をもたらし、CLI でサポートされ、バージョン 8.23.0 から公式文書が提供されています。

この記事は、ESLint 設定を外部依存関係として共有し、コード標準を自動化する方法を説明する一連の記事の一部です。最初に ESLint が静的コード分析ツールとして紹介され、ルールに基づいて自動的に意見を形成し、ルールが破られたときに警告を発することでコードの品質を維持・改善するのに役立ちます。この記事では、ルールやカバレッジなど、ESLint 設定オブジェクトの主要な属性もレビューします。次に、Flat config という新しい ESLint 設定システムが紹介され、レガシーシステムを置き換え、プロジェクト内で ESLint を設定する方法に激しい変革をもたらします。最後に、ESLint を習得し、flat config に移行し、ESLint の共有可能な設定を作成し、より多くのツールのサポートを得るための体験を改善するというシリーズ計画がまとめられています。

React は Angular.js の瞬間を迎えているのか？#

React サーバーコンポーネントは 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 のレンダリングサイクルについての議論で締めくくられています。

アイソモーフィック開発 #

アイソモーフィック開発は、サーバーとクライアント環境の両方で安全かつ効率的に実行できるコードを書くことを含み、必ずしもフロントエンド開発者にとって容易ではありません。
フルスタック開発者にとって、コードはフロントエンドとバックエンドの間に分割され、彼らは二つの独立したデバッグ環境でバランスを取る必要があり、データ漏洩やセキュリティの脆弱性を防ぐ必要があります。
フルスタック開発者は、クライアントとサーバー間のパフォーマンスの違いや、主データベースのパフォーマンス、クエリの最適化、インデックスなどの問題にも注意を払う必要があります。

この記事では、サーバーとクライアント環境でコードが実行されるアイソモーフィック開発の課題について議論します。著者は、このパラダイムシフトが必ずしも開発を容易にするわけではなく、デバッグ、セキュリティ、パフォーマンス、データクエリに関連する新たな複雑さをもたらすと考えています。また、現在の開発ツールはこれらの課題に対処するために完全に装備されておらず、開発者はこのような環境で効果的に作業するために新しい知識とスキルを習得する必要があると指摘しています。著者は、このアプローチを説明するために「アイソモーフィック開発」という新しい用語を使用することを提案しています。

Vite はどのように旧バージョンのブラウザに対応しているのか #

Vite は @vitejs/plugin-legacy を使用して、babel でトランスパイルされたコードを生成する旧ファイルを生成することで旧バージョンのブラウザをサポートします。
index.html ファイルにはスクリプトが含まれ、__vite_is_modern_browser 変数に基づいて旧コードを動的にロードします。
スクリプトタグで type="module" と nomodule 属性を使用することで、ブラウザのモジュールロードと ES6 構文のサポートに応じてコードを選択的に実行します。

この記事では、@vitejs/plugin-legacy プラグインを使用して Vite を旧バージョンのブラウザと互換性を持たせる方法について説明します。このプラグインは、各ファイルの旧版ファイルを生成するために babel を使用して互換性のあるコードを生成します。記事では、index.html ファイル内のコードを説明し、主スクリプトファイルをインポートするために "type=module" 属性を持つスクリプトタグを作成します。また、旧バージョンのブラウザと互換性を持たせるために polyfills-legacy ファイルと index-legacy ファイルをロードするスクリプトタグも作成します。記事では、ブラウザがモジュールをサポートしているが最新の構文をサポートしていない場合、プラグインに潜在的なバグがある可能性があることも指摘しています。

Express.js でサーバー送信イベントを使用して検索レイテンシを改善した方法 #

サーバー送信イベント（Server-sent Events、SSE）を使用して稀なクエリで検索結果を転送することで、ユーザー体験を改善でき、認証やリクエストの状態を変更する必要がありません。
SSE イベントには、イベントやデータなどのフィールドが含まれ、\n\n で区切られます。
クライアントで React を使用して SSE を統合するのは少し厄介ですが、EventSource の周りにカスタムラッパーを作成することで実現できます。

この記事では、HyperDX プラットフォームで検索結果をストリーミングするためにサーバー送信イベント（SSE）を実装する方法について説明します。SSE はそのシンプルさと HTTP との互換性から選ばれ、Websockets の代わりに使用されました。記事では、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 時から 4 時に頻繁に失敗します。記事では、CPU、メモリ、IOPS などの重要なリソースを監視して拡張問題の根本原因を診断し、ボトルネックや故障点を排除することを提案しています。第二の課題は、突発的な作業負荷を処理することで、データベース負荷のピークがシステム外部から発生します。記事では、ピークを平滑化し、スループットを制御するためにキューを使用することを提案しています。第三の課題は、パフォーマンスと拡張性を向上させるためにデータベースクエリを最適化することです。

CPU やメモリ消費、データベース指標などの重要なリソースを監視することは、バックエンドシステムの拡張問題を診断する上で非常に重要です。
遅いクエリの監視は、システム内の故障点を特定し、ボトルネックを軽減するのに役立ちます。
突発的な作業負荷に直面した場合、キューを使用することでピークを平滑化し、スループットを制御できます。

RSC の基礎から。パート 1：サーバーコンポーネント #

0 から 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 小説『デューン』の著者