Fork me on GitHub

2021-03-09のJS: Gatsby 3、Electron 12、ブラウザのライフサイクルの変化

Edit on GitHub 編集履歴を見る

JSer.info #530 - Gatsby v3がリリースされました。

ローカルでは実際にアクセスされたページだけをビルドすることで、全体を再構築せずにビルドする挙動がデフォルトとなっています。これによって必要なページだけをビルドするため、開発時のビルド待ち時間を少なくしています。

破壊的変更としてNode.js 12未満のサポート終了、React 17/webpack 5/ESLint 7へアップデート、globalのgraphqlではなくimportして使うように変更、APIの変更などが含まれています。

マイグレーション方法については、次のドキュメントに丁寧な解説が書かれています。


Electron 12.0.0がリリースされました。

Chromium 89、V8 8.9、Node.js 14.16(12.xからの更新)へアップデートされています。
exposeInMainWorldがオブジェクト以外をサポート、webFrameMain APIの追加など含まれています。

Electron 12.0.0ではcontextIsolationworldSafeExecuteJavaScriptがデフォルトでtrueに変更されています。
Context IsolationpreloadのスクリプトとwebContentsのスクリプトの実行コンテキスト分離することで、XSSなどの被害の範囲を軽減する仕組みです。

また、段階的に廃止されているremoteモジュールが非推奨となり、@electron/remoteという外部モジュールへと移行されています。


ブラウザのライフサイクルが変化してきているのでいくつかのニュースをまとめて紹介します。

現在6週間ごとにリリースされているChromeですが、Q3 of 2021のChrome 94からはリリースサイクルを4週間ごとに短縮することを発表しました。

Microsoft Edge Legacyの廃止スケジュールが公開されています。
Microsoft Edge Legacyは2021年3月9日でサポート終了されます。また、2021年4月13に配信されるセキュリティアップデートで削除され、同時に新しいChromiumベースのMSEdgeがインストールされます。(置き換わる)

Internet Explorer(IE)の廃止はEdgeとは異なるライフサイクルであるためまだまだ先ですが、
IEでアクセスしたときにMSEdgeへリダイレクトする互換リストによって移行が進められています。

このNeedEdgeの互換リストに記載されたサイトへIEで訪問すると、MSEdgeで開き直すように促すリダイレクトポップアップが表示されるようになります。
この互換リストに追加されているサイトは徐々に増えてきています。
これとは、別にIEのサポート終了を宣言しているサイトについては次のドキュメントにまとめられています。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Gatsby v3 Incremental Builds in OSS, new Gatsby Image, and more | Gatsby

www.gatsbyjs.com/blog/gatsby-v3/

React GraphQL ReleaseNote

Gatsby 3.0リリース。
破壊的変更としてNode.js 12未満のサポート終了、webpack 5/ESLint 7へアップデート、globalのgraphqlではなくimportして使うように変更、APIの変更など。
ローカルでは実際にアクセスされたページだけをビルドすることで、全体を再構築せずにビルドできるように


jQuery 3.6.0 Released! | Official jQuery Blog

blog.jquery.com/2021/03/02/jquery-3-6-0-released/

jQuery JSON ReleaseNote

jQuery 3.6.0リリース。
JSONPのリクエスト時に、エラーレスポンスがJSONを返した場合の挙動を変更。
.focus()のバグを修正など


Deno 1.8 Release Notes

deno.land/posts/v1.8

deno ReleaseNote

Deno 1.8.0リリース。
試験的にWebGPU APIのサポート。
ICUに対応しECMA i18n APIであるIntl オブジェクトなどのサポート。DENO_AUTH_TOKENSでモジュールを取得する際の認証トークンをサポート、Exit sanitierをDeno.testに追加、deno fmtがJSONをサポート、TypeScript 4.2へアップデート。
Import Map、Deno.permissionsDeno.linkDeno.symlink APIがそれぞれStable APIとなった。


New Microsoft Edge to replace Microsoft Edge Legacy with April’s Windows 10 Update Tuesday release - Microsoft Tech Community

techcommunity.microsoft.com/t5/microsoft-365-blog/new-microsoft-edge-to-replace-microsoft-edge-legacy-with-april-s/ba-p/2114224

MSEdge news

Microsoft Edge Legacyは2021年3月9日でサポート終了される。
また、2021年4月13に削除されるセキュリティアップデートが配信され、同時に新しいChromiumベースのMSEdgeがインストールされる。


Chromium Blog: Speeding up Chrome's release cycle

blog.chromium.org/2021/03/speeding-up-release-cycle.html

Chrome news

Chromeのリリースサイクルが6週間ごとから4週間ごとに短縮される。


Announcing the New TypeScript Handbook | TypeScript

devblogs.microsoft.com/typescript/announcing-the-new-typescript-handbook/

TypeScript document

TypeScript Handbookが刷新された。


Electron 12.0.0 | Electron Blog

www.electronjs.org/blog/electron-12-0

Electron ReleaseNote

Electron 12.0.0リリース。
Chromium 89、V8 8.9、Node.js 14.16へアップデート。
exposeInMainWorldがオブジェクト以外をサポート、webFrameMain APIの追加など。
contextIsolationworldSafeExecuteJavaScriptがデフォルトでtrueに変更、remoteモジュールが非推奨となり@electron/remote外部モジュール化


Release v6.0.0 · pixijs/pixi.js

github.com/pixijs/pixi.js/releases/tag/v6.0.0

JavaScript game library ReleaseNote canvas WebGL

pixi.js 6.0.0リリース。
TypeScriptの型改善、DeprecatedとなっていたAPIの削除、alphaオプションのデフォルト値をtrueに変更、FAIL_IF_MAJOR_PERFORMANCE_CAVEATのデフォルト値をfalseに変更など


Google Developers Blog: Announcing Flutter 2

developers.googleblog.com/2021/03/announcing-flutter-2.html

Flutter ReleaseNote

Flutter 2リリース。
WebサポートとデスクトップサポートがStableとなり、Dart 2.12をサポート。
iOSでAutocompleteとScaffoldMessengerのサポートなど


アーティクル


Mini apps - web.dev

web.dev/mini-apps/

article

Mini appsのエコシステムの記事


Hiding Content Responsibly | Kitty Giraudel

kittygiraudel.com/2021/02/17/hiding-content-responsibly/

HTML CSS accessibility article

コンテンツの非表示を意味するCSSやWAI-ARIA属性のそれぞれの動作とアクセシビリティ的な挙動についてのまとめ。
データ、ビジュアル、レイアウト、セマンティクス、コンテンツ、キーボード、ポインター、スタイルなどの状態について


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


serverless-stack/serverless-stack: Serverless Stack (SST) is a framework that makes it easy to build serverless apps.

github.com/serverless-stack/serverless-stack

serverless aws

AWS CDKを使ったserverless管理、開発ツール。
Lambdaの開発、デプロイ、ビルドやLintの設定、各種AWSスタックとの連携などを含む


NightlyCommit/twing: First-class Twig engine for Node.js

github.com/NightlyCommit/twing

template JavaScript library

テンプレートエンジンであるTwigのJavaScript実装ライブラリ


JakePartusch/serverlessui: A command-line utility for deploying serverless applications to AWS. Complete with custom domains, deploy previews, TypeScript support, and more.

github.com/JakePartusch/serverlessui

aws serverless Tools

AWSへserverlessアプリケーションをデプロイするためのツール。
CDKを使って静的なサイトとlambdaなどのデプロイを一括で行う


nanojsx/nano: 🎯 SSR first, lightweight 1kB JSX library.

github.com/nanojsx/nano

jsx React library

JSXを使ったSSR firstなUIライブラリ。
指定したコンポーネントのみをHydrate、Lazy Hydrateができ、ビルトインでRouterやHead周りのコンポーネントを持っている。
ReactライクなライフサイクルメソッドやHooksの処理を持っている。


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