magai/es2015.html

## es2015.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ES2015サポート状況テスト</title>
    <style>

th, td {
  border-bottom: 1px solid #999;
  padding: 4px;
  text-align: left;
}

td:nth-child(n+3) {
  text-align: center;
}

    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>name</th>
          <th>code</th>
          <th>expected</th>
          <th>is supported</th>
        </tr>
      </thead>
      <tbody id="results">
      </tbody>
    </table>
    <script>

function newElement(name, attrs, children) {
  var element = document.createElement(name);

  if (attrs) {
    for (var name in attrs) {
      if (!attrs.hasOwnProperty(name)) {
        continue;
      }

      element.setAttribute(name, attrs[name]);
    }
  }

  if (children) {
    for (var i = 0; i < children.length; i++) {
      if (children[i] instanceof Element) {
        element.appendChild(children[i])
      } else {
        element.innerText += children[i];
      }
    }
  }

  return element;
}

function isSupported(code, expected) {
  var actual;

  try {
    actual = eval(code);
  } catch (e) {
    if (e instanceof SyntaxError) {
      return false;
    } else {
      throw e; // rethrow
    }
  }

  return actual === expected ? true : console.log(actual);
}

var tests = [
  {
    name: "const",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const",
    code: "const a = 2 * 3; a",
    expected: 6
  },
  {
    name: "let",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let",
    code: "let a = 3 * 4; a",
    expected: 12
  },
  {
    name: "配列の分割代入",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment",
    code: "var [a, b] = [4, 5]; a * b",
    expected: 20
  },
  {
    name: "オブジェクトの分割代入",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring",
    code: "var { a, b } = { a: 5, b: 6 }; a * b",
    expected: 30
  },
  {
    name: "可変長引数",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters",
    code: "function join(...args) { return args.join(' ') }; join(6, 7, 8)",
    expected: "6 7 8"
  },
  {
    name: "デフォルト引数",
    url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters",
    code: "function split(str, splitter = ',') { return str.split(splitter) }; split('8,9,10')[0]",
    expected: "8"
  },
  {
    name: "アロー関数",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions",
    code: "var double = a => a * 2; double(10)",
    expected: 20
  },
  {
    name: "getter",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/get",
    code: "var o = { get prop() { return 'a' } }; o.prop",
    expected: "a"
  },
  {
    name: "setter",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set",
    code: "var o = { set prop(val) { this.property = val } }; o.prop = 11; o.property",
    expected: 11
  },
  {
    name: "簡略なプロパティ定義",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions",
    code: "var a = 12; var o = { a }; o.a",
    expected: 12
  },
  {
    name: "簡略なメソッド定義",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions",
    code: "var o = { method() { return 13 } }; o.method()",
    expected: 13
  },
  {
    name: "計算されたプロパティ名",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names",
    code: "var name = 'foo'; var o = { [name]: 'bar' }; o.foo",
    expected: "bar"
  },
  {
    name: "スプレッドプロパティ",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#Spread_properties",
    code: "var a = { y: 16, z: 17 }; var b = { x: 14, y: 15, ...a }; b.x === 14 && b.y === 16 && b.z === 17",
    expected: true
  },
  {
    name: "class宣言",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/class",
    code: "class C { constructor() { this.ok = 18 } }; (new C).ok",
    expected: 18
  },
  {
    name: "テンプレートリテラル",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings",
    code: "var a = 19; `${a - 1}, ${a}, ${a + 1}`",
    expected: "18, 19, 20"
  },
  {
    name: "Array.prototype.forEach()",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach",
    code: "var i = 0; [20, 21, 22].forEach(function (n) { i += n }); i",
    expected: 63
  },
  {
    name: "for...of",
    url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of",
    code: "var i = 0; for (var e of [22, 23, 24]) { i += e }; i",
    expected: 69
  }
];

var tbody = document.getElementById("results");

for (var i = 0; i < tests.length; i++) {
  var test = tests[i];

  tbody.appendChild(newElement("tr", null, [
    newElement("td", null, [
      newElement("a", { href: test.url }, [test.name])
    ]),
    newElement("td", null, [
      newElement("code", null, [test.code])
    ]),
    newElement("td", null, [
      newElement("code", null, [typeof test.expected === "string" ? '"' + test.expected + '"' : test.expected])
    ]),
    newElement("td", null, [
      isSupported(test.code, test.expected) ? 'o' : 'x'
    ])
  ]));
}

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ES2015サポート状況テスト</title>
	<style>

	th, td {
	border-bottom: 1px solid #999;
	padding: 4px;
	text-align: left;
	}

	td:nth-child(n+3) {
	text-align: center;
	}

	</style>
	</head>
	<body>
	<table>
	<thead>
	<tr>
	<th>name</th>
	<th>code</th>
	<th>expected</th>
	<th>is supported</th>
	</tr>
	</thead>
	<tbody id="results">
	</tbody>
	</table>
	<script>

	function newElement(name, attrs, children) {
	var element = document.createElement(name);

	if (attrs) {
	for (var name in attrs) {
	if (!attrs.hasOwnProperty(name)) {
	continue;
	}

	element.setAttribute(name, attrs[name]);
	}
	}

	if (children) {
	for (var i = 0; i < children.length; i++) {
	if (children[i] instanceof Element) {
	element.appendChild(children[i])
	} else {
	element.innerText += children[i];
	}
	}
	}

	return element;
	}

	function isSupported(code, expected) {
	var actual;

	try {
	actual = eval(code);
	} catch (e) {
	if (e instanceof SyntaxError) {
	return false;
	} else {
	throw e; // rethrow
	}
	}

	return actual === expected ? true : console.log(actual);
	}

	var tests = [
	{
	name: "const",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const",
	code: "const a = 2 * 3; a",
	expected: 6
	},
	{
	name: "let",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let",
	code: "let a = 3 * 4; a",
	expected: 12
	},
	{
	name: "配列の分割代入",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment",
	code: "var [a, b] = [4, 5]; a * b",
	expected: 20
	},
	{
	name: "オブジェクトの分割代入",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring",
	code: "var { a, b } = { a: 5, b: 6 }; a * b",
	expected: 30
	},
	{
	name: "可変長引数",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters",
	code: "function join(...args) { return args.join(' ') }; join(6, 7, 8)",
	expected: "6 7 8"
	},
	{
	name: "デフォルト引数",
	url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters",
	code: "function split(str, splitter = ',') { return str.split(splitter) }; split('8,9,10')[0]",
	expected: "8"
	},
	{
	name: "アロー関数",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions",
	code: "var double = a => a * 2; double(10)",
	expected: 20
	},
	{
	name: "getter",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/get",
	code: "var o = { get prop() { return 'a' } }; o.prop",
	expected: "a"
	},
	{
	name: "setter",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/set",
	code: "var o = { set prop(val) { this.property = val } }; o.prop = 11; o.property",
	expected: 11
	},
	{
	name: "簡略なプロパティ定義",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions",
	code: "var a = 12; var o = { a }; o.a",
	expected: 12
	},
	{
	name: "簡略なメソッド定義",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions",
	code: "var o = { method() { return 13 } }; o.method()",
	expected: 13
	},
	{
	name: "計算されたプロパティ名",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names",
	code: "var name = 'foo'; var o = { [name]: 'bar' }; o.foo",
	expected: "bar"
	},
	{
	name: "スプレッドプロパティ",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#Spread_properties",
	code: "var a = { y: 16, z: 17 }; var b = { x: 14, y: 15, ...a }; b.x === 14 && b.y === 16 && b.z === 17",
	expected: true
	},
	{
	name: "class宣言",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/class",
	code: "class C { constructor() { this.ok = 18 } }; (new C).ok",
	expected: 18
	},
	{
	name: "テンプレートリテラル",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings",
	code: "var a = 19; `${a - 1}, ${a}, ${a + 1}`",
	expected: "18, 19, 20"
	},
	{
	name: "Array.prototype.forEach()",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach",
	code: "var i = 0; [20, 21, 22].forEach(function (n) { i += n }); i",
	expected: 63
	},
	{
	name: "for...of",
	url: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of",
	code: "var i = 0; for (var e of [22, 23, 24]) { i += e }; i",
	expected: 69
	}
	];

	var tbody = document.getElementById("results");

	for (var i = 0; i < tests.length; i++) {
	var test = tests[i];

	tbody.appendChild(newElement("tr", null, [
	newElement("td", null, [
	newElement("a", { href: test.url }, [test.name])
	]),
	newElement("td", null, [
	newElement("code", null, [test.code])
	]),
	newElement("td", null, [
	newElement("code", null, [typeof test.expected === "string" ? '"' + test.expected + '"' : test.expected])
	]),
	newElement("td", null, [
	isSupported(test.code, test.expected) ? 'o' : 'x'
	])
	]));
	}

	</script>
	</body>
	</html>