Fork me on GitHub

2019-08-13のJS: React 16.9.0正式リリース、Image lazy-loading、Web API in Node.js

Edit on GitHub 編集履歴を見る

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

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

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

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

  • componentWillMountUNSAFE_componentWillMount
  • componentWillReceivePropsUNSAFE_componentWillReceiveProps
  • componentWillUpdateUNSAFE_componentWillUpdate

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

以前のロードマップでは、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属性の動作やこの機能をサポートしているかの判定方法、印刷時の挙動など細かい話もかかれています。


ヘッドライン


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対応など


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.screenshotImageDataなどをコンソールへの出力をサポートなど


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>コンポーネントの追加など


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オプションのサポート、convertToAbsoluteUrlstransformオプションの削除、attrsattributesにリネームなど


アーティクル


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互換の実装がされていることや、なぜそのような互換実装が行われているのかについて。
また、どのように実装するものを決めているかについてなど


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


Pika CI/CD

www.pika.dev/cicd/

npm webservice ci

Pull Requestごとにnpmパッケージを作成できるPikaのGitHub App。
Pull Requestごとに固有のパッケージを作成してテストできる


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


epicmaxco/vuestic-admin: Free and Beautiful Vue.js Admin Template

github.com/epicmaxco/vuestic-admin

Vue library

Vueを使った管理画面テンプレート


書籍関係


JavaScript for impatient programmers

exploringjs.com/impatient-js/index.html

JavaScript book

Dr.AxelのJavaScript入門本


この記事へ修正リクエストをする
記事を紹介する