この週報は、各地の内容のまとめです
技術#
2023 年の React ベストプラクティス - パート 4: クリーンで効率的な React コードの書き方 - ベストプラクティスと最適化技術#
この記事では、React アプリケーションでクリーンで効率的なコードを書くためのさまざまなベストプラクティスについて説明しています。エラーバウンダリの実装、関数コンポーネントに React.memo を使用すること、コード品質を向上させるためのコードチェックツールの使用、デフォルトエクスポートの回避、オブジェクトの分割代入の使用、Fragment の使用、複数の props ではなくオブジェクトを渡すことを推奨しています。これらのプラクティスは、コードベースの保守性、パフォーマンス、可読性を向上させることができます。
- React コードを書く際に、エラーバウンダリの実装、React.memo やオブジェクトの分割代入などの方法を使用することで、クリーンで効率的なコードを書くことができます。
- ESLint のようなコードチェックツールを使用することで、コードの品質と一貫性を向上させることができます。
- デフォルトエクスポートの代わりに名前付きエクスポートを使用し、不要なラッピング div の代わりに Fragment を使用し、複数の props の代わりにオブジェクトを渡すことで、コードベースをより整理し、ナビゲートしやすくします。
Node.js の AsyncLocalStorage を使用してパラメータドリリングを回避する#
この記事では、Node.js アプリケーションでコンテキストを共有する際の課題について説明し、特定のコンテキストデータを Web リクエストやその他の非同期操作のライフサイクル中に保存する方法を提供する AsyncLocalStorage クラスを紹介します。コンテキストを共有するためにグローバル変数を使用することは推奨されず、パラメータを渡したりリクエストオブジェクトに追加することは面倒な場合があります。AsyncLocalStorage API は、ID の関連付け、現在のユーザーの保存、トランザクション ID、レポートデータなどに使用できます。この記事では、JavaScript の Async Context 提案についても言及しています。
- 非同期コードを扱う際に、グローバル変数は相互に干渉する可能性があるため、問題を引き起こす可能性があります。
- Node.js の AsyncLocalStorage クラスは、非同期操作のライフサイクル全体で特定のコンテキストデータを保存する方法を提供し、干渉を回避します。
- JavaScript の Async Context 提案は、AsyncLocalStorage の用途を拡張することを目的としており、将来的に ECMAScript 標準の一部になる可能性があります。
React Server Component 初体験と実践 - ブログを Next.js App Router に移行する#
- Hexo から Next.js に移行し、React Server Component と Next.js 13 の App Router を使用しました。
- Hexo を CMS として保持しましたが、多くのシリアライズステップを書く必要があります。
- React Server Component では、Hexo の API を直接呼び出すことができ、Hexo API が返す warehouse の Document と Query インスタンスを prop として渡すことができます。
- Next.js App Router を使用してネストされたレイアウトを実現しました。
- React 18 の Concurrent Rendering の能力を利用して、高いユーザー体験を優先的に更新する stat データを保証する方法について紹介しました。
Next Image に関する知られざる事実#
この記事では、Next.js の Image コンポーネントの動作原理を説明し、周囲のいくつかの誤解を明らかにします。Next Image コンポーネントは、面倒な操作なしで画像を最適化するソリューションで、最新のフォーマットをサポートし、異なる画面サイズのために複数のバージョンを生成します。Next Image のアーキテクチャは、3 つのコンポーネントで構成されています：React Next Image コンポーネント、Image API、Image Optimizer。Image API は画像プロキシとして機能し、Image Optimizer は環境に応じて異なるライブラリを使用します。この記事では、画像のトリミングに関する誤解を解き、画像の表示幅と読み込み幅の違いを明確にし、Next Image コンポーネントなしで画像最適化を使用する方法を説明します。また、ローカル画像を import してレスポンシブ画像の'sizes' 属性を理解する重要性についても議論しています。
- Next.js の Next Image コンポーネントは、面倒な操作なしで画像最適化機能を提供し、最新のフォーマットをサポートし、異なる画面サイズのためにカスタマイズされたバージョンを生成します。
- このコンポーネントは実際には画像をトリミングせず、幅と高さの属性を使用してレイアウトの変化を防ぎ、不一致が発生した場合に画像を引き伸ばしたり縮小したりします。
- Image API は、Next Image コンポーネントと一緒に使用して、キャンバス上に画像をレンダリングしたり、OG 画像を最適化したりするシナリオで使用できます。
スクロール駆動アニメーションでセレクタを擬似的に作成する#
この記事では、スクロール駆動アニメーションを使用して、現在の要素をキャプチャする祖先スクロールコンテナで一致するセレクタを模倣する方法について説明します。コードと実装方法が提供され、デモも添付されています。ただし、この方法は完璧ではなく、いくつかの制限があります。著者は、CSS にキャプチャ要素に適用できるスタイル設定の方法を組み込むべきだと提案しています。
- スクロール駆動アニメーションを使用して、架空のセレクタを模倣し、スクロールキャプチャに基づく動的要素スタイル設定を実現できます。
- スクロール駆動アニメーションを他の CSS 機能と組み合わせることで、開発者はスティッキー位置、テキストの縮小、スクロール保持状態などのユニークな効果を作成できます。
- 提供されたコードは、キャプチャ要素にスタイルを適用する方法を提供しますが、いくつかの制限があり、キャプチャ要素を処理するための専用の CSS 機能が必要であることを強調しています。
Midjourney のゼロからの実践#
NestJS、NextJS & tRPC を使用したフルスタック、完全に型安全な pnpm モノレポの構築#
このチュートリアルでは、NestJS、NextJS 13、および tRPC を使用して、フルスタック、エンドツーエンドの型安全な pnpm モノレポを構築する方法を説明します。モノレポの設定、NestJS アプリケーションの追加、NextJS 13 アプリケーションの追加、および 2 つのアプリケーション間のシームレスな統合を実現するための構成更新が含まれています。このチュートリアルでは、NestJS と NextJS で tRPC を使用する方法も示されており、tRPC サーバーを NestJS に追加し、tRPC クライアントを NextJS に追加する方法が説明されています。最後に、モノレポを Railway にデプロイする手順が提供されています。このチュートリアルは、開発体験と選択した技術スタックの利点を強調しています。
- このチュートリアルでは、NestJS、NextJS 13、および tRPC を使用して、フルスタック、エンドツーエンドのモノレポを構築する方法を説明し、シームレスな開発体験を提供します。
- モノレポの設定は pnpm ワークスペースを使用し、同じリポジトリ内でフロントエンドとバックエンドプロジェクトを独立して管理できます。
- tRPC サーバーは NestJS に統合され、バックエンドとフロントエンドアプリケーション間の型安全な通信を提供します。
React Query での思考#
Web でのストリーミング入門#
Web ストリームは、ネットワーク接続上でデータを非同期に送受信するための標準化された方法を提供します。リアルタイムの更新とインタラクションを通じて、Web アプリケーションのパフォーマンスと応答性を向上させます。Web ストリームは、WritableStream（書き込み可能ストリーム）、ReadableStream（読み取り可能ストリーム）、TransformStream（変換ストリーム）の 3 種類に分けられます。データストリーム内の基本単位はデータブロック（chunks）で、そのサイズと形状は異なる場合があります。Web ストリームと対話するための一般的な方法には、Fetch API や getReader メソッドが含まれます。Web ストリームは、バックプレッシャーを処理する能力も備えており、データの生成と消費のバランスを確保します。サーバー送信イベント（SSE）は、サーバーからクライアントにリアルタイムの更新をストリーミングする別の方法です。
- Web ストリームは、データを処理するための標準化され、効率的な方法を提供し、Web アプリケーションのリアルタイム更新とインタラクションを実現します。
- Web ストリーム内のバックプレッシャー処理は、データの生成と消費のバランスを確保し、メモリのオーバーフローを防ぎ、データストリームをスムーズに保ちます。
- サーバー送信イベント（SSE）は、長接続の HTTP 接続を使用して、サーバーからクライアントにリアルタイムで更新をストリーミングし、リアルタイムデータを必要とするアプリケーションに非常に適しています。
役立つ DevTools のヒントとコツ#
この記事では、ブラウザの開発者ツールを使用してデバッグ作業の効率を向上させるための 15 の人気のヒントについて説明しています。これらのヒントには、開発者ツールインターフェースのズーム、ウェブページ上の煩わしいオーバーレイの削除、ページで使用されているフォントのリスト、ページ上の任意の距離の測定、未使用のコードの検出、ビデオの再生速度の変更、異なる言語での開発者ツールの使用、イベントリスナーの無効化などが含まれます。記事は各ヒントに対してステップバイステップの説明を提供し、読者にコメントセクションで自分のヒントを共有するよう促しています。
- 人気のある開発者ツールのヒントには、UI インターフェースのズーム、煩わしいオーバーレイの削除、ページで使用されているフォントのリスト、任意の距離の測定、未使用のコードの検出、ビデオの再生速度の変更、異なる言語での開発者ツールの使用などがあります。
- ブラウザの開発者ツールは、デバッグ作業のワークフローと効率を大幅に向上させるための一連のパネルと機能を提供します。
- これらのあまり知られていない機能を探求し活用することで、デバッグプロセスを最適化し、一般的な問題をより効率的に解決できます。
Node.js と JavaScript におけるコマンドインジェクション脆弱性の紹介#
この記事では、Node.js と JavaScript アプリケーションにおけるコマンドインジェクションのセキュリティ脆弱性について説明します。コマンドインジェクションは、オペレーティングシステムが信頼できないユーザー入力をコマンドとして実行する際に発生し、攻撃者が不正アクセスを取得したり、システムを危険にさらしたりすることを可能にします。この記事では、コマンドインジェクションのリスクと影響を強調し、これらの脆弱性を軽減するためのいくつかのベストプラクティスを提供します。これには、入力の検証とクリーンアップ、コマンドとパラメータの分離、コマンド実行の制限、最小権限の原則に従うことが含まれます。この記事では、Node.js アプリケーションをコマンドインジェクション脆弱性から保護する方法を学ぶための書籍も推奨しています。
- Node.js と JavaScript アプリケーションにおけるコマンドインジェクション脆弱性は、不正アクセス、データ漏洩、または完全なシステムクラッシュを引き起こす可能性があります。
- コマンドインジェクション脆弱性のリスクを軽減するためには、入力の検証とクリーンアップ、コマンドとパラメータの分離、ユーザー提供の入力をコマンド実行の一部として実行しないこと、最小権限の原則に従うことが重要です。
- リスクを理解し、実際の事例を参考にし、ベストプラクティスに従うことで、開発者は Node.js アプリケーションをコマンドインジェクション脆弱性から効果的に保護できます。
ツール#
typesafe-router#
React Router の小型ラッパーライブラリで、型安全性を大幅に向上させます。
panda.css#
ビルド時に生成されたスタイルを持つ CSS-in-JS、RSC 互換、多変量サポート、一流の開発者体験。
webperf-snippets#
Web パフォーマンススニペット。
ModHeader - HTTP ヘッダーの変更#
リクエストヘッダーとレスポンスヘッダーを変更します。
tween.js#
JavaScript/TypeScript アニメーションエンジン。
psd#
Web および Node.js 用の迅速なゼロ依存 PSD パーサー。
更新#
styled-component v6#
remix 1.18#
nestjs v10#
NestJS 10 がリリースされ、バグ修正、改善、新機能が追加されました。このバージョンでは、SWC（Speedy Web Compiler）を使用して開発速度を向上させることが導入されました。テスト中にモジュールをオーバーライドできるようになり、モックが簡単になります。NestJS 10 は Redis のワイルドカードサブスクリプションをサポートし、特定のパターンに一致するメッセージをサブスクライブできるようになります。CacheModule は独立したパッケージに移動しました。Node.js v12 はもはやサポートされず、CLI プラグインには TypeScript v4.8 以上が必要です。Nest v9 からのアップグレードに関する移行ガイドが利用可能です。NestJS プロジェクトは企業向けのコンサルティングとサポートサービスを提供しています。コミュニティとスポンサーのサポートはプロジェクトの発展にとって重要です。
- NestJS 10 は SWC（Speedy Web Compiler）を導入し、開発プロセスを加速し、デフォルトの TypeScript コンパイラの速度を大幅に向上させました。
- 新しいバージョンでは、テスト中にモジュールをオーバーライドできるようになり、全体のモジュールのモックが簡単になります。
- NestJS 10 は Redis のワイルドカードサブスクリプションをサポートし、特定のパターンに一致するメッセージをサブスクライブできるようになりました。
デザイン#
純粋な実用的な内容！インセンティブシステムを利用してユーザーの粘着性を高める方法#
この記事では、ユーザーインセンティブシステムの設計と応用について説明します。ユーザーインセンティブシステムは、ユーザーの成長と活性化を促進するための一般的な手段であり、プラットフォームの精神的インセンティブ、物質的利益のインセンティブ、社会的感情的インセンティブの 3 種類に分けられます。良いインセンティブシステムは、指揮棒のようにユーザーを指定された方向に成長させ、ユーザーの成長とリコールを促進し、ユーザーの活性度を刺激する強力な武器です。インセンティブシステムは、ユーザー成長の全プロセス「獲得 — 活性化 — 保持 — 推薦 — 収益化」に伴い、異なるインセンティブ方法を採用することで、製品が迅速に目標を達成するのを助けます。この記事では、好看動画のユーザー層と現段階の背景を分析し、好看層の特性に合ったインセンティブシステムの再構築の考え方を提案しています。
ピボットテーブルとグリッドを通じてユニバーサルで認知に優しい UX デザインを探る#
この記事では、包摂的でユーザーフレンドリーなテーブルデザインの重要性について説明しています。認知障害がテーブルの認識に与える影響に焦点を当て、テーブルの可用性を改善するための提案を行っています。記事では、認知負荷を減らし、信号対ノイズ比を最大化し、認知バイアスを効果的に使用する必要性を強調しています。また、カラーパレットとテーブルデザインにおけるその使用の役割についても議論しています。全体的な目標は、すべてのユーザーが理解しやすく、ナビゲートしやすいテーブルを作成することです。
- テーブルは人気のあるデータ可視化の方法ですが、認知障害のある個人にとっては理解が難しい場合があるため、包摂的なデザインが非常に重要です。
- テーブルを設計する際には、認知負荷、認知バイアス、信号対ノイズ比を考慮して、すべてのユーザーに良好なユーザー体験を提供する必要があります。
- テーブル内で色を正しく使用することは非常に重要です。なぜなら、色は情報や感情を伝え、情報の認識方法に影響を与えるからです。
AI#
GPT-4 の秘密が明らかにされた#
OpenAI の GPT-4 言語モデルは期待されていましたが、最近のリリースは多くの人々を失望させました。なぜなら、実際には 8 つの小さなモデルの集合体であり、革新的な突破口ではないことが明らかになったからです。この専門家混合パラダイムと呼ばれる方法は、2021 年に Google のエンジニアによって初めて成功裏に使用されました。しかし、OpenAI のマーケティング戦略は、モデルの周りに神秘感と誇大広告を生み出し、人々にそれが魔法のような能力を持っていると信じさせ、競合他社が彼らの技術を模倣するのを防ぎました。それにもかかわらず、GPT-4 は依然として印象的な言語モデルであり、優れた性能を持っていますが、人々の人工知能に対する重大な突破口の期待には応えていません。
- GPT-4 は単一の巨大なモデルではなく、8 つの小さなモデルを巧妙に組み合わせたものです。
- 人々がこの分野の進展に対する信頼を失わないようにし、競合他社が彼らの技術を模倣するのを防ぐために、OpenAI は GPT-4 が突破的ではないという事実を隠しました。
- GPT-4 は商業マーケティングの典型であり、期待外れの側面を隠しつつ、話題の高い関心を維持し、その神秘的な雰囲気を強化しています。
AI ツール検索エンジン#
langtale.ai#
OpenAI の関数呼び出しをサポートする Playground。
ChatALL#
ChatGPT、Bing Chat、Bard、Alpaca、Vicuna、Claude、ChatGLM、MOSS、讯飞星火、文心一言などと同時にチャットし、最適な回答を見つけます。
その他#
生命の行動目的は、食物やエネルギーのためではなく、負のエントロピーのためであり、負のエントロピーの最大化を目指すことです。
エントロピーは老化と死を表し、負のエントロピーは老化と死に対抗することを表します。
-- ウィキペディアの「エントロピーと生命」の項目
「ここで誰かが何かをするべきだ」という感覚があるとき、その何かをするべき人はおそらくあなたです。
-- 『上級エンジニアの道』
