Fork me on GitHub

2017-01-30のJS: Safari 10.1 pre、Firefox51.0、徐々に型を付けてのリファクタリング

Edit on GitHub 編集履歴を見る

JSer.info #316 - Safari 10.1がプレリリースされました。

Fetch API、IndexedDB 2.0、Custom Elements、Pointer Lock/Gamepad API、ES2016,2017のサポートなど。
また<a>要素のdownload属性、CSS Gridなどのサポートが含まれています。


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

WebGL 2、IndexedDB 2、XHRの仕様追従、FLAC形式のサポートなどが行われています。
また、DOMImplementation.hasFeature()は常にtrueを返すように、非標準なfor each inに警告が出るようになるなど。

詳しくは次のサイトを見てください。


Refactoring 30000 lines of JS with types - Reaktor.comという記事では3万行のJavaScriptをどのようにリファクタリングしていったかについて書かれています。

アプローチとして型をつけていきながらリファクタリングをしていく際にFlowTypeやTypeScriptを使ったときの問題点やそれぞれのツールではどのような方法が用意されているかについて。
Flowではweak modeを使った方法やTypeScriptでは.js.tsに変更するところからなど、どのように徐々に型をつける戦略がとれるかといった話。
最終的にTypeScriptを利用し、その際に遭遇したエラーなどについても書かれています。


ヘッドライン


Safari 10.1

developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html

safari ReleaseNote


Safari 10.1 プレリリース。
Fetch API、IndexedDB 2.0、Custom Elements、Pointer Lock/Gamepad API、ES2016,2017のサポートなど。
また<a>要素のdownload属性,
CSS Gridなどのサポート


Firefox — Notes (51.0) — Mozilla

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

firefox ReleaseNote


Firefox 51.0リリース。
WebGL 2、IndexedDB 2、XHRの仕様追従、FLAC形式のサポート、DOMImplementation.hasFeature()は常にtrueを返すように、非標準なAPIを削除など


node-browserify/changelog.markdown at master · substack/node-browserify

github.com/substack/node-browserify/blob/master/changelog.markdown

browserify ReleaseNote


Browserify 14.0.0リリース。
bufferのpolyfillがアップグレードされ、IE10以下のサポートが終了。
bufferパッケージがTypedArrayを利用しているため。


Release Notes for Safari Technology Preview 22 | WebKit

webkit.org/blog/7354/release-notes-for-safari-technology-preview-22/

safari ReleaseNote


Safari Technology Preview Release 22リリース。
scroll-snap-type:proximityのサポート、innerTextの仕様追従、URLSearchParamsがiterableとなるなど


Video.js 6.0.0-RC.0: The first Release Candidate | Video.js Blog

blog.videojs.com/Video-js-6-0-0-RC-0-The-first-RC/

JavaScript video library ReleaseNote


video.js v6.0 RCリリース。
FlashをCoreから取り除き、Reactインスパイアなプラグインアーキテクチャの追加、accessiblityの改善など
- The End of &#34;HTML-First&#34; | Video.js Blog


アーティクル


Refactoring 30000 lines of JS with types - Reaktor.com

www.reaktor.com/blog/refactoring-30000-lines-js-types/

JavaScript リファクタリング


3万行のJavaScriptをリファクタリングしたアプローチについて。
逐次的な型付のアプローチについて。
Flowのweek modeとコメントでの型付けを使った方法と問題点。
TypeScriptを使った名前空間オブジェクトへのアプローチとメリット/デメリット。
最終的にTypeScriptを使ったがそのときに遭遇した問題について


Making touch scrolling fast by default  |  Web  |  Google Developers

developers.google.com/web/updates/2017/01/scrolling-intervention

Chrome JavaScript event


Chrome 56からtouch eventをlistenすると
{passive: true}がデフォルトとなる。
デフォルトではtouchstartの中でevent.preventDefault()を呼ぶと無視され警告がコンソールに表示される。
- Event.defaultPrevented - Web APIs | MDN
- Chrome Platform Status


Testing React Applications with Jest

auth0.com/blog/testing-react-applications-with-jest/

React testing tutorial


Jestを使ったReactのテストについての解説。
インストールからテストの書き方、モックなどについて書かれている。


ES proposal: Shared memory and atomics

www.2ality.com/2017/01/shared-array-buffer.html

ECMAScript proposal spec


ES2017に入ることが決まったShared memory and atomicsについての解説。
Shared Array BuffersでWorker(agent)とデータを共有することができる。


Implement a JavaScript reactive programming library — part 1 – Medium

medium.com/@bohou/implement-a-javascript-reactive-programming-library-part-1-f564ac6ad789

JavaScript library


ReactiveなJavaScriptライブラリを実装する連載記事。
- bhou/bouton.js: A framework to build your asynchronous reactive library.


Watch Out for Undefined State

daveceddia.com/watch-out-for-undefined-state/

React


Reactコンポーネントでコンポーネント内のstateに依存しているものを、propsへ移動するリファクタリングの例。
コンポーネントのデフォルトstateはundefinedであるという話


The Promise of a Burger Party - Mariko Kosaka

kosamari.com/notes/the-promise-of-a-burger-party

JavaScript Promises


Promiseをバーガーショップを例にして解説している記事。
図解をしながらPromiseのresolveとrejectの動きについて書かれている


Detecting text in an image on the web in real-time - Tales of a Developer Advocate by Paul Kinlan

paul.kinlan.me/detecting-text-in-an-image/

Chrome WebPlatformAPI


画像認識、顔認識、バーコード認識、画像からテキスト認識するブラウザAPIについて
- Accelerated Shape Detection in Images


Understanding the Critical Rendering Path

bitsofco.de/understanding-the-critical-rendering-path/

browser CSS JavaScript


クリティカルレンダリングパスとは何かという解説。
ブラウザがどのようなフローでレンダリングまでを行うか。
また、開発者ツールを使ってレンダリングフローで起きているイベントを見ていく話。


ECMAScript proposal updates @ 2017-01 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2017/01/30/ecmascript-proposals-status

ECMAScript proposal


2017年1月時点でのECMAScriptのProposalのStageまとめ。 2017年1月のミーティングで5つのProposalが追加され、Shared memory and atomicsはES2017に入った。


Optimizing the Performance of Your React Application

auth0.com/blog/optimizing-react/

React performance


react-addons-perfを使いReactコンポーネントのパフォーマンス計測を行う話。
またReact.PureComponentを使いshouldComponentUpdateの判定がきちんと行われるようにしてパフォーマンス改善するという話。



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


knq/chromedp: Package chromedp is a faster, simpler way to drive browsers (Chrome, Edge, Safari, Android, etc) without external dependencies (ie, Selenium, PhantomJS, etc).

github.com/knq/chromedp

Chrome debug golang


ChromeDebugging Protocolを使ったブラウザ操作ツール


書籍関係


Manning | Isomorphic Development with JavaScript

www.manning.com/books/isomorphic-development-with-javascript

JavaScript isomorphic book


Isomorphic JavaScriptについての書籍。
ブラウザとNode.jsで共有しながら、ウェブアプリケーションを作る話。
React + Redux、Angular 2やEmberを題材にしている。


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