JSer.info #448 - 先週RC版が公開されたReact 16.9.0の正式版がリリースされました。

React v16.9.0 and the Roadmap Update – React Blog

次のコンポーネントのライフサイクルメソッドに警告を表示するようになりました。
これらのメソッドはReact 17.xで削除されます。

componentWillMount
componentWillReceiveProps
componentWillUpdate

これらのライフサイクルメソッドは、react-codemodのrename-unsafe-lifecyclesを使うことでUNSAFE_* prefixのライフサイクルメソッドにリネームできます。
このUNSAFE_* prefixのライフサイクルメソッドは17.xでも動作が維持されます。

componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate

また、去年の記事で公開されていたReactのロードマップがアップデートされたことについてもかかれています。

Update on Async Rendering – React Blog

以前のロードマップでは、Concurrent Mode と Suspense は別々のリリースとする予定でしたが、同時にリリースする方向で再編しているようです。
詳しくはReact v16.9.0 and the Roadmap Update – React Blogを参照してください。

Native lazy-loading for the web | web.devという記事では、<img>や<iframe>で利用できるようになるloading属性について紹介されています。

次のようにloading属性を指定することで、実際にViewportに入ってから画像の読み込みを行う遅延ロードができます。

<img src="..." loading="lazy" width="200" height="200">

記事では、<img>や<iframe>でのloading属性の動作やこの機能をサポートしているかの判定方法、印刷時の挙動など細かい話もかかれています。

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

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

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

ヘッドライン

Changelog for 16.9 (TODO: add date) by gaearon · Pull Request #16254 · facebook/react

github.com/facebook/react/pull/16254

React ReleaseNote issue

React 16.9 RC.0リリース。
<React.Profiler>の追加、非推奨となっていたUNSAFE_*のライフサイクルメソッドに対する警告を表示、<a href="javascript:">に対して警告を出すように。
また、DevToolsでuseStateの編集、Suspenseのトグル表示に対応、テスト用のactがAsync対応など

Warn for javascript: URLs in DOM sinks by sebmarkbage · Pull Request #15047 · facebook/react

TestCafe v1.4.0 Released | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v1-4-0-released.html

testing E2E library ReleaseNote

TestCafe v1.4.0リリース。
Testページに対してスクリプトファイルを追加できるようになるなど

Release Notes for Safari Technology Preview 89 | WebKit

webkit.org/blog/9497/release-notes-for-safari-technology-preview-89/

safari ReleaseNote

Safari Technology Preview 89リリース。
<script>のreferrerpolicy属性をサポート、console.screenshotでImageDataなどをコンソールへの出力をサポートなど

React v16.9.0 and the Roadmap Update – React Blog

reactjs.org/blog/2019/08/08/react-v16.9.0.html

React ReleaseNote

React 16.9.0リリース。
非推奨となっていたコンポーネントのライフサイクルメソッドに警告を表示するように、<a href>にjavascript:スキームのURLを指定した場合に警告を表示するように。
コンポーネントのテストを行うact()関数がAsync Functionwをサポート、<React.Profiler>コンポーネントの追加など

Update on Async Rendering – React Blog

Release v3.1.0 · facebook/create-react-app

github.com/facebook/create-react-app/releases/tag/v3.1.0

React ReleaseNote Tools

create-react-app 3.1.0リリース。
ESLint 6のサポート、ESLintの設定カスタマイズの対応、IMAGE_INLINE_SIZE_LIMITの環境変数対応など

Release v1.0.0 · webpack-contrib/style-loader

github.com/webpack-contrib/style-loader/releases/tag/v1.0.0

webpack plugin CSS ReleaseNote

webpackのCSSを扱うloaderであるstyle-loader 1.0.0リリース。
injectTypeオプションのサポート、convertToAbsoluteUrlsやtransformオプションの削除、attrsをattributesにリネームなど

アーティクル

ES proposal: `globalThis`

2ality.com/2019/08/global-this.html

ECMAScript JavaScript article

ECMAScript ProposalのglobalThisの解説。
グローバルスコープを参照するための仕様で、thisとの動きの違い、各実行環境でglobalThisが参照するオブジェクトについてなど。

Native lazy-loading for the web | web.dev

web.dev/native-lazy-loading/

WebPlatformAPI HTML article Chrome

<img>や<iframe>のloading属性での遅延ロードについて。
loading属性のFeature Detect、Polyfill、Chrome for AndroidのLite mode(Data Saver)の対応についてなど

Getting More Out of Vue Async Components - Abdelrahman' Blog

logaretm.com/blog/getting-more-out-of-vue-async-components/

Vue article JavaScript

Vueでのコンポーネントの非同期ロードの活用方法について。
非同期コンポーネントを使ってコンテンツに必要なコンポーネントだけをロードする方法について

Interesting use cases for JavaScript bitwise operators - LogRocket Blog

blog.logrocket.com/interesting-use-cases-for-javascript-bitwise-operators/

JavaScript article

JavaScriptのビット演算子について。
ビット演算を利用したフラグ管理の実装についてなど

How to Reduce Your Vue.JS Bundle Size With Webpack - DEV Community 👩‍💻👨‍💻

dev.to/ratracegrad/how-to-reduce-your-vue-js-bundle-size-with-webpack-4gpf

webpack Vue performance article

Webpackを使ったVue.jsで書いたアプリケーションのbundleサイズの最適化についての記事。
webpack-bundle-analyzerを使っての分析、不要なものをbundleから外すようにする方法などについて

スライド、動画関係

クライアントサイドからサーバサイドまで破壊するテンプレートエンジンを利用した攻撃と対策

azu.github.io/slide/2019/template-engine/template-engine-security.html

JavaScript template security slide node.js

テンプレートとセキュリティについてのスライド。
テンプレートエンジンの種類、クライアントサイド/サーバサイドのテンプレートを使った脆弱性、テンプレートを機能として提供する場合の問題についてなど。
古典的なサーバサイドレンダリングとVue等テンプレートを持つのクライアントサイドレンダリングを組み合わせたときの発生しやすい問題についてなど

Joyee Cheung: Web APIs in Node.js Core: Past, Present, and Future

2019.jsconf.eu/joyee-cheung/web-apis-in-nodejs-core-past-present-and-future.html

node.js video slide

Node.js CoreとWeb標準のAPIについての発表の動画と書き起こし。
Node.js CoreにURLやPerformance APIなどのWeb API互換の実装がされていることや、なぜそのような互換実装が行われているのかについて。
また、どのように実装するものを決めているかについてなど