Fork me on GitHub

2014-11-25のJS: Chrome 39、デバッグTips、Facebook Flow

Edit on GitHub 編集履歴を見る

JSer.info #203 - Chrome 39がリリースされました。

実装された機能などについてはβ時のリリースノートを参照して下さい。

ES6 Generatorがデフォルトで有効になったり、Web Animationsの実装が進められています。
また Web Application Manifestの対応やBeacon APIが実装されています。

通常のXHRを使った非同期通信ではページを閉じてしまうとそのデータを送ることが保証出来ませんが、 Beacon APIを使うことでUIをブロックすることなくちゃんとデータを送れるようになります(ビーコンというぐらいなので大きなデータを送る用途ではありません)

例えば、リンクがクリックされた計測データを画面が遷移する前に送ろうとした時にXHRでは一度Clickをキャンセル->XHRでデータを送る->遷移し直すという事(もしくは同期XHR)をしていましたが、 Beacon APIを使えば単純にデータをnavigator.sendBeaconで送ればよくなります。


Modern Debugging Experience: Part 2 - Tuts+ Code Tutorial という連載では(Chromeの)開発者ツールを使ったJavaScriptのデバッグテクニックについて色々な手法が書かれています。

debuggerステートメントを使った単純なbreakだけではなく、Object.observeやgetter/setterなどと組み合わせて使う方法等新しい方法も紹介しています。

また、条件付きのBreakpoints(コード、DOM、Event)やコールスタックの読み方、Node.jsのデバッグツールについても書かれています。


FacebookからJavaScriptの型チェックツールであるFlowがリリースされました。

Flowは同じくFacebookが公開してるHackと似た部分があり、並列に処理する事で高速でインクリメンタルな型チェックを行う事を目的としています。

/* @flow */ というコメントで宣言した箇所についてのみ型チェックを行うため、段階的に型付けをしていけるようになっています。

まだバージョンがv0.1.1なので、標準の型定義に足りないものがあったり、Windowsで動かすには非公式のビルドのみだったりしますが色々期待できるツールとなりそうです。

今後の方針についてはFlow | Future Plansに書かれています。


ヘッドライン


Chromium Blog: Chrome 39 Beta: JS Generators, Animation Playback Control, and the WebApp Manifest

blog.chromium.org/2014/10/chrome-39-beta-js-generators-animation.html

Chrome ReleaseNote

Chrome 39リリース。(Stableのリリースノートはこちら)

Generatorがデフォルトで有効、Web Animationのplay()pause()のサポート、 Web Application Manifest、 Beacon API のサポート


アーティクル


Send beacon data in Chrome 39

updates.html5rocks.com/2014/10/Send-beacon-data-in-Chrome-39

JavaScript アクセス解析 Chrome

Chrome 39でBeacon APIが入った。

Beacon APIを使えばクリックしてページ移動するときのクリックのログも非同期でちゃんと送ることが出来る。(単純なXHRだと送り終わる前に遷移してしまう)


Modern Debugging Experience: Part 2 - Tuts+ Code Tutorial

code.tutsplus.com/tutorials/modern-debugging-experience-part-2--cms-22584

JavaScript Chrome debug Tools

開発者ツールを使ったデバッグ方法のTips。

debuggerステートメント、コールスタック、getter/setter/Object.observe等を使ったアクセス時にBreakさせる方法やWatch Expression、イベントリスナーのデバッグ等について書かれている


My five promise patterns

remysharp.com/2014/11/19/my-five-promise-patterns

JavaScript Promises

Promiseパターンについて

Node.jsスタイルの高階関数をPromiseを返すようにするdenodeify、bindによる引数の固定、コールバックとの併用、rejectではなく常にthrowする、処理の終わりでいつもcatchする


Property testing in JavaScript with quick_check.js - RightScale Engineering Blog

eng.rightscale.com/2014/07/18/quick-check-js.html

JavaScript library testing

JavaScriptのQuickCheck実装である quick_check.js について


uxebu/mocha-sinon-traceur-example

github.com/uxebu/mocha-sinon-traceur-example

ECMAScript JavaScript testing

ES6でテストを書いてTDDするサンプルプロジェクト


スライド、動画関係


Nodevember - YouTube

www.youtube.com/user/nodevember/feed

JavaScript node.js 動画

http://nodevember.org/ の動画が公開されている


Real World React - YouTube

www.youtube.com/watch?v=uZgAq1CZ1N8

React JavaScript スライド 動画

ReactのComponentの作り方やテストについて詳しい発表

  • http://presentboldly.com/bejonbee/real-world-react-v012

DOM Performance (JSNext Bulgaria)

www.slideshare.net/ickatanet/dom-performance-jsnext-bulgaria

DOM performance スライド

DOM操作のパフォーマンスTips的なスライド。

Event Delegate、Style操作、DOM Nodeの作成(clone、DocumentFragment)、DOM Nodeの削除について。


KnowThen – Screencasts For Developers

knowthen.com/

JavaScript node.js 動画

JavaScriptについてのスクリーンキャストをするサイト


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


newton-software/devil

github.com/newton-software/devil

node.js node-webkit debug

node-inspectorのようにGUIでNode.jsアプリのデバッグを行う事が出来るツール。


Flow | A static type checker for JavaScript

flowtype.org/

flowtype facebook JavaScript Tools

Facebookの静的型チェックツール。

OCamlで書かれていて、TypeScriptと大体互換性のある型定義を行える。

サーバとして動かす事もできる。HHVM/Hackみたいなインクリメンタルな型付けを行える


axemclion/protractor-perf

github.com/axemclion/protractor-perf

protractor testing performance

Protractorのパフォーマンス測定版のようなツール


inikulin/ineed

github.com/inikulin/ineed

HTML node.js JavaScript library

HTMLのスクレイピング、変換処理(Reprocessing)を行えるNode.jsモジュール


jas-/secStore.js

github.com/jas-/secStore.js

JavaScript library

localStorage/sessionStorage/Cookieで暗号化をサポートするラッパーライブラリ


janmonschke/Web-Audio-Editor

github.com/janmonschke/Web-Audio-Editor

browser web audio Tools

ウェブベースのWeb Audio Editor


SpoonX/useuses

github.com/SpoonX/useuses

JavaScript Tools

@usesアノテーションコメントでそのJSファイルが依存するファイルパスを記述して使うモジュール管理ルール、ビルドツール

concatする程度にはシンプルで、CommonJSのような強い依存関係ではなく、単純にコメントを追加するだけなので余計にファイルは必要ない。


techlayer/espresso.js

github.com/techlayer/espresso.js

JavaScript library backbone.js Flux

BackboneとReactをインスパイアしたMV*ライブラリ。

Fluxのデータフローを一方向にするアイデアをBackboneに持ってきた感じのライブラリ


書籍関係


Discover AngularJS by Adam Burak [Leanpub PDF/iPad/Kindle]

leanpub.com/discoverangularjs

AngularJS book

AngularJSチュートリアル本


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