Fork me on GitHub

2021-05-25のJS: IEの単体アプリとしてのサポート終了、WebContainers、User-Agent Client Hints

Edit on GitHub 編集履歴を見る

JSer.info #541 - Windows 10においてのInternet Explorer(IE)の単体のアプリとしてサポートが2022年6月15日で終了されることがアナウンスされました。

2022年6月15日以降は、IEのデスクトップアプリケーション(iexplore.exe)を利用しようとするとMicrosoft Edge(MSEdge)が代わりに起動します。
MSEdgeにはIEモードが搭載されており、MSEdgeの設定を変更することでIEのレンダリングエンジンであるMSHTML (Trident)が使えるようになるようです。

また、このIEモードではMSEdgeのF12開発者ツールと接続できないため、代わりにIEChooser.exeを使ったデバッグができるようになっています。

このIEモード(MSHTML)のサポート自体は今回のアナウンスとは関係なく、 2029年までサポートされる予定となっています。


WebContainersというブラウザ上でNode.jsのランタイムを動かす仕組みがstackblitzで公開されています。

Node.jsのランタイムをブラウザで動かし、ブラウザ自体をSandboxとしてNode.jsのコードをセキュアに実行するための仕組みとなっています。あくまでブラウザの中で動かす仕組みであるため、ネイティブアドオンは対応せずCORSなどブラウザの制約の中で動作します。

stackblitz/webcontainer-coreではキーコンセプトが解説されています。
Virtual FSとNetworkingを実装し、各プロセスをWorkerとして起動してメッセージングすることでマルチプロセスのサポートしています。POSIXなシェルとしてjshという実装と、npm/yarnクライアントとしてturboという実装を持っています。

現在はオープンソースではありませんが、将来的にコア部分はオープンソースとして公開する予定となっています。


ChromeにおけるUA文字列を扱う navigator.userAgent, navigator.appVersion, navigator.platform を非推奨とするロードマップが更新されています。

Chrome 92で非推奨の警告をだすようになり、段階的にUA文字列から情報を削り、UA文字列化を固定化していく予定のロードマップが公開されています。

navigator.userAgentの代替となる仕組みとして、UA Client Hintsがありロードマップの記事とあわせて、UA Client Hintsへの移行方法についての記事も公開されています。


ヘッドライン


Recoil 0.3.0 | Recoil

recoiljs.org/blog/2021/05/14/0.3.0-released/

React JavaScript library ReleaseNote

Recoil 0.3.0リリース。
RecoilRootにoverrideオプションの追加、selectorにGetCallbackを追加。
次の0.4でsnapshot.retain()していないsnapshotを使うと例外が発生するようになる


The future of Internet Explorer on Windows 10 is in Microsoft Edge | Windows Experience Blog

blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/

IE news MSEdge

IE11のデスクトップアプリケーションとしてのサポートは2022年6月15日で終了し、MSEdgeのIEモードで引き続き2029年までサポートする予定。


Release v7.5.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v7.5.0

Chrome performance Tools ReleaseNote

Lighthouse 7.5.0リリース。
Source Mapベースのファイルツリーを可視化するTreemap表示の追加、新しいCLSへの対応を追加など


Node v16.2.0 (Current) | Node.js

nodejs.org/en/blog/release/v16.2.0/

node.js ReleaseNote

Node v16.2.0リリース。
import.meta.resolveURLオブジェクトをサポート、Workerが作成された際にtriggerされるworkerイベントをprocessに追加など


Release v10.0.0 · TypeStrong/ts-node

github.com/TypeStrong/ts-node/releases/tag/v10.0.0

node.js TypeScript ReleaseNote

TypeScriptのコンパイルをRuntime時に行うts-node 10.0.0リリース。
--script-modeの挙動をデフォルト化し、古い挙動を再現する--cwd-modeを追加。
Node.js 10のサポート終了、--show-configの追加、--transpilerオプションでSWCを使ったtrasnpileに対応など。
またウェブサイトが更新されている。


アーティクル


Chromium Blog: Update on User-Agent String Reduction in Chrome

blog.chromium.org/2021/05/update-on-user-agent-string-reduction.html

Chrome article

ChromeのUser-Agent固定化のロードマップ。
Chrome 92でnavigator.userAgentなどのdeprecated化、reduced UA stringをオプトインで導入、デフォルト化など7段階でのマイグレーションフェーズについて


Introducing Firefox's new Site Isolation Security Architecture - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2021/05/introducing-firefox-new-site-isolation-security-architecture/

Firefox security article

FirefoxのSite Isolationのアーキテクチャについての記事。
eTLDベースのSiteごとにプロセス分け、メモリを相互に分離した状態でリソースをロードすることで、Spectreなどのサイドチャネル攻撃を防止する。
また、サブフレームもトップレベルが異なるSiteなら、別プロセスで読むこむようになっている。


The Humble <img> Element And Core Web Vitals — Smashing Magazine

www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/

Image performance article

<img>についてLCP、CLS、FIDのメトリクスに関する最適化の仕方についてのガイド


Introducing WebContainers: Run Node.js natively in your browser

blog.stackblitz.com/posts/introducing-webcontainers/

node.js browser webworker WebAssembly article

Node.jsをブラウザで動かすWebContainersについて。
Node.jsのランタイムをブラウザで動かし、ブラウザ自体をSandboxとしてNode.jsのコードをセキュアに実行するための仕組み。
Virtual FSとNetworkingを実装し、各プロセスをWorkerとして起動してメッセージングすることでマルチプロセスのサポートしている。
POSIXなシェルとしてjshという実装と、npm/yarnクライアントとしてturboという実装を持っている


Migrate to User-Agent Client Hints

web.dev/migrate-to-ua-ch/

Chrome article privacy

navigator.userAgentなどがDeprecatedとなり固定化されるため、その代わりとなるUser-Agent Client Hintsについて。
JavaScriptのAPIとしてのnavigator.userAgentDatanavigator.userAgentData.getHighEntropyValues
HTTPヘッダUA Client Hintを扱うAccept-CHSec-CH-UA-*について。
また、Client HintからレガシーなUA文字列を作成するライブラリについてなど


Renaming N-API to Node-API. This post was contributed by the… | by Node.js | May, 2021 | Medium

nodejs.medium.com/renaming-n-api-to-node-api-27aa8ca30ed8

node.js article

Node.jsのネイティブアドオン用のAPIの名前をN-APIをNode-APIへ変更するという話。
変更のモチベーションについて解説している


サイト、サービス、ドキュメント


オリジナルのJavaScriptライブラリを公開しよう

zenn.dev/yusuke99/books/fcd96342f5cb1b468799

JavaScript npm Github Actions tutorial

JavaScriptのライブラリをnpmに公開するチュートリアル。
ライブラリの実装とテスト、npmへの公開、GitHub ActionsでのCIからpublish、Scoped Packagesについてなど


ソフトウェア、ツール、ライブラリ関係


argyleink/transition.css: Drop-in CSS transitions

github.com/argyleink/transition.css

CSS library

いろいろなCSS transitionを集めたCSSライブラリ


DOM Events

domevents.dev/

DOM event Tools

DOMイベントの流れをBubbling、Capture、Passiveなどのオプションごとに動きを可視化できるツール


rtk-incubator/rtk-query: Experimental data fetching and caching addon for Redux Toolkit

github.com/rtk-incubator/rtk-query

redux HTTP library React

Redux Toolkitを使うデータ取得と状態管理をするQueryライブラリ。
宣言的なAPIの定義、データの取得、キャッシュやリトライ、Prefetching、React Hooks、Open APIから自動生成などに対応している。
将来的にはRedux Toolkitに同梱することを目標にしている。


ngneat/variabless: JS & CSS - A Match Made in Heaven 💎

github.com/ngneat/variabless

JavaScript CSS Tools

JavaScriptからCSS Variablesの定義を含んだCSSを生成するツール


Web worker meets worker threads - threads.js

threads.js.org/

node.js library webworker

ブラウザのWeb WorkerとNode.jsのworker_threadsを使ったWorker管理ライブラリ。
async functionとObservablesの対応、thread pools、webpack向けのpluginを持っている


この記事へ修正リクエストをする
JSer.info Slackに参加する