Fork me on GitHub

2015-07-14のJS: jQuery 3.0αリリース、JSHintとES.next

Edit on GitHub 編集履歴を見る

JSer.info #236 - jQuery 3.0αがリリースされました。

まだα版ですが、.show().hide()の仕組みの変更、jQuery.DeferredがPromise/A+互換になり、2.xでdeprecatedとなっていたメソッドの削除などが行われています。

また、以前断念したrequestAnimationFrameによるアニメーションがjQuery 3.0では有効化されています。

.show().hide()については以前の挙動に依存したものが多そうなので、α版でどうなるかを試してフィードバックをしてみるといいかもしれません。


A Formal Commitment to New Language Featuresという記事はJavaScriptのLintツールであるJSHintの今後の方針について書かれています。

ES6+のコードを変換するツールであるBabelでは、次期ECMAScriptに提案されているプロポーサルの実装もStageオプションで有効化出来るようになっています。

このStageオプションで使える構文などは、新しすぎるためJSHintなどのツールで解釈するためには、まずコードをパースできないといけません。

JSHintは著名なパーサライブラリであるesprimaacornとは別で、内部的にパーサを持っているので新しい構文に対応するコストが大きいです。

またStage 1: Proposalであるような機能はまだ不安定であるためツールとしてサポートしてしまうと今後問題となる可能性があることなどを理由に、JSHintではStage 2: Draft以降の機能についてはexperimentalとしてサポートするが、それ未満のものはサポートしない方針などについて書かれています。

もう少し詳しくはこの話の詳細を別記事で書いたので、こちらも合わせてみてみるといいかもしれません。

この話で面白いのはJSHintのようなツールもECMAScriptの策定プロセスを意識したような作りになっていくという流れが出てきている気がします。

今後ECMAScriptの策定プロセスやStageみたいな話は、色々出てきそうなのでそれについて上手くまとめたいのでいいアイデアを募集しています。

ロシア語ですが、この講演は策定のプロセスをストーリー的に紹介して面白いです。


ヘッドライン


jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released | Official jQuery Blog

blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/

jQuery ReleaseNote

jQuery 3.0αとjQuery Compat 3.0αリリース。
.show().hide()のパフォーマンス改善、jQuery.DeferredがPromise/A+互換に、非推奨だったjqXHR.success | error | complete、イベントの.load/.unload/.errorを削除。
undocumentなメソッドを外から触れないように変更。
アニメーションで再度requestAnimationFrameを使うように、カスタムセレクタの改善など


アーティクル


Introducing Incremental DOM — Google Developers — Medium

medium.com/google-developers/introducing-incremental-dom-e98f79ce2c5f

JavaScript DOM library VirtualDOM

メモリ使用量とテンプレートエンジンでは扱える閉じタグの無い要素などがモチベーションとなってるGoogle製のDOMライブラリ(WIP)。
Diff計算のためにVirtual DOMのような全体のTree構造をメモリに保持しない事で、余計なオブジェクトを作らないようにして、1 passで走査することでメモリ効率を上げている。


canvas - JSでInstagramの画像フィルターを作るまで - Qiita

qiita.com/KENJU/items/78c0034d7e93fbe8f95a

JavaScript canvas

Instagram的な画像フィルターをCanvasで行う方法、また処理が重たい問題をWeb Worker内で行うことについて


Developer Edition 41: View source in a tab, screenshot elements, HAR files, and more ✩ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2015/07/developer-edition-41-view-source-in-a-tab-screenshot-elements-har-files-and-more/

firefox debug Tools

Firefox 41の開発者ツールで改善された箇所について


How fast are web workers? ✩ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2015/07/how-fast-are-web-workers/

webworker firefox

WebWorkerやSharedWorkerの起動コスト、メッセージの転送速度について


a d3.js design pattern — Medium

medium.com/@billautomata/a-d3-js-design-pattern-16a6503dc86f

JavaScript d3.js デザインパターン

D3.jsを使って書く際のデザインパターンについての連載


A Formal Commitment to New Language Features

jshint.com/blog/new-lang-features/

JavaScript ECMAScript Tools

BabelなどによってES.nextの機能を試せるようになったが、JSHintがそれらの新しすぎる構文をサポートするのが難しい理由について。

詳しくはJSHint: A Formal Commitment to New Language Features - JSer.infoに書きました。


You Might Not Need Underscore | Reindex

www.reindex.io/blog/you-might-not-need-underscore/

JavaScript library まとめ

Underscore.jsのメソッドと同様の事をES5、ES6でどのように書くことができるかについての比較まとめ


React on ES6+ · Babel

babeljs.io/blog/2015/06/07/react-on-es6-plus

JavaScript babel React

Reactを題材にしたES6やES.nextについての機能紹介。
具体的にES5で書いたものがどう変わるかをReactを例にして解説してる。


ES6 Promise Anti-Patterns and Best Practices

www.datchley.name/promise-patterns-anti-patterns/

JavaScript Promises

Promiseのアンチパターン集


Javascript Async Control Flow

kaye.us/javascript-async-control-flow/

JavaScript ECMAScript

ES.nextのasync/awaitについて。
またこれと似た事はtask.jsやcoを使うことで今すぐできるという話


UI Testing with React Components | Toptal

www.toptal.com/react/how-react-components-make-ui-testing-easy

React testing

React Componentのテスト方法について


Testing JavaScript Modules with Tape

ponyfoo.com/articles/testing-javascript-modules-with-tape

JavaScript testing

tape、proxyquire、Sinon.JSを使ったテストについて。
tapeによるテストの書き方、proxyquireとSinon.JSを使ったモックについて


スライド、動画関係


▶ "Процесс стандартизации ECMAScript", Сергей Рубанов, MoscowJS 23 - YouTube

www.youtube.com/watch?v=5HNrQJsv4gU

ECMAScript JavaScript 動画 スライド

ECMAScriptを策定するTC39のプロセスについての動画とスライド。
≈≈≈ という仮の新しい構文を例としてどういうプロセスで策定されるかについて


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


V8 JavaScript Engine

v8project.blogspot.com/

Chrome V8 blog

V8についてより詳細な情報を載せていく公式ブログ


WebGLStudio.js

webglstudio.org/

WebGL editor

WebGLエディタ


Jam3/math-as-code

github.com/Jam3/math-as-code

JavaScript チートシート

色々な数学記号や数式をJavaScriptで表現するチートシート


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


RReverser/babel-plugin-asm-js

github.com/RReverser/babel-plugin-asm-js

babel JavaScript asm.js plugin flowtype

asm.jsにコンパイルするBabel plugin


IjzerenHein/autolayout.js

github.com/IjzerenHein/autolayout.js

JavaScript ios CSS library

iOSのAutoLayoutとVisual Format Language的な実装を持つJavaScriptライブラリ


書籍関係


High Performance Mobile Web - O'Reilly Media

shop.oreilly.com/product/0636920035060.do

browser mobile book

2015年7月発売
モバイルウェブサイトにおけるパフォーマンスについての書籍


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