Fork me on GitHub

2017-12-26のJS: Service Worker in MSEdge/Safari、Jest 22、jQuery UIとMobileの統合

Edit on GitHub 編集履歴を見る

JSer.info #363 - MSEdge(Insider build)とSafari(Technology Preview)でそれぞれService Workerが実装されたことについてのブログが公開されました。

これによりモダンブラウザにはService Workerが実装されることになります。

Can I Use serviceworkers? Data on support for the serviceworkers feature across the major browsers from caniuse.com.

MSEdgeとSafariどちらもまだ実験的なビルドでの公開なので、正常に動かないケースもあるようです。
その場合はそれぞれのIssue Trackerに報告することが推奨されています。


Jest 22がリリースされました。

Node.js 4のサポート終了、Custom Runnerのコアとなるjest-workerが公開されました。
Jestは元々node-worker-farmを使い、テストの並列実行を行っていましたが、その役目をjest-workerに置き換えていました。

そして、Jestを並列実行処理の基盤として使えるCustom RunnerがJest 22で正式に公開されています。
これにより、Jestの上でjest-runner-mochajest-runner-eslintのように別のテストフレームワークやLint処理などを並列実行できるようになっています。

詳しくは次の動画を見てください。

またテスト結果のフォーマッタの変更、--detectLeaksの追加、Babel 7のサポートなどが行われています。


The Future of jQuery UI and jQuery Mobile | jQuery UI Blogでは、jQuery UIとjQuery Mobileのプロジェクト統合について書かれています。

jquery-mobilejquery-uiに依存していますが、今までチームやリポジトリは別々にありました。
今回、@scottgonzalezがjQuery UIプロジェクトのリーダを辞めることになり、現在jQuery Mobileのプロジェクトリーダである@arschmitzがjQuery UIプロジェクトも見ることになりました。
jQuery MobileはUIに依存しているため、重複や無駄を避けるために2つのプロジェクトを統合したチームにしていく方針について書かれています。

また合わせて協力者を募集するためhttps://jqueryui-dev.slack.com/のslackチームを作り、意見を募集しています。
(http://bit.ly/2Btf6puからslackチームにjoinできる)


ヘッドライン


Release Notes for Safari Technology Preview 46 | WebKit

webkit.org/blog/8042/release-notes-for-safari-technology-preview-46/

safari ReleaseNote ServiceWorker

Safari Technology Preview Release 46リリース。
Service Workerがデフォルトで有効化、--useBigIntフラグつきBigIntの実装、img要素のdecoding属性のサポートなど


V8 JavaScript Engine: V8 release v6.4

v8project.blogspot.com/2017/12/v8-release-64.html

V8 ReleaseNote

V8 v6.4リリース。
パフォーマンス、メモリ使用量の改善。named captureなどの正規表現Proposalの実装と有効化、import.meta.urlのサポートなど


Release Webpack-CLI V.2.0.0 · webpack/webpack-cli

github.com/webpack/webpack-cli/releases/tag/v.2.0.0

webpack ReleaseNote

webpack-cli 2.0.0リリース。
addコマンド、serveコマンドの追加など


Release v2.0.0 · karma-runner/karma

github.com/karma-runner/karma/releases/tag/v2.0.0

JavaScript browser testing ReleaseNote

Karma v2.0.0リリース。
Node.js 4未満のサポート終了、エラー表示の改善など


ESLint v4.14.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2017/12/eslint-v4.14.0-released

ESLint ReleaseNote

ESLint 4.14.0リリース。
パーサ向けにScope解析のhookポイントが追加された。


Jest 22: Refinements & Custom Runners · Jest

facebook.github.io/jest/blog/2017/12/18/jest-22.html

JavaScript testing ReleaseNote

Jest 22リリース。
Node.js 4のサポート終了、カスタムRunnerのコアとなるjest-workerの公開。
テスト結果のフォーマッタの変更、--detectLeaksの追加、Babel 7のサポート、MITライセンスに変更など


アーティクル


【連載記事】JavaScriptでプログラミングを学ぶ その1:基礎と文法

sbfl.net/blog/2017/12/14/javascript-programming-1/

JavaScript tutorial

プログラミングを学んだことない人向けのJavaScript入門連載。


Use a Render Prop! – componentDidBlog

cdb.reacttraining.com/use-a-render-prop-50de598f11ce

React article

Reactの子コンポーネントと値やロジックを共有するパターンとしてのrender propsについて


React 🎄

react.holiday/

React tutorial

アドベントカレンダー形式のReactチュートリアル


Service Workers: Going beyond the page - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

blogs.windows.com/msedgedev/2017/12/19/service-workers-going-beyond-page/

MSEdge ServiceWorker article

MSEdgeのService Workerが実装された。
Service Workerの基本的な使い方やService Workerの制限について書かれている。


The Future of jQuery UI and jQuery Mobile | jQuery UI Blog

blog.jqueryui.com/2017/12/the-future-of-jquery-ui-and-jquery-mobile/

jQuery UI mobile article opinion

jQuery MobileはjQuery UIに依存しているが、今までは別々のチーム/リポジトリとなっていた。
重複などの無駄があるため、チームを統合し、停滞しているプロジェクトを改善していく指針が公開された。
あわせてSlackチャンネルを開設して協力者を募集している。


Preloading modules  |  Web  |  Google Developers

developers.google.com/web/updates/2017/12/modulepreload

JavaScript module Chrome article

<link rel="modulepreload">について。
<link rel="preload">との違い、モジュールの依存関係はフラットにすべてのファイルを定義するべきかについて


Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance · Mark's Dev Blog

blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/

redux JavaScript performance article React

reselectを使ったパフォーマンスの最適化について。
reselectはstateからstateを作るライブラリで、入力に対してメモ化が行われている。
これを使いReduxのstateからアプリケーションに適切な形へstateを変換させる例について紹介している


ES6 Modules のエラー処理を決定的(deterministic)にした話 - Google ドキュメント

docs.google.com/document/d/1Wuc2LVLb2Ii-itnA4sKw_KndJGvZ4mvdfw0POm5qcs4/edit#

Chrome module JavaScript spec article ECMAScript

ES Modules(仕様)のエラーがネットワークに依存したものとなっていて、毎回異なるエラーになる問題があった。
エラーが毎回同じ結果となるように、仕様をどのように修正していったかについて。


ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM — hayato.io

hayato.io/2017/dom/

Chrome WebComponents

DOMやShadow DOMの構造や実装についての解説記事。
Shadow DOMの登場によってDOMはツリーのツリー(Super Tree)となっている。
その場合におけるCSSセレクタのマッチングやイベントパスについてなどをChromeの実装と合わせて解説している。


Lint the Web Forward With Sonarwhal ◆ 24 ways

24ways.org/2017/lint-the-web-forward-with-sonarwhal/

HTML web Tools article

Sonarwhalを使ったウェブサイトのLintについての記事。
Sonarwhalの基本的な使い方や設定について解説している


Testing Angular 2 and Continuous Integration with Jest - Semaphore

semaphoreci.com/community/tutorials/testing-angular-2-and-continuous-integration-with-jest

JavaScript Angular testing article

Jestを使ったAngularのテストについて


スライド、動画関係


日経電子版 サイト高速化とPWA対応 / nikkei-high-performance-pwa // Speaker Deck

speakerdeck.com/sisidovski/nikkei-high-performance-pwa

slide browser performance

ウェブサイトのパフォーマンス改善についてのスライド。
アセットの配信の最適化、Resource Hintsでのpreload。
SpeedCurveを使ってのモニタリングやファイルサイズのチェック。
Service Workerでのキャッシュやデバッグなどについて


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


amsul/react-performance: Helpers to debug and record component render performance 🚀

github.com/amsul/react-performance

React library performance

React 16で動くreact-addons-perfのようなものを目指すライブラリ。
Reactコンポーネントのプロファイルを取れるライブラリ。


書籍関係


Responsively Retrofitting: Retrofitting Web Sites with HTML5 and CSS3: Christopher Schmitt: 9781449364205: Amazon.com: Books

www.amazon.com/Responsively-Retrofitting-Sites-HTML5-CSS3/dp/1449364209

CSS HTML book

2018年8月25日発売
既存のレガシーなウェブサイトをモバイル向けにリニューアルする方法についてを扱う書籍


この記事へ修正リクエストをする
JSer.info Slackに参加する