この週報は各地の内容のまとめです
技術#
React で svg スプライトアイコンを使用する#
この記事では、React アプリケーションで svg スプライトアイコンを使用するためのベストプラクティスについて説明しています。著者は、コンポーネント内に直接 svg コードを書く方法を推奨していません。なぜなら、これによりパッケージサイズが大幅に増加するからです。代わりに、著者は svg スプライトを使用し、1 つの svg ファイルに複数のアイコンを保存し、必要に応じてその一部を表示することを提唱しています。記事では、開発者がプロジェクトで svg スプライトアイコンを使用するのを助けるための便利なツールやスクリプトも提供しています。
WebAssembly が抖音の花火エフェクトに応用される#
この記事では、WebAssembly を使用して JavaScript コードを最適化する方法について説明し、抖音の花火エフェクトを例に実践しています。時間のかかる JavaScript 計算を.wasm ファイルにパッケージ化し、WebAssembly を利用して元の計算ロジックを実行することで、パフォーマンスを大幅に向上させることができます。同時に、この記事ではこのソリューションに存在する問題も指摘していますが、CPU 側のパフォーマンスボトルネックに対しては、WebAssembly を使用することは依然として良い選択肢です。
ElementRef で useRef を強く型付けする#
この記事では、React で useRef フックをネイティブ要素と一緒に使用する方法について説明しています。著者は、useRef を使用する際に正しい要素タイプを指定するための解決策を提供しています。著者は、React の ElementRef タイプヘルパーを使用して、ターゲット要素のタイプを簡単に抽出することを推奨しています。この方法は、forwardRef を使用するカスタムコンポーネントにも適用できます。記事の最後では、さらなるヒントやコツを得るために、無料の React と TypeScript の初心者向けコースを推奨しています。
- React で useRef をネイティブ要素と一緒に使用する際、正しいタイプを特定するのは少し難しいかもしれませんが、ElementRef タイプヘルパーを使用することで適切なタイプをより簡単に抽出できます。
- ElementRef は、forwardRef を使用するカスタムコンポーネントと一緒に使用して、コンポーネントが転送する要素のタイプを抽出することもできます。
- 使用するタイプが不明な場合、ElementRef は useRef で正しいタイプを使用するための便利なツールです。
YouTube のアンビエントモードのグローエフェクトを再現する#
この記事では、YouTube の「アンビエントモード」機能について説明しています。この機能は、ビデオプレーヤーの周囲に発光効果を作成します。著者はコードを逆アセンブルし、HTML <canvas>と requestAnimationFrame 関数を使用してこの効果を作成する方法を説明しています。記事では、HTML <canvas>要素とその用途、requestAnimationFrame メソッドの概要を説明しています。次に、キャンバス上にビデオフレームをレンダリングし、ぼかし効果を適用し、CSS スタイルを追加するなど、環境モード効果を作成する手順を概説しています。記事では、HTML マークアップと<canvas>を<video>要素と同期させることについても議論しています。
YouTube のビデオプレーヤーの環境モード効果は、ビデオの色を背景に投影することで微妙な発光効果を生み出し、より没入感を高めています。
この効果は、HTML <canvas>要素と requestAnimationFrame 関数を使用して、ビデオフレームをレンダリングし、キャンバスと同期させることで実現されています。
キャンバスを縮小、ぼかし、スタイリングすることで、他のビデオでも同様の発光効果を作成できます。
React サーバーコンポーネントのヒント#
React サーバーコンポーネント（RSC）は、React の公式データ取得ソリューションです。これらは、パッケージツールの深い統合、厳格なコンポーネントツリー構造とモジュールの組み合わせ、インタラクティブなコードが特別なクライアントコンポーネント内で実行される必要があるなどの制限をもたらします。しかし、これらは、コンポーネント内部でデータを取得できる、クライアントでのデータ取得時に一般的なウォーターフォール問題を回避できる、<Suspense>を介してデータストリームの高速読み込みを実現できる、サーバー上でより多くのコードを実行できるため、パッケージサイズを小さく保つことができるなどの利点ももたらします。RSC を使用する際には、
- React サーバーコンポーネントは、React の公式データ取得ソリューションであり、コンポーネント内部でデータを取得できます。
- React サーバーコンポーネントを使用することで、クライアントでのデータ取得時に一般的なデータのウォーターフォール問題を回避できます。
- React サーバーコンポーネントを使用することで、
<Suspense>を介してデータストリームを実現し、ページの初期読み込み速度を向上させることができます。
フルコンテキスト開発#
この記事では、遅延読み込み（lazy loading）技術について説明しています。これは、リソース（画像、スクリプト、または React コンポーネントなど）の読み込みを実際に必要なときまで遅らせる技術です。遅延読み込みは、ネットワークパフォーマンスとユーザーエクスペリエンスを向上させ、現在必要なリソースのみを読み込むことで、読み込み時間を短縮し、ネットワークリソースをより効率的に利用します。記事では、遅延読み込みによってウェブサイトの読み込み速度を大幅に向上させる実際のケースも紹介しています。記事では、React での遅延読み込みの実装についても説明しています。
- 遅延読み込みは、リソースを遅延させて読み込む技術であり、ウェブページの読み込み速度とネットワークリソースの利用効率を向上させます。
- React.lazy () 関数を使用することで、コンポーネントの遅延読み込みを実現でき、動的 import () 文を使用して必要なモジュールを読み込むことができます。
- 遅延読み込みは、Suspense コンポーネントと組み合わせて使用することで、読み込み中のプレースホルダーコンテンツを提供し、より良いユーザーエクスペリエンスを実現できます。
Docker ネットワーキングの初心者ガイド#
Docker のネットワーク機能には、さまざまなタイプのネットワークドライバが含まれています。デフォルトでは、Docker は docker0 という名前のブリッジネットワークを作成し、コンテナ間の通信とホストとの通信に使用します。ブリッジネットワークは、Linux ブリッジ、内部インターフェース、iptables ルール、ホストルーティングを作成することで、コンテナ間の接続を実現します。ブリッジネットワークは、ポートマッピングを介して外部へのアクセスを実現できます。さらに、記事では、ホストネットワーク（ホストとコンテナが同じネットワーク上にある）と none ネットワーク（コンテナが独立したネットワークスタックで実行される）の 2 つのタイプのネットワークについても説明しています。ブリッジネットワークは、複数の通信ネットワークまたはネットワークセグメントを接続する方法です。
- Docker のネットワークサブシステムはプラグイン可能で、さまざまなタイプのネットワークドライバをサポートしています。
- Docker はデフォルトで docker0 という名前のブリッジネットワークを作成し、新しい Docker コンテナは自動的にこのネットワークに接続されます。カスタムネットワークを指定しない限り。
- ブリッジネットワークは、プライベートな内部ネットワークを作成してホスト上のコンテナを接続し、コンテナ間の通信を可能にし、ポートマッピングを介して外部との通信を実現します。
TS の父の新プロジェクト typechat はフロントエンドの未来を示唆する#
TypeChat は、自然言語の説明を実行可能なコードに変換できるツールです。出力結果の自動修正が可能で、安定したコードを生成できます。将来的には、フロントエンドエンジニアは詳細な型宣言を記述し、TypeChat にフレームワークコードを生成させる必要があります。これは、現在フロントエンドがフレームワークを使用して状態変化ロジックを記述するのと似ています。これにより、フロントエンドエンジニアの要求が高まりますが、この職種は引き続き存在し、従事者は少なくなるでしょう。
ツール#
veaury#
Vue3 で React を使用し、React で Vue3 を使用します。
auto-form#
zod スキーマに基づいて @shadcn/ui フォームを自動的に作成する React コンポーネントです。
vaul#
React 用のスタイルなしのドロワーコンポーネントです。
capo.js#
あなたの<head>タグの内容を整理します。
swagger-typescript-api#
Swagger スキームによる TypeScript API ジェネレーターです。
np#
より良いnpm publishです。
更新#
Astro 2.9: ビュー遷移（実験的）#
- 実験的なビュー遷移サポートが導入され、クライアントルーティングを必要とせずにページ間のよりスムーズな遷移を実現します。
- リダイレクト設定オプションはもはや実験的ではなくなり、プロジェクトでのリダイレクト設定が容易になりました。
- Astro の静的分析が改善され、使用されているインポートのみを含めることでスクリプトバンドルを最適化し、より効率的なパフォーマンスを実現します。
その他#
成功するための方法#
この記事では、非凡な成功を収めるための 13 の考え方を提供しています。これは、大量の富を得ることや重要なものを創造することに関してです。著者は、ビジネスや個人の成長における複利の重要性を強調しています。自信、独立した思考、そして自分のアイデアを効果的に売り込む必要性が強調されています。リスクを取ること、集中力を保つこと、そして努力することを奨励しています。記事の最後では、目標を見つけ、意味のある影響を与えることが大きな喜びと満足感をもたらすことができると指摘しています。
- 非凡な成功を収めるためには、自分自身とキャリアの向上に集中し、指数関数的な成長を追求し、成果を向上させ続ける必要があります。
- 自信を育て、ほぼ妄想的なレベルまで高めることが、成功を実現し、課題を克服する上で大きな力を持つことを理解することが重要です。
- 独立した思考能力を育て、自分のアイデアを効果的に売り込む方法を学び、リスクを取りやすくすることで、機会をつかみ、迅速に適応することができます。
良いコードは、次の開発者へのラブレターのようなものです。#
この記事では、優れたコードを書くことの重要性を強調し、それをラブレターに例えています。優れたコードは、個人的で誠実で思いやりのあるラブレターのようなものです。それは、拡張性、保守性、高効率を持つように設計パターンや原則に従っています。適切な命名規則や徹底的なコメントなど、ベストプラクティスに従うことも非常に重要です。厳格なテストと将来の開発者への共感は、優れたコードを書くための重要な要素です。最終的に、優れたコードは他の人が簡単に構築できる持続的な遺産です。
- 優れたコードはラブレターのようなもので、個人的で誠実で思いやりがあり、感情を正確に伝え、問題を効率的に解決することを目的としています。
- 設計パターンや原則はコードの文法規則であり、開発者に共有の語彙を提供し、拡張可能で保守可能で理解しやすいソフトウェア設計を作成するためのものです。
- ベストプラクティスに従い、徹底的なテストを行い、将来の開発者に対して共感と敬意を示すことは、読みやすく、理解しやすく、保守しやすい良いコードを作成するために不可欠です。
NFTs 101 — なぜ NFT は世代の革新なのか#
この記事の著者は、NFT（非同質化トークン）の価値に対する新しい認識を説明し、100 万ドル以上の NFT に投資することを決定しました。彼らは、NFT がもたらす高いリターンの可能性と NFT の価値の理由について議論しています。著者は、以前はアートや無形商品に対して懐疑的だったが、NFT アートの価値を理解し始めた経緯を説明しています。この記事は異なる章に分かれており、NFT のさまざまな側面をカバーし、NFT とのインタラクションに関する実用的なチュートリアルを提供しています。
- 著者は、最初は NFT やアートの主観的価値に懐疑的だったが、今では NFT が技術革命の潜在能力を持つと確信しています。
- 著者は、伝統的なアートの評価と NFT の投機的性質との間の乖離を強調していますが、NFT は伝統的な暗号通貨投資よりも高いリターンをもたらす可能性があると考えています。
- 著者は、アートやゲームなどのさまざまな業界における NFT の実用性を強調し、NFT がクリエイターとコレクターの間の利益の一致を促進する可能性について議論しています。
SaaS の次は何か？#
この記事では、ソフトウェア開発における「可塑源コード」の概念について議論しています。ユーザーは AI を使用してアプリケーションの基盤となるコードを変更できます。これにより、より多くのカスタマイズと個別化が可能になり、カスタマイズ可能な郊外開発プロジェクトを構築するのに似ています。著者は、可塑源コードアプリケーションの使用経験と、ブラウザベースの開発環境を介して友人と簡単に共有する方法について共有しています。この記事は、ソフトウェア開発におけるこの新しいパラダイムが、小規模な SaaS アプリケーションの構築を容易にし、開発者とユーザーの境界を曖昧にし、よりカスタマイズされたソフトウェアを作成することを可能にすると考えています。
- ウェブ環境と AI 技術の進展により、カスタマイズ可能で個別化されたソフトウェアアプリケーションの作成が可能になりました。
- これらの技術の進歩により、ユーザーはコーディングスキルを必要とせずにアプリケーションを変更およびカスタマイズできるため、より個別化されたユーザーエクスペリエンスが実現されます。
- ソフトウェア開発におけるこの新しいパラダイムは、新しいビジネス機会を開き、開発者とユーザーの境界を曖昧にします。