この週報は各地の内容のまとめです
技術#
単なるブラウザではない：JavaScript 標準の長期的未来#
JavaScript は最も人気のあるプログラミング言語として、ブラウザの枠を超えて拡張され、現在はサーバーサイドや埋め込み JavaScript ランタイムで使用されています。JavaScript の ECMAScript 標準は主にブラウザのニーズによって推進されていますが、サーバーサイド JavaScript の台頭に伴い、異なるランタイム間での協力と互換性が必要とされています。W3C の WinterCG コミュニティグループは、ブラウザと非ブラウザランタイム間のクロスランタイム相互運用性を解決することを目指しています。彼らは特定のニーズに応じてカスタマイズできる JavaScript ランタイムの標準仕様を作成したいと考えています。この標準化により、開発者は一度コードを書くだけで、異なるサーバーサイドランタイムで実行できるようになります。WinterCG はまた、各ランタイムで Web API の一貫性を確保するために、最小限の共通 Web プラットフォーム API リストを策定しています。さらに、TC39 提案では、サーバーサイド環境でのコードトレースを簡素化するための async context という方法が導入されました。目標は、クライアントとサーバーの両方で同時に使用できる汎用 JavaScript を作成することです。
- JavaScript はブラウザの枠を超えて拡張され、Node や Deno のようなサーバーサイドランタイムがその進化において重要な役割を果たしています。
- WinterCG コミュニティグループは、クロスランタイム相互運用性を促進し、サーバーサイド JavaScript 環境の共通 API の開発を調整することを目指しています。
- サーバーサイド JavaScript 用の標準基盤と統一された API 表面を採用することで、開発者、ランタイム作成者、およびこれらのランタイムに依存する企業が利益を得ることができます。
Next.js 13 におけるプリフェッチの視覚ガイド#
この記事では、Next.js 13 におけるプリフェッチの概念について説明しています。これは、バックグラウンドでコンテンツをプリロードすることでウェブページの読み込み速度を向上させる技術です。プリフェッチはユーザーの行動に基づいて予測し、期待されるページやサイトの部分を積極的にロードします。ユーザーがコンテンツを要求したときにほぼ即座に表示されます。開発中、Next.js はアプリケーションのナビゲーションに基づいて自動的にルートをプリフェッチし、シームレスな体験を提供します。プロダクションビルドでは、ルートがビューポート内で可視化されるときにプリフェッチが行われ、ページ間の即時の切り替えを確保します。記事では、特定のリンクに対してプリフェッチを無効にする方法や、プログラム的にルートをプリフェッチする方法についても言及しています。全体として、Next.js 13 のプリフェッチはウェブページの読み込み速度を最適化し、スムーズなナビゲーション体験を創出します。
- Next.js 13 のプリフェッチ技術は、期待されるページやサイトの部分を積極的にロードする技術で、ほぼ即座にコンテンツを表示し、明らかな遅延を排除します。
- 開発中、Next.js はユーザーのインタラクションに基づいて次のページのコンテンツを自動的に取得し、キャッシュし、シームレスなパフォーマンスプレビューを提供します。
- プロダクションビルドでは、Next.js はビューポート内で可視化されるときにルートをプリフェッチし、ユーザーがリンクをクリックした際にページ間で迅速に切り替えられるようにします。
輝き、視点、回転：画像のためのファンシー CSS 3D 効果#
この記事では、CSS 技術を使用して画像に驚くべき 3D 効果を作成する方法について探求しています。著者は、CSS 3D フラッシュ効果、CSS 3D 視差効果、CSS 3D 回転効果の 3 つの異なる効果を示しています。CSS 3D フラッシュ効果は、ホバー時に画像にフラッシュアニメーションと軽い回転を追加します。CSS 3D 視差効果は、ホバー時に画像をわずかにスライドさせ、視点を変えることで深さを生み出します。CSS 3D 回転効果は、y 軸に沿って画像を回転させ、3D 効果を作成します。著者は、各効果の詳細な説明とコード例を提供しています。
- CSS は、ホバー時にフラッシュアニメーションや回転を追加することで、画像に驚くべき 3D 効果を作成するために使用できます。
- CSS マスクとグラデーションを使用することで、追加のマークアップなしで画像上に偽のフラッシュ効果を作成できます。
- 回転、平行移動、クリッピングパス属性を組み合わせることで、CSS 3D 視差効果を実現し、深さと動きの錯覚を生み出すことができます。
Postgres と MySQL の全方位比較（2023 年版）#
2023 年の Stack Overflow 調査によると、Postgres は MySQL を超えて最も尊敬され、望まれるデータベースとなりました。この記事では、Postgres と MySQL のライセンス、パフォーマンス、機能、スケーラビリティ、使いやすさ、接続モデル、エコシステム、運用性などの側面を比較しています。全体的に、Postgres はより多くの機能を持ち、より繁栄したコミュニティとエコシステムを持っていますが、MySQL は学習が容易で、巨大なユーザー基盤を持っています。組織内で Postgres と MySQL が共存することも一般的です。
gRPC と RPC を理解し、優雅にデバッグ方法をマスターする#
gRPC は、Google が開発した現代的なオープンソースの高性能 RPC フレームワークで、複数の開発環境で動作します。HTTP API インターフェースと比較して、gRPC は先進的な HTTP/2 基盤アーキテクチャ設計をトランスポートプロトコルとして採用しており、大規模データ転送やマイクロサービスアーキテクチャのシナリオに適しています。軽量な Protobuf シリアル化プロトコルを使用してデータ交換を行い、データ処理速度を向上させ、データ量を削減し、ネットワーク帯域幅を節約します。RPC プロトコルは、ネットワーク通信を介して異なるサーバー間でプロセスを呼び出すための実装方法です。gRPC は内部通信の複雑さを隠し、開発者に安定した統一インターフェースを提供し、マイクロサービスの分散システムに適しています。
ツール#
bruno#
Bruno は、API を探索しテストするためのオープンソース IDE です。API リクエストの情報を保存するために純粋なテキストマークアップ言語 Bru を使用し、git や他のバージョン管理ツールを使用してコラボレーションをサポートします。複数のプラットフォームで動作し、ウェブサイト、ドキュメント、サポートを提供します。
article-extractor#
ウェブページの記事内容を抽出します。
更新#
Prettier 3.0：こんにちは、ECMAScript モジュール！#
この記事では、Prettier コードフォーマッティングツールの新しいバージョンのリリースを発表しています。更新には、ECMAScript モジュールへの移行、Markdown 形式の重大な変更、プラグインインターフェースの大幅な改善、さまざまなバグ修正が含まれています。Markdown 形式の変更には、中国語または日本語の文字と西洋の文字の間のスペースの削除が含まれています。プラグインインターフェースは現在、非同期パーサーをサポートしています。リリースには、中国語、日本語、韓国語のスペース処理の改善や、trailingComma のデフォルト値の変更も含まれています。この記事では、Babel パーサーから Flow 構文サポートを削除し、Flow コメントのサポートを削除したことにも言及しています。最後に、純粋な CSS パーサーを紹介し、フォーマット変更の例を提供しています。
- Prettier の新しいバージョンは、すべてのソースコードを ECMAScript モジュールに移行し、いくつかのフォーマット改善とバグ修正を導入することで、開発体験を向上させました。
- Prettier の Markdown 形式は変更され、中国語または日本語と西洋の文字の間にスペースを挿入しなくなり、公式ガイドに従っています。
- プラグイン開発者は、新しいバージョンに更新する際に注意が必要です。プラグインインターフェースは非同期パーサーと ECMAScript モジュールをサポートするために大幅に変更されました。
Prisma 5：デフォルトでより速く#
Prisma は人気のあるデータベース ORM ツールで、起動性能において顕著な改善を遂げました。最新バージョンの Prisma 4.8.0 は、サーバーレス環境における Prisma の性能を強化することに焦点を当てています。改善には、より効率的な JSON ベースの転送プロトコルが含まれ、CPU とメモリのオーバーヘッドが削減され、内部構造が最適化された小型の JavaScript ランタイムが含まれています。これらの変更により、Prisma の起動性能が大幅に向上しました。最新バージョンの Prisma 5.0.0 がリリースされ、ユーザーにアップグレードを促しています。アップグレードにはいくつかの破壊的な変更が含まれる可能性がありますが、影響は最小限に抑えられると予想されています。Prisma はさらなる性能向上に取り組み、更新を続けていきます。
- Prisma 4.8.0 は、特にサーバーレス環境における起動性能を向上させ、Prisma の性能を大幅に改善しました。
- より効率的な JSON ベースの転送プロトコルと最適化された内部構造が導入され、Prisma Client の起動時間が短縮され、メモリ使用量が削減されました。
- Prisma 5.0.0 がリリースされ、これらの性能向上機能を提供し、ユーザーにアップグレードを促していますが、いくつかの破壊的な変更に注意が必要です。
typescript-eslint v6 の発表#
TypeScript-eslint v6 は、ESLint や Prettier などの JavaScript ツールが TypeScript コードをサポートできるようにするツールです。新しいバージョンは、いくつかの重大な変更と機能をもたらします。ユーザーは最新バージョンに更新し、以前のパッケージを置き換える必要があります。設定名は再設計され、機能とスタイルルールの設定が個別になりました。プリセット設定の有効化ルールにも変更があります。一部のルールは変更または削除されました。ツール面でもいくつかの重大な変更があり、Node v12 および v14 のサポートが廃止されました。現在、サポートされる最小の TypeScript バージョンは 4.2.4 です。このバージョンには、開発者向けの改善も含まれており、タイプチェッカーラッパー API が提供されています。
- typescript-eslint v6 は、機能とスタイルルールのための再設計された設定名と推奨設定を導入し、TypeScript プロジェクトでの linting の有効化を容易にします。
- プリセット設定は更新され、有効化ルールやオプションの変更があり、ユーザーはそれに応じて ESLint 設定を更新する必要があります。
- このバージョンでは、一部のルールやツールに重大な変更があり、開発者に改善が提供されています。たとえば、ESLint プラグインで TypeScript 構文を使用するためのタイプチェッカーラッパー API が提供されています。
デザイン#
Elstob：中世研究者のための可変フォント#
この記事では、Elstob フォントについて説明しています。このフォントは、オックスフォード大学出版局が使用していた 17 世紀のフォントに基づいています。このフォントには、字重、光学サイズ、階級、イタリック体など、いくつかの可変軸があります。各軸は調整可能で、フォントの異なるバリエーションを作成できます。記事では、各軸とその値の範囲についての詳細情報を提供しています。また、このフォントは古英語の言語と文学のために設計されていることにも言及しています。
- Elstob フォントは、オックスフォード大学出版局が委託した歴史的フォントのデジタル版であり、異なるサイズとバリエーションが字重、光学サイズ、階級、イタリック体に使用されます。
- フォントの可変軸は、字重、光学サイズ、階級、間隔、イタリック体を動的に調整でき、ウェブデザイナーやユーザーに柔軟性を提供します。
- Elstob フォントのデザインと特徴は、歴史的なサンプルと活字に基づいており、元のフォントを再現する際の真実性と正確性を確保しています。
手頃な体験測定の実践方法 - 経験 / 見解 - UICN ユーザーエクスペリエンスデザインプラットフォーム#
この記事では、手頃な体験測定の実践方法について説明しています。これには、層別比較や交差比較マトリックスなどの方法が含まれ、実践側の前提条件を設定し、後で検証することで、仮説と検証の形式を通じてデータ分析の方向性を収束させ、分析リソースの投入を節約します。最後に、具体的な実践例を通じて、ビジネス目標を体験目標に分解し、体験目標の中で具体的に注目すべきコアパスを見つけ出し、問題を掘り下げ、ビジネスの実際の製品とデザイン戦略の提案を行う方法を示しています。
インタラクションデザインの見えない詳細#
この記事では、インタラクションデザインの背後にある科学的原理について説明し、メタファー、動的物理学、スワイプジェスチャー、レスポンスジェスチャー、空間的一貫性が優れたユーザー体験を創出する上での重要性を探求しています。著者は、デザインにおける形式と機能のバランスを保つ必要性を強調し、直感と本能的な行動がインタラクションデザインにおいて果たす役割を強調しています。
- インタラクションデザインは、ヒューマンインテントを理解し、現実世界のメタファーを使用してシームレスな体験を創出することを目的としたアート形式です。
- 優れたインタラクションデザインは、ジェスチャーと物理学を利用して直感的で応答性の高いユーザーインターフェースを作成します。
- インタラクションデザインにおいて、空間的一貫性は重要であり、異なる要素間の関係を構築し、ユーザーに明確さを提供します。
AI#
Cody#
Cody は、あなたのコードベース全体を読み、コードの質問に答えたり、コードを作成したりします。
ChatGPT 探索：コードインタープリタの高度なガイド#
- コードインタープリタは、すべての問題を一度に解決することはできず、満足のいく結果を返すことはありません。実行中に自己修正を行うこともありますが、失敗した場合は適切なガイダンスを提供する必要があります。
- 環境が制限されているために特定の操作を実行できないと表示された場合は、代替案や手順を提供してガイドすることを試みることができます（一定の Python プログラミングの基礎が必要です）。
- コードインタープリタのファイルアップロード機能と画像表示は、ChatGPT の元々の対話能力と組み合わさり、GPT-4 の能力をさらに拡大しました。たとえば、データ分析、ファイル形式の変換、仮説の検証などです。
- コードインタープリタのセッションは時間制限があり、開かれた一時メモリはタイムアウト後に破棄されます。そのため、出力されたダウンロードリソースリンクは事前にローカルにダウンロードしてバックアップを取ることをお勧めします。
- Python インタープリタが開く一時メモリ空間は限られており、複雑で時間のかかるタスクを実行すると失敗する可能性が高いです。データ処理やデータ分析、ファイル形式の変換などのタスクには適しているが、元のファイルが大きすぎるとメモリが爆発してタスクが失敗する可能性があります。
その他#
三つの原則が、効果的にノートを取るのに役立ちます。
（1）ノートはあなたの思考方法に合っている必要があります。
ノートを取る際は、自分の思考方法に従って行うべきであり、教師（または本）の説明方法をそのままコピーしてはいけません。そうすることで、書くのが楽になるだけでなく、将来ノートを振り返ったときにも、自分の考えを理解しやすくなります。
（2）ノートはあなたの知識を表す必要があります。
ノートは他人の言葉を単にコピー / ペーストするのではなく、自分の言葉で表現するべきです。理解している部分と、まだ理解していない部分や疑問がある部分を明確にマークしておくと良いでしょう。
（3）ノートは簡単に検索できる必要があります。
自分のノートを最大限に活用するためには（実際には自分の時間を節約するために）、簡単に検索できる必要があります。各部分にタイトルを付け、定期的に目次を整理することが重要です。
皆が考えているのとは違って、プログラミングは深い思考を習得する必要はなく、ある程度文書を記憶し、特定の用語を使って明確に考えを表現することが必要です。
-- 《プログラミングには知識の幅が必要》
一晩中苦労した AutoBangumi の設定がようやく動き出しました。
https://zhuanlan.zhihu.com/p/641701649
創造的なリーダーの役割は、フォロワーではなく、より多くのリーダーを育成することです。この見解がより一般的になることを願っています。
誰かがあなたの意見に反対するときは、自分を弁護しないでください。代わりに、彼らの話を聞いてください。彼らに説明を求め、彼らの懸念を確認し、さらに彼らの意見を拡張し、肯定してください。そうすることで、他の人はあなたが言うことを聞くことに興味を持つでしょう。私の青春時代に誰かがこの教訓を教えてくれたらよかったのにと思います。