この週報は、各地の内容のまとめ整理です。
技術#
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、讯飞星火、文心一言などと同時にチャットし、最適な回答を見つけます。
その他#
生命の行動目的は、食物やエネルギーのためではなく、負のエントロピーのためであり、負のエントロピーの最大化を目指すことです。
エントロピーは老化と死を表し、負のエントロピーは老化と死に対抗することを表します。
-- ウィキペディアの「エントロピーと生命」の項目
「ここで誰かが何かをするべきだ」という感覚があるとき、その「誰か」はおそらくあなたです。
-- 『上級エンジニアの道』
