JSer.info 5周年記念イベント http://jser.connpass.com/event/24202/

1. WebIDL を見てみる
ブラウザーに実装されている API を知りたい
@Takenspc

2. 内容
●
背景
●
WebIDL を見てみる
●
まとめ

3. 背景
●
ブラウザーで使える API ：たくさんある
– 新たな API が生まれる
– 途中で API が変わる
●
実際に使える API は何なのか、知りたい

4. Specifications
BrowserContent
???
???
???
???
???

5. 例えば、こう書ける？
const url = new URL('…?foo=0&bar=1');
for (const param of url.searchParams) {
console.log(param[0], param[1]);
}

6. http://caniuse.com/#search=URLSearchParams

7. https://dev.windows.com/en-us/microsoft-edge/platform/status/urlapi

8. https://developer.mozilla.org/en-US/docs/Web/API/URL

9. 実際のところ…
Chrome Firefox IE Safari
URL.searchParams N/A 29+ N/A N/A
URLSearchParams 49+ 29+ N/A N/A
@@iterator 49+ 44+ N/A N/A

10. 現状
●
ブラウザーの実装とドキュメントが分離
– 粒度や作成・更新頻度がニーズと異なる場合も

11. ブラウザーの実装は…？
●
ブラウザーも誰かが書いてるはず

12. Specifications
BrowserContent
???
???
???
???
???

13. 結論から言うと
●
主なブラウザーの開発では WebIDL からイン
タフェースを機械生成
●
WebIDL は各仕様が定義

14. Specifications
BrowserContent
WebIDL
WebIDL

15. Specifications
BrowserContent
Available
Behind a flag
Not compiled
Not implemented
WebIDL
WebIDL

16. WebIDL
●
Web 技術向け IDL
– ECMAScript に特化

17. https://heycam.github.io/webidl/

18. WebIDL
●
仕様とブラウザーの共通言語の 1 つ
– 共通言語なので比較可能

19. WebIDL を見てみる
●
仕様（ URL Standard ）
●
Web Platform Tests
●
Gecko
●
Chromium
●
WebKit

20. https://url.spec.whatwg.org/#api

21. [Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker)]
interface URL {
static USVString domainToASCII(USVString domain);
static USVString domainToUnicode(USVString domain);
stringifier attribute USVString href;
readonly attribute USVString origin;
attribute USVString protocol;
…
attribute USVString search;
readonly attribute URLSearchParams searchParams;
attribute USVString hash;
};
URL Standard

22. [Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker)]
interface URL {
static USVString domainToASCII(USVString domain);
static USVString domainToUnicode(USVString domain);
stringifier attribute USVString href;
readonly attribute USVString origin;
attribute USVString protocol;
…
attribute USVString search;
readonly attribute URLSearchParams searchParams;
attribute USVString hash;
};
コンストラクタ
インタフェース名
仮引数
URL Standard

23. [Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker)]
interface URL {
static USVString domainToASCII(USVString domain);
static USVString domainToUnicode(USVString domain);
stringifier attribute USVString href;
readonly attribute USVString origin;
attribute USVString protocol;
…
attribute USVString search;
readonly attribute URLSearchParams searchParams;
attribute USVString hash;
};
戻り値の型 メソッド名 仮引数
URL Standard

24. [Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker)]
interface URL {
static USVString domainToASCII(USVString domain);
static USVString domainToUnicode(USVString domain);
stringifier attribute USVString href;
readonly attribute USVString origin;
attribute USVString protocol;
…
attribute USVString search;
readonly attribute URLSearchParams searchParams;
attribute USVString hash;
};
型 プロパティ名
URL Standard

25. [Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker)]
interface URL {
static USVString domainToASCII(USVString domain);
static USVString domainToUnicode(USVString domain);
stringifier attribute USVString href;
readonly attribute USVString origin;
attribute USVString protocol;
…
attribute USVString search;
readonly attribute URLSearchParams searchParams;
attribute USVString hash;
};
URL Standard

26. https://github.com/w3c/web-platform-tests/blob/master/url/interfaces.html

27. https://dxr.mozilla.org/mozilla-central/source/dom/webidl/URL.webidl

28. […]
interface URL {
…
[…] attribute USVString search;
readonly attribute URLSearchParams searchParams;
…
};
Gecko

29. https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/Source/core/dom/URL.idl

30. [Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker),
…]
interface URL {
…
[…] static DOMString? createObjectURL(Blob blob);
[…] static void revokeObjectURL(DOMString url);
};
URL implements URLUtils;
Chromium

31. [Constructor(USVString url, optional USVString base),
Exposed=(Window,Worker),
…]
interface URL {
…
[…] static DOMString? createObjectURL(Blob blob);
[…] static void revokeObjectURL(DOMString url);
};
URL implements URLUtils;
Chromium

32. https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/Source/core/dom/URLUtils.idl

33. […]
interface URLUtils {
…
attribute USVString search;
// Not yet implemented.
// attribute URLSearchParams searchParams;
…
};
Chromium

34. http://trac.webkit.org/browser/trunk/Source/WebCore/html/DOMURL.idl

35. http://trac.webkit.org/browser/trunk/Source/WebCore/html/URLUtils.idl

36. WebIDL を比較するには
●
継承などの解決
●
Extended attributes （ [ と ] の間）

37. URL Standard

38. Gecko

39. Chromium

40. WebKit

41. まとめ
●
WebIDL は仕様とブラウザーの共通言語の 1
つ
●
API の実装状況が知りたい：
WebIDL も参考になるかも

42. ご清聴ありがとうございました

43. おまけ
●
URL 関連 API の変化
●
WebIDL である必然性
●
WebIDL の仕様と実際の WebIDL
●
実際にコンパイルされる WebIDL の推定

44. URL 関連 API の変化
●
仕様（ URL Standard ）
– 2015 年夏頃まで： URL.href や
HTMLAnchor.href 、 Location.href などを
URLUtils にまとめる
– 2015 年夏以降： URLUtils などにまとめることを
断念

45. URLUtils
URLUtilsSearchParams
URLUtilsReadOnlyWorkerLocation
HTMLAnchorElement
HTMLAreaElement
Location
URL
仕様（ 2015 年夏ごろまで）

46. HTMLHyperlinkElementUtils
WorkerLocation
HTMLAnchorElement
HTMLAreaElement
Location
URL
仕様（ 2016 年 1 月）

47. URL 関連 API の変化
●
ブラウザーの実装
– Gecko ： 45 で仕様に合わせて更新
（ Bug 121385）
– Chromium ：今後仕様に合わせて更新？
（ dff906e）
– WebKit ：？

48. HTMLHyperlinkElementUtils
URLUtilsReadOnlyWorkerLocation
HTMLAnchorElement
HTMLAreaElement
Location
URL
Gecko

49. URLUtils
URLUtilsReadOnlyWorkerLocation
HTMLAnchorElement
HTMLAreaElement
Location
URL
Chromium

50. URLUtils
WorkerLocation
HTMLAnchorElement
HTMLAreaElement
Location
URL
WebKit

51. WebIDL である必然性
●
WebIDL の構文は ECMAScript とは別物
– WebIDL でインタフェースを定義する必然性はない
●
Ecmarkup を使っている仕様
https://streams.spec.whatwg.org/

52. WebIDL の仕様と実際の WebIDL
●
仕様に書かれている WebIDL
– 古い WebIDL 仕様をもとに書かれている
●
ブラウザーの開発に使われている WebIDL
– 古い WebIDL 仕様をもとに書かれている
– 独自拡張が施されている

53. Foo[] → FronzenArray<Foo>
●
https://lists.w3.org/Archives/Public/pu
blic-webapps/2015JulSep/0165.html
– WebIDL の仕様が変わったよ
– それぞれの仕様に書かれている WebIDL も更新し
よう
●
まだ終わっていない

54. ブラウザーの WebIDL
●
MDN: Information contained in a WebIDL f
fle
●
WebIDL in Blink
●
WebKitIDL

55. ビルドされる WebIDL の推定
●
どの機能がビルドされるかの推定が面倒
– 実際にビルドするのも面倒…
●
（ Gecko ）ランタイムフラグの推定が面倒
– Worker.webidl
– mozilla::dom::workers::WorkerPrivate::Work
erAvailable