2023-第29週 - AgedCoffee

この週報は、各地の内容のまとめ整理です

技術
ツール
更新
- Storybook 7.1
その他
- 素晴らしい仕事をする方法
- Web3 を貫通する

技術#

ソフトウェアエンジニアリング：問題解決と批判的思考 #

ソフトウェアエンジニアリングは単なるコーディングと誤解されがちですが、問題解決と批判的思考が含まれています。エンジニアはまず問題を理解し、次に分解やパターン認識などの戦略を使用して解決策を提案します。批判的思考は設計、実装、テストの各段階で適用され、スケーラビリティやパフォーマンスなどの要素を考慮します。ソフトウェアエンジニアリングは、問題を理解し、解決策を考え、効果的であることを確保するために批判的思考を適用することに関するものです。ソフトウェアの重要性が高まるにつれて、エンジニアは優れた問題解決者であり、批判的思考者である必要があります。

ソフトウェアエンジニアリングは単なるコーディングではなく、問題解決と批判的思考のスキルが必要です。
エンジニアは問題を理解し、解決策を考え、効果的なソフトウェアシステムを開発するために問題解決戦略を適用しなければなりません。
批判的思考はソフトウェア開発全体において重要であり、設計から実装、テストに至るまで効率的で高品質なコードを確保します。

フレームグラフの紹介：ここは熱くなってきた #

フレームグラフは、コードのボトルネックを特定し、コードの実行パターンを理解するための視覚化ツールです。現在、VS Code および JetBrains エディタの AppMap 拡張でフレームグラフが提供されています。フレームグラフは、関数の実行の階層的なビューを提供し、開発者が時間のかかる関数を迅速に特定し、コードの効率を最適化できるようにします。これにより、長時間実行されるクエリ、N+1 クエリ、関数が全体のパフォーマンスに与える影響などの洞察が明らかになります。AppMap はフレームグラフを基に改良を加え、アプリケーション内の欠陥を強調し、それらの直接的な影響を示します。このツールは、シーケンス図、従来の依存関係、トレースビューも提供します。

フレームグラフはコードの実行パターンを視覚的に表現し、開発者がボトルネックを特定し、パフォーマンスを最適化するのに役立ちます。
フレームグラフのカラースキームは、開発者が SQL クエリ、関数呼び出し、外部サービス呼び出しなどの異なるタイプのコードを理解するのに役立ちます。
AppMap はアプリケーション内の欠陥を強調し、それらの直接的な影響を示すことで、問題の特定と修正を容易にします。

React 18 がアプリケーションのパフォーマンスを向上させる方法 - React 18 がアプリケーションのパフォーマンスを向上させる方法 #

React 18 は、アプリケーションのパフォーマンスを向上させるための同時処理機能を導入しました。JavaScript のメインスレッドは、タスクを 1 つずつ実行し、長時間のタスクは他のタスクをブロックする可能性があります。スムーズな視覚体験を維持するために 50ms のベンチマークを使用します。総ブロック時間（TBT）と次の描画までのインタラクション（INP）は、長時間のタスクがパフォーマンスに与える影響を測定する指標です。従来の React レンダリングは同期的であり、遅延や応答のない UI を引き起こします。React 18 は同時レンダラーを導入し、非緊急のレンダリングがメインスレッドを譲渡し、より重要なタスクを優先的に処理できるようにします。同時レンダラーは、ユーザーのインタラクションに応じてレンダリングを一時停止および再開することもできます。

React 18 は同時レンダリングを導入し、非ブロッキングレンダリングを可能にし、より重要なタスクを優先的に処理することでアプリケーションのパフォーマンスを向上させます。
React 18 の同時レンダラーは、ユーザーのインタラクションなどの外部イベントに応じてレンダリングを一時停止および再開でき、ユーザー体験を最適化します。
startTransition 関数を使用することで、開発者は更新を非緊急としてマークし、重要なタスクを優先的に処理することでパフォーマンスをさらに向上させることができます。

TypeScript でオブジェクトのキーを反復処理する方法 #

この記事では、TypeScript でオブジェクトのキーを反復処理する際の課題といくつかの解決策を提案しています。著者は、Object.keys を使用してすべてのキーのユニオンではなく文字列の配列を返すことが、オブジェクト上の値にアクセスしようとする際に問題を引き起こす可能性があることを説明しています。彼らは、キーを keyof typeof に変換して型範囲を狭めることと、インデックスの前にキーが実際にオブジェクトに存在するかどうかを確認するために型アサーションを使用するという 2 つの主要な解決策を提案しています。記事では、汎用関数メソッドや Object.keys をカスタム関数でラップすることにも言及しています。著者は、型変換が彼らの好ましい解決策であるとまとめていますが、特定のシナリオでは他の方法がより適切である可能性があることを認めています。

TypeScript でオブジェクトのキーを反復処理することは、Object.keys の制限により挑戦的であり、これはすべてのキーのユニオンではなく文字列の配列を返します。
keyof typeof を使用した型変換や型アサーションを使用することで、より安全で具体的に型範囲を狭め、オブジェクトキーの値にアクセスするのに役立ちます。
型変換は最も簡単で通常は十分な解決策ですが、isKey 型アサーションや汎用関数メソッドは、TypeScript でオブジェクトのキーを反復処理するための代替手段を提供します。

Next13 のサーバーコンポーネントに関する 5 つの一般的な落とし穴（例付き）#

この記事では、NextJS 13 の App Router 機能を使用する際の一般的な問題と解決策について説明しています。サーバーコンポーネント内で React Hooks を使用すること、サーバーコンポーネント内でイベントハンドラーを使用すること、サーバーコンポーネントをクライアントコンポーネントに直接インポートする際に発生する可能性のある問題を強調しています。記事では、各問題に対する解決策を提供しており、"use client" を追加して慣れ親しんだ動作を有効にすること、必要に応じてコンポーネントをサーバーコンポーネントに変換すること、ルーティングの変更を使用して再レンダリングをトリガーすることが含まれています。

NextJS 13 の App Router は Pages Router に取って代わり、デフォルトのサーバーコンポーネントを導入しましたが、React Hooks やイベントハンドラーの使用に関していくつかの制限があります。
サーバーコンポーネントをクライアントコンポーネントに直接インポートすると、fetch リクエストの問題やコンポーネントの動作の非効率が発生する可能性があり、クライアントコンポーネントに変換するか、サーバーとクライアントコンポーネントを慎重に組み合わせる必要があります。
サーバーコンポーネントは状態やデータの変更時に自動的に再レンダリングされないため、再レンダリングをトリガーするためにルーティングの変更に依存する必要があります。

2023 年の CSS の書き方：数年前と何か違うのか？#

この記事では、CSS の進化が今日の CSS の書き方にどのように影響を与えているかについて説明しています。著者は、コンテナクエリ、カスケードレイヤー、() および() 擬似セレクタ、新しいカラー関数の構文、ユーザーの好みのクエリなど、いくつかの重要な特徴を強調しています。著者は、これらの特徴が CSS のアプローチを変えたにもかかわらず、実際の生産環境や日常的な使用においてはまだ広く採用されていないことにも言及しています。全体として、この記事はこれらの新しい特徴の推進によって CSS を書くことの興奮と楽しさを強調しています。

CSS の特徴、例えばコンテナクエリやカスケードレイヤーは、CSS の書き方を変え、レスポンシブレイアウトの作成やカスケードの管理を容易にしました。
() や() のような関係擬似セレクタは、特異性の管理や命名規則の簡素化に非常に役立ちます。
CSS におけるカラー関数の更新された構文、例えば rgb () や hsl () は、色の値を定義するのを便利にし、異なる関数バージョンの間で選択する必要がなくなりました。

高階サーバーコンポーネントを使用してクリーンなサーバーサイド React コードを書く #

React 18 はサーバーコンポーネントを導入しましたが、いくつかの制限があり、結合や重複したコードを引き起こす可能性があります。1 つの方法は、ページレベルでデータを取得し、それを使用者コンポーネントに渡すことですが、これにより結合が生じます。別の方法は、各使用者コンポーネントのためにデータを取得することですが、これにより重複が生じます。明確な方法は、高階サーバーコンポーネントを使用することで、データを取得し、それを props としてラップコンポーネントに渡すことができます。これにより、再利用可能で疎結合なコードが実現できます。例とコードスニペットが提供されています。

React 18 のサーバーコンポーネントは、結合や重複したコードを引き起こす可能性があり、データの取得と伝播を困難にします。
最近のサーバーコンポーネントでデータを取得することは、結合の問題を解決するのに役立ちますが、複数の取得リクエストを引き起こし、単一責任の原則に違反する可能性があります。
高階サーバーコンポーネントを使用することで、データを取得し、それを props としてラップコンポーネントに渡すことで、サーバーコンポーネントでもクライアントコンポーネントでも明確な解決策を提供できます。

メディアクエリとレスポンシブデザインについて知っておくべきことすべて #

この記事では、メディアクエリとレスポンシブデザインが Web アプリケーションでどのように適用されるかについて説明しています。メディアクエリがデバイスの特性（例えば、ビューポートの幅）に基づいて CSS ルールを適用する方法を説明しています。レスポンシブデザインは、異なる画面サイズに最適化されたカスタマイズされた視覚表現を目指しています。この記事では、モバイルファーストデザインの概念を紹介し、デザインと開発の過程でモバイル体験を優先することの重要性を強調しています。また、CSS ピクセルとデバイスピクセルの違いや、ウェブサイトをレスポンシブレイアウトにする方法、非矩形ディスプレイを扱う方法についても説明しています。メディアクエリのブレークポイントとその使用方法についても議論しています。

メディアクエリは、デバイスの特性に基づいて条件付きで CSS ルールを適用し、レスポンシブデザインとカスタマイズされた視覚表現を実現します。
モバイルファーストデザインは、最初にモバイルデバイス向けにデザインと開発を行い、より大きな画面サイズに適応しやすくします。
メディアクエリのブレークポイントは、ビューポートのサイズに基づいて条件付きスタイルの適用を開始または停止するポイントを定義し、レスポンシブレイアウトの作成に役立ちます。

JWT とセッション：どの認証アプローチがあなたに適しているか？#

この記事では、セッションベースの認証と JWT 認証の違いについて説明しています。セッションベースの認証は、サーバー上でセッションレコードを作成し保存することを含み、JWT 認証はクライアントに自己完結型のトークンを送信します。セッションベースの認証の利点はシンプルで信頼性が高いことですが、遅延やパフォーマンスの問題を引き起こす可能性があります。JWT 認証は、より迅速な認可と外部アプリケーションとの相互運用性を実現できますが、トークンを無効にしたり、その情報を更新したりする能力が欠けています。この記事では、セッションクッキーと JWT の組み合わせを使用してバランスを取ることを提案しています。また、Stytch のセッション管理製品をカスタマイズオプションを提供する解決策として言及しています。全体として、この記事は適切な認証方法を選択する際にセキュリティと遅延のトレードオフを評価することの重要性を強調しています。

セッションベースの認証は、データベースに保存されたサーバー側のセッションレコードに依存し、信頼性を提供しますが、スケールにおいて遅延を引き起こす可能性があります。
JWT 認証は、より迅速な認可と外部アプリケーションとの相互運用性を実現できますが、トークンを無効にしたり、リアルタイムで認可を更新したりする能力が欠けています。
セッションクッキーと JWT の組み合わせを使用することで、パフォーマンスとセキュリティのバランスを取り、カスタマイズ可能なセッションの持続時間を許可し、非機密ルートへの API 呼び出しを減少させることができます。

ツール#

jscodeshift #

jscodeshift は、複数の JavaScript または TypeScript ファイルで codemods を実行するためのツールキットです。提供された変換を各ファイルに対して実行し、変換されたファイルの概要を出力するランナーを提供します。また、元のコードのスタイルをできるだけ保持した AST から AST への変換ツールである recast のラッパーも提供します。

driver.js #

Driver.js は、ユーザーがページ上で集中できるようにする軽量で依存関係のないネイティブ JavaScript エンジンです。外部依存関係がなく、すべての主要なブラウザをサポートし、非常にカスタマイズ可能です。ページ上の任意の要素を強調表示し、強力な機能紹介を作成し、ユーザーに焦点を移す機能を追加し、すべてをキーボードで制御できます。

virtua #

ゼロコンフィグ、迅速で小型（約 3kB）の React 仮想リストおよびグリッドコンポーネントです。

react-content-font #

React コンポーネントを使用して、ページ上で使用される文字のためだけにフォントを作成します。

更新#

Storybook 7.1 #

新しいユーザーがコンポーネントワークショップを学び、ナビゲートしやすくするためのアプリ内ガイドフローが導入されました。
Tailwind、Material UI、Emotion、styled-components などの人気ライブラリに対して、ゼロコンフィグのスタイルサポートが追加されました。
API リファレンスドキュメント、Vue 3 のソースコードスニペット、レスポンシブ改善、UI ドキュメントの目次、Figma デザインプラグインの公式サポートが含まれています。

その他#

素晴らしい仕事をする方法 #

この記事では、素晴らしい仕事を見つけ追求するプロセスについて探求しています。記事は、素晴らしい仕事をするためには、自分が生まれつき得意で、深く興味を持ち、偉大な潜在能力を持つものを選ぶ必要があると提案しています。個人プロジェクトを行い、好奇心と探求の習慣を育むことの重要性を強調しています。個人は、自分が選んだ分野について十分な知識を学び、知識の最前線に達し、空白や未解決の問題を積極的に探し求めるべきだと提案しています。記事は、特に若くて野心的な人々にとって、やるべきことを見つけることの挑戦を認めていますが、行動を起こし、好奇心を持ち続け、興味を最適化することを奨励しています。また、自分の興味を貫き、外部の力に左右されないことの重要性も強調しています。全体として、記事は素晴らしい仕事をするための鍵は、自分が深く興味を持つものを見つけ、それを情熱と好奇心を持って追求することにあると述べています。

素晴らしい仕事をするためには、自分が生まれつき得意で、深く興味を持ち、偉大な潜在能力を持つものを選ぶことが重要です。
自分が選んだ分野について十分な知識を学び、知識の最前線に達し、他の人が見落とす空白に気づくことが重要です。
自分の好奇心、喜び、印象的なことをする渇望に従い、リスクを冒し、仕事の中での奇異さを受け入れることが大切です。

Web3 を貫通する #

この記事では、Web3 の核心概念、スマートコントラクト、DeFi、DAO、ウォレットなどについて説明しています。Web3 の核心理念は、ユーザーが自分のデータと資産を所有することであり、インターネット企業によって制御されることではありません。しかし、これはまた、ユーザーが自分のウォレットと資産を管理する責任を負うことを意味します。Web3 の登場は信頼の問題を解決するためですが、意思決定の効率が低下する問題も存在します。Web3 は人類社会に利益をもたらす可能性がありますが、完全にこの世界を支配することはできません。