この週報は、各地の内容のまとめ整理です
技術#
ウェブ端音声を理解するための記事#
この記事では、フロントエンドでの録音の実装方法について、サポートされているフォーマットやブラウザの互換性を含めて紹介しています。主に二つのサードパーティライブラリ、ecorder-core ライブラリと recorder-js ライブラリについて説明し、Flash などの技術のサポート状況をまとめています。記事では、現在の主流ブラウザはすべて Web Audio API をサポートしているが、IE バージョンには問題があり、録音を実現するために Flash 技術を使用する必要があることを指摘しています。しかし、Flash 技術は古く、新しい主流ブラウザとの互換性が悪く、Microsoft はすでに IE のサポートを終了しています。
ペインポイント SEO: コンバージョンを促進する SEO コンテンツの作成方法#
この記事では、高意向キーワードを高検索量キーワードよりも優先する重要性について議論し、SEO 主導のコンテンツを通じて潜在顧客とコンバージョンを生成する方法を探ります。従来の方法では、高検索量キーワードをターゲットにすることでトラフィックを増加させる可能性がありますが、測定可能なリードや登録を生み出すことができないことが多いです。著者は、検索者の意図を理解し、特定のペインポイントを解決するコンテンツを作成することに焦点を当てたペインポイント SEO の概念を紹介しています。記事では、潜在顧客と登録を促進する SEO トピックを提案するプロセスを提供し、カテゴリキーワード、比較および代替キーワード、そして「完了すべき作業」キーワードを使用することを含みます。買い手の旅に合わせてペインポイントを解決することで、企業は SEO 努力のコンバージョンの可能性を高めることができます。
- コンテンツマーケティングにおいて、低検索量だが高い購入意向を持つキーワードを優先することで、高検索量キーワードをターゲットにするよりも高いコンバージョン率を実現できます。
- ペインポイント SEO は、検索者のペインポイントと意図を解決することに焦点を当て、より効果的なコンテンツアイデアを生み出し、潜在顧客と登録を促進します。
- ペインポイント SEO の三つのレベルには、カテゴリキーワード、比較および代替キーワード、そして「完了すべき作業」キーワードが含まれ、買い手の旅の異なる段階にターゲットを絞るのに役立ちます。
産業の共感#
この記事では、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 サーバーコンポーネントを使用する際に直面する挫折と課題について議論しています。著者はライブラリのメンテナとして、ドキュメントやガイダンスの不足により、ユーザーをサポートすることがますます困難になっていることを説明しています。また、React サーバーコンポーネントによってもたらされた変更や複雑さについて不満を表明しています。たとえば、ライブラリのバンドルツールを変更する必要があることや、createContext のような特定の機能が欠けていることです。記事は、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 端の新しいビジネスに直面したときに迅速に作業を開始する方法を四つの観点から分析しています。まずは業界と競合製品を調査し、業界レポートや競合分析を通じて自分が従事している業界や製品の地位と競争相手を理解します。次に、会社の戦略を理解し、今後担当するビジネスの発展方向を明確にします。第三に、ビジネス側とコミュニケーションを取り、ニーズを理解し合意を形成します。最後に、迅速なプロトタイピングとユーザーフィードバックを通じてデザインを継続的に最適化します。これらの方法は、デザイナーがビジネスを迅速に理解し、作業を開始するのに役立ちます。
AI#
大規模言語モデルと知識グラフの協調研究の概要：二つの技術の相互補完#
初めての LLM アプリを構築するために知っておくべきこと#
このチュートリアルでは、大規模言語モデル（LLMs）とコンテキスト注入を使用してチャットボットを構築するプロセスを紹介しています。LLMs が非構造化データを分析する必要性と微調整の限界について議論しています。チュートリアルでは、LLM アプリ用の Python フレームワークである LangChain も紹介しています。段階的なチュートリアルでは、ドキュメントの読み込み、テキストブロックへの分割、埋め込みベクトルへの変換、LLM とプロンプトテンプレートの定義、ベクトルストレージの作成のプロセスをカバーしています。また、意思決定におけるエージェントの重要性も強調しています。チュートリアルの最後では、LangChain の目的と LLM アプリに必要なコンポーネントをまとめています。
- 大規模言語モデル（LLMs）は、企業内の約 80％のデータを占める非構造化データを処理し理解することを可能にします。
- LLMs を微調整することで特定のタスクに適応させることができますが、コンテキスト注入を通じて、LLM 自体を変更することなくプロンプトに関連するコンテキストを注入できます。
- LangChain は、LLM アプリの開発をサポートする Python フレームワークで、ドキュメントローダー、テキスト分割器、ベクトルストレージ、プロンプト管理などのコンポーネントを提供します。
その他#
Docker で無料 GPT4-FreeGPT をデプロイ#
最近、「人工知能」に関連する多くのビジネスプロジェクトを見ました。これらはすべて、さまざまなデータを ChatGPT の API に送信し、新しい、印象的なことをしているふりをしているだけで、実際にはリスク投資を早く得るためだけのものです。
-- Hacker News の読者
私は、仕事でコンピュータと対話する際には論理が非常に役立つが、人と対話する際には論理がほとんど役に立たないことに気づきました。
実際、ほとんどすべての人間関係において、論理、厳密さ、議論は役に立ちません。
-- 『論理、厳密さ、議論』