JSer.info #448 - 先週RC版が公開されたReact 16.9.0の正式版がリリースされました。
次のコンポーネントのライフサイクルメソッドに警告を表示するようになりました。
これらのメソッドは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のロードマップがアップデートされたことについてもかかれています。
以前のロードマップでは、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 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
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 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 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
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のCSSを扱うloaderであるstyle-loader 1.0.0リリース。
injectType
オプションのサポート、convertToAbsoluteUrls
やtransform
オプションの削除、attrs
をattributes
にリネームなど
アーティクル
ES proposal: `globalThis`
2ality.com/2019/08/global-this.html
ECMAScript ProposalのglobalThis
の解説。
グローバルスコープを参照するための仕様で、this
との動きの違い、各実行環境でglobalThis
が参照するオブジェクトについてなど。
Native lazy-loading for the web | web.dev
<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でのコンポーネントの非同期ロードの活用方法について。
非同期コンポーネントを使ってコンテンツに必要なコンポーネントだけをロードする方法について
Interesting use cases for JavaScript bitwise operators - LogRocket Blog
blog.logrocket.com/interesting-use-cases-for-javascript-bitwise-operators/
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.jsで書いたアプリケーションのbundleサイズの最適化についての記事。
webpack-bundle-analyzerを使っての分析、不要なものをbundleから外すようにする方法などについて
スライド、動画関係
クライアントサイドからサーバサイドまで破壊するテンプレートエンジンを利用した攻撃と対策
azu.github.io/slide/2019/template-engine/template-engine-security.html
テンプレートとセキュリティについてのスライド。
テンプレートエンジンの種類、クライアントサイド/サーバサイドのテンプレートを使った脆弱性、テンプレートを機能として提供する場合の問題についてなど。
古典的なサーバサイドレンダリングと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 CoreとWeb標準のAPIについての発表の動画と書き起こし。
Node.js CoreにURL
やPerformance APIなどのWeb API互換の実装がされていることや、なぜそのような互換実装が行われているのかについて。
また、どのように実装するものを決めているかについてなど
サイト、サービス、ドキュメント
Pika CI/CD
Pull Requestごとにnpmパッケージを作成できるPikaのGitHub App。
Pull Requestごとに固有のパッケージを作成してテストできる
ソフトウェア、ツール、ライブラリ関係
epicmaxco/vuestic-admin: Free and Beautiful Vue.js Admin Template
github.com/epicmaxco/vuestic-admin
Vueを使った管理画面テンプレート
書籍関係
JavaScript for impatient programmers
exploringjs.com/impatient-js/index.html
Dr.AxelのJavaScript入門本