この週報は、各地の内容をまとめたものです
技術#
Web 端音声を理解するための記事#
この記事では、フロントエンドでの録音の実装方法、サポートされているフォーマット、ブラウザの互換性について説明しています。主に 2 つのサードパーティライブラリ：ecorder-core ライブラリと recorder-js ライブラリを紹介し、Flash などの技術のサポート状況をまとめています。記事では、現在の主流ブラウザはすべて Web Audio API をサポートしており、IE バージョンに問題があるため、録音を実現するために Flash 技術の使用を検討する必要があると指摘していますが、Flash 技術は古く、新しい主流ブラウザとの互換性が悪く、Microsoft はすでに IE のサポートを終了しています。
Pain-Point SEO: コンバージョンを促進する SEO コンテンツの作成方法#
この記事では、高意向キーワードを高検索ボリュームキーワードよりも優先する重要性について議論し、SEO 駆動のコンテンツを通じて潜在顧客とコンバージョンを生成する方法を説明しています。従来の方法では、高検索ボリュームキーワードをターゲットにするとトラフィックが増加する可能性がありますが、測定可能なリードや登録を生み出すことができないことが多いです。著者は、検索者の意図を理解し、特定の痛点を解決するコンテンツを作成することに焦点を当てた痛点 SEO の概念を紹介しています。記事では、潜在顧客と登録を促進する SEO トピックを提案するためのプロセスを提供し、カテゴリキーワード、比較および代替キーワード、"仕事が完了する" キーワードを使用することを含んでいます。買い手の旅に合わせて痛点を解決することで、企業は SEO 努力のコンバージョンの可能性を高めることができます。
- コンテンツマーケティングにおいて、低検索ボリュームだが高い購入意向を持つキーワードを優先することで、高検索ボリュームキーワードをターゲットにするよりも高いコンバージョン率を実現できます。
- 痛点 SEO は、検索者の痛点と意図を解決することに焦点を当て、より効果的なコンテンツアイデアを生み出し、潜在顧客と登録を促進します。
- 痛点 SEO の 3 つのレベルには、カテゴリキーワード、比較および代替キーワード、"仕事が完了する" キーワードが含まれ、買い手の旅の異なる段階にターゲットを絞るのに役立ちます。
産業の共感#
この記事では、Web フォントの読み込みが Google のコア Web 指標（特に最大コンテンツ描画 LCP と累積レイアウトシフト CLS）に与える影響について議論しています。LCP を改善し、フォントの読み込みによるレイアウトシフトを回避するための解決策として、font-display: optional の使用を紹介しています。記事では、font-display: optional を使用したプリロードやブラウザキャッシュがフォントに与える影響についても探求しています。フォントの読み込みコードを自己ホストすることを推奨し、カスタムフォントとフォールバックフォントをマッチさせてスムーズな移行を実現するための「完璧なフォントフォールバック」というツールを紹介しています。最後に、フォントマッチングの問題を解決するための新しい Web 標準ソリューションである @font-face 属性 size-adjust について言及しています。全体として、この記事は Web フォントの読み込みを最適化してより良いパフォーマンスを実現するための洞察と戦略を提供しています。
- font-display: optional と自己ホストの Web フォント CSS を使用することで、最大コンテンツ描画（LCP）と累積レイアウトシフト（CLS）の指標を改善できます。
- "完璧なフォントフォールバック" のようなツールを使用してフォントフォールバックを調整し、スムーズな移行を実現し、レイアウトシフトを回避できます。
- 今後の Web 標準 size-adjust は、フォントマッチングの問題を解決するためのソリューションを提供し、ユーザーエクスペリエンスをさらに向上させます。
RegExp v フラグと集合表記および文字列の特性#
この記事では、JavaScript の正規表現における新しい unicodeSets モードについて議論しています。これにより、文字列の Unicode プロパティ、集合表記、改善された大文字小文字を区別しないマッチングを含む文字クラスを拡張できます。v フラグはこのモードを有効にするために使用され、u フラグと組み合わせて使用することはできません。この記事では、これらの新機能の使用方法についての例と説明を提供しています。
- JavaScript の新しい unicodeSets モードは、文字列の Unicode プロパティや改善された大文字小文字を区別しないマッチングを含む文字クラスを拡張できます。
- v フラグを使用すると、文字クラス内で集合表記や文字列リテラル構文を使用して差分 / 減算や交差などの操作を実行できます。
- v フラグを使用することで、正規表現は複数文字の文字列をマッチさせ、文字列のプロパティをサポートし、絵文字や他の Unicode 文字をより簡単に処理できます。
CSS アンカーポジショニングで要素を互いに結びつける#
CSS アンカー API は、JavaScript や追加のマークアップなしで要素を接続するための CSS API を提供することを目的としています。これは、他の要素の位置とサイズに基づいて要素を配置し、サイズを調整することを可能にします。現在、要素のアンキングには、コンテナにラップするか、JavaScript を使用して位置を追跡するなど、さまざまな解決策があります。しかし、これらの解決策には限界があり、レスポンシブでない可能性があります。CSS アンカー API は、開発者がアンカーポイントを定義し、アンカーポイント関数を使用して要素を配置することを可能にし、より簡素化された効率的な方法を提供します。これにより、JavaScript やサードパーティの依存関係が不要になります。この API は現在実験段階ですが、Chrome Canary でテストできます。
- CSS アンカー API は、要素に CSS API を提供し、JavaScript や追加のマークアップの必要性を排除します。
- 現在の要素アンキングの解決策は、要素をコンテナにラップすること、JavaScript を使用して位置を追跡すること、またはサードパーティのパッケージを使用することを含みます。
- CSS アンカー API は、開発者が CSS または HTML 内でアンカーポイントを定義し、アンカーポイントの位置に基づいて要素を配置するためのアンカーポイント関数を使用することを可能にし、JavaScript や依存関係の必要性を減らします。
現在の React とサーバーコンポーネントの論争についての私の見解#
この記事では、開発者が React サーバーコンポーネントを使用する際に直面する挫折と課題について議論しています。著者はライブラリのメンテナとして、ドキュメントとガイダンスの欠如により、ユーザーをサポートし助けることがますます困難になっていることを説明しています。また、ライブラリのバンドルツールを変更する必要があることや、createContext のような特定の機能が欠如していることなど、React サーバーコンポーネントによってもたらされた変化と複雑さに対する不満も表明しています。記事は、React チームとライブラリのメンテナとのコミュニケーションの不全が、予期しない問題や混乱を引き起こしていることを強調しています。全体として、著者は React サーバーコンポーネントをよりスムーズに採用できるようにするために、より良いサポートとコミュニケーションの必要性を強調しています。
- React サーバーコンポーネントの導入は、ドキュメントとサポートの欠如により、ライブラリのメンテナやユーザーの不満を引き起こしています。
- React サーバーコンポーネントのサポートの複雑さは、ライブラリのメンテナが支援を提供し、問題を効果的に解決することを困難にしています。
- React チームとライブラリのメンテナとの間にはコミュニケーションの不全があり、予期しない課題や将来の発展に対する不明確さを引き起こしています。
2023 年に SVG-in-JS と別れる#
この記事では、SVG を JavaScript バンドルに含めることの欠点について議論し、JSX で SVG を使用する代替技術を提案しています。SVG がどのように JavaScript に取り込まれたか、SVG-in-JS がパフォーマンスに与える影響、解析、コンパイル、メモリ使用に対する影響について説明しています。記事では、JS バンドルから SVG を削除するためのベストプラクティスを提供し、<img>タグ、<use>を使用した SVG スプライト、CSS を使用して fill や stroke などの属性を設定する方法を含んでいます。また、JS バンドルの膨張問題を回避するために HTML 内で SVG をインラインで使用するオプションについても探求しています。
JS バンドルに SVG を含めることは、パフォーマンスに大きな影響を与え、解析とコンパイル時間、メモリ使用を増加させます。
パフォーマンスを最適化するために、SVG を JS バンドルから削除し、<img>タグや SVG スプライトなどの技術を使用して読み込むべきです。
SVG スプライトと<use>タグを使用することで、スタイルをより良く制御し、JS 内でインライン SVG コードを使用する必要性を減らすことができます。
SVG パスの理解#
この記事では、SVG パスの d 属性とそれを使用してアイコンを描画する方法について説明しています。絶対命令と相対命令を含む異なるタイプのパス命令について議論しています。また、パス命令を理解し使用するためのインタラクティブなガイドを提供しています。
- SVG パスの d 属性は、一連の命令であり、ブラウザにパスを描画する方法を指示します。
- パス命令は大文字（絶対）または小文字（相対）であり、パラメータは前の命令の終点または原点に対して相対的です。
- d 属性とその命令を理解することは、複雑で動的な SVG アイコンやアニメーションを作成するために不可欠です。
React はレンダリング中に状態を更新できる#
この記事では、人気のある JavaScript ライブラリである React の驚くべき特性について議論しています。レンダリング中に状態を更新することが可能であることを説明しており、これは直感に反することです。なぜなら、状態の更新は毎回再レンダリングを引き起こすからです。しかし、React がこれを許可するのは、パフォーマンスとユーザーエクスペリエンスの最適化のためです。この記事では、従来の useEffect を使用して状態を更新する方法と、レンダリング中に状態を更新する新しい方法を比較しています。後者は、古い状態のちらつきを防ぎ、より安定した体験を得ることができます。著者は例を提供し、この特性が特定の状況で非常に役立つことを示唆しています。たとえば、フォームフィールドのデフォルト値を更新する場合などです。
- React はレンダリング中に状態を更新することを許可しており、特定の状況でパフォーマンスとユーザーエクスペリエンスの最適化のための有用な手段となります。
- レンダリング中に状態を更新することで、古い状態のちらつきを防ぎ、さまざまな useEffect フック間の相互作用を減らすことができます。
- この技術は、フォームフィールドのデフォルト値の更新や、スクロール時に隠れるメニューなどの特定の状況で特に役立ちます。
ツール#
Microsoft-Activation-Scripts#
HWID / KMS38 / オンライン KMS アクティベーション方法を使用した Windows と Office のアクティベーションツールで、オープンソースコードと少ないウイルス対策ソフトウェアの検出に重点を置いています。
postcss-preset-en#
モダンな CSS 記述変換器
rrule#
iCalendar RFC などに定義されたカレンダー日付の繰り返しルールを処理するための JavaScript ライブラリ。
hurl#
プレーンテキストを使用して HTTP リクエストを発行、実行、テストします。
建木#
建木は、DevOps 分野向けの非常に拡張可能なオープンソースのノーコード（グラフィカル）/ ローコード（GitOps）ツールです。ユーザーがさまざまな DevOps プロセスを簡単に編成し、異なるプラットフォームに配布して実行するのを支援します。
更新#
Expo SDK 49 ベータ版が利用可能になりました#
この記事では、Expo の SDK 49 ベータ版のリリースを発表しています。これは、モバイルアプリケーションを構築するための開発ツールです。ベータ期間中に開発者は新しいバージョンをテストし、フィードバックを提供できます。更新内容には、JS デバッガのネットワークデバッグ機能、React devtools の組み込みサポート、VS Code と一緒にデバッグするための実験的サポートが含まれています。他の改善点には、環境変数の組み込みサポート、Expo モジュール API の変更、React Native と React のバージョンの更新が含まれています。記事では、既知の問題や今後のクラシック更新の終了についても言及しています。開発者にはベータ版を試し、遭遇した問題を報告するよう奨励しています。
- SDK 49 ベータ版は、ネットワークデバッグ、組み込みの React devtools、VS Code から直接アプリケーションの JavaScript コードをデバッグするための実験的サポートなどの新機能を導入しています。
- Expo CLI は現在、Metro に環境変数の組み込みサポートを内蔵しており、以前の問題を解決し、JavaScript エコシステムの人気のある慣習に従っています。
- SDK 49 は、クラシック更新をサポートする最後の SDK であり、SDK 50 からはアプリケーションが EAS などの互換性のあるサーバーの現代的な更新プロトコルを使用する必要があります。
Node.js 20 が利用可能になりました！#
Node.js 20 は、複数の新機能と改善をリリースしました。注目すべき変更には、Node.js の権限モデルの導入が含まれ、実行中に特定のリソースへのアクセスを制限できるようになりました。開発者は、--allow-fs-read および --allow-fs-write フラグを使用して、ファイルシステムへのアクセスをより適切に制御できます。カスタム ESM ローダーフックは現在、専用スレッドで実行され、ローダーとアプリケーションコードの間に交差汚染がないことを保証します。V8 JavaScript エンジンは 11.3 バージョンにアップグレードされ、パフォーマンスの改善と新しい言語機能がもたらされました。安定したテストランナーモジュールは安定版としてマークされ、テストの作成と実行の基盤を提供します。URL、fetch ()、EventTarget などに関してパフォーマンスの改善が行われました。単一の実行可能アプリケーション（SEA）のサポートが改善され、複数のリソースを埋め込むことができるようになりました。Web Crypto API 関数は、他の実装との互換性が向上しました。ARM64 Windows の公式サポートが追加されました。Web Assembly System Interface（WASI）実装に関しても進展がありました。ユーザーには新しいバージョンを試し、フィードバックを提供するよう奨励されています。Node.js 14 は 2023 年 4 月にライフサイクルの終点を迎え、ユーザーには Node.js 18 または 20 へのアップグレードを計画するよう推奨されています。Node.js 16 は 2023 年 9 月にライフサイクルの終点を迎えます。Next-10 チームは、フィードバックを収集し、Node.js の将来の発展を形作るための調査を行っています。
- Node.js 20 は、実験的な権限モデルを導入し、開発者が実行中に特定のリソースへのアクセスを制限できるようにします。
- カスタム ESM ローダーフックは現在、専用スレッドで実行され、ローダーとアプリケーションコードの間に交差汚染がないことを保証します。
- 更新には V8 11.3 が含まれ、パフォーマンスの改善と新しい言語機能、URL、fetch ()、EventTarget などに関する他のパフォーマンス向上が含まれています。
デザイン#
B 端デザイナー必見：ビジネスを体系的に理解する方法#
この記事では、B 端の新しいビジネスに直面したときに迅速に作業を開始する方法を 4 つの観点から分析しています。最初は業界と競合製品を調査し、業界レポートや競合分析を通じて自分が従事している業界や製品の地位と競合相手を理解することです。次に、会社の戦略を理解し、後のビジネスの発展方向を明確にすることです。第三に、ビジネス側とコミュニケーションを取り、ニーズを理解し合意を得ることです。最後に、迅速なプロトタイピングとユーザーフィードバックを通じてデザインを継続的に最適化することです。これらの方法は、デザイナーがビジネスを迅速に理解し、作業を開始するのに役立ちます。
AI#
大規模言語モデルと知識グラフの協調研究レビュー：二大技術の相互補完#
初めての LLM アプリを構築するために知っておくべきこと#
このチュートリアルでは、大規模言語モデル（LLMs）とコンテキスト注入を使用してチャットボットを構築するプロセスを説明しています。LLMs が非構造化データを分析する必要性と微調整の限界について議論しています。チュートリアルでは、LLM アプリ用の Python フレームワークである LangChain を紹介しています。ステップバイステップのチュートリアルでは、ドキュメントの読み込み、テキストブロックへの分割、埋め込みベクトルへの変換、LLM とプロンプトテンプレートの定義、ベクトルストレージの作成のプロセスをカバーしています。また、意思決定におけるエージェントの重要性を強調しています。チュートリアルの最後では、LangChain の目的と LLM アプリに必要なコンポーネントをまとめています。
- 大規模言語モデル（LLMs）は、企業内の約 80％のデータを占める非構造化データを処理し理解することを可能にします。
- LLMs を微調整することで、特定のタスクに適応させることができますが、コンテキスト注入を通じて、LLM 自体を変更することなくプロンプトに関連するコンテキストを注入できます。
- LangChain は、LLM アプリ開発をサポートする Python フレームワークで、ドキュメントローダー、テキスト分割器、ベクトルストレージ、プロンプト管理などのコンポーネントを提供します。
その他#
Docker で無料の GPT4-FreeGPT をデプロイ#
最近、"人工知能" に関連する多くのビジネスプロジェクトを見かけました。それらはすべて、さまざまなデータを ChatGPT の API に送信し、新しい、印象的なことをしているふりをしているだけで、実際にはリスク投資を早く得るためだけのものです。
-- Hacker News の読者
仕事でコンピュータと関わるとき、論理は非常に役立ちますが、人と関わるときには論理はほとんど役に立ちません。
実際、大多数の人間関係において、論理、厳密さ、議論は役に立たないのです。
-- 『論理、厳密さ、議論』