Microsoft Edge最新情報

Microsoft Edge最新情報

Windows 10 Creators UpdateのJavaScript/CSS関連の新機能

2017年7月31日

Windows 10 Creators UpdateでEdgeはどのように進化したのか? CSS/JavaScriptに関する新機能や新搭載のAPIを、開発者目線で紹介する。

尾崎 義尚
  • このエントリーをはてなブックマークに追加

 2017年4月にWindows 10の三度目の大幅アップデートであるCreators Update(1703:ビルド番号15063)が提供された。数カ月たっているので、すでに多くの読者のWindows 10にはアップデートが適用されているはずである。

 前回のAnniversary Update(1607:ビルド番号14393)からの変更点は、Changelogのページ(英語)で確認できる。そのページの冒頭にある「New Microsoft Edge features(新しいMicrosoft Edgeの機能)」は、Microsoft Edge(以下Edge)のUIや機能に関する変更点だが本稿では省略するので、マイクロソフトの物江さんが解説している記事を参考にしてほしい。

 ページの中盤にある「New web platform features(新しいWebプラットフォーム機能)」に記載されているのが、CSSやHTML(JavaScriptや新搭載のAPI)に関する新機能である。本稿ではこの内容を掘り下げて紹介する。本稿のサンプルコードはこちら(GitHub - yoshioms/edge15samples)で参照・ダウンロードできる。

CSSに関する新機能

 EdgeでサポートされるようになったCSSの新機能についてコードを見ていこう。

CSSカスタムプロパティ

 CSSは開発者から見ると不便な言語だ。依存関係が分かりにくいし、階層や適用範囲も設計者に委ねられている。そんな数多くある不満の一つである「変数が使えない」という問題が解消する。

 これまではCSSで変数が使えないために同じ記述を何カ所かでする必要があり、デザイン変更時に苦労することがあった。CSSカスタムプロパティがサポートされたことで、変更する可能性がある値を変数にして容易に変更することが可能になった。この機能は、以前はCSS変数CSS Variables)と呼ばれていたが、最終的にはCSSカスタムプロパティCSS Custom Properties)という名称になった。

 これにより、CSSの値を変数化して一括管理できるようになった。変数は、SCSSやSASSなどのプリプロセッサー言語でも使えていたが、CSSカスタムプロパティは事前にコンパイルすることなく、ブラウザーが直接解釈するため、レスポンシブで値が変わる場合にも対応できるし、JavaScriptで変数の値を変更することもできる。

 CSSカスタムプロパティの記述方法を見ていこう。まずは変数宣言を行う。

CSS
:root {
  --full-width: 300px;
  --accent-color: lightgreen;
  --text-padding: 10px 15px 20px 10px;
}
リスト1 CSSカスタムプロパティの変数宣言

 変数の宣言は--をプレフィックスとして記述する。リスト1では--accent-colorなどの変数が宣言されている。

 さらに、その変数の値を上書きすることもできる。

CSS
div {
  --accent-color: yellow;
}

span {
  display: block;
  /* --accent-colorプロパティの指定なし */
}
リスト2 CSSカスタムプロパティとして宣言した変数の上書き

 リスト2では、<div>タグだけ--accent-color変数の値を上書きしている。

 リスト1とリスト2で宣言した変数を使ってみよう(リスト3)。

CSS
.box-full {
  width: var(--full-width);
  padding: var(--text-padding);
  background-color: var(--accent-color);
}
リスト3 CSSカスタムプロパティとして宣言した変数の利用

 変数の展開にはvar関数を使う。リスト2に示したとおり、--text-paddingのように複合値も展開できる。

 background-colorプロパティに設定されている--accent-color変数は<div>タグだけ上書きしたため、<div>タグかそれ以外かで違う値が指定されることになる。

 値だけではなくcalc関数を使って計算も可能だ。リスト4は、--full-width変数と数値によるさまざまな計算の結果値を、calc関数を使ってプロパティに指定している例である。

CSS
.box {
  position: absolute;
}

.box1 {
  width: calc(var(--full-width) / 3);
  left: calc(var(--full-width) / 3 * 1);
  background-color: pink;
}

.box2 {
  width: calc(var(--full-width) / 3);
  left: calc(var(--full-width) / 3 * 2);
  background-color: green;
}
リスト4 calc関数を使うと計算結果をプロパティ値にできる

 以上のCSSコードを以下のHTMLソースに適用してみよう(リスト5)。

HTML
<div class="box-full">Full</div>
<span class="box-full">Full Span</span>
<div id="boxes">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
リスト5 

box-fullクラスを指定した<div>タグと<span>タグがある。また、box1クラスとbox2クラスはcalc関数で計算された幅と位置が指定されている。

 表示した結果を見てみよう(図1)。

CSSカスタムプロパティの表示
図1 CSSカスタムプロパティを利用した結果

 box-fullクラスを適用した<div>要素は上書きされた「yellow」により黄色が適用されているが、<span>rootで定義された「lightgreen」が適用されている。box1box2widthleftは、calc関数の計算結果が適用されている。

 変数の値は、JavaScriptで変更もできる。例えばリスト7では、JavaScriptで--accent-color変数の値を「red」に変更している。

JavaScript
document.documentElement.style.setProperty('--accent-color', 'red');
リスト7 JavaScriptによるCSSカスタムプロパティとして宣言した変数の上書き

 この結果を表示してみよう。

JavaScriptでCSSカスタムプロパティの変更
図2 JavaScriptによる変数上書きの結果

 図2ではrootの色を変更しているため、全体の--accent-color変数に影響する。しかし<div>タグの--accent-color変数は前述のとおり上書きされるので、<span>タグのみが変更されている。

 なお、EdgeのTest DriveにCSSカスタムプロパティのデモ(図3)が提供されているので併せて確認してみてほしい。

図3 Test Driveのデモ

[Environment]の夜(左の画像)か昼(右の画像)かをクリックすると、背景を切り替わる

[Custom props modified]では、CSSカスタムプロパティで設定された値を確認できる

[Custom props modified]では、CSSカスタムプロパティで設定された値を確認できる

図3 Test Driveのデモ

CSS outline-offset

 outlineborderとほぼ同じ機能だが、borderは枠の広さでスペースが取られるが、outlineはレイアウトを変えることなく線を引けるという違いがある。

 例えば、Windowsエクスプローラーのツリービューを、Webページ上で作るのを想像してみてほしい。選択された階層が枠で囲まれるが、borderを使ってしまうと、枠の分のスペースが必要になるため、レイアウトの変更が発生する。一方、outlineを使うとレイアウトが変更されることなく線が引けるので、レイアウト崩れがない。outlineはこういった利用目的に向いている。

 outline自体はIE11からサポートされているが、今回は線を引く位置をオフセットで指定できるoutline-offsetが新たにサポートされた。まずはサンプルのCSSコードを見ていこう。

CSS
body {
  font-size: 24px;
}

.large {
  font-size: 30px;
}

.outline {
  outline: dotted 2px green;
  outline-offset: -7px;
 }

.border {
  border: 1px solid pink;
}

.border-and-outline {
  outline: dotted 2px green;
  outline-offset: 5px;
  border: 1px solid pink;
}
リスト8 outline-offsetのサンプルCSSコード

 outlineborderの両方を指定したborder-and-outlineクラスでは、outline-offset5pxを指定した。outlineだけを指定したoutlineクラスでは、レイアウトに影響しないことを確認するために-7pxを指定した。また、比較のためにborderだけを指定したborderクラスも定義している。

 これらのクラスを指定したHTMLソースを見ていこう。

HTML
<span class="border-and-outline">borderとou<span class="large">tli</span>ne</span>
<span class="border">つかって</span>
<span class="outline">outline</span>で装飾します。
リスト9  outline-offsetのサンプルHTMLコード

 border-and-outlineクラスを指定した<span>タグの中にlargeクラスを指定してフォントサイズを大きくした文字列を指定した。また、比較のためにborderクラスを指定した<span>タグとoutlineクラスを指定した<span>タグを記述した。

 リスト8のCSSコードを読み込んだHTMLソースのページ表示結果を表示してみる(図4)。

CSS outline-offsetで枠線を表示
図4 CSS outline-offsetを使ったサンプルの実行結果

borderは枠線の幅でレイアウトがずれるが、outlineはレイアウトに影響を与えずに枠を表示できる。

 このようにoutlineでは、レイアウトに影響を与えることなく枠線を表示でき、outline-offsetを使うと、境界領域からのオフセット値を指定して線を描画できる。オフセット値としてマイナス値も指定できる。

 ただしEdgeにおける現在の実装では、文字の周りを囲って枠を作っているようで、図4を見て気付いたと思うが、アルファベットとひらがなのように高さの違う文字が混ざると枠がガタガタになってしまうという問題がある。ChromeやFirefoxでは、きれいな矩形になっているので、同じような表示になるように修正されることを期待したい。

JavaScriptに関する新機能

 JavaScriptコードから呼び出せるAPIにもいくつかの機能が追加されている。

Element.closest

 Element.closestメソッドを使うと、ある要素の上位にある要素を取得できる。具体的なサンプルで説明しよう。

HTML
<article id="article1">
  <div id="div-1"></div>
</article>
<article id="article2">
  <div id="div-2"></div>
</article>
リスト10 Element.closestメソッドのサンプルHTMLコード

 リスト10では、<article>の下位階層にdiv-1div-2idが指定された<div>タグが定義されている。

 このHTMLソースに対して、以下のJavaScriptコードを実行してみる。

JavaScript
// article1が取得される
var div_1 = document.getElementById('div-1');
var article1 = div_1.closest("article"); 
console.log(article1);

// article2が取得される
var div_2 = document.getElementById('div-2');
var article2 = div_2.closest("article"); 
console.log(article2);
リスト11 closestで上位階層の要素を取得する

 リスト11では、どちらもarticleを取得しているが、それぞれ取得元の要素の上位にある<article>要素が取得される。結果の内容表示は割愛するので試してみてほしい(結果はF12開発者ツールの[コンソール]タブで確認する)。

 なお、ここではarticleという要素名を指定したが、セレクター記述で.クラス名#ID要素名 > 要素名などの指定も可能だ。

Navigator.hardwareConcurrency

 新しく追加されたhardwareConcurrency読み取り専用プロパティでは、ブラウザーが実行されているPCのコア数を取得できる。

 JavaScriptは、Web Workerなどマルチスレッドで処理できるようになっているが、スレッド数が多ければ多いほど動作が速くなるかというと、そういうわけではなくコンテキストスイッチが発生して、逆に遅くなることもある。そのような課題がある場合には、hardwareConcurrencyプロパティを活用して、PCごとに適切な数のスレッドを起動して処理するとよい。

Intersection Observer

 ここ数年、Webページのパフォーマンスは以前にもまして強く求められるようになった。画像の遅延読み込みやJavaScriptコードの遅延読み込みは実現できるようになったが、HTMLレンダリング部分については最適な手段が提供されていなかった。新しく搭載されたIntersection Observerは要素を指定して、表示されている領域を取得できるので、表示領域に応じてコンテンツの遅延読み込みを実装できる。

 Intersection Observerという名前はいまひとつ分かりにくいが、要素が交差(Intersection)するのを監視(Observe)するAPIだ。対象として指定した要素が、指定した要素と、指定した割合で交差したときに、コールバック処理を実行できる。具体例を示そう(リスト13/14/15/16)。

HTML
<div id="box"></div>
リスト13 対象となる要素を宣言する
CSS
#box {
  background-color: skyblue;
  top: 500px;
  height: 500px;
  width: 500px;
  position: relative;
}
リスト14 500px×500pxの要素として、スクロールして表示させるようにtopを500pxに指定している
JavaScript
var options = {
  threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
}
リスト15 optionに交差の割合を小数値で指定している。ここでは10%から10%ずつ指定している
JavaScript
let observer = new IntersectionObserver((entries) => {
  for (let entry of entries) {
    var time = entry.time;
    var intersectionRatio = entry.intersectionRatio;
    var rootBounds = entry.rootBounds;
    var boundingClientRect = entry.boundingClientRect;
    var intersectionRect = entry.intersectionRect;
  }
}, options);
var target = document.getElementById("box");
observer.observe(target);
リスト16 Intersection Observerのインスタンスとコールバックの実装をして、observeメソッドで「id=box」要素の監視を開始している

 上記のコードは説明を簡単にするため表示部分を省略しているので、完全なコードはCodePenのサンプルを参照してほしい。

 このコードの実行結果を見ていこう(図5)。

図5 Intersection Observerサンプルコードの実行結果

intersectionRatioは、およそ60%である0.6044が返されている。
rootBoundsは、rootを指定していないためdocumentになり、ウィンドウサイズと一緒になる。
boundingClientRectは、対象として指定したid=boxだ。背景が青の要素でスクロールするごとにtopbottomの位置が変わることが分かる。
intersectionRectは、bindingClientRectの中で表示されている領域である。

 boxの上部を500pxにしているため、スクロールしないと<div id="box">要素が表示できない。そのため、ページをスクロールして表示すると、表示割合に応じてIntersection Observerからコールバック関数が呼び出される。

 リスト16のコールバック関数の中身を見ると、いくつかのプロパティが返されているのが分かると思う。timeプロパティはイベント発生時のタイムスタンプなので省略するが、それ以外のプロパティは図で説明しよう。

Intersection Observerのコールバックで返される値
図6 コールバック関数で取得できる各プロパティ

rootBoundsは、交差のルートになる矩形(Rect)。
boundingClientRectは、監視対象の要素の矩形(Rect)。
intersectionRectは、交差した矩形(Rect)。
intersectionRatioは、intersectionRectの交差している比率(小数値)。

 このように、指定した要素の表示イベントがコールバックで返されるため、実際にブラウザーで表示が必要になった時に動的に読み込むことが可能になる。

Async関数

 非同期処理を、asyncawait)を使って容易に記述できる言語が増えているが、JavaScriptでも使えるようになった(リスト17)。

JavaScript
async function asyncFunc(url) {
  console.log("asyncFunc Start");

  console.log("First Start");
  await wait2Sec();
  console.log("First End");

  console.log("Second Start");
  await wait2Sec();
  console.log("Second End");

  console.log("asyncFunc End");
}

function wait2Sec() {
  return new Promise(resolve => setTimeout(() => resolve(), 2000));
}

asyncFunc();
console.log("asyncFunc Called");
リスト17 async functionで宣言された関数内にawait式を記述できる

awaitが書かれた処理の完了を待たずに呼び出し元に処理が返されるが、関数内の処理は継続される。

 このコードの実行結果を見てみよう(リスト18)。

コンソール
asyncFunc Start
First Start
asyncFunc Called
First End
Second Start
Second End
asyncFunc End
リスト18 async関数を呼び出して最初のawait式が呼び出されたところで、関数を抜けているが、その後も関数内の処理が継続されていることが分かる

 リスト18を見ると、asyncFunc関数が呼び出されて、awaitが記述されているwait2Sec関数が呼び出された後、処理の終了を待たずに関数を抜けて「asyncFunc Called」が出力されている。その後もasync関数内の処理は継続していて、「First End」「Second Start」と続いている。

新しく追加されたWeb API

WebRTC

 マイクロソフトは、これまでWebRTCには乗り気ではなく、より良い実装としてORTCObject RTC)を推進してきた。だが実際にはWebRTCがすでに多くのブラウザーに実装され、Webチャットなどで使われていたため、ORTCに移行させるのは難しかったようだ。

 Edgeがサポートしたことで、サポートされていない残りのメジャーなモダンブラウザーはSafariとIEだけだが、Safariは次期バージョンの11でサポートされる予定なので、もうすぐ全てのブラウザーで利用可能になる。

WebVR

 WebVRは、WebGL上に実装されたVRの仕様だが、現時点では安定した仕様ではない。マイクロソフトはWindowsでVRおよびMR(Mixed Reality)の実装を進めているため、Edgeでもサポートされたのだろう。

 執筆時点(2017年7月)ではEdgeとAndroid版のChromeのみが対応している。ネイティブアプリと比較すると、URLを開くだけで気軽にVR体験ができるのが魅力だ。BabylonJSのようなWebGLライブラリでアプリを開発できる。

 A-FrameSketchfabにデモが公開されているので、体験してみてほしい。

Payment Request API

 商品購入時のフォームは、クレジットカード番号や住所など、入力する内容がほとんど同じにもかかわらず、これまでサイトごとに開発が必要だった。Payment Request APIが実装されると購入フォームはブラウザーによって提供され、クレジットカードや住所の入力は不要になる。執筆時点(2017年7月)では、EdgeとAndroid版のChrome、デスクトップ版のChromeベータ(バージョン60)でしかサポートされていないため、このAPIに頼らず、従来のフォームを開発する必要がある。

 さっそくコードを見ていこう(リスト19/20/21/22/23/24)。

HTML
<button onclick="buy()">購入</button>
リスト19 [購入]ボタンを押すとbuyメソッドが呼び出される
JavaScript
function buy(){

  // Payment Request APIをサポートしているかどうかを判定
  if (!window.PaymentRequest) {
    // 従来のフォームにリダイレクト
    location.href='payment.html';
    return;
  }

  // リスト21~24のJavaScriptコードはここに記述する
}
リスト20 window.paymentRequestでPayment Request APIをサポートしているかをチェックして、サポートしていない場合は、従来のフォームに遷移する

payment.htmlファイルはPayment Request APIとは関係がないので説明を割愛。

JavaScript
// 支払い方法を定義
var methodData = [{ 
  supportedMethods: ['basic-card'],
  data: { 
    supportedNetworks: ['visa', 'mastercard', 'jcb'],
    supportedTypes: ['credit']
  }
}];
リスト21 支払い方法を指定する

ここでは、クレジットカードでVISAMasterCardJCBを指定している。

JavaScript
// 購入の詳細
var details = {
  displayItems: [
  {
    label: "マンガ",
    amount: { currency: "JPY", value : "400" }
  },
  {
    label: "雑誌",
    amount: { currency: "JPY", value : "300" }
  },
  {
    label: "消費税",
    amount: { currency: "JPY", value : "56" } 
  }],
  total: {
    label: "合計",
    amount: { currency: "JPY", value : "756" } 
  }
};
リスト22 支払いの詳細を定義する

支払い通貨(currency)に日本円(JPY)を指定して、明細に表示する商品と消費税の名称(label)や金額(value)を指定。さらにtotalに税込みの支払額を指定している。もちろん実際はサーバーからJSONデータを返して使用することも可能だ。

JavaScript
// 支払い情報の他に必要な項目を指定
var options = {
  requestShipping: true,   // 住所
  requestPayername: true,  // 名前
  requestPayerEmail: true, // Email
  requestPayerPhone: true  // 電話番号
};
リスト23 支払い方法の他に入力が必要な項目を指定する
JavaScript
// 支払いフォームを表示する
var payment = new PaymentRequest(methodData, details, options);
payment.show()
  // 支払いフォームの結果をPromiseで受けて、サーバーの処理を呼び出す
  .then(result => {
    return process(result).then(response => {
      if (response.status === 200) {
        // 支払い成功のUIを表示する
        return result.complete('成功');
      } else {
        // 支払い失敗のUIを表示する
        return result.complete('失敗');
      }
    }).catch((err) => {
      console.error('要求が拒否されました', err.message)
    });
  });
リスト24 支払いフォームを表示する

showメソッドで表示して、入力が完了すると、Promiseの処理が呼び出される。ここでは省略しているが、process関数でサーバーに支払い情報を送信して、HTTPステータスとして200(成功)が返されたら、成功のUIが表示される。

 このコードを実行すると、Microsoftアカウントのログインダイアログが表示される(図8)。Edgeでは、Microsoft Walletと呼ばれる支払いサービスを利用して支払いができるようになるようだが、現時点ではアメリカのみで利用可能なため、住所や電話番号は、USのものしか受け付けてくれないようだ。

payment.showを呼び出すとMicrosoftアカウントへのログインダイアログが表示される。

payment.showメソッドを呼び出すと、Microsoftアカウントへのログインダイアログが表示される

クレジットカード番号の入力ページが表示される。現時点ではカードの種類は無視されているようだ

クレジットカード番号の入力ページが表示される。現時点ではカードの種類は無視されているようだ

住所の「国」は「米国」から変更できない

住所の[国/地域]は「米国」から変更できない

入力して、送信してみたが、送信先、配送オプションの選択ができず、電話番号はUSの番号しか受け入れてくれない

入力して、送信してみたが、送信先、配送オプションの選択ができず、電話番号はUSの番号しか受け入れてくれない

「Show details」をクリックするとコードで指定した支払い詳細が表示される

「Show details」をクリックするとコードで指定した支払い詳細が表示される

図7 クレジットカードフォーム画像(Edgeの場合)

 ちなみにChromeベータ(バージョン60)では、Googleアカウントに関連付けられている住所やクレジットカードが表示された(図8)。

図8 クレジットカードフォーム画像(Chromeの場合)

 このように、これまでサイトごとに作成していた支払いフォームを共通化して、Microsoft Walletのような信頼できるサービスで管理することで、入力を簡略化して商品を購入してくれるユーザーの離脱を減らせるだろう。

Content Security Policy Level 2

 クロスサイトの脆弱性を突いた攻撃は、昔から続く典型的な手法だが、利便性とセキュリティの適切な落としどころが見つかっていない領域の一つであろう。Content Security Policy(以下CSP)は、開発者がホワイトリストを指定することにより、悪意のある第三者に想定外のデータが送られるのを回避する技術だ。

 例えば以下のHTMLソース内には、3種類のJavaScriptコードが書かれている。

JavaScript
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="local.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
  <script>
    function inline(){
      alert('inline');
    }
  </script>
  CSP2.0
</body>

</html>
リスト25 3種類のJavaScriptコードを読み込むサンプルHTMLソース

同一オリジンから読み込まれるlocal.js、外部サイトから読み込まれるjQueryファイル、そしてインラインに書かれたJavaScriptコードという3種類のJavaScriptコードがある。

 このコードはこのままでも問題なく動作するが、HTTPヘッダーに「Content-Security-Policy」を指定すると、指定したサイトからのみダウンロード可能になる。HTTPヘッダーは、IISでは図9のように設定する。

図9 Content-Security-Policyヘッダーの設定
図9 Content-Security-Policyヘッダーの設定

スクリプトのソースとして利用可能なものをscript-srcに指定する。

 ここでは、「Content-Security-Policy」ヘッダーに「script-src 'self' https://code.jquery.com/ 'unsafe-inline'」を指定している。これは、コンテンツのオリジンと同じ場所('self')、ダウンロード可能なURL(https://code.jquery.com)、インライン('unsafe-inline')を指定している。

 試しに「script-src 'self'」だけにしてみるとコンソールにエラーログが表示されて(図10)、ファイルがダウンロードされず、インラインコードが実行されない。

図10 「script-src 'self'」のみにして実行した結果

同一オリジン('self')のJavaScriptコードのみが利用可能で、外部サイトとインラインのJavaScriptコードはブロックされている。

 ホワイトリストに含まれていないJavaScriptコードはブロックされることになる。これにより、想定外のサイトからJavaScriptファイルが読み込まれて実行されないように設定できる。

 ここでは、JavaScriptコードの読み込み元である「script-src」を説明したが、画像の読み込み元(img-src)やフォームの送信先(form-action)など詳細に指定可能なため、ページをより安全にするために指定することを検討してほしい。

まとめ

 Edgeは比較的保守的に機能を追加しているため、Edgeへの搭載が待ち望まれていた機能も少なくなかっただろう。今回のアップデートで機能が追加されたおかげで、ほとんどのモダンブラウザーで使用可能になった機能も多い。また、WebRTCやPayment Request APIなど、そして一部で大きな期待を持って待たれているWebAssemblyの一部が実験的に実装されている。さらに、Web技術の中で最も期待されているサービスワーカーは、まだフラグ(about:flags)で指定する必要がある。

 すでにWindows Insider ProgramのPreviewリリースでは次期アップデートに向けて機能追加が進められている。次期Edgeのアップデートをいち早く知りたい場合は、Changelogを監視・確認してほしい。

1. Microsoft Edgeの進化 ~Windows標準ブラウザーの最新機能と使い方

Windows 10 Anniversary Updateで、ようやく日常使用に耐えられる機能性と安定性が備わってきたEdge。その最新機能をパワーユーザー向けに概説する。

2. Microsoft Edge: HTML5/JavaScript最新標準仕様への新応とF12開発者ツールの新機能

Windows 10 Anniversary Updateでアップデートされた最新Edgeの「JavaScript標準仕様への対応状況/オープンソース化/追加されたHTML5標準/F12開発ツールの新機能」をWeb開発者向けに概説する。

3. 【現在、表示中】≫ Windows 10 Creators UpdateのJavaScript/CSS関連の新機能

Windows 10 Creators UpdateでEdgeはどのように進化したのか? CSS/JavaScriptに関する新機能や新搭載のAPIを、開発者目線で紹介する。

イベント情報(メディアスポンサーです)

サイトからのお知らせ

Twitterでつぶやこう!