Fork me on GitHub

JavaScriptの最新情報を紹介する週刊ブログ

2014-06-17のJS: Firefox30.0、Firebug 2.0、IE Developer Channel

2014年06月17日 Edit on GitHub 編集履歴を見る

JSer.info #179 - Firefox 30がリリースされました。

XHRなどDOMのコンストラクタ関数は今までnewを使わなくてもエラーになりませんでしたが、 以下のようにnew付けないとTypeErrorになるようになりました。

var req = XMLHttpRequest();
// => TypeError: Constructor XMLHttpRequest requires 'new'

Chrome for Androidでは既に対応されていますが、Firefox for Android & Firefox OSでも、 width=device-widthとなっている場合などに300msのタッチ遅延が廃止されました。

また、Errorオブジェクトのスタックトレースにカラム番号が含まれる等の変更が入っています。

// ~ Firefox 29
a@file:///C:/example.html:19
// => Firefox 30 ~
a@file:///C:/example.html:19:13

Firefoxのウェブ開発アドオンのFirebug 2.0がリリースされました。

Firebug2.0では、シンタックスハイライト、コードの整形機能、DOMイベントのインスペクタ、CSSセレクタや正規表現を使っての要素検索が出来るようになっています。

またデバッガーでbreakした時の値のツールチップ表示や、関数が返してる値の表示、Mutation Observersの監視、 Command Editor(複数行のエディタ)での補完対応等がされています。

詳しくは以下の記事で解説されています。

Firefox自体にもDevToolsが入っているため利用する人が減ってきてそうな気もしますが、 Firebug2.0で少し遅れてた部分も大分実装された気がします。

Command EditorやDOMパネル周りはFirebugが充実している気がするので、一度試してみるといいかもしれません。

IE Developer Channel というIEの開発版がダウンロード出来るサイトが公開されました。

今後IEに実装されていく機能についてはstatus.modern.IEにまとめられています。 今回のIE1の開発者向けプレビューでは、以下のようなWebDriver APIやGamepad APIの実装が入っています。

また、Internet Explorer Developer Channel FAQ (Internet Explorer)にも書かれていますが、Application Virtualization (App-V)で仮想化されて実行されるためパフォーマンスのテストには使えない等の制限はあります。

IE12についてはWhat I’d like to see in IE12 - IEInternals - Site Home - MSDN Blogsも参照するといいかもしれません(ちょこちょこアップデートされています)

ヘッドライン

Firefox 30.0 リリースノート

firefoxReleaseNote

Firefox 30リリース

XMLHttpRequest等DOMのコンストラクタ関数をnewなしでは呼べないように、__proto__のsetter利用の警告、特定条件下では300msのタッチイベントの遅延が廃止等

Getfirebug Blog » Blog Archive » Firebug 2.0

FirebugReleaseNote

Firebug 2.0リリース。

スクリプトの自動整形、シンタックスハイライト付きの編集、DOM Eventインスペクタ、正規表現での検索、 Command Editor(複数行)での補完、consoleログのグルーピング、returnした値のwatch、Mutation Observersの監視等

Announcing Internet Explorer Developer Channel - MSDN Blogs

IE

IEの開発バージョンを使えるDeveloper Channelが公開された。

開発者向けにリリース前のIEを機能を試すことが出来る。

Release vinyl-fs update · gulpjs/gulp

gulpReleaseNote

gulp 3.8.0リリース。

gulp.srcを使ってpipeの途中でファイルを追加出来るように、gulp.destが関数を受け取ることが出来るようになって出力先を操作しやすくなった

Release v1.5.0 · mdevils/node-jscs

JavaScriptToolsReleaseNote

JavaScriptのコーディングスタイルチェックツールのJSCS 1.5.0リリース。

GoogleやjQueryのプリセットのアップデート、yandexやwikimediaのプリセットの追加、細かいオプションが色々増えている

https://github.com/mdevils/node-jscs/blob/master/CHANGELOG.md

Release v2.0.0 · chrisdickinson/beefy

JavaScriptbrowserifyToolsReleaseNote

Browserifyでの開発補助ツール(自動ビルド、更新)であるbeefy 2.0.0がリリース。

node moduleとしても利用しやすくなった。全体的に書きなおして内部構造の改善、Windowsサポートの改善等

PhoneGap | PhoneGap 3.5.0 Release

PhoneGapReleaseNote

PhoneGap 3.5.0リリース。

全てのプラットフォーム向けがnpmでリリースされた、package.json、今後のアップデートはnpm経由、iOS5.0のサポートは終了、iOSのユニバーサルバイナリ対応

esformatter/CHANGELOG.md at master · millermedeiros/esformatter

JavaScriptToolsReleaseNoteAST

JavaScriptの整形ツールであるesformatter0.2.0リリース。

プラグイン機構のサポートが入り、整形にフックした処理を書けるようになった。

アーティクル

Getting Started with Browserify

browserifytutorial

Browserifyチュートリアル。

基本的な使い方やnpm run-script/gulp/gruntでのビルドについて書かれてる

Understanding Error Messages in JavaScript

JavaScriptdebug

JavaScriptのエラーが発生した時のコンソールに表示されるエラー内容についての解説。

まだ初期化されてない、識別子が間違ってる、データタイプがあってない

ケースについてそれぞれ例と解説が書かれてる

Tumblrの省メモリーな無限スクロール - 記録

tumblrJavaScript

Tumblrの無限スクロールでのメモリの使用量対策について。

画像を一時的にダミーに入れ替える方法、display:noneとする方法や、ノードは変数として保持してDOMから削除する事によるメモリへの影響について書かれてる

Sharing Polymer Components: Part 1 - Tuts+ Code Tutorial

WebComponentstutorial

Polymerを使った再利用可能なComponentsを使って公開する連載

Two-Way Data Binding

JavaScript

VanillaJS、Backbone、React、Angular、Meteorでの2-wayデータバインディングの実装比較。

Easy audio capture with the MediaRecorder API ✩ Mozilla Hacks – the Web developer blog

audioAPIJavaScript

Firefox 25からサポートしてる

MediaRecorder API(navigator.getUserMedia)で、音声を録音できるという話

VOC.js作った。　視覚と見た目に基づいた非同期コミュニケーションができるよ - 標高+1m

JavaScriptlibrary

Vision Oriented Communication、プルベースな考え方のコミュニケーションライブラリ。

それぞれのオブジェクトがループの中で外から情報を取ってきて、それに対する挙動を書けるライブラリ。

Sharing Data Between Sass and JavaScript with JSON | Viget

JavaScriptSassJSON

sass-json-vars を使ってSassでJSONを読み込んで使う話

スライド、動画関係

JSConf US 2014 - YouTube

JavaScriptイベント動画

JSConf US 2014 の動画が公開された

WebGLことはじめ

WebGLスライド

WebGLとは何か、シェーダーの実装の流れについてのスライド。

GLSL ray marching

WebGLスライド

WebGLでのレイマーチングについてのスライド。

レイトレーシング、レイマーチングがどういうものなのかについても書かれてる。

レイマーチングでの中心的な要素となるdistance functionについて

メンテナブルなJsってなんだろう

JavaScriptスライド

既存のJavaScriptコードがある中で、どのようにルールを設けてチェックして、自動化していくかについてのスライド

ブラウザにやさしいHTML/CSS

browserifyDOMHTTPスライド

HTTP通信、DOMのレンダリングツリー、GPU Layer、CSSセレクタ、JavaScriptの実行の大まかな動きについて書かれたスライド。

常に変化がある部分だけど、どういう要素があってどうゆう手法があったのかについて把握しやすく書かれてる

TypeScript勉強会 スライドまとめ(VSハッカソン倶楽部 第五回) | wIssue Note

TypeScriptスライドまとめ

TypeScript勉強会のスライドまとめ

http://vshtc.doorkeeper.jp/events/11407

BDD with JS: Architecture, Tools & Patterns

JavaScripttestingスライド

Mocha/CucumberJS + Zombie/RealBrowser(Karuma)でのテストについてのスライド。

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

darobin/webidl2.js · GitHub

JavaScriptlibrary

JavaScriptによるWebIDLパーサライブラリ

Collections for JavaScript

JavaScriptlibrary

MapやSet、Heapなどのデータ構造とコレクション系の機能を提供してくれるライブラリ。(それぞれ単体で利用できる)

チェック式でどのデータ構造がニーズにあってるかを教えてくれたりドキュメントがちゃんと書かれてる

書籍関係

Amazon: D3.js in Action : Elijah Meeks

d3.jsbook

2014年12月31日発売

D3.jsのAction本

Amazon: フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus): 斉藤 祐也, 石本 光司, 加藤 賢一, 水野 隼登, 谷 拓樹, 泉水 翔吾, 原 一成, 平木 聡, 佐藤 歩, 杉本吉章

JavaScriptHTMLCSSgitbook

2014年7月2日発売

HTML/CSS/JavaScriptの基礎、JavaScriptの設計やモバイルへの対応、テストやパフォーマンス、Gitやセキュリティ、Futureについて書かれてるムック

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