ES2015 (ES6) 以降の JavaScript について の編集履歴

tomoda が 2018-01-13 14:59 に編集

--- Ver.5	2018-01-13 14:52:41+09:00
+++ Ver.6	2018-01-13 14:59:26+09:00
@@ -744,8 +744,11 @@
 ## クラス構文
 
 `class`, `extends`, `constructor` 構文でクラスを定義できるようになりました (これらの構文は従来の prototype 定義を行うためのシンタックスシュガー)。
+
 `super()` で基底クラスのコンストラクタを、`super.〜` で基底クラスのメソッドを呼び出せます。
+
 `static` 構文で `static` メソッド (インスタンスを作らずに、クラスに対して呼び出せるメソッド) を定義できます。
+
 `get`, `set` 構文でプロパティの getter, setter を定義できます。
 
 

tomoda が 2018-01-13 14:52 に編集

--- Ver.4	2018-01-13 14:04:56+09:00
+++ Ver.5	2018-01-13 14:52:41+09:00
@@ -173,8 +173,8 @@
 try { p(`bar: ${bar}`) } catch (e) { p(`bar ref err: ${e}`) }
 try { p(`baz: ${baz}`) } catch (e) { p(`baz ref err: ${e}`) }
 } </script>
-<a href="#" onclick="run(letConst)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(letConst)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(letConst)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(letConst)" class="btn btn-primary">clear</a>
 <div id="letConst-output-area" class="well well-sm hidden"></div>
 
 
@@ -201,8 +201,8 @@
 const obj = { name: 'foo', val: 42 }
 p(`a + b: ${a + b}, obj.name: ${obj.name}, obj: ${JSON.stringify(obj)}`)
 } </script>
-<a href="#" onclick="run(templateLiteral)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(templateLiteral)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(templateLiteral)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(templateLiteral)" class="btn btn-primary">clear</a>
 <div id="templateLiteral-output-area" class="well well-sm hidden"></div>
 
 ```js
@@ -255,8 +255,8 @@
 	for (elem of obj2.generator())
         p(`generated: ${elem}`)
 } </script>
-<a href="#" onclick="run(objectProperty)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(objectProperty)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(objectProperty)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(objectProperty)" class="btn btn-primary">clear</a>
 <div id="objectProperty-output-area" class="well well-sm hidden"></div>
 
 
@@ -438,8 +438,8 @@
 	})
 }
 } </script>
-<a href="#" onclick="run(destructingAssign)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(destructingAssign)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(destructingAssign)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(destructingAssign)" class="btn btn-primary">clear</a>
 <div id="destructingAssign-output-area" class="well well-sm hidden"></div>
 
 
@@ -496,8 +496,8 @@
 const arr2 = [ 'qux', ...arr, 'quux', 'quuz', ...arr ]
 p(`arr2: ${arr2}`)
 } </script>
-<a href="#" onclick="run(spreadOperator)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(spreadOperator)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(spreadOperator)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(spreadOperator)" class="btn btn-primary">clear</a>
 <div id="spreadOperator-output-area" class="well well-sm hidden"></div>
 
 
@@ -535,14 +535,14 @@
 p('bar: ' + JSON.stringify( ( () => ({ name: 'bar' }) )() ))	// 「return」を省略してオブジェクトリテラルを返す場合は () で囲む必要があることに注意する
 p('オブジェクトリテラルを返す場合に注意: ' + JSON.stringify( ( () => { name: 'baz' } )() ))	// 省略した場合は関数のブロックであると見なされ、関数の結果は undefined となる
 } </script>
-<a href="#" onclick="run(arrowFunc)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(arrowFunc)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(arrowFunc)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(arrowFunc)" class="btn btn-primary">clear</a>
 <div id="arrowFunc-output-area" class="well well-sm hidden"></div>
 
 
-## アロー関数での「this」の取扱いに関する改善
-
-アロー関数では、通常の関数・関数式・メソッドとは「this」の取扱が異なります (より直感的に理解できる挙動となるように改善されました)。
+## アロー関数での「this」の取り扱いに関する改善
+
+アロー関数では、通常の関数・関数式・メソッドとは「this」の取り扱いが異なります (より直感的に理解できる挙動となるように改善されました)。
 
 
 ```js
@@ -689,8 +689,8 @@
 }
 p(`obj5.append(['foo', 'bar', 'baz']): ${obj5.append(['foo', 'bar', 'baz'])}`)
 } </script>
-<a href="#" onclick="run(arrowThis)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(arrowThis)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(arrowThis)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(arrowThis)" class="btn btn-primary">clear</a>
 <div id="arrowThis-output-area" class="well well-sm hidden"></div>
 
 
@@ -710,8 +710,8 @@
 p(`fn(3): ${fn(3)}`)
 p(`fn(3, 4): ${fn(3, 4)}`)
 } </script>
-<a href="#" onclick="run(defaultParameter)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(defaultParameter)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(defaultParameter)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(defaultParameter)" class="btn btn-primary">clear</a>
 <div id="defaultParameter-output-area" class="well well-sm hidden"></div>
 
 
@@ -850,8 +850,8 @@
 	.then((msg) => msgAfterTimeout(msg, "Baz", 150))
 	.then((msg) => p(`done after 300ms:${msg}`))
 } </script>
-<a href="#" onclick="run(promise)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(promise)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(promise)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(promise)" class="btn btn-primary">clear</a>
 <div id="promise-output-area" class="well well-sm hidden"></div>
 
 
@@ -881,8 +881,8 @@
 msg = await msgAfterTimeout(msg, "Baz", 150)
 p(`done after 300ms:${msg}`)
 } </script>
-<a href="#" onclick="run(asyncAwait)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(asyncAwait)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(asyncAwait)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(asyncAwait)" class="btn btn-primary">clear</a>
 <div id="asyncAwait-output-area" class="well well-sm hidden"></div>
 
 
@@ -978,8 +978,8 @@
 })
 .then( msg => p(`msg: ${msg}`) )
 } </script>
-<a href="#" onclick="run(yieldAwait)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(yieldAwait)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(yieldAwait)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(yieldAwait)" class="btn btn-primary">clear</a>
 <div id="yieldAwait-output-area" class="well well-sm hidden"></div>
 
 
@@ -1013,8 +1013,8 @@
 	});
 });
 } </script>
-<a href="#" onclick="run(callbackHell)" class="btn btn-primary">run</a>
-<a href="#" onclick="clearOutputArea(callbackHell)" class="btn btn-primary">clear</a>
+<a href="javascript:void(0)" onclick="run(callbackHell)" class="btn btn-primary">run</a>
+<a href="javascript:void(0)" onclick="clearOutputArea(callbackHell)" class="btn btn-primary">clear</a>
 <div id="callbackHell-output-area" class="well well-sm hidden"></div>
 
 

tomoda が 2018-01-13 14:04 に編集

--- Ver.3	2018-01-13 13:28:25+09:00
+++ Ver.4	2018-01-13 14:04:56+09:00
@@ -447,8 +447,8 @@
 
 スプレッド演算子によって、
 
-配列・オブジェクトの要素を展開された状態で渡す
-配列・オブジェクトの要素の一部を配列・オブジェクトとして受け取る
+* 配列・オブジェクトの要素を展開された状態で渡す
+* 配列・オブジェクトの要素の一部を配列・オブジェクトとして受け取る
 
 ことができます。
 
@@ -462,7 +462,7 @@
 // 関数の仮引数において、スプレッド演算子を使って可変長の引数を受け取るようにできる
 const f2 = (a, ...rest) => {
 	p(`a: ${a}`)
-	for (elem of rest)
+	for (let elem of rest)
 		p(`elem: ${elem}`)
 }
 f2('foo', 'bar', 'baz')

tomoda が 2018-01-13 13:28 に編集

--- Ver.2	2018-01-13 12:45:51+09:00
+++ Ver.3	2018-01-13 13:28:25+09:00
@@ -1,5 +1,3 @@
-ES2015 (ES6) 以降の JavaScript について
-
 ## はじめに
 
 「ES2015」とは ECMAScript のバージョン 6 のことです。ES6 とも呼ばれます。「ECMAScript」とは、JavaScript の仕様を定めたものです。
@@ -871,7 +869,7 @@
 msg = await msgAfterTimeout(msg, "Baz", 150)
 p(`done after 300ms:${msg}`)
 ```
-<script> var asyncAwait = () => {
+<script> var asyncAwait = async () => {
 const msgAfterTimeout = (msg, who, timeout) => {
 	return new Promise((resolve, reject) => {
 		setTimeout(() => { return resolve(`${msg} Hello ${who}!`) }, timeout)
@@ -1063,4 +1061,3 @@
 * [イマドキのJavaScriptの書き方2018 - Qiita](https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9)
 * [2016年にJavaScriptを学ぶとこんな感じ](https://medium.com/japan/2016%E5%B9%B4%E3%81%ABjavascript%E3%82%92%E5%AD%A6%E3%81%B6%E3%81%A8%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98-b969f5767d7c)
 
-

tomoda が 2018-01-13 12:45 に編集

--- Ver.1	2018-01-13 08:39:27+09:00
+++ Ver.2	2018-01-13 12:45:51+09:00
@@ -1,3 +1,5 @@
+ES2015 (ES6) 以降の JavaScript について
+
 ## はじめに
 
 「ES2015」とは ECMAScript のバージョン 6 のことです。ES6 とも呼ばれます。「ECMAScript」とは、JavaScript の仕様を定めたものです。
@@ -776,7 +778,7 @@
 
 ## シンボル
 
-`Symbol` という新たな型が導入されました。
+[Symbol](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol) という新たな型が導入されました。
 
 * `Symbol('foo') === Symbol('foo')` が `false` となる
 * `const foo = Symbol('foo'); obj[foo] = 'foo'` としたときに `Object.keys(obj)` で返されない。`for ... in` ループの対象とならない
@@ -788,12 +790,12 @@
 
 ## データ構造
 
-`Set`, `Map`, `WeakSet`, `WeakMap` クラスが追加されました。
+[Set](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set), [Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map), [WeakSet](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakSet), [WeakMap](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakSet) クラスが追加されました。
 
 
 ## TypedArray
 
-バイト列を扱うための `ArrayBuffer`, `ArrayBuffer` を読み書きするための「TypedArray」が追加されました。
+バイト列を扱うための [ArrayBuffer](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), `ArrayBuffer` を読み書きするための「[TypedArray](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)」が追加されました。
 「TypedArray」には次のような種類があり、`ArrayBuffer` をどのように読み書きするかによって TypedArray を使い分けます。
 
 * `Int8Array`
@@ -1061,3 +1063,4 @@
 * [イマドキのJavaScriptの書き方2018 - Qiita](https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9)
 * [2016年にJavaScriptを学ぶとこんな感じ](https://medium.com/japan/2016%E5%B9%B4%E3%81%ABjavascript%E3%82%92%E5%AD%A6%E3%81%B6%E3%81%A8%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98-b969f5767d7c)
 
+

tomoda が 2018-01-13 08:39 に投稿