2015/02/02更新

[フロントエンド] Chrome41βのリリース内容まとめ。Template文字、let/const、image-rendering、DEVツール新機能など

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
1月22日にChromeβ版のversion41がリリースされました。このリリースでも楽しい機能がいっぱいリリースされたので、ブログで紹介してみたいと思います。

画像

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




目次




Chromeベータ版の入手

Chromeのβ版は、以下から入手できます。
https://www.google.com/intl/en/chrome/browser/beta.html

ベータ版は安定版より約1ヶ月早く新機能を試せるので、他の人よりも先にうはうはすることができます(笑)。そしてさらにうはうはしたい人は、Chromeの開発版を使うといいかもしれません。



ES6:Template文字列

ES6のテンプレート文字列(Template Literals)を使えば、文字列の構築が断然楽になります。従来では、以下のような文字列連結をしていましたが、
// 従来
var name = 'Yohei';
var age  = 29;
var text = 'He is ' + name + ' and his age is ' + age + '.';
ES6の機能を使えば、以下のように実装することができます。
// Template文字列を使った場合
var name = 'Yohei';
var age  = 29;
var text = `He is ${name} and his age is ${age}.`;
スッキリしてますね!ここでのポイントは文字列の囲いに`(バッククォート)を用いて、変数に${}を用いる点です。PHPなどでは当たり前のこの機能が、JavaScriptでも使えるようになるのでとても便利です。

${}の中には処理を記述することもできます。
var age = 29;
var text = `彼は${Math.floor(age / 10) * 10}代です`;
// 彼は20代です

また、複数行にまたがって文字列を構築することもできます。
// 複数行で文字列を構築する
var s = `a
    b
    c`;
assert(s === 'a\n    b\n    c');
さらにタグ機能というものも存在します。例えば以下のようにHTMLエスケープを行うことができます。
// 引用:http://updates.html5rocks.com/2015/01/ES6-Template-Strings
// HTMLエスケープ用の処理
function escape(s) {
    return s.replace(/&/g, "&")
            .replace(/</g, "<")
            .replace(/>/g, ">")
            .replace(/'/g, "'")
            .replace(/"/g, """);
}
// タグ機能の実装
function html(pieces) {
    var result = pieces[0];
    var substitutions = [].slice.call(arguments, 1); 
    for (var i = 0; i < substitutions.length; ++i) {
        result += escape(substitutions[i]) + pieces[i + 1];
    }
    return result;
}

// 利用してみる
var name = '<script>Yohei</script>';
var snipet = html`<b>his name is ${name}</b>`;
console.log(snipet);
// =>  <b>his name is &lt;script&gt;Yohei&lt;/script&gt;</b>
Template文字列はなかなか便利そうですね。さらに詳しい情報は、HTML5Rocks(英語)Understanding ES6(英語)をご確認ください。



ES6:letとconst

ECMAScript6で定義されているletconstも、Chrome41から利用できるようです。ただし今のところは'use strict'を記載するstrictモードでの利用に制限されています。
// letの例
function func () {
    'use strict';
    let a = 'AAA';
    if (true) {
        // ifブロック内でのみ有効
        let a = 'aaa';
        console.log(a); // => aaa
    }
    console.log(a); // => AAA
}

// constの例
function func2 () {
    'use strict';
    const favorite = 'music';
    try {
        // 定数への2回目の代入はダメ
        favorite = 'baseball';
    } catch (e) {
        console.error(e.message); // =< Assignment to constant variable.
    }
}
github.com/GoogleChromeでは上記のサンプルコードやデモを確認することができます。
プログラムレベルでスコープの違う変数がサポートされたり、定数がサポートされると、いろいろとありがたいです。



ES6:数値表現

以下のようなES6の数値表現も、version41からサポートされました。
// 引用:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals
// 2進数
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
// 8進数
var n = 0O755; // 493
var m = 0o644; // 420
// 16進数
var hex = 0xFFFFFFFFFFFFFFFFF; // 295147905179352830000



CSS:image-rendering: pixelated

(以下画像はhttp://updates.html5rocks.com/2015/01/pixelatedから引用しています)


画像を拡大して表示する場合のレンダリング方法を指定することができるようになりました。2px × 2pxの以下のような画像を

何も指定せずに100px × 100pxで表示しようとすると、以下のようにぼやけてしまいます。

しかし、CSSでimage-rendering: pixelatedを指定すると、
<img
     style="image-rendering: pixelated;"
     width="100" height="100"
     src="./sample.png"%gt;
以下のように綺麗に表示されます。


上記のような幾何学的な模様はなかなかないじゃないかと思うかもしれませんが、例えばQRコードの表示を綺麗にできたりと、意外と利用場面がありそうです。この機能の詳細は、HTML5Rocks(英語)を参照してください。



CSS:メディアクエリのany-pointerとany-hover

Media Queryで、any-pointerany-hoverがサポートされました。pointerhoverの機能に似ていますが、今回の2つはデバイスに接続されたすべての入力端末を対象にして判定できます。例えばマウスが接続されたタブレットを使っている場合には、any-pointerの条件が満たされるようです。具体的な使い方は、以下のように実装します。
@media (any-pointer: none), (any-pointer: coarse) {
    .sized {
      font-size: 1.5em;
    }
}
サンプルコードとデモはhttps://github.com/GoogleChrome/samples/tree/gh-pages/media-hover-pointerをご確認ください。



Web Audio API

Web Audio APIについて、以下2点がサポート追加されました。
  • 開発者によって一時的にAudioContextをサスペンドできるようになったようです。これによりバッテリーの消費を改善したりすることができます。
  • StereoPannerNodeがサポートされました。これにより左右で均等になるように、入力の左右パニングを調整することができるようです(詳しくないので間違っていたらすみません)。
Web Audio APIについての更新詳細は、WebAudio suspend/resume - Chromium Dashboard(英語)WebAudio StereoPanelNode - Chromium Dashboard(英語)をご参照ください。



SHA-1を徐々に減らす対応

Gradually sunsetting SHA-1に基づいて、2017年1月以降も有効なSHA-1を用いた証明書を利用しているHTTPSサイトは、"affirmatively insecure"(以下のスクリーンショットの状態)で表示されます。




DEVツール:Web Animationのデバッグ

Chrome36からWebAnimationが追加されましたが、今回のリリースではアニメーションのデバッグをよりしやすくするために、以下のようなUIのDEVツールが追加されました。


例えば以下のアニメーションをChrome41+のDEVツールで見ると、再現スピードをコントロールすることができます。
「▶︎」ボタンを押さないと上記のUIが出ないことに気づくのに3分くらいかかってしまいましたが、スロー再生できるのはなかなかありがたいです。



DEVツール:Service Workerのキャッシュ状況を確認する

Chrome40から利用できるようになったService Workerですが、今までだとService Workerのキャッシュ状況をconsole.logとかで吐き出して確認する必要がありました。Chrome41からはchrome://serviceworker-internalsで確認することができます。



参考リンク

Chrome41の機能を知るために、以下のページを参照しました。ありがとうございます。

(各機能についての詳細リンクは、記事内で随時記載したものもあります)


- Chrome41 Beta | Chromium Blog(英語)

- Chromium Dashboard(英語)



最後に

今回もいろいろと学ぶことが多くて、ブログを書いていて楽しかったです。ChromeやFirefoxなどのリリースを追っているといろいろと機能が理解できていいなぁと感じています。またこれからもWebについて楽しい機能をたくさん紹介できたらと思います。

最後になりますが本ブログでは、これからもフロントエンドを中心に情報を発信しています。気になった方はぜひ、RSSTwitterをフォローして頂けますと幸いです ^ ^。

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。