Special Thanks to https://flic.kr/p/b5bNqv

翻訳について

はじめに

目次

1. なぜPromiseの詳細を扱うのか？
2. もっともシンプルな例

• Promiseクラスを定義する
• このコードは脆く、そして良くない

• 任意のCallback
• メソッドチェーンの内部でPromiseを返却する

• 予期せぬエラーも否認につなげる必要がある
• Promiseはエラーを握りつぶす可能性がある！
• done()を救済として使う

• なぜこのような非同期の要件が仕様にあるのか？

なぜPromiseの詳細を扱うのか？

もっともシンプルな例

doSomething(function(value) {
  console.log('Got a value:' value);
});

doSomething().then(function(value) {
  console.log('Got a value:' value);
});

function doSomething(callback) {
  var value = 42;
  callback(value);
}

function doSomething() {
  return {
    then: function(callback) {
      var value = 42;
      callback(value);
    }
  };
}

Promiseクラスを定義する

function Promise(fn) {
  var callback = null;
  this.then = function(cb) {
    callback = cb;
  };

  function resolve(value) {
    callback(value);
  }

  fn(resolve);
}

function doSomething() {
  return new Promise(function(resolve) {
    var value = 42;
    resolve(value);
  });
}

function Promise(fn) {
  var callback = null;
  this.then = function(cb) {
    callback = cb;
  };

  function resolve(value) {
    // callbackの呼び出しについて
    // イベントループを1つ待つことで、
    // then()が呼び出される機会を作ります
    setTimeout(function() {
      callback(value);
    }, 1);
  }

  fn(resolve);
}

このコードは脆く、そして良くない

Promiseは状態を持つ

function Promise(fn) {
  var state = 'pending';
  var value;
  var deferred;

  function resolve(newValue) {
    value = newValue;
    state = 'resolved';

    if(deferred) {
      handle(deferred);
    }
  }

  function handle(onResolved) {
    if(state === 'pending') {
      deferred = onResolved;
      return;
    }

    onResolved(value);
  }

  this.then = function(onResolved) {
    handle(onResolved);
  };

  fn(resolve);
}

• 呼び出される側がresolve()を実行する前に、呼び出し側がthen()を実行した場合は、値がまだ解決されていない状態です。この場合、stateはpending状態であり、呼び出し側が指定したcallackは、値の解決が行われるまで保持されます。その後、resolve()が実行されると、callbackは実行され、呼び出し側に値が戻ります。
• 呼び出し側がthen()を呼び出す前に、呼び出される側がresolve()を実行した場合、値は確定した状態となります。この場合、then()が呼び出されればすぐに、値を返却します。

var promise = doSomething();

promise.then(function(value) {
  console.log('Got a value:', value);
});

promise.then(function(value) {
  console.log('Got the same value again:', value);
});

Promiseにおけるメソッドチェーン

getSomeData()
.then(filterTheData)
.then(processTheData)
.then(displayTheData);

function Promise(fn) {
  var state = 'pending';
  var value;
  var deferred = null;

  function resolve(newValue) {
    value = newValue;
    state = 'resolved';

    if(deferred) {
      handle(deferred);
    }
  }

  function handle(handler) {
    if(state === 'pending') {
      deferred = handler;
      return;
    }

    if(!handler.onResolved) {
      handler.resolve(value);
      return;
    }

    var ret = handler.onResolved(value);
    handler.resolve(ret);
  }

  this.then = function(onResolved) {
    return new Promise(function(resolve) {
      handle({
        onResolved: onResolved,
        resolve: resolve
      });
    });
  };

  fn(resolve);
}

var ret = handler.onResolved(value);

function(value) {
  console.log("Got a value:", value);
}

doSomething().then(function(result) {
  console.log('first result', result);
  return 88;
}).then(function(secondResult) {
  console.log('second result', secondResult);
});

// アウトプットは、
// first result 42
// second result 88


doSomething().then(function(result) {
  console.log('first result', result);
  // 何もreturnしていない
}).then(function(secondResult) {
  console.log('second result', secondResult);
});

// アウトプットは、
// first result 42
// second result undefined

doSomething().then(function(result) {
  console.log('first result', result);
  return 88;
}).then(function(secondResult) {
  console.log('second result', secondResult);
  return 99;
}).then(function(thirdResult) {
  console.log('third result', thirdResult);
  return 200;
}).then(function(fourthResult) {
  // これ以降も続けることができます
});

doSomething().then(function(result) {
  var results = [result];
  results.push(88);
  return results;
}).then(function(results) {
  results.push(99);
  return results;
}).then(function(results) {
  console.log(results.join(', ');
});

// アウトプットは、
// [42, 88, 99]

任意のCallback

doSomething().then().then(function(result) {
  console.log('got a result', result);
});

// アウトプットは、
// got a result 42

if(!handler.onResolved) {
  handler.resolve(value);
  return;
}

メソッドチェーンの内部でPromiseを返却する

doSomething().then(function(result) {
  // doSomethingElse returns a Promise
  return doSomethingElse(result)
}).then(function(finalResult) {
  console.log("the final result is", finalResult);
});

doSomething().then(function(result) {
  // doSomethingElse returns a Promise
  return doSomethingElse(result)
}).then(function(anotherPromise) {
  anotherPromise.then(function(finalResult) {
    console.log("the final result is", finalResult);
  });
});

function resolve(newValue) {
  if(newValue && typeof newValue.then === 'function') {
    newValue.then(resolve);
    return;
  }
  state = 'resolved';
  value = newValue;

  if(deferred) {
    handle(deferred);
  }
}

Promiseを否認する

doSomething().then(function(value) {
  console.log('Success!', value);
}, function(error) {
  console.log('Uh oh', error);
});

function doSomething() {
  return new Promise(function(resolve, reject) {
    var result = somehowGetTheValue(); 
    if(result.error) {
      reject(result.error);
    } else {
      resolve(result.value);
    }
  });
}

function Promise(fn) {
  var state = 'pending';
  var value;
  var deferred = null;

  function resolve(newValue) {
    if(newValue && typeof newValue.then === 'function') {
      newValue.then(resolve, reject);
      return;
    }
    state = 'resolved';
    value = newValue;

    if(deferred) {
      handle(deferred);
    }
  }

  function reject(reason) {
    state = 'rejected';
    value = reason;

    if(deferred) {
      handle(deferred);
    }
  }

  function handle(handler) {
    if(state === 'pending') {
      deferred = handler;
      return;
    }

    var handlerCallback;

    if(state === 'resolved') {
      handlerCallback = handler.onRejected;
    } else {
      handlerCallback = handler.onResolved;
    }

    if(!handlerCallback) {
      if(state === 'resolved') {
        handler.resolve(value);
      } else {
        handler.reject(value);
      }

      return;
    }

    var ret = handlerCallback(value);
    handler.resolve(ret);
  }

  this.then = function(onResolved, onRejected) {
    return new Promise(function(resolve, reject) {
      handle({
        onResolved: onResolved,
        onRejected: onRejected,
        resolve: resolve,
        reject: reject
      });
    });
  };

  fn(resolve, reject);
}

予期せぬエラーも否認につなげる必要がある

function resolve(newValue) {
  try {
    // ... as before
  } catch(e) {
    reject(e);
  }
}

function handle(deferred) {
  // ... as before

  var ret;
  try {
    ret = handlerCallback(value);
  } catch(e) {
    handler.reject(e);
    return;
  }

  handler.resolve(ret);
}

Promiseはエラーを握りつぶす可能性がある！

function getSomeJson() {
  return new Promise(function(resolve, reject) {
    var badJson = "
uh oh, this is not JSON at all!
";
    resolve(badJson);
  });
}

getSomeJson().then(function(json) {
  var obj = JSON.parse(json);
  console.log(obj);
}, function(error) {
  console.log('uh oh', error);
});

getSomeJson().then(function(json) {
  var obj = JSON.parse(json);
  console.log(obj);
}).then(null, function(error) {
  console.log("an error occured: ", error);
});

done()を救済として使う

getSomeJson().done(function(json) {
  // ここで発生した例外は、握りつぶされることはありません。
  var obj = JSON.parse(json);
  console.log(obj);
});

Promiseの解決には、非同期が必要です

function handle(handler) {
  if(state === 'pending') {
    deferred = handler;
    return;
  }
  setTimeout(function() {
    // handle内の大半の処理
  }, 1);
}

なぜこのような非同期の要件が仕様にあるのか？

var promise = doAnOperation();
invokeSomething();
promise.then(wrapItAllUp);
invokeSomethingElse();

then/promiseの話を締めくくる前に

最後に

更なる学習のために

• promisejs.org— 本文内でも何度か言及しましたが、Promiseに関するとても良いチュートリアルです。
• Q’s Design Rationale— この記事と同じくPromiseを扱っています。本記事よりも詳細な内容が説明されています。
• Some debate over whether done() is a good thing— Github上のIssueの1つですが、done()について深く議論されています。
• Flattening Promise Chains— Thomas BurlesonによるPromiseの記事です。Promiseについて、とても詳しく説明しています。私の記事が「Promiseは何か」を説明しているとしたら、彼の記事は「Promiseのなぜ」を説明しています。

間違いを見つけたら？

翻訳を終えて最後に

Special Thanks to https://flic.kr/p/mCxBaM

この記事の目的

目次

XHR2とは

XHR2のサポート状況

引用：http://caniuse.com/#search=xhr

XHR1でのバイナリーデータをダウンロードするハック

var xhr = new XMLHttpRequest();
xhr.open('GET', '/labo/xhr2/image1.jpg', true);
// MimeTypeを上書きする
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onreadystatechange = function (e) {
    if (this.readyState === 4 && this.status === 200) {
        // レスポンスをテキストで受け取る
        var binStr = this.responseText;
        // 1文字ずつバイナリーとして扱う
        var base64 = 'data:image/jpeg,';
        for (var i = 0, len = binStr.length; i < len; i++) {
            var c = binStr.charCodeAt(i);
            // String.fromCharCode(c & 0xff)
            var aByte = c & 0xff;
            base64 += '%' + (aByte <= 0xf ? '0' : '') + aByte.toString(16);
        }
        // 作成したbase64を使って、imgタグを生成する
        var image = document.createElement('img');
        image.src = base64;
        document.body.appendChild(image);
    }
}
xhr.send();

XHR2を用いて画像をダウンロードする

// ArrayBufferデータ型で画像データをダウンロードする
var xhr = new XMLHttpRequest();
xhr.open('GET', '/labo/xhr2/image4.jpg', true);
// ここで受け取るデータ型を指定します。
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
    if (this.status === 200) {
        // this.responseにはArrayBufferであるバイト配列が格納されています。
        var uInt8Array = new Uint8Array(this.response);
        // バイト配列からbase64を生成します
        var base64 = 'data:image/jpeg,';
        for (var i = 0, len = uInt8Array.length; i < len; i++) {
            var aByte = uInt8Array[i];
            base64 += '%' + (aByte <= 0xf ? '0' : '') + aByte.toString(16);
        }
        // img要素を作成します
        var image = document.createElement('img');
        image.src = base64;
        document.body.appendChild(image);
    }
};
xhr.send();

// Blobデータ型で画像データをダウンロードする
var xhr = new XMLHttpRequest();
xhr.open('GET', '/labo/xhr2/image3.jpg', true);
// responseTypeにblobを指定します
xhr.responseType = 'blob';
xhr.onload = function () {
    if (this.status === 200) {
        // responseにはblobデータが格納されています
        var blob = this.response;
        // URLという機能を用いて、blobデータのURL作成、URL有効化を行います。
        var URL = window.URL || window.webkitURL;
        var image = document.createElement('img');
        image.onload = function () {
            URL.revokeObjectURL(this.src);
        }
        image.src = URL.createObjectURL(blob);
        document.body.appendChild(image);
    }
};
xhr.send();

XHR2を用いたアップロード（テキスト、フォームデータ）

テキスト文字列をアップロードする

// Client Code
var xhr = new XMLHttpRequest();
xhr.open('POST', '/labo/xhr2/server', true);
xhr.responseType = 'text';
xhr.onload = function () {
    if (this.status === 200) {
        console.log(this.responseText);
    }
}
// 文字列を送信します
xhr.send('From SendTextBtn');

// Server Code (PHP)
$contentType = $headers["Content-Type"];
if (strpos($contentType, 'text/plain') !== false) {
    $requestBody = file_get_contents('php://input');
    echo "Thanks you! your post: '$requestBody'";
    return;
}

フォームデータをアップロードする

// Client Code

// フォームデータを作成します
var formData = new FormData();
formData.append('username', 'yoheim');
formData.append('location', 'japan');

var xhr = new XMLHttpRequest();
xhr.open('POST', '/labo/xhr2/server', true);
xhr.onload = function () {
    if (this.status === 200) {
        console.log(this.responseText);
    }
}
// フォームデータを送ります
xhr.send(formData);

// Client Code
var formData = new FormData(document.forms[0]);

// Server Code (PHP)
$contentType = $headers["Content-Type"];
if (strpos($contentType, "form-data") !== false) {
    $username = $_POST["username"];
    $location = $_POST["location"];
    $nickname = $_POST['nickname'];
    echo "Thank you for your post. formData[username='$username',location='$location',nickname='$nickname']";
    return;
}

バイナリーデータをサーバーへ非同期に送信する

Blobデータ形式でアップロードする

<input id="sendFileBtn" type="file" value="ファイルをBlobで非同期にアップロードする"/>

// Client Code
var btn = document.querySelector('#sendFileBtn');
btn.onchange = function () {

    // 選択されたファイルを取得します.
    var file = this.files[0];
    console.log('filename: ', file.name);
    console.log('filesize: ', file.size);
    console.log('filetype: ', file.type);

    // xhrの準備をします.
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/labo/xhr2/server', true);
    xhr.onload = function () {
        if (this.status === 200) {
            console.log('file uploaded: ', this.responseText);
        }
    }

    // Fileを送信します.
    xhr.send(file);
};

// Server Code (PHP)

// 今回はJPEGをアップロードしたので、Content-Typeはimage/jpegとなります.
$contentType = $headers["Content-Type"];
if (strpos($contentType, "image/jpeg") !== false) {

    // 保存先ファイルを準備します
    $fileName = 'tmpbox/aaa.jpg';
    if (!file_exists($fileName)) {
        touch($fileName);
    }
    // 「php://input」からアップロードされたバイナリーデータを取得します
    $blob = file_get_contents('php://input');
    $fp = fopen($fileName, "w");
    fwrite($fp, $blob);
    fclose($fp);
    echo "Thank you for your image.";
    return;
}

フォームデータに含めて送る

var btn = document.querySelector('#sendFileBtn');
btn.onchange = function () {

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/labo/xhr2/server', true);
    xhr.onload = function () {
        if (this.status === 200) {
            console.log('file uploaded: ', this.responseText);
        }
    }

    // フォームに含めてFileを送信します.
    var file = this.files[0];
    var formData = new FormData();
    formData.append('filename', file.name);
    formData.append('filetype', file.type);
    formData.append('content', file);
    xhr.send(formData);
};

// Server Code (PHP)

// フォームデータとして受け取ります.
$contentType = $headers["Content-Type"];
if (strpos($contentType, "form-data") !== false) {

    // 受け取ったファイル名から保存するパスを作成
    $filename = $_POST["filename"];
    $uploadfile = "tmpbox/$filename";

    // アップロードされたファイルの情報は$_FILESに格納されています
    // move_uploaded_fileを使ってアップロードされたファイルを取得します
    $result = move_uploaded_file($_FILES['content']['tmp_name'], $uploadfile);
    if ($result) {
        echo "success";
    } else {
    	# $_FILES[$key]['error']でエラー内容が分かります
        echo "file upload error.";
    }
}

その他XHR2の機能

進捗状況の把握（ダウンロード）

var xhr = new XMLHttpRequest();
xhr.open('GET', '/labo/xhr2/image3.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function () {
    if (this.status === 200) {
        var blob = this.response;
        // ・・・Blobの処理
    }
};
// ダウンロードの進捗状況を取得します
xhr.onprogress = function (e) {
    // e.loaded: ダウンロード済みのバイトサイズ
    // e.total:  トータルの倍とサイズ
    console.debug('[progress]', e.loaded ,e.total);
}
xhr.send();

進捗状況の把握（アップロード）

var btn = document.querySelector('#sendFileBtn');
btn.onchange = function () {

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/labo/xhr2/server', true);
    xhr.onload = function () {
        if (this.status === 200) {
            console.log('file uploaded: ', this.responseText);
        }
    }

    // アップロードの進捗状況を把握
    xhr.upload.onprogress = function (e) {
        console.debug('[uploadProgress]', e.loaded ,e.total);
    };

    // 送信
    var file = this.files[0];
    var formData = new FormData();
    formData.append('filename', file.name);
    formData.append('filetype', file.type);
    formData.append('content', file);
    xhr.send(formData);
};

タイムアウトを設定する

var xhr = new XMLHttpRequest();
xhr.open('POST', '/labo/xhr2/server' ,true);
xhr.onload = function () {/*成功時の処理*/}

// タイムアウトを設定します
xhr.timeout = 10; // 10ms

// タイムアウト発生時のイベントを受け取ります
xhr.ontimeout = function () {
     alert('timeout!!');
}

// 送信
xhr.send('send message.');

通信キャンセル

var xhr = new XMLHttpRequest();
xhr.open('POST', '/labo/xhr2/server' ,true);
xhr.onload = function () {/*通信成功時の処理*/}
xhr.send('send message.');

// 通信キャンセルが出来た場合に呼び出されるコールバック
xhr.onabort = function () {
    console.debug('aboted!!');
}

// 通信中断の処理
// ここでは10ms後に通信のキャンセルを行っています。
setTimeout(function () {
    xhr.abort();
}, 10);

参考資料

最後に

Special Thanks to https://flic.kr/p/mCxiCc

Chrome beta版のインストール

TouchとZoomをより柔軟にコントロールする

JavaScript

プレフィックスなしでShadow DOM

• HTMLやCSSにスコープの概念を持ち込むことができ、モジュール内にスコープを限定することができます。その結果、既存のモジュールとCSSがぶつかるといった問題を回避することができます。
• Custom Elementを作ることができます。

その他の新機能

• CSS Font Loadingの機能を用いて、フォントを読み込むことができるようになりました（デモ）。必要な時にロードすることができ、ロードが完了した際に通知を受けることができます。
• SVGのPaint Order Propertyを用いることで、fill、stroke、markerの描画順を指定することができるようになりました。
• Web Audio APIがベンダープレフィックスなしで使えるようになりました。

削除された機能

将来削除予定の機能

最後に

Special Thanks to https://flic.kr/p/baAtKT

目次

ECMAScript6とは

仕様策定の手順

Strawman

仕様検討するための議題を集めるような場所です。 ES6のstrawmanはstrawman:oldes6にありますが、ここで挙がった議題の多くは、Proposalには進んでいないようです。 また現在最新のStrawmanも存在します（strawman:strawman)。これはES6以降の仕様の検討材料となるようです。

Proposal

ProposalではStrawmanから上がってきた追加点を具体化するフェーズです。新機能や問題の輪郭を正確に捉える説明を作成したり、簡単なデモを作ってみたりします。またキーとなるアルゴリズムの検討や、分野横断的な検討も行われます。そのような活動に時間を費やすことで、次のDraftへ移ります。 ES6のProposalはharmony:proposalsにあり、ここに定義された機能のほとんどは、Draftとなっているようです。

Draft（執筆時点では、このフェーズ）

正式な仕様定義を行う形式を用いて、正確にシンタックスとセマンティクスの定義を行うフェーズです。このフェーズで、次期バージョンの最初の仕様書が作成されます。全ての主要な機能についてシンタックス、セマンティクス、APIの定義が行われますが、一部TODOや編集上の問題点も存在する状態となります。 ES6のDraftはharmony:specification_draftsにあり、最新の仕様書や、過去の履歴などを確認することができます。

Candidate

Draftで策定した仕様をもとに実際に実装が行われ、そのフィードバックから仕様を洗練させていきます。この段階で完全な仕様書が作成され、指定されたレビュアーやECMAScript編集者がそれを署名して認めます。

Finished

追加される仕様が、正式にECMAScriptに適用されることが示唆されます。test262に今回追加される機能のテストが記載され、それらのテストをパスする2つの準拠した実装が行われます。そして、直近の仕様書の更新に検討してきた内容が追加されます。

ECMAScript6のブラウザ対応状況

ECMAScript6の新機能

ECMAScript6を実際に使ってみるには

その他情報ソース

最後に

Special Thanks to https://flic.kr/p/fedR9N

目次

Chromeのユーザー管理機能とは

Chromeのユーザー管理機能を利用する

試しに使ってみる

「最初のユーザー」でページを表示した結果

「アカウント001」でページを表示した結果

エクステンションもブックマークもまっさらに！

最後に

Special Thanks to https://flic.kr/p/nKFp2v

Chromeベータ版の入手、新機能の動作設定

element.animate()

var element = document.querySelector('#someElm');
element.animate([
  {cssProperty: value0},
  {cssProperty: value1},
  {cssProperty: value2},
  //...
], {
    duration: timeInMs,
    iterations: iterationCount,
    delay: delayValue
});

HTML Imports

<head><link rel="import" href="/path/to/imports/stuff.html"></head>

var content = document.querySelector('link[rel="import"]').import;

Object.observeのサポート

// 監視対象のオブジェクト
var obj = {};

// 監視する
Object.observe(obj, function (changes) {
    changes.forEach(function (change) {
        console.log(change.type, change.name, change.oldValue);
    }); 
});

// 追加を検知する
obj.prop1 = 'aaa'; // => add prop1 undefined

// 更新を検知する
obj.prop1 = 'bbb'; // => update prop1 aaa 

// 削除を検知する
delete obj.prop1;  // => delete prop1 bbb 

その他

• タップスクロール時にtouchcancelイベントを発火しないようになったようです。詳細はhtml5rocksを参照（英語）。プルリフレッシュなどの機能を無茶せず作れるようになるとのこと。
  
  
• scrollTopやoffsetHeightなどのCSSは、ブラウザがズーム表示されている時に、long値ではなく、float値を返すようになったようです。詳しくはChromiumのForum（英語）を参照。
  
  
• WOFF2.0というWebFontのフォーマットをサポートしたようです。WOFF1.0に比べて圧縮率が良く、平均30%程度サイズを削減できるようです。詳しくはChromiumのForumを参照。
  
  
• ディベロッパーツールで、タッチイベントを正確にエミュレートできるようになったようです。これでAndroid Chromeなどのテストもちゃんとできるよーと。詳しくはRick Byersさんのコメント（英語）を参照。
  
  
• CSS Transformがベンダープレフィックスなしに利用可能になったようです。詳しくはChromiumのForum（英語）を参照。

最後に

機能説明と使い方

<script src="http://jsinspector.com/inspector?9763-ACEAD"></script>

動作の仕組み

最後に

目次

gulpとは

Grunt.jsと何が違うのか

gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

(gulpはnode.jsのstreamという機能を用いており、code-over-configuration(設定よりもコード)を重視します。そのためよりシンプルにより直感的にビルドを行うことができます。)

1. Easy to use

コードでビルドタスクを実装するため、シンプルにタスクを定義することができます。

2. Efficient

node.jsのstream機能を用いているため、処理の中間ファイルなどを作ることなく、高速にビルドを行うことができます。

3. High Quality

gulpのプラグインは厳しいガイドラインに従って作成されなければいけません。それに違反すればブラックリストに登録される可能性があります。そのため、プラグインの品質は高く保たれるようです。

4. Easy to Learn

gulpのAPIの数は最小に保たれています。そのため覚えることはかなり少なく、簡単に使い始めることができます。

gulpとGruntの違い

1. gulpはコードベースでタスクを定義する
2. gulpはプラグインの品質がコントロールされている
3. gulpはGruntに比べてコード量が少なくタスクを定義できる
4. gulpはJavaScriptの実装ができる人じゃないと使えなさそう

gulpの導入

$ [sudo] npm install -g gulp

$ npm intall --save-dev gulp

gulpをとりあえず動かしてみる

// gulpfile.js
var gulp = require('gulp');

// タスク定義
gulp.task('foo', function () {
    console.log('foo task is called.');
});

$ gulp foo
[20:24:02] Using gulpfile ~/tmp/gulpfile.js
[20:24:02] Starting 'foo'...
foo task is called.
[20:24:02] Finished 'foo' after 113 μs

gulpでちゃんと意味あるタスクを動かしてみる

$ npm install --save-dev gulp-coffee
$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-imagemin
$ npm install --save-dev rimraf  # nodeで「rm -rf」を行うライブラリ

// gulpfile.js

// 必要モジュールをロード
var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var rimraf = require('rimraf');

// タスク：無意味...
gulp.task('foo', function () {
    console.log('foo task is called.');
});

// タスク：ビルド先を削除
gulp.task('clean', function(cb){
  rimraf('build/', cb);
});

// タスク：Coffeeのコンパイル、JSのミニファイ
// ['clean']を指定することで、このタスク実行前に行いたいタスクを指定できます.
gulp.task('scripts', ['clean'], function() {
  return gulp.src(['client/js/**/*.coffee', '!client/external/**/*.coffee'])
    .pipe(coffee())
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build/js'));
});

// タスク：画像の最適化
gulp.task('images', ['clean'], function() {
 return gulp.src('client/img/**/*')
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

// タスク：ファイルのコピー
// コピーだけなら特にプラグインは不要.
gulp.task('copy-html', function () {
    return gulp.src('*.html')
        .pipe(gulp.dest('build/'));
});

// デフォルトタスクを指定
gulp.task('default', ['scripts', 'images', 'copy-html']);

$ gulp

gulpでwatchをする

gulp.task('watch', function() {
  gulp.watch(['client/js/**/*.coffee', '!client/external/**/*.coffee'], ['scripts']);
  gulp.watch('client/img/**/*', ['images']);
});

$ gulp watch

プラグインを探す

(追記)Gruntから移行する際のメリット・デメリット

メリット

1. ファイルの行数が半分くらいになる。500行なら250行とか
2. gulpの方が早いらしい(未検証)
3. 最新ツール使ってるぞと、自慢できるw

デメリット

1. 日本語でのノウハウは少ないから、何かにはまったら自分で道を切り開く必要がある
2. 行数が少ないって言ったって、たくさんタスクを定義したら長くなる
3. JavaScriptを書ける人向け
4. 何かカスタマイズしようとすると、node.jsのpipe処理を理解しておく必要がある

参考情報

最後に

Special Thanks to https://flic.kr/p/9zbbkX

目次

StatCounterとは

StatCounterの使い方

※執筆時点での使い方のため、本記事をご覧頂いている時には変わっているかもしれません。

まずは表示してみる

日本のブラウザシェアを確認する

表の表示形式を変更する

モバイルのシェアも表示する

その他にも

最後に

Special Thanks to https://flic.kr/p/7fADmS

目次

Web Speech APIとは

• 声によるWeb検索（AndroidやiPhone Siriのような機能）
• 声によるマシンへの命令
• Inputフィールドへの声による入力
• ゲーム
• など

（執筆時点でのサポート状況です。最新状況はリンク先をご確認ください。）

音声認識を使ってみる

// 音声認識機能
var recognition;

// 音声認識中か否かのフラグ
var nowRecognition = false;

// 音声認識を開始するメソッド
function start () {
    // 音声認識のインスタンスを作成します
    recognition = new webkitSpeechRecognition();
    // 利用言語を選択します（Chromeでは日本語も使えます）
    recognition.lang = document.querySelector('#select1').value; // en-US or ja-JP
    // 音声認識が終了したら結果を取り出すためのコールバック
    recognition.onresult = function (e) {
        if (e.results.length > 0) {
            var value = e.results[0][0].transcript;
            document.querySelector('#area1').textContent = value;
        }
    };
    // 音声認識開始
    recognition.start();
    nowRecognition = true;
};

// 音声認識を停止するメソッド
function stop () {
    recognition.stop();
    nowRecognition = false;
}

// ボタンアクションを定義
document.querySelector('#btn1').onclick = function () {
    
    // unsupported.
    if (!'webkitSpeechRecognition' in window) {
        alert('Web Speech API には未対応です.');
        return;
    }
    
    if (nowRecognition) {
        // 音声認識終了
        stop();
        this.value = '音声認識を始める';
        this.className = '';
    } else {
        // 音声認識開始
        start();
        this.value = '音声認識を止める';
        this.className = 'select';
    }
}

音声認識を使ってみる（継続的な認識を行う）

// 音声認識機能
var recognition;
var nowRecognition = false;

// 確定した結果を表示する場所
var $finalSpan = document.querySelector('#final_span');

// 音声認識中の不確かな情報を表示する場所
var $interimSpan = document.querySelector('#interim_span');

// 音声認識開始のメソッド
function start () {
    recognition = new webkitSpeechRecognition();
    recognition.lang = document.querySelector('#select2').value;
    // 以下2点がポイント！！
    // 継続的に処理を行い、不確かな情報も取得可能とする.
    recognition.continuous = true;
    recognition.interimResults = true;
    // 音声結果を取得するコールバック
    recognition.onresult = function (e) {
        var finalText = '';
        var interimText = '';
        for (var i = 0; i < e.results.length; i++) {
            // isFinalがtrueの場合は確定した内容
            // 仕様書では「final」という変数名だが、Chromeでは「isFinal」のようです.
            if (e.results[i].isFinal) {
                finalText += e.results[i][0].transcript;
            } else {
                interimText += e.results[i][0].transcript;
            }
        }
        $interimSpan.textContent = interimText;
        $finalSpan.textContent = finalText;
    };
    recognition.start();
    nowRecognition = true;
};

// 音声認識を止めるメソッド
function stop () {
    recognition.stop();
    nowRecognition = false;
}

// ボタンアクションの定義
document.querySelector('#btn2').onclick = function () {
    
    // unsupported.
    if (!'webkitSpeechRecognition' in window) {
        alert('Web Speech API には未対応です.');
        return;
    }
    
    if (nowRecognition) {
        stop();
        this.value = '音声認識を継続的に行う';
        this.className = '';
    } else {
        start();
        this.value = '音声認識を止める';
        this.className = 'select';
    }
}

テキストスピーチ

document.querySelector('#btn3').onclick = function () {

    // unsupported.
    if (!'SpeechSynthesisUtterance' in window) {
        alert('Web Speech API には未対応です.');
        return;
    }

    // 話すための機能をインスタンス化して、色々と値を設定します.
    var msg = new SpeechSynthesisUtterance();
    msg.volume = 1;
    msg.rate = 1;
    msg.pitch = 2;
    msg.text = document.querySelector('#text1').value; // しゃべる内容
    msg.lang = document.querySelector('#selectVoice').value; // en-US or ja-UP

    // 終了した時の処理
    msg.onend = function (event) {
        console.log('speech end. time=' + event.elapsedTime + 's');
    }

    // テキストスピーチ開始
    speechSynthesis.speak(msg);
};

最後に

Special Thanks to http://flic.kr/p/kpTpJ6

目次

チュートリアル：HTML AudioのキャプチャをストリーミングでNode.JSに送信する（ブラウザエクステンションは使わない）

[原題]Tutorial: HTML Audio Capture streaming to Node.js (no browser extensions)

CSSでザ・シプソンズ

[原題]The Simpsons in CSS

HTTP APIデザインガイド

[原題] HTTP API Design Guide

HTML5 Canvasでパーティクルを実装する

[原題] Creating Particles in HTML5 Canvas

JSONを用いてSassとJavaScriptでデータを共有する

[原題] Sharing Data Between Sass and JavaScript with JSON

(function (window, document, undefined) {})(window, document);が意味することとは！？

[原題] What (function (window, document, undefined) {})(window, document); really means

その他にも

HTTPステータスコード定義

最後に

目次

ブラウザのレンダリングの仕組み

• [1]
  読み込んだHTMLを解析してDOMツリーを生成します。解析方法の詳細は解析-概要 | HTML5Rocksをご参照ください。
• [2]
  読み込んだCSSも解析してCSSの構造体を生成します。この構造体の呼び名はいくつかありますが、ここではCSSOM（CSS Object Model）と呼ぶこととします。CSSの解析の詳細はCSSの解析 | HTML5Rocksをご参照ください。
• [3]
  DOMツリーとCSSOMから画面表示に必要なレンダーツリー（Render Tree）を構築します。レンダーツリーにはDOMの構造と装飾の両方の情報が含まれます。ここでレンダーツリーとDOMツリーの違いは何かと思うかもしれません。それは、DOMツリーには全てのDOMが格納されている一方で、レンダーツリーには表示する要素のみが格納される（headタグやdisplay:noneの要素は含まれない）ということです。この処理の詳細はレンダーツリーの構築 | HTML5 Rocksをご参照ください。
• [4]
  レイアウト（またはリフロー）ではレンダーツリーが持つ各DOM要素の位置を決定します。「レイアウト」という呼び方はWebkit系で「リフロー」という呼び方はGekko系から来る呼び方です。この処理の詳細はレイアウト | HTML5Rocksをご参照ください。
• [5]
  ペイントでは画面への描画処理を行います。この処理の結果ようやく画面に表示されます。この処理の詳細は描画 | HTML5Rocksをご参照ください。

どのような時にレンダリング処理が発生するのか

JavaScriptで要素のスタイルを変更する

// 余白を変更する
document.body.style.padding = '30px'; // Layout と Paint が発生

// ボーダーを変更する
document.body.style.border = '10px solid red'; // Layout と Paint が発生

// フォント色を変更する
document.body.style.color = 'blue'; // paint のみ発生

// 背景色を変更する
document.body.style.backgroundColor = '#fad'; // paint のみ発生

JavaScriptからDOMを追加する

// ul以下にliを追加する
var ul = document.querySelector('ul');
var li = document.createElement('li');
li.textContent = 'JavaScriptで挿入したli要素';
ul.appendChild(li);

ユーザー操作

• スクロールする
• ウインドウのサイズを変更する
• :hover要素などにマウスオーバーしてスタイルが切り替わる
• など

ブラウザは頭が良い

function changePosition () {
    var icon = document.querySelector('.icon');
    icon.style.top  = '10px';
    icon.style.top  = '20px';
    icon.style.top  = '30px';
    icon.style.left = '100px';
}

ブラウザのレンダリング最適化を壊さないJavaScript実装

• offsetTop/Left/Width/Height
• scrollTop/Left/Width/Height
• getComputedStyle

var div = document.querySelector('div');
for (var i = 0; i < 100; i++) {
    // offsetLeftを参照するたびに、スタイルの再計算が強制的に行われる.
    var offsetLeft = div.offsetLeft;
    div.style.left = (offsetLeft + 1) + 'px';
}

var div = document.querySelector('div');
var offsetLeft = div.offsetLeft;
for (var i = 0; i < 100; i++) {
    offsetLeft += 1;
    div.style.left = offsetLeft + 'px';
}

最後に

Special Thanks to https://flic.kr/p/4fs1WK

目次

Windows環境でDirectWriteのサポート

dialogエレメントのサポート

1.dialogの定義と表示と非表示

<!--
    dialog要素でdialogを定義します.
    dialog要素はレンダリングされません.
--><dialog id="dialog">こんにちはdialogエレメントです。</dialog><script>
// showメソッドとcloseメソッドで表示非表示を制御します.
var dialog = document.querySelector('#dialog');
dialog.show();
setTimeout(function () {
    dialog.close();
}, 5000);
</script>

2.dialogにスタイルを割り当てる

<!--CSSでスタイルを指定することができます--><style>
dialog {
    background-color: skyblue;
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,.85);
    padding: 10px 20px;
}</style><dialog id="dialog">こんにちはdialogエレメントです。</dialog><script>
var dialog = document.querySelector('#dialog');
dialog.show();</script>

3.モーダルダイアログとして表示する

<dialog id="dialog">こんにちはdialogエレメントです。</dialog><script>
var dialog = document.querySelector('#dialog');
// showModalメソッドを使うと、モーダルダイアログとして表示できる.
dialog.showModal();
</script>

• モーダルの背景色を指定する
• ダイアログから値を返す
• Formとの連携

その他のリリース内容

Web Cryptography APIがデフォルトで有効に

サブピクセルフォントスケーリングのサポート

タッチイベントの改善

zoom-inとzoom-outのノンプレフィックス化

CUPコア数の把握

console.log(navigator.hardwareConcurrency);
// 4

ユーザーの優先言語

console.log(navigator.languages);
// ["ja", "en-US", "en"]

CSS Shapes Module

NPAPIの非推奨引き続き

Windowsにおけるmonospaceのデフォルト変更

最後に

Special Thanks to https://flic.kr/p/7fADmS

目次

jQueryのカスタムビルド

この手順説明は、執筆時点で最新のjQuery2.1.1での説明となります。

jQueryを自分でビルドする

1. Githubからダウンロード

$ git clone git://github.com/jquery/jquery.git

$ cd jquery

2. ビルドを行う

$ npm run build

jQueryのカスタムビルドを行う

削減できる機能一覧

カスタムビルドを実行する

$ grunt custom:-ajax

$ grunt custom:-ajax compare_size
Running "custom:-ajax" (custom) task
Creating custom build...


Running "build:all:*:-ajax" (build) task
-ajax
-ajax/jsonp
-ajax/load
-ajax/parseJSON
-ajax/parseXML
-ajax/script
-ajax/var/nonce
-ajax/var/rquery
-ajax/xhr
-manipulation/_evalUrl
-event/ajax
>> File 'dist/jquery.js' created.

Running "uglify:all" (uglify) task
File dist/jquery.min.map created (source map).
File dist/jquery.min.js created: 215.98 kB → 74.9 kB

Running "dist" task

Running "compare_size:files" (compare_size) task
   raw     gz Sizes                                                            
215984  63685 dist/jquery.js                                                   
 74896  25789 dist/jquery.min.js                                               

   raw     gz Compared to master @ 995f70777ac6c0f988a44807ef1399e73937b2ee    
+23698  +6191 dist/jquery.js                                                   
 +7578  +2147 dist/jquery.min.js                                               

   raw     gz Compared to last run                                             
+23698  +6191 dist/jquery.js                                                   
 +7578  +2147 dist/jquery.min.js                                               

Saved as: master

Done, without errors.

各モジュールのダイエット効果を見てみる

単位はBytesです。

カスタムビルドのサンプル

# ajax/script, ajax/jsonpはあまり使わない
# cssはclassNameでやり取りするか、elm.styles.xxxを使う
# deprecatedは使わない
# effectsは今風にcss3アニメーションを使う
# event/aliasはやめて、onとoffに統一
# wrapはあまりつかない
# querySelectorAllでできる範囲で十分

$ grunt custom:-ajax/script,-ajax/jsonp,-css,-deprecated,-effects,-event/alias,-wrap,-sizzle compare_size

## 出力は一部省略 ## 
Running "compare_size:files" (compare_size) task
   raw     gz Sizes                                                            
139871  42005 dist/jquery.js                                                   
 48596  17118 dist/jquery.min.js   

最後に

Special Thanks to https://flic.kr/p/5aDA79

目次

Polymerとは何か

Polymerが扱う新技術

• Web Components
• データバインディング
• Web Animations
• Pointer Events

Web Components

データバインディング

Web Animations

Pointer Events

Polymerのアーキテクト

Red Layer

赤い層は上記で触れたPolymerの利用している技術要素です。それらをまだ未実装のブラウザでも使えるように、platform.jsがあり、新技術のポリフィル（polyfill = ブラウザに実装されていない技術をJavaScriptとかで擬似的に再現すること）として機能します。

Yellow Layer

Polymerにおける便利な機能を提供しています。これには各種技術をどのように組み合わせて使うべきかに対する制作者の意見/考えが含まれています。例えばCustom Elementにはデータバインディングの技術を組み合わせると使いやすい、とかです。データバインディング、独自のシンタックス、変更の監視など、アプリケーションをより楽に作る上で必要なことが実装されています。

Green Layer

Polymerで作成された機能やUI要素が含まれます。ツールバーやボタンといった表示要素や、core-ajaxといった機能的なものも存在します。

Blue Layer

Polymerを用いたサンプルアプリです。図内のpica以外にも計算機やTOPEKAなどのサンプルが存在します。

Polymerを使ってサンプルアプリを作ってみる

# ダウンロードしたフォルダに移動
cd polymer-tutorial-master

# Python 2.xの場合
python -m SimpleHTTPServer 

#Python 3.xの場合
python -m http.server 

http://localhost:8000/finished/

<html><head><!--新技術を使うためのポリフィル--><script src="../components/platform/platform.js"></script><!--ヘッダーパネルのインポート--><link rel="import" href="../components/core-header-panel/core-header-panel.html"><!--ツールバーのインポート--><link rel="import" href="../components/core-toolbar/core-toolbar.html"><!--タブのインポート--><link rel="import" href="../components/paper-tabs/paper-tabs.html"><!--表示する要素の装飾をカスタマイズします--><style>
            html,body {
              height: 100%;
              margin: 0;
              background-color: #E5E5E5;
              font-family: 'RobotoDraft', sans-serif;
            }        
            core-header-panel {
              height: 100%;
              overflow: auto;
              -webkit-overflow-scrolling: touch; 
            }
            core-toolbar {
              background: #03a9f4;
              color: white;
            }
            #tabs {
              width: 100%;
              margin: 0;
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
            }</style></head><!--unresolvedを付けることで表示モジュール準備中の状態は表示しない--><body unresolved><!--画面上部にツールバーを作り、その中にタブを配置した例--><core-header-panel><core-toolbar><paper-tabs id="tabs" selected="all" self-end><paper-tab name="all">ALL</paper-tab><paper-tab name="favorites">FAVORITES</paper-tab></paper-tabs></core-toolbar></core-header-panel><!--タブ切り替わりのイベントをキャッチする処理の例--><script>
          var tabs = document.querySelector('paper-tabs');
          tabs.addEventListener('core-select', function() {
            console.log("Selected: " + tabs.selected);
          });</script></body></html>

Polymerを拡張する

<div><img src="path/to/image.png"/><p>Yohei Munesada</p></div>

<ym-avatar src="path/to/avatar.png" credit="Yohei Munesada"></ym-avatar>

<!--ファイル名：ym-avatar.html--><!--独自タグを定義するために、polymer.htmlを読み込みます--><link rel="import" href="./components/polymer/polymer.html"><!--polymer-elementタグを使って、独自タグを定義します--><polymer-element name="ym-avatar" attributes="src credit"><!--templateを用いて中身を定義します--><template><!--ここで定義されたスタイルは、この要素にのみ適用されます--><style>
        div {
            width: 30%;
            margin: 10px auto;
            background-color: rgba(255,255,0,.3);
            border-radius: 8px;
            padding: 10px;
            box-shadow: 2px 2px 2px rgba(0,0,0,.25);
        }
        img {
            width: 100%;
        }
        p {
            text-align: center;
        }</style><!--中身の構造を定義します--><div><img src="{{src}}"/><p>{{credit}}</p></div></template><!--カスタムタグを定義します--><script>
        Polymer('ym-avatar');</script></polymer-element>

<!doctype html><html><head><!--ポリフィルを読み込み、各種ブラウザ対応します--><script src="../components/platform/platform.js"></script><!--上で定義した独自タグを読み込みます--><link rel="import" href="./ym-avatar.html"></head><body unresolved touch-action="auto"><!--独自タグを利用します--><ym-avatar src="../images/avatar-01.svg" credit="Yohei Munesada"></ym-avatar></body></html>

余談：PolymerとMaterial Design

How is Polymer related to material design?

Polymer is the embodiment of material design for the web. The Polymer team works closely with the design teams behind material design. In fact, Polymer played a key role in material design’s development: it was used to quickly prototype and iterate on design concepts. The material design components are still a work in progress, but will mature over the coming months.

（日本語訳）
PolymerとMaterial Designとの関係は？
PolymerはWebにおいてMaterial Designを実現しているライブラリです。 PolymerチームはMaterial Designのデザインチームの近くで働いていて、実際にPolymerはMaterial Designの開発において重要な役割を果たしています。 Polymerは素早いプロトタイプとして利用され、デザインコンセプトを繰り返し適用しています。 Material Designを用いたコンポーネントは現在進行中ですが、数ヶ月で成熟したものとなるでしょう。

最後に

JJUG納涼会

LTしてきた内容と目的

• 1秒の狂いもなく5分間ジャストで終わる
• プレゼンする限りは聴衆に最大限貢献する
• トークスクリプトを書く
• プレゼンの練習に時間を費やす
• プレゼンのトークを鍛える
• 1分間に350文字をハキハキと話せるようになる
• プレゼンで会場の雰囲気を作る
• など・・・

最後に

目次

Chromeベータ版の入手、新機能の動作設定

ユーザー管理機能

<picture>の追加

<picture><source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x"><source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x"><img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" ></picture>

新しいJavaScriptの仕様を追加サポート

• とても要望が多かったMapとSetがとうとう実装されたようです。これらのデータ構造を用いることで、より簡単により合理的にプログラミングを行うことができます。
• イテレーター（Iterator）がサポートされました。それを用いることで配列や文字列といった連続的なデータをイテレーションできるだけでなく、MapやSetもイテレーションできるようになりました（詳細）。
• Symbolがサポートされました。Symbolは数値や文字列といったプリミティブ型データのラッパークラスで、唯一で普遍な（immutable）なオブジェクトで、オブジェクトのプロパティなどに利用することができます。
• Math.signやMath.log10といった機能がMathオブジェクトに追加され、同様の機能を各実装者が個別に実装する必要がなくなりました。サポートされた機能一覧はこちらから確認することができます。

その他のアップデート項目

• Network Information（NetInfo））APIが利用できるようになりました。Android、iOS、ChromeOSにおいて、navigator.connection.typeという簡単なコードで現在のネットワーク種別（Wifiとか）を認識することができます。これを用いることでWifi時のみデータを同期するなどの動きを実現することが可能です。
• Screen Orientation APIがサポートされました。これを用いることで横向き（landscape）や縦向き（portrait）に合わせた画面表示ができる他に、画面の向きを固定することできます。
• CSSのimage-renderingにおいてpixelatedプロパティがサポートされました。image-renderingを用いることで画像をオリジナルとは異なるサイズで描画する際に、どのようなアルゴリズムで拡大／縮小するかを指定することができます。pixelatedのサンプルがGithubに用意されています。
• Encode APIがサポートされバイナリーデータのエンコード／デコードがChromeネイティブで行うことができるようになりました。例えばTextDecoderを用いてArrayBufferから文字列への変換ができるようです。
• 新しいFileインターフェースがサポートされ、Fileの新規作成ができたり、Blobと同じようなインターフェースでFileを扱えるようになりました。
  

最後に

Special Thanks to https://flic.kr/p/aBtMu5

目次

Map

var data = {
    name: 'Yohei',
    sex: 'male',
    contry: 'JP'
};

// Mapオブジェクトの作成
var map = new Map([
    ['one', 'My key is a string.'],
    ['1', 'My key is also a string'],
    [1, 'My key is a number'],
    [document.querySelector('#log'), 'My key is an object']
]);

// Mapの生成（初期値なし）
var map = new Map();

// Mapの生成（初期値あり）
// 2次元配列で値を指定するんですね...
var map = new Map([
    ['one', 'My key is a string.'],
    [1, 'My key is a number']
]);

// 値の取得
map.get('one'); // => "My key is a string."

// 値の設定
map.set('two', 'aaa');

// 値の設定（キーが同じものは上書きされます）
map.set('two', 'aaa');
map.set('two', 'bbb');
map.get('two'); // =>bbb

// 格納したデータ数
map.size; // => 3

// 存在確認
map.has('one'); // => true

// データの削除（1つ）
map.delete('one');

// データの削除（全部）
map.clear();

// keyを全部取得
var keys = map.keys(); // => MapIteratorが取得できる
// for of 構文はIteratorを回すことができる
for (var key of keys) {
    console.debug(key);
}

// 値の取得（values）
var values = map.values(); // => MapIteratorが取得できる
for (var value of values) {
    console.debug(value); // => "My key is a string."　とか
}

// 値の取得（entries）
var entries = map.entries();
for (var entry of entries) {
    console.debug(entry); // => ["one", "My key is a string."]　とか
}

// 値の取得（forEach）
map.forEach(function (value, key, map) {
    console.debug(value, key, map); // => My key is a string. one Map {} 　とか
});

Set

// 初期化
var set = new Set();

// 値付きの初期化
// 数値、文字列、関数、など色々と入る.
var set = new Set([1, 'one', function (){}, document.body]);

// 値の追加
set.add(2);

// 値の存在確認
set.has('one'); // => true

// 値の削除
set.delete(1);

// 格納してあるデータ数
set.size; // => 4

// 値の取得（values）
for (var value of set.values()) {
    console.debug(value); // => 'one'、など
}

// 値の取得（entities）
for (var entry of set.entries()) {
    console.debug(entry); // => ['one', 'one']、など
}

// 値の取得（forEach）
set.forEach(function (value1, value2, set) {
    console.debug(value1, value2, set); // => one one Set
});

getDataFromAPI(function (results) {
    var set = new Set();
    results.forEach(function (result) {
        set.add(result.userId);
    });

    var numOfUser = set.size;
    alert('ユニークユーザー数は' + numOfUser + 'です');
});

同一性の定義

1. ReturnIfAbrupt(x).
2. ReturnIfAbrupt(y).
3. If Type(x) is different from Type(y), return false.
4. If Type(x) is Undefined, return true.
5. If Type(x) is Null, return true.
6. If Type(x) is Number, then
  6.1. If x is NaN and y is NaN, return true.
  6.2. If x is +0 and y is -0, return true.
  6.3. If x is -0 and y is +0, return true.
  6.4. If x is the same Number value as y, return true.
  6.5. Return false.
7. If Type(x) is String, then
  7.1. If x and y are exactly the same sequence of code units (same length and same code units in corresponding positions) return true; otherwise, return false.
8. If Type(x) is Boolean, then
  8.1. If x and y are both true or both false, then return true; otherwise, return false.
9. If Type(x) is Symbol, then
  9.1. If x and y are both the same Symbol value, then return true; otherwise, return false.
10. Return true if x and y are the same Object value. Otherwise, return false.

参考資料

最後に

Material Design と HTML5

• Material Designについて
• Polymerというライブラリについて
• Polymerを使ってMaterial DesignをWebで実現する実装について
• Paper Elementの実装の味見

プレゼンについての余談

最後に

Special Thanks to https://flic.kr/p/6MsR3

目次

Chromeベータ版の入手、新機能の動作設定

ECMAScript6のGenerator

// フィボナッチ数列を算出するジェネレーター
var fibonacci = function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
}

// ジェネレーターから値を1件ずつ取り出す
var f = new fibonacci();
for (var n of f) {
    if (n > 1000)
        break;
    console.debug(n);
}

// またはジェネレーターのインスタンスはイテレーターなので、
// next関数を使うこともできます
var f = new fibonacci();
var time = 10;
while (time--) {
    console.debug(f.next().value);
}

Web Animation Playback Cntrol

// アニメーション作成
var $elm = document.querySelector('h1');
var player = $elm.animate([
  {transform: 'rotate(-45deg) scale(1)'},
  {transform: 'rotate(0) scale(2)'},
  {transform: 'rotate(45deg) scale(1)'},
], {
  duration: 1000,
  iterations: 3,
  easing: 'ease-in-out',
  direction: 'alternate',
  fill: 'both',
});

// プレイバックコントロール
player.play();
player.pause();
player.reverse();

Web Application Manifest

// HTML<link rel="manifest" href="manifest.json">

// manifest.json
{
  "name": "Web Application Manifest Sample",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    // 解像度ごとの指定・・・
  ],
  "start_url": "index.html",
  "display": "standalone",
  "orientation": "landscape"
}

その他のアップデート

Beacon API

navigator.sendBeacon('http://localhost/log', 'Sent by a beacon!');

Scroll Offset

XMLHttpRequestのProgressイベント内の変数名変更

最後に