ECMAScript没proposal追悼式

1. ECMAScript
没Proposal追悼式
tyage@KMC

2. 本日はお集まりいただき
ありがとうございます

3. 司会担当

4. ● id: tyage
● 京大工学部情報学科3回
● JavaScriptとか書いてる
● 趣味
○ 脆弱性報告
○ CTF
司会担当

5. ECMAScriptとは
● JavaScriptやActionScriptの実装基盤となっている言語
● Ecma Internationalによって標準化される
● (例会講座でも一度紹介しました)

6. ECMAScript標準化の流れ
● Strawman（仕様提案）
● →Proposal（具体化・デモ・試案）
● →Draft（仕様書作成）
○ イマココ
○ 3/4にRC2が出来た
● →Candidate（実装・フィードバック）
● →完成

7. ECMAScript Proposalとは
● 様々な人から仕様に入れてほしい提案(Proposal)が送られ
てくる
○ 提案を検討して、仕様に組み込んだり却下したり
○ Proposalフェーズでなくても送られてくる

8. 採用されたECMAScript Proposal
● ECMAScript6勉強会でやりました
○ class
○ generator
○ Symbol
○ Map
○ const
○ Promise
○ Proxy
○ etc...

9. 今日話すこと
● Proposalだったが、ECMAScript6の仕様書(RC2)に入らな
かったもの(死者)を一部紹介
○ ※覚えてもメリットはないかも
● 英語の誤訳が多数含まれているかと思いますがご了承下さ
い

10. 1つ目

11. "use" keyword

12. "use" keyword
● https://esdiscuss.org/topic/proposal-use-keyword
○ 生年月日: 2014年7月25日
○ 没年月日: 2014年7月26日
● 「なんでPHPの”use”みたいな物が無いんや」

13. なんだそれは？？？

14. "use" keyword
● PHP5.3くらいから追加されてたkeyword
● 無名関数を宣言する際に、親のスコープから変数を引き継
ぐことができる
○ こんな機能使ったことないし知らなかったゾ...

15. "use" keyword
> // 通常、無名関数は外のスコープの変数を参照できない
> $message = ‘hoge’;
> $fun = function() { echo $message; };
> $fun();
PHP Notice: Undefined variable: message in php shell
code on line 1

16. "use" keyword
> // use keywordを使うと外のスコープの変数が参照できる
> $message = ‘hoge’;
> $fun = function() use ($message) { echo $message; };
> $fun();
hoge

17. なるほど

18. 一方ECMAScriptでは
// 暗黙的に外のスコープの変数を見に行く
var message = 'hoge';
var fun = function() { console.log(message); };
fun();
hoge

19. あれ、”use” keyword要らなくね？

20. どうやらそうではないらしい
引数を使わず、関数から別スコープにあるローカル変数が参照
したいようだ
(追記: dynamic scopeというらしい)

21. どうやらそうではないらしい
function fun1() {
var message = ‘hoge’;
fun2.attachContext();
};
function fun2() {
console.log(message);
};
fun1のスコープにある
messageを参照できる

22. えっ、何これは・・・（ドン引き

23. 皆様の反応
● PHP関係ないやんけ
● 何がしたいのかわからん

24. 皆様の反応
● デメリットのほうが圧倒的に大きいのでは
○ 人間もコンピュータも解析しづらい
● どう考えてもダメ

25. ご愁傷さまです

26. 2つ目

27. typeof null

28. typeof null
● http://wiki.ecmascript.org/doku.php?id=harmony:
typeof_null
● typeof null が “null” を返すようにしてほしいという提案

29. typeof演算子
● オブジェクトやプリミティブ値のデータ型を文字で返す
typeof 37 === “number”
typeof “hoge” === “string”
typeof {a: 1} === “object”
typeof undefined === “undefined”

30. typeof null === ???
ではこれは何になるでしょうか
typeof null

31. typeof null === ???
ではこれは何になるでしょうか
typeof null === “object”
※nullはプリミティブ値です

32. どうしてこうなった

33. 歴史的経緯
初期のJavaScriptの実装では各値の32bit領域中に以下の
type tagデータが入っていた
http://www.2ality.com/2013/10/typeof-null.html
● 000: object
● 1: int
● 010: double
● 100: string
● 110: boolean

34. 歴史的経緯
typeof演算子はtype tagでチェックしていた
if (JSVAL_IS_VOID(v)) {
type = JSTYPE_VOID;
} else if (JSVAL_IS_OBJECT(v)) {
…
type = JSTYPE_OBJECT

35. 歴史的経緯
nullはnull pointer(0x00)で表されていたので、type tagが
objectと同じになる！！
→ typeof null === “object”

36. 歴史的経緯
Brendan Eichが納期に追われて作ってしまったらしい...

37. 糞言語かよ！！

38. typeof null
● 10年くらい前からtypeof nullが”null”を返すように変更する
かは議論されていた
○ http://wiki.ecmascript.org/doku.php?id=discussion:typeof

39. typeof null
● 当然ECMAScript6で修正しようという風潮はあったが...
○ V8では実装されていたらしい

40. typeof null
● typeof nullが”object”を返すことに依存したコードが多く存
在した
○ このまま仕様を変えると古いWebページが見れなくなるかも
○ 古いコードの解釈が変わらないようにしないといけない
■ 前方互換性

41. typeof null
● typeof nullが”object”を返すことに依存したコードが多く存
在した
○ このまま仕様を変えると古いWebページが見れなくなるかも
○ 古いコードの解釈が変わらないようにしないといけない
■ 前方互換性

42. 手遅れ

43. 余談
● この件に関して、Brendan EichとDouglas Crockfordの意
見は当初の段階で分かれてるっぽい
○ Brendan Eich: JavaScript作った人。偉い
○ Douglas Crockford: JSONとか作った人。偉い

44. 余談
● Eich「前方互換性を壊すので慎重にすべき」
● Crockford「古いコードが壊れてでもやるべき」

45. そのうち解決されますように...

46. 3つ目

47. array & generator
comprehensions

48. array & generator comprehensions
● array comprehension
○ [for (i of [1, 2, 3]) i * i] // => [1, 4, 9]
● generator comprehension
○ (for (i of [1, 2, 3]) i * i) // => 1, 4, 9を順に返すgenerator
あっ、これPythonで見たことあるやつだ！
(Pythonだとリスト内包表記って呼ばれてるよね)

49. 実は
● ECMAScript勉強会でやりました
○ http://kmc.hatenablog.jp/entry/2014/07/26/181228
● 2014/7/26日時点(Rev26)では仕様に含まれていた
○ Firefoxでは実装されてて動く
● 個人的には便利そうだしかなり気に入ってた

50. 悲劇は突然

53. つらい・・・

54. 何があったのか
● https://esdiscuss.org/notes/2014-07-30#4-7-revisit-
comprehension-decision-from-last-meeting-
● このミーティングでDave Hermanがcomprehensionの問
題点を指摘
○ JavaScriptで書いた3種類の数独ソルバーを提示
■ no comprehension style
■ LINQ style
■ pythonic style

55. no comprehensions style
https://github.com/dherman/sudoku/blob/master/solver.methods.js

56. LINQ style
https://github.com/dherman/sudoku/blob/master/solver.linq.js

57. pythonic style
https://github.com/dherman/sudoku/blob/master/solver.pythonic.js

58. どれがよい？

59. no comprehensions style
● iteratorにmapやfilter等の便利メソッドを追加した形
● 今まで通りのJavaScriptって感じで読める

60. LINQ style
● generator comprehensionを使ってLINQを意識した形
● comprehensionとメソッドチェインが混ざっている

61. pythonic style
● array comprehensionを使ってpythonを意識した形
● comprehensionとメソッドチェインが混ざっている

62. 流れ変わったな
● これを見る前は支持していた人も多かったようだが...
○ 既に仕様に入ってたし
● 見たあとは
○ comprehensions使わなくても書けるじゃん
○ むしろ使いたくない

63. 流れ変わったな

64. comprehensions、敗北

65. いや、まだ死んでない
● 結局、ECMAScript7まで延期とのこと
● 今後の状況では復活する可能性も
○ が、現状ではほぼ死にかけな気がする

66. 内包表記君、どこ行ってしもうたんや
● 突然の消失に惜しむ声が多数
○ https://esdiscuss.org/topic/comprehensions-where-art-thou

67. 内包表記君、どこ行ってしもうたんや
● ミーティングに参加していなかった人から不満が出てくる

68. 内包表記君、どこ行ってしもうたんや
「あんなコードはPythonicじゃないし、comprehensionが80文
字を超えてる時点でなんか変でしょ」

69. 内包表記君、どこ行ってしもうたんや
Brendan Eich「求められていたのはArrayを(iterableや即時と
遅延等に分けて)一般化することだった。それにデリミタ(区切り
文字)が足りてないのに、わざわざ消費する必要はないよね」

70. comprehension
またお会いしましょう

71. 4つ目

72. Private Symbols

73. Symbol
● SymbolオブジェクトがECMAScript6から導入された
● RubyのSymbolとスコシニテル
● 用途としては、文字列以外の特殊なプロパティとして使われ
ることが想定されていそう
○ obj[Symbol.toStringTag] = ‘tag’
● ユニークなSymbolを生み出すことができる
○ Symbol('foo') !== Symbol('foo')

74. Symbol
● オブジェクトのプロパティのうち、キーがSymbolになってい
るものを取り出すことができる
var obj = {};
var sym = Symbol();
obj[sym] = 1;
Object.getOwnPropertySymbols(obj)[0] === sym;

75. Private Symbol
● https://esdiscuss.org/topic/proposal-about-private-
symbol
● 「getOwnPropertySymbolsで取り出せないPrivate Symbol
が欲しい」
● 提案したのは中国の高校生

76. Private Symbol
Private Symbolがあれば
var obj = function() {
var privateSym = Symbol(‘hoge’, true);
this[privateSym] = ‘秘密のデータ’
};
privateSymが分からないのでobjから秘密のデータが見えない

77. と、思いきや

78. Private Symbol
Private Symbolがあれば
var obj = function() {
var privateSym = Symbol(‘hoge’, true);
this[privateSym] = ‘秘密のデータ’
};
var x = {};
obj.call(x); // => xにproxyを設定しておけばprivateSymがわかる

79. コード書きなおし

80. Private Symbol
Symbolを外から参照できないようにするためだけなのに、長い！！

81. 簡単に安全なコードを
かけないようじゃダメ

82. 余談
● Private Symbolに関しては、過去にもっと条件をつけて提
案した人がいたが、WeakMapとProxyの関係上失敗したら
しい
○ https://github.com/zenparsing/es-abstract-
refs/issues/11#issuecomment-65723350

83. 社会は厳しい

84. 5つ目

85. いつの間にかなくなってたけど
理由がはっきり分からないやつ

86. いつの間にかなくなってたけど
理由がはっきり分からないやつ
時間が足りませんでした！(土下座

87. Object Literal Extensions
● http://wiki.ecmascript.org/doku.php?id=harmony:
object_literals
● Objectの文法拡張提案
○ Set Literal [[Prototype]] Operator
○ Object Literal Property Shorthands
○ Object Literal Property Value Shorthand
○ Object Literal Computed Property Keys
○ Object Initialiser super References
○ Object Extension Literal

88. Object Literal Extensions
● http://wiki.ecmascript.org/doku.php?id=harmony:
object_literals
● Objectの文法拡張提案
○ Set Literal [[Prototype]] Operator → 死亡
○ Object Literal Property Shorthands → 一部死亡
○ Object Literal Property Value Shorthand → 生存
○ Object Literal Computed Property Keys → 生存
○ Object Initialiser super References → 一部死亡
○ Object Extension Literal → 死亡

89. Set Literal [[Prototype]] Operator

90. Set Literal [[Prototype]] Operator
● http://wiki.ecmascript.org/doku.php?id=harmony:
proto_operator
● MemberExpression <| ProtoLiteral
○ という構文

91. 基本的な機能
右の値(RHS)の[[Prototype]]に左のオブジェクト(LHS)を代入し
て返す
(LHSを継承したRHSを返すみたいなイメージ)
var obj = {c: 3};
var newObj = obj <| {a: 1, b: 2};
newObj.c // => 3

92. ただし、右が関数式の場合は

93. RHSにくるもので挙動が異なる！

94. なんとなく
死んだ理由がわかった気がする...
(そもそも <| って気持ち悪い)

95. 要調査
● class(ECMAScript6から追加された)のextendsとして生ま
れ変わったのかも？
○ https://esdiscuss.org/topic/alternative-syntax-for
class Parent { … }
class Child extends Parent { … }
class Child2 extends (function() {}) { … }

96. Object Literal Property Shorthands

97. Object Literal Property Shorthands
var old = {
bar: 1,
foo: function() { return 1 }
};
var new = {
bar := 1,
foo() { return 1 }
};
// ※newオブジェクトのpropertyは全てnon-writable

98. Object Literal Property Shorthands
var old = {
bar: 1,
foo: function() { return 1 }
};
var new = {
bar := 1, → 死亡
foo() { return 1 } → 生存
};
// ※newオブジェクトのpropertyは全てnon-writable

99. なんでそうなったかは不明

100. Object Initialiser super References

101. Object Initialiser super References
● http://wiki.ecmascript.org/doku.php?id=harmony:
object_initialiser_super
● super keywordを使って継承元のclassのメソッドが呼び出
せる
○ Pythonで見たことあるkeywordだな...

102. Object Initialiser super References
生き残った例
class Parent {
foo() { … }
}
class Child extend Parent {
foo() { super(); }
}

103. Object Initialiser super References
生き残った例2
class Parent {
foo() { … }
}
class Child extend Parent {
bar() { super.foo(); }
}

104. Object Initialiser super References
死んだ例(当初はclassはなかったので、classがあったと想定)
class Child extend Parent {
get super set f(v) { f = v; }
}

105. Object Initialiser super References
class Child extend Parent {
get super set f(v) { f = v; }
}
上と下は同じ
class Child extend Parent {
set f(v) { f=v; }
get f() { return super.f; }
}

106. get super set…うーん...
(set super getもある)

107. Object Extension Literal

108. Object Extension Literal
.を使ってオブジェクトを拡張できるリテラル
var obj = {};
obj.{ a: 1, b: 2, c: 3 };
obj.a // => 1

109. 過激だ！

110. Object Extension Literal
● そこそこ物議を醸した
○ https://esdiscuss.org/topic/new-object-extension-literal-strawman
● さらに、これを使ったclass定義を考える人も
○ http://wiki.ecmascript.org/doku.php?id=harmony:
object_extension_literal_class_pattern

111. Object Extension Literal

112. 過激だ！！

113. ところで、生き残った構文は？

114. Object Literal Property Value
Shorthand

115. Object Literal Property Value Shorthand
オブジェクトの初期化時に、変数名とプロパティ名が同じ場合に
使える省略記法
var a = 1, b = 2;
var old = { a: a, b: b };
var new = { a, b };

116. Object Literal Computed
Property Keys

117. Object Literal Computed Property Keys
オブジェクトの初期化時に、プロパティ名に式の評価結果を与
えることができる
var a = ‘key’;
var old = {}; old[a] = 1;
var new = { [a]: 1 };

118. 個人的にはあまり使いたくない

119. 終わりに

120. まとめ
● Proposalにもいろいろある
○ こんなん考えたんだけどどう？程度のものから
○ Abstruct Syntax Tree入りの仕様を持ってくるものまで
● コミュニティの皆様方、お疲れ様です...
○ 特に前者のProposalは意図を把握するのが大変そう
○ ミーティングが思ったより戦いっぽくて大変そう

121. 死んでいったProposalに黙祷