Fork me on GitHub

2017-10-02のJS: React 16.0、Firefox 56、画像最適化

Edit on GitHub 編集履歴を見る

JSer.info #351 - React 16.0が正式リリースされました。

15.6.2と共にMITライセンスへ変更されています。

APIの基本的な互換は持ちつつコアを書きなおされたバージョンとなります。
renderがフラグメントや文字列を返せるように、コンポーネントのエラーハンドリングの改善、ReactDOM.createPortalの追加、SSRの改善など。
SSRの改善については次の記事で解説されています。

また、破壊的な変更としてunstable_*なAPIが削除されたり、contextなどのライフサイクルをイベントに変更があります。
npmパッケージではUMDバンドルを配布するようになったため、require("react/lib/xxx")のようなdirect requireはエラーとなります。

ブラウザネイティブの機能としてMap/Set/requestAnimationFrameに依存するため、
core-jsやbabel-polyfillといったpolyfillを入れる必要があります。


Firefox 56.0がリリースされました。

CSS Grid DevToolsの追加、<link rel="preload">のサポートされています。
CSS Gridについては次のサイトで詳しく書かれていて、あわせてDevToolsの使い方も紹介されています。

また、setTimeout(fn, 0)が仕様/他ブラウザに合わせて4msで呼ばれるように変更されています。


Essential Image Optimizationという無料の電子書籍では画像の最適化について多岐にわたって書かれています。

画像の形式や最適化の方法/ツール、それによってブラウザではどのような効果があるかなどについて書かれています。
主にブラウザを対象にした画像の最適化や配信に関するTipsが多く含まれていますので興味がある人は読んでみると良さそうです。


ヘッドライン


React v16.0 - React Blog

facebook.github.io/react/blog/2017/09/26/react-v16.0.html

React ReleaseNote

React 16.0リリース。
15.6.2と共にMITライセンスへ変更された。
APIの基本的な互換は持ちつつコアを書き変え(Fiber)、
renderがフラグメントや文字列を返せるように、コンポーネントのエラーハンドリングの改善、ReactDOM.createPortalの追加、SSRの改善など。
Map/Set/requestAnimationFrameに依存する。


Node v8.6.0 (Current) | Node.js

nodejs.org/en/blog/release/v8.6.0/

node.js ReleaseNote

Node.js v8.6.0リリース
N-APIがフラグなしで利用できるようになるなど


Release v0.56.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.56.0

flowtype ReleaseNote

Flow 0.56.0リリース。
$Rest typeの追加、Object.create(null)のようなnullプロトタイプのサポート、__proto__のサポートなど


Path validation vulnerability, September 2017 | Node.js

nodejs.org/en/blog/vulnerability/september-2017-path-validation/

node.js security ReleaseNote

Node.js 8.5.0にはpathの..の扱いに脆弱性があるため8.6.0で修正されたリリースがされている。


Firefox — Notes (56.0) — Mozilla

www.mozilla.org/en-US/firefox/56.0/releasenotes/

firefox ReleaseNote

Firefox 56リリース。
CSS Grid DevToolsの追加、<link rel="preload">のサポート、Intl APIがAndroid版で有効化。
setTimeout(fn, 0)の仕様に合わせて4msに変更など


アーティクル


React v16 changes - blog.koba04.com

blog.koba04.com/post/2017/09/27/react-v16-changes/

React article

React 16の変更点について


JavaScript ♥ C++: Modern Ways to Use C++ in JavaScript Projects

medium.com/@zandaqo/javascript-c-modern-ways-to-use-c-in-javascript-projects-a19003c5a9ff

node.js WebAssembly

C++で書かれたコードをNode.jsで扱う方法について。
N-APIを使ったネイティブモジュールとWebAssemblyを使った方法について。


Abortable fetch  |  Web  |  Google Developers

developers.google.com/web/updates/2017/09/abortable-fetch

Fetch API Promises article

Fetch APIなどでリクエストのキャンセルを行うAbortControllerAbortSignalについて。
fetch(url, { signal })のようにFetch APIに渡す使い方やAPIの歴史的経緯についてなど


Let’s Build a Pokedex with React: Part 1 – CloudBoost

blog.cloudboost.io/lets-build-a-pokedex-with-react-part-1-e1ba0b9387a7

React tutorial article

Reactを使ってPokedexというサイトをつくっていく連載記事。


Next.js 3.0 Release: What's New?

auth0.com/blog/nextjs-3-release-what-is-new/

React JavaScript server article

Next.js 3.0の変更点についての解説。
Dynamic Import/Dynacmic Loading Component、Static Export、エラーメッセージ表示の改善、起動速度の改善など


How to write reliable browser tests using Selenium and Node.js

medium.freecodecamp.org/how-to-write-reliable-browser-tests-using-selenium-and-node-js-c3fdafdca2a9

node.js Selenium article

Seleniumを扱う時なぜsleepを避けるべきかについて。
Node.jsのselenium-webdriverを例に紹介してる。


How to drop Bower support? · Bower blog

bower.io/blog/2017/how-to-drop-bower-support/

JavaScript article

ライブラリの開発者はどのようにBowerサポートを終了するべきかについて。
リポジトリからbower.jsonなど関連ファイルを削除し、majorアップデートを行い、bower unregisterはしないことについて


webpack-dev-server/middleware security issues – webpack – Medium

medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a

webpack server security ReleaseNote

webpack-dev-serverにいくつか脆弱性があるため1.xと2.xそれぞれsecurity fixのリリースが行われた。


ECMAScript proposal updates @ 2017-09 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2017/10/02/ecmascript-proposal-updates-2017-09

ECMAScript proposal babel

2017-09に行われたTC39ミーティング結果のProposal変更まとめ


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


CSS Grid PlayGround | Terminology | Mozilla

mozilladevelopers.github.io/playground/

CSS tutorial document firefox

CSS Gridの解説サイト。
CSS Gridの用語や基本的な使い方、Firefoxの開発者ツールでのデバッグ、frという単位、Template Area、Named Lineなどについて


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


cherow/cherow: A fast, Typescript-based Javascript parser

github.com/cherow/cherow

TypeScript JavaScript ECMAScript library

TypeScriptで書かれたJavaScriptパーサ。
ESTree互換のASTを生成し、ES.nextなProposal仕様もサポートしている。


roman01la/closure-compiler-handbook: How to use Google's Closure Compiler

github.com/roman01la/closure-compiler-handbook

JavaScript JSDoc Tools book

Closure Compilerの使い方について書かれたハンドブック


Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.

github.com/Shopify/draggable

JavaScript library

D&Dライブラリ


Strudel.js | Lightweight component framework

strudeljs.org/

JavaScript library UI

AngularのようなDecoratorを使ったコンポーネントライブラリ


書籍関係


Essential Image Optimization

images.guide/

book browser 画像

ウェブサイトにおける画像の最適化についての書籍。
どのようなフォーマットを選び、サイズとパフォーマンスへの影響について。
各フォーマットやエンコーダーの最適化手法、ブラウザのデコード時間や最適化手法、モニタリングツールなどについて
JPEG、PNG、WebP、GIF/Videoの比較、SVG


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