Fork me on GitHub

2013-07-29のJS: IE11 DP on Windows7、ES6 modulesの使い方、JS オブジェクト指向

Edit on GitHub 編集履歴を見る

JSer.info #133 - Windows7向けにIE11 Developer Previewがリリースされました。
多少Win8版と差異がありますが、早速IE11DPのドキュメントも翻訳されているのでInternet Explorer 11 Preview 開発者向けガイド (Preliminary)を見てみるといいです。 
F12 開発者ツールについてや、IE11 Preview における互換性の変更点 (Preliminary)に削除されたAPIやUA、文字エンコード、参考例自体が少ないMutationObserverについて等色々書かれています。

ECMAScript 6 modules: the future is now という記事では、ES6 modulesの文法についてまとめられています。
まだ、実装ブラウザはないですが知っておいて損はないと思います。 

Object Playground: The Definitive Guide to Object-Oriented JavaScript というサイトでは、
JavaScriptのオブジェクト指向、prototypeチェーンやthisの動きなどについて、わかりやすい動画で解説されています。
また、入力したコードからオブジェクトの構造をダイアグラムで表示する機能がついていて、見た目でわかりやすいです。
(中の人はLet’s Code: Test-Driven JavaScriptの人です) 

これと一緒にJavaScriptのコンストラクタ関数について書かれたIn defense of JavaScript’s constructorsを見ると、newの動きについて分かりやすくなると思います。

A Brief Introduction To Local Storage というスライドでは、LocalStorageの基本的な機能や使い方、シリアライズした時のパフォーマンスについて等よくまとまっています。 

ヘッドライン

✎node.js ReleaseNote

Node v0.10.15リリース

✎jQuery mobile ReleaseNote

jQuery Mobile 1.4.0 Alphaリリース。
デフォルトテーマが新しく、SVGアイコンの採用

✎IE ReleaseNote

Windows7向けにIE11 Developer Previewリリース。

「Windows 7」向け「Internet Explorer 11」、デベロッパープレビュー版がリリース - CNET Japan などを見るとわかりますが、
Widnwos7向けのIE11はSPDYがサポートされてない等少しWin8向けとは違う所があります。 

✎IE ReleaseNote webservice

modern.IEのサイトがアップデートされた。
IE11のイメージが追加されてる。

✎css UI design ReleaseNote

Bootstrap 3 RC1リリース。
変更点やロードマップについてはPullRequestにまとまってる

 https://github.com/twbs/bootstrap/pull/6342

✎css まとめ

RCが出る前の段階に書かれたものだけど、
Twitter Bootstrap 3 の変更点概要

アーティクル

✎JavaScript ECMA

AMDやCJSに対するES6 modulesのメリット。
基本構文 import/export/default exports/inline modules/Module loadersについて。
今日から使うためのツールについて

✎JavaScript

スクリプトの遅延ロード.
async/defer属性やinsert、XHR、
iframe内にスクリプトを読み込ませて、親ドキュメントのブロックを防ぐ方法

✎JavaScript CoffeeScript

オブザーバーパターンと安易な使い方をした時の問題について
オブザーバーパターンのアンチパターン

✎JavaScript backbone.js tutorial

Cody LindleyによるBackbone.jsの入門チュートリアル。
実際に動かせるサンプルと一緒に機能の解説が書かれている

✎IE Development document

IE11Previewの開発者向けガイド.
開発者ツールやAPIの互換性情報、削除されたAPI、グラフィックス等

✎IE browser

IE11の戻るボタンで戻った時に、ページからロードをしないでキャッシュから読み込まれる条件(bfcache)について並べられてる。

bfcache について覚えて帰ってもらいます。 も一緒に読むといいい

✎canvas Tips

Canvasとオフスクリーンバッファと再描画について。
一度描いたものを再描画する際に処理コストを小さくするテクニック、
function 生成での高速化について。

✎JavaScript

Array#everyの使い方。
 

✎jasmine

Jasmineの非同期テストを、spyOnとPromiseを使って行う

✎DOM WebComponents

Shadow DOMとWeb Componentstについて

✎ JavaScript

JavaScriptでconstructor関数を書く時のパターンについて。
constructorを使う利点、newをオプショナルにするのを避ける理由とstrict mode、ES6のclass syntaxを見据えた話

✎JavaScript V8

JavaScriptエンジンのhidden classという仕組みについて。
new コンストラクタ関数で値を代入する場合に、操作の差分を持ったHidden classを作成しておき、
次回インタンス化するときに、それを再利用する + lookupが減る事で高速化される。

In defense of JavaScript’s constructors でConstructorを使う利点にも挙げられている実装的な仕組み。

✎node.js デバック

StrongLoop Nod distributionに含まれてるNode-inspectorについて。
バックエンドはBlinkになり、breakpointや値の編集、SourceMap、関数の再実行等Nodeのデバッガーとして利用できる

✎CoffeeScript backbone.js tutorial

CoffeeScriptとBackbone.jsを使ったTodoアプリを作るチュートリアル。
チュートリアル自体がDoccoのコードと説明を併記した形で読みやすい

✎JavaScript

JavaScript Quiz.
thisの挙動についてのクイズ

✎JavaScript DOM

Ractive.jsは配列の変更をPrototype chain injectionを使って検知して、
配列元にDOMを生成している場合、その配列の変更の差分を考えてDOMの操作を行なっている.(DOMの変更範囲を抑えてる)
insertAdjacentHTMLが高速になるのと似てる感じがする。 

✎JavaScript まとめ 開発環境

最近良く見る感じのフレームワーク、ライブラリ、コーディングルール、Lint、メトリクス、デバッグ、テスト、Grunt、Node.jsについて。
似ている感じの趣旨のスライド => High-Quality JavaScript Code ツールまとめ | JSer.info 

✎JavaScript library まとめ

日付操作ライブラリまとめ

スライド、動画関係

✎JavaScript testing jQuery 動画

ユニットテストについての発表。
http://eamann.com/slides/unit-testing/
なぜ、なにを、どうやって、ツール、自動化について。
コード全体が匿名関数で囲まれてる場合にどうするか等

✎JavaScript スライド Tools

JavaScriptのコードクオリティのツールやサービスなどについてのスライド
リンクまとめ => http://jser.info/post/56525802407/high-quality-javascript-code

✎JavaScript スライド

LocalStorageについてよくまとまってるスライド.
Store.js、StorageEvent、容量制限のまとめ、use caseと実例、オブジェクトのSerializeとパフォーマンスについて

サイト、サービス、ソフトウェア関係

✎関数型言語 blog JavaScript

関数型JavaScriptについて書かれてるブログ

✎JavaScript グラフ

JavaScriptのオブジェクト指向について学べるサイト。
JavaScriptのオブジェクトのダイアグラムを表示できる機能があり、視覚化して把握できる

✎mail web Tools

Web Toolについての週刊のメールマガジン

✎HTML5 community

Intelが関わってるHTML5コミュニティ

✎Sass webservice

Sass playground.
Sassを入力してCSSをその場で見られる

ツール、ライブラリ関係

✎JavaScript DOM library AngularJS

Mustachesなテンプレートとデータバインディングして、AngularJSみたいにDOM等を扱うライブラリ.
名前の通り値を変更した時点で反映するリアクティブスタイル.
チュートリアルがよく出来てる

✎JavaScript グラフ library

インタラクティブなダイアグラムを作れるライブラリ。
ERD, Org chart, FSA, UML, PN, DEVS等の要素は別途用意されてる

✎JavaScript DOM library

defineProperty/getterを使ってDOMの操作をプロパティを辿る感じでできる機能などを持ったDOM操作ライブラリ

✎JavaScript DOM library

Voyeur http://dunxrion.github.io/voyeur.js/ を使ったDOM操作についての解説

✎JavaScript git library

JavaScriptのGitクライアント実装ライブラリ。
FileSystem APIを使ってる

✎JavaScript library

MomentsのTimeZoneを扱うライブラリ。
TimeZoneのルールを http://momentjs.com/timezone/data/ で追加できる

✎JavaScript library

DOM Promisesのpolyfillライブラリ

✎JavaScript library

文字列を圧縮するライブラリ

✎JavaScript library

ES6 / AMD / CJS などで定義されたモジュールを読み込むことができるJavaScriptローダーライブラリ.

✎HTML JSON library

TableタグをJSONにして取得できるライブラリ

✎JavaScript UI Tools

Kendo UI Bootstrapper

✎JavaScript library node.js

WebSocketを使って、サーバとクライントを連携してデータのやり取りするアプリを作るBackbone.jsライクなライブラリ

✎JavaScript

JavaScriptなDiff/Mergeアプリとライブラリ

✎jasmine チートシート

Jasmineのチートシート

✎JavaScript グラフ

Raphaelベースなグラフライブラリ。

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