{"id":812,"date":"2015-04-04T12:59:13","date_gmt":"2015-04-04T03:59:13","guid":{"rendered":"https:\/\/blog.ymyzk.com\/?p=812"},"modified":"2015-04-06T00:06:04","modified_gmt":"2015-04-05T15:06:04","slug":"adf2015-bugfix-front","status":"publish","type":"post","link":"https:\/\/blog.ymyzk.com\/2015\/04\/adf2015-bugfix-front\/","title":{"rendered":"Application Developer Festival 2015 \u30d0\u30b0\u30d5\u30a3\u30c3\u30af\u30b9\u30c1\u30e3\u30ec\u30f3\u30b8 \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u554f\u984c \u89e3\u7b54\u30fb\u89e3\u8aac"},"content":{"rendered":"

\u3053\u306e\u8a18\u4e8b\u306f Application Developer Festival 2015<\/a> \u5185\u3067\u884c\u308f\u308c\u305f\u30d0\u30b0\u30d5\u30a3\u30c3\u30af\u30b9\u30c1\u30e3\u30ec\u30f3\u30b8\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u554f\u984c\u306e\u89e3\u7b54\u30fb\u89e3\u8aac\u8a18\u4e8b\u3067\u3059. \u3053\u306e\u554f\u984c\u306f\u79c1\u304c\u4f5c\u6210\u3057, \u63a1\u70b9\u3092\u884c\u3063\u305f\u3082\u306e\u3067\u3059.
\n<\/p>\n

\u554f\u984c<\/h2>\n

\u30d0\u30b0\u30d5\u30a3\u30c3\u30af\u30b9\u30c1\u30e3\u30ec\u30f3\u30b8\u5168\u4f53\u306e\u30eb\u30fc\u30eb\u306f\u3053\u3061\u3089<\/a>\u306b\u63b2\u8f09\u3057\u3066\u3044\u307e\u3059. \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u554f\u984c\u306f\u3053\u3061\u3089<\/a>\u3067\u516c\u958b\u3057\u3066\u3044\u307e\u3059.<\/p>\n

\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u554f\u984c\u306f HTML, CSS, JavaScript \u305d\u308c\u305e\u308c1\u3064\u306e\u30d5\u30a1\u30a4\u30eb\u304b\u3089\u306a\u308b\u30b7\u30f3\u30d7\u30eb\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u8907\u6570\u306e\u30d0\u30b0\u304c\u4ed5\u8fbc\u307e\u308c\u3066\u304a\u308a, \u30d0\u30b0\u3092\u4fee\u6b63\u3057\u3066\u4ed5\u69d8\u3069\u304a\u308a\u306b\u52d5\u4f5c\u3059\u308b\u3088\u3046\u306b\u3059\u308b\u3068\u3044\u3046\u3082\u306e\u3067\u3059.<\/p>\n

\u3053\u306e\u554f\u984c\u306e\u30dd\u30a4\u30f3\u30c8\u306e\u4e00\u3064\u3068\u3057\u3066\u306f\u6700\u65b0\u306e Google Chrome \u306e\u5b89\u5b9a\u7248 (\u5f53\u6642 41.0.2272.101) \u3067\u52d5\u4f5c\u3059\u308c\u3070\u3088\u3044\u3068\u3055\u308c\u3066\u3044\u308b\u305f\u3081, HTML5 \u3084 CSS3, ECMAScript 6 \u306e\u3088\u3046\u306a\u6700\u65b0\u306e\u6280\u8853\u3092\u7528\u3044\u3066\u4f5c\u6210\u3055\u308c\u3066\u3044\u308b\u3068\u3044\u3046\u3053\u3068\u304c\u3042\u308a\u307e\u3059.<\/p>\n

\u3082\u3046\u4e00\u3064\u306f\u3053\u306e\u554f\u984c\u304c\u30d0\u30b0\u30d5\u30a3\u30c3\u30af\u30b9\u30c1\u30e3\u30ec\u30f3\u30b8\u3067\u3042\u308a, \u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u5168\u9762\u7684\u306b\u66f8\u304d\u63db\u3048\u3066\u4ed5\u69d8\u901a\u308a\u306b\u52d5\u304f\u3088\u3046\u306b\u3059\u308c\u3070\u3044\u3044\u3068\u3044\u3046\u306e\u3067\u306f\u306a\u304f, \u65e2\u5b58\u306e\u30b3\u30fc\u30c9\u4e2d\u306e\u30d0\u30b0\u3092\u4fee\u6b63\u3057\u3066\u3082\u3089\u3046\u554f\u984c\u3060\u3068\u3044\u3046\u3053\u3068\u3067\u3059. \u5b9f\u969b\u306b\u3042\u308b\u884c\u306b\u542b\u307e\u308c\u3066\u3044\u308b\u30d0\u30b0\u306f, \u305d\u306e\u884c\u3060\u3051\u3092\u4fee\u6b63\u3059\u308c\u3070\u826f\u3044\u3088\u3046\u306b\u554f\u984c\u304c\u4f5c\u6210\u3055\u308c\u3066\u3044\u307e\u3059.<\/p>\n

\u89e3\u7b54\u30fb\u89e3\u8aac<\/h2>\n

HTML<\/h3>\n

\u6587\u5b57\u30b3\u30fc\u30c9\u306e\u30d0\u30b0\u306b\u3064\u3044\u3066\u306f\u591a\u304f\u306e\u65b9\u304c\u4fee\u6b63\u3057\u3066\u3044\u307e\u3057\u305f\u304c, input \u8981\u7d20\u306e\u30d0\u30b0\u306f\u4fee\u6b63\u3067\u304d\u3066\u3044\u308b\u65b9\u306f\u591a\u304f\u3042\u308a\u307e\u305b\u3093\u3067\u3057\u305f.<\/p>\n

\u6587\u5b57\u30b3\u30fc\u30c9<\/h4>\n
<meta charset=\"Shift_JIS\"><\/pre>\n
index.html<\/code> \u306f UTF-8 \u3067\u30a8\u30f3\u30b3\u30fc\u30c9\u3055\u308c\u3066\u3044\u307e\u3059\u304c, HTML \u30b3\u30fc\u30c9\u4e2d\u3067\u6587\u5b57\u30b3\u30fc\u30c9\u304c Shift_JIS \u3067\u3042\u308b\u3068\u5ba3\u8a00\u3055\u308c\u3066\u3044\u307e\u3059. \u30d5\u30a1\u30a4\u30eb\u3092 Shift_JIS \u3067\u4fdd\u5b58\u3057\u76f4\u3059\u304b, \u6587\u5b57\u30b3\u30fc\u30c9\u5ba3\u8a00\u3092 UTF-8 \u306b\u4fee\u6b63\u3059\u308b\u3053\u3068\u3067\u5bfe\u5fdc\u3067\u304d\u307e\u3059.<\/p>\n
<meta charset=\"UTF-8\"><\/pre>\n
input \u8981\u7d20<\/h4>\n
<li id=\"add-user-row\"><input id=\"add-user-input\" type=\"text\"><\/input><a id=\"add-user-button\">+<\/a><\/li><\/pre>\n
input<\/code> \u8981\u7d20\u306f\u7a7a\u8981\u7d20 (void elements) \u3067\u3059. HTML5 \u3067\u306f\u7a7a\u8981\u7d20\u306b\u7d42\u4e86\u30bf\u30b0\u3092\u8a18\u8ff0\u3059\u308b\u3053\u3068\u3068\u306f\u8a31\u3055\u308c\u3066\u3044\u307e\u305b\u3093.<\/p>\n
Void elements only have a start tag; end tags must not be specified for void elements.
\n8 The HTML syntax \u2014 HTML5<\/a><\/cite><\/p><\/blockquote>\n
\u7d42\u4e86\u30bf\u30b0\u3092\u524a\u9664\u3059\u308b\u3053\u3068\u3067\u4fee\u6b63\u51fa\u6765\u307e\u3059.<\/p>\n
<li id=\"add-user-row\"><input id=\"add-user-input\" type=\"text\"><a id=\"add-user-button\">+<\/a><\/li><\/pre>\n
CSS<\/h3>\n
2\u3064\u3068\u3082\u306b\u6b63\u89e3\u8005\u306f\u5c11\u306a\u304b\u3063\u305f\u3067\u3059. \u6587\u6cd5\u306e\u554f\u984c\u306b\u3064\u3044\u3066\u306f\u6b63\u89e3\u8005\u304c1\u4eba\u3057\u304b\u3044\u307e\u305b\u3093\u3067\u3057\u305f.<\/p>\n
color<\/h4>\n
background-color: hsl(263, \"95%\", \"34%\");<\/pre>\n
CSS3 \u3067\u306f HSL (\u8272\u76f8\u30fb\u5f69\u5ea6\u30fb\u660e\u5ea6) \u3092\u4f7f\u3063\u305f\u8272\u6307\u5b9a\u304c\u51fa\u6765\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f. \u5f69\u5ea6\u3068\u660e\u5ea6\u306f percentage \u3068\u3057\u3066\u6307\u5b9a\u3057\u307e\u3059.<\/p>\n
HSL colors are encoding as a triple (hue, saturation, lightness). (\u4e2d\u7565) Saturation and lightness are represented as percentages.
\nCSS Color Module Level 3<\/a><\/cite><\/p><\/blockquote>\n
percentage \u306f <number>%<\/code> \u306e\u5f62\u5f0f\u3067\u8868\u3055\u308c\u307e\u3059.<\/p>\n
A percentage value is denoted by , consists of a immediately followed by a percent sign \u2018%\u2019.
\nCSS Values and Units Module Level 3<\/a><\/cite><\/p><\/blockquote>\n
\u4e0d\u8981\u306a\u5f15\u7528\u7b26\u3092\u524a\u9664\u3059\u308b\u3053\u3068\u3067\u4fee\u6b63\u3067\u304d\u307e\u3059.<\/p>\n
background-color: hsl(263, 95%, 34%);<\/pre>\n
\u6587\u6cd5<\/h4>\n
border: 0<\/pre>\n
CSS \u3067\u306f\u305d\u308c\u305e\u308c\u306e\u5ba3\u8a00\u306e\u9593\u3092\u30bb\u30df\u30b3\u30ed\u30f3\u3067\u533a\u5207\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059.<\/p>\n
Each declaration has a name, followed by a colon and the declaration value. Declarations are separated by semicolons.
\nCSS Syntax Module Level 3<\/a><\/cite><\/p><\/blockquote>\n
\u30bb\u30df\u30b3\u30ed\u30f3\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3067\u4fee\u6b63\u3067\u304d\u307e\u3059.<\/p>\n
border: 0;<\/pre>\n
JavaScript<\/h3>\n
JavaScript \u306e\u30b3\u30fc\u30c9\u306b\u591a\u304f\u306e\u30d0\u30b0\u3092\u4ed5\u8fbc\u3093\u3067\u3044\u307e\u3057\u305f. DOM \u64cd\u4f5c\u306b\u3064\u3044\u3066\u306f\u6bd4\u8f03\u7684\u591a\u304f\u306e\u4eba\u304c\u6b63\u89e3\u3067\u304d\u3066\u3044\u307e\u3057\u305f\u304c, ECMAScript 6 \u306e\u6700\u65b0\u4ed5\u69d8\u306e\u90e8\u5206\u3084, \u4e71\u6570\u751f\u6210\u306e\u90e8\u5206\u306f\u3042\u307e\u308a\u6b63\u89e3\u3067\u304d\u3066\u3044\u307e\u305b\u3093\u3067\u3057\u305f.<\/p>\n
HTMLCollection<\/h4>\n
\/\/ 1\u3064\u76ee\r\nif (0 < document.getElementsByClassName(\"send-hi-button\").filter(\r\n      function(button) { return username === button.dataset.username; }).length) {\r\n  return;\r\n}\r\n\r\n\/\/ 2\u3064\u76ee\r\nvar buttons = document.getElementsByClassName(\"send-hi-button\");\r\nbuttons.forEach(function(button, i) {\r\n});<\/pre>\n
document.getElementsByClassName<\/code> \u306f HTMLCollection \u3092\u8fd4\u3057\u307e\u3059.<\/p>\n
The getElementsByClassName(classNames) method must return the list of elements with class names classNames for the context object.
\nDOM Standard<\/a><\/cite><\/p><\/blockquote>\n
The list of elements with class names classNames for a node root is the HTMLCollection returned by the following algorithm:
\nDOM Standard<\/a><\/cite><\/p><\/blockquote>\n
HTMLCollection<\/a> \u306f Array \u306e\u5b9f\u88c5\u3057\u3066\u3044\u308b filter<\/code> \u3084 forEach<\/code> \u3092\u5b9f\u88c5\u3057\u3066\u3044\u307e\u305b\u3093.<\/p>\n
\u4fee\u6b63\u65b9\u6cd5\u306e\u4f8b\u3068\u3057\u3066 Array.prototype.filter.call<\/code> \u306e\u3088\u3046\u306b\u3057\u3066, Array<\/code>\u306e\u5b9f\u88c5\u3092\u501f\u7528\u3059\u308b\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059. \u4ed6\u306b\u3082 [].filter<\/code> \u3068\u3059\u308b\u65b9\u6cd5\u3084, for \u6587\u3092\u4f7f\u3063\u3066\u66f8\u304d\u63db\u3048\u308b\u65b9\u6cd5\u304c\u8003\u3048\u3089\u308c\u307e\u3059.<\/p>\n
\/\/ 1\u3064\u76ee\r\nif (0 < Array.prototype.filter.call(\r\n      document.getElementsByClassName(\"send-hi-button\"),\r\n      function(button) { return username === button.dataset.username; }).length) {\r\n  return;\r\n}\r\n\r\n\/\/ 2\u3064\u76ee\r\nvar buttons = document.getElementsByClassName(\"send-hi-button\");\r\nArray.prototype.forEach.call(buttons, function(button, i) {\r\n});<\/pre>\n
Math.random<\/h4>\n
var hue = Math.round(Math.random() * 359);<\/pre>\n
\u4ed5\u69d8\u3088\u308a\u8272\u76f8\u306f0\u5ea6\u301c359\u5ea6\u306e360\u304b\u3089\u30e9\u30f3\u30c0\u30e0\u306b\u9078\u629e\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b. Math.random<\/code> \u306f0\u4ee5\u4e0a, 1\u672a\u6e80\u306e Number<\/code> \u3092\u8fd4\u3059.<\/p>\n
Returns a Number value with positive sign, greater than or equal to 0 but less than 1, chosen randomly or pseudo randomly with approximately uniform distribution over that range, using an implementation-dependent algorithm or strategy. This function takes no arguments.
\nECMAScript Language Specification – ECMA-262 Edition 5.1<\/a><\/cite><\/p><\/blockquote>\n
Math.round<\/code> \u306f\b\u6700\u3082\u8fd1\u3044\u6574\u6570\u5024\u306b\u5024\u3092\u4e38\u3081\u307e\u3059. (\u56db\u6368\u4e94\u5165)<\/p>\n
Returns the Number value that is closest to x and is equal to a mathematical integer.
\nECMAScript Language Specification – ECMA-262 Edition 5.1<\/a><\/cite><\/p><\/blockquote>\n
\u30d0\u30b0\u306e\u3042\u308b\u30b3\u30fc\u30c9\u3067\u306f 0 \u3068 359 \u306b\u306a\u308b\u78ba\u7387\u304c\u4ed6\u306e\u5024\u306b\u306a\u308b\u78ba\u7387\u306e\u534a\u5206\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059.<\/p>\n
\u4fee\u6b63\u65b9\u6cd5\u306e1\u3064\u3068\u3057\u3066 359 \u3092 360 \u306b\u5909\u66f4\u3059\u308b\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059. \u3053\u306e\u5834\u5408 hue<\/code> \u304c 360 \u306b\u306a\u3063\u3066\u3057\u307e\u3057\u307e\u3059\u304c. 360 \u306f 0 \u3068\u3057\u3066\u6271\u308f\u308c\u308b\u305f\u3081\u554f\u984c\u3042\u308a\u307e\u305b\u3093.<\/p>\n
By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120. One way an implementation could normalize such an angle x to the range [0,360) (i.e. zero degrees, inclusive, to 360 degrees, exclusive) is to compute (((x mod 360) + 360) mod 360).
\nCSS Color Module Level 3<\/a><\/cite><\/p><\/blockquote>\n
var hue = Math.round(Math.random() * 360);<\/pre>\n
\u3082\u3046\u4e00\u3064\u306e\u65b9\u6cd5\u3068\u3057\u3066 359 \u3092 360 \u306b\u5909\u66f4\u3057\u3066, Math.round<\/code> \u3092 Math.floor<\/code> \u306b\u3059\u308b\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059. \u3053\u308c\u306f\u4e0e\u3048\u3089\u308c\u305f\u5024\u3092\u8d85\u3048\u306a\u3044\u6700\u5927\u306e\u6570\u3092\u8fd4\u3059 (\u5207\u308a\u6368\u3066) \u306e\u3067, \u4ed5\u69d8\u3069\u304a\u308a\u306b\u52d5\u4f5c\u3057\u307e\u3059.<\/p>\n
Returns the greatest (closest to +\u221e) Number value that is not greater than x and is equal to a mathematical integer.
\nECMAScript Language Specification – ECMA-262 Edition 5.1<\/a><\/cite><\/p><\/blockquote>\n
var hue = Math.floor(Math.random() * 360);<\/pre>\n
Template literals<\/h4>\n
button.style.backgroundColor = 'hsl(${hue}, ${SATURATION}, ${LUMINANCE})';<\/pre>\n
ECMAScript 6 \u306e Draft<\/a> \u306b Template literals \u304c\u5165\u3063\u3066\u3044\u307e\u3059. Template literal\bs \u306f\u30d0\u30c3\u30af\u30af\u30aa\u30fc\u30c8 `<\/code> \u3067\u56f2\u3093\u3067\u8868\u8a18\u3059\u308b\u305f\u3081, \u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4fee\u6b63\u3059\u308b\u3068\u52d5\u4f5c\u3057\u307e\u3059.<\/p>\n
button.style.backgroundColor = `hsl(${hue}, ${SATURATION}, ${LUMINANCE})`;<\/pre>\n
innerHTML<\/h4>\n
button.innerHTML = button.dataset.username = username;\r\nselectedButton.innerHTML = \"Send Hi!\";\r\nselectedButton.innerHTML = selectedButton.dataset.username;<\/pre>\n
innerHTML<\/code> \u3092\u5229\u7528\u3059\u308b\u3068 script<\/code> \u8981\u7d20\u306a\u3069\u306e\u4efb\u610f\u306e HTML \u3092\u57cb\u3081\u8fbc\u307e\u308c\u308b\u6050\u308c\u304c\u3042\u308a\u307e\u3059. \u3053\u308c\u306f\u5fc5\u305a\u3057\u3082\u30d0\u30b0\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u6539\u5584\u3057\u3066\u3044\u305f\u65b9\u306b\u306f\u5f97\u70b9\u3092\u4e0e\u3048\u307e\u3057\u305f.<\/p>\n
\u5358\u7d14\u306a\u6539\u5584\u65b9\u6cd5\u306f, innerHTML<\/code> \u3092 textContent<\/code> \u306b\u66f8\u304d\u63db\u3048\u308b\u65b9\u6cd5\u3067\u3059. Google Chrome \u3067\u306f\u3053\u308c\u306b\u3088\u308a\u30a8\u30b9\u30b1\u30fc\u30d7\u3055\u308c\u3066\u8868\u793a\u3055\u308c\u307e\u3059.<\/p>\n
button.textContent = button.dataset.username = username;\r\nselectedButton.textContent = \"Send Hi!\";\r\nselectedButton.textContent = selectedButton.dataset.username;<\/pre>\n
\u4ed6\u306e\u4fee\u6b63\u65b9\u6cd5\u3068\u3057\u3066\u5165\u529b\u3055\u308c\u305f\u6587\u5b57\u5217\u3092\u30a8\u30b9\u30b1\u30fc\u30d7\u3059\u308b\u65b9\u6cd5\u3092\u8003\u3048\u3089\u308c\u307e\u3059. \u3053\u306e\u3088\u3046\u306a\u30a8\u30b9\u30b1\u30fc\u30d7\u51e6\u7406\u306f Underscore.js<\/a> \u7b49\u306b\u3082\u5b9f\u88c5\u3055\u308c\u3066\u3044\u307e\u3059.<\/p>\n
insertBefore<\/h4>\n
addUserRow.insertBefore(button, addUserRow);<\/pre>\n
insertBefore<\/code> \u306f \u633f\u5165\u3059\u308b\u30ce\u30fc\u30c9\u306e\u89aa\u30ce\u30fc\u30c9.insertBefore(\u633f\u5165\u3059\u308b\u30ce\u30fc\u30c9, \u633f\u5165\u3059\u308b\u30ce\u30fc\u30c9\u306e\u76f4\u524d\u306e\u30ce\u30fc\u30c9)<\/code> \u306e\u3088\u3046\u306b\u4f7f\u3044\u307e\u3059.<\/p>\n
Inserts the node newChild before the existing child node refChild. If refChild is null, insert newChild at the end of the list of children.
\nIf newChild is a DocumentFragment object, all of its children are inserted, in the same order, before refChild. If the newChild is already in the tree, it is first removed.
\nDocument Object Model Core<\/a><\/cite><\/p><\/blockquote>\n
\u4fee\u6b63\u4f8b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059.<\/p>\n
addUserRow.parentNode.insertBefore(button, addUserRow);<\/pre>\n
\u5909\u6570\u5ba3\u8a00<\/h4>\n
\u5909\u6570 flag<\/code> \u304c\u5ba3\u8a00\u3055\u308c\u305a\u306b\u5229\u7528\u3055\u308c\u3066\u3044\u307e\u3059.<\/p>\n
index.js \u306f strict \u30e2\u30fc\u30c9\u3067\u52d5\u4f5c\u3059\u308b\u3088\u3046\u306b\u8a18\u8ff0\u3055\u308c\u3066\u3044\u307e\u3059\u304c, strict \u30e2\u30fc\u30c9\u3067\u306f\u5ba3\u8a00\u3055\u308c\u3066\u3044\u306a\u3044\u5909\u6570\u306b\u5024\u3092\u4ee3\u5165\u3057\u3088\u3046\u3068\u3057\u305f\u5834\u5408, \u30a8\u30e9\u30fc\u3092\u6295\u3052\u307e\u3059.<\/p>\n
Assignment to an undeclared identifier or otherwise unresolvable reference does not create a property in the global object.
\nECMAScript Language Specification – ECMA-262 Edition 5.1<\/a><\/cite><\/p><\/blockquote>\n
\u4fee\u6b63\u4f8b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059.<\/p>\n
var flag = false;<\/pre>\n
\u30ed\u30b8\u30c3\u30af<\/h4>\n
sortedButtons[flag ? i + 1 : i] = button;<\/pre>\n
\u3053\u308c\u306f\u5358\u7d14\u306b\u30ed\u30b8\u30c3\u30af\u306e\u5b9f\u88c5\u8aa4\u308a\u3067\u3059. i<\/code> \u3068 i + 1<\/code> \u3092\u7f6e\u304d\u63db\u3048\u308b\u3068\u4fee\u6b63\u3067\u304d\u307e\u3059.<\/p>\n
sortedButtons[flag ? i : i + 1] = button;<\/pre>\n
for<\/h4>\n
for (let button in sortedButtons) {}<\/pre>\n
for...in<\/code> \u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u540d (\u30ad\u30fc) \u306b\u3064\u3044\u3066\u53cd\u5fa9\u3059\u308b\u306e\u306b\u5bfe\u3057\u3066, for...of<\/code> \u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3 (\u5024) \u306b\u3064\u3044\u3066\u53cd\u5fa9\u3057\u307e\u3059. \u3053\u306e\u5834\u5408\u306f\u5f8c\u8005\u306e\u52d5\u4f5c\u304c\u671b\u307e\u308c\u308b\u305f\u3081\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4fee\u6b63\u3057\u307e\u3059.<\/p>\n
for (let button of sortedButtons) {}<\/pre>\n
\u3053\u306e\u51e6\u7406\u306f for \u6587\u306a\u3069\u3067\u3082\u66f8\u304d\u63db\u3048\u3089\u308c\u307e\u3059\u304c, \u305f\u3063\u305f2\u6587\u5b57\u3060\u3051\u5909\u66f4\u3057\u3066\u52d5\u4f5c\u3059\u308b\u4e0a\u306e\u4fee\u6b63\u65b9\u6cd5\u304c\u826f\u3044\u3068\u601d\u3044\u307e\u3059.<\/p>\n
\u307e\u3068\u3081<\/h2>\n
\u3053\u3053\u307e\u3067\u306e\u56de\u7b54\u3092\u307e\u3068\u3081\u305f\u3082\u306e\u3092\u3053\u3061\u3089<\/a>\u3067\u516c\u958b\u3057\u3066\u3044\u307e\u3059. \u307e\u305f, \u60f3\u5b9a\u5916\u306e\u30d0\u30b0\u3068\u3057\u3066 “Sent” \u3092 “Send” \u3068 typo \u3057\u3066\u3044\u308b\u3068\u3044\u3046\u3082\u306e\u304c\u3042\u308a\u307e\u3057\u305f.<\/p>\n
\u4eca\u56de\u306e\u554f\u984c\u3067\u306f\u6b8b\u5ff5\u306a\u304c\u3089\u5168\u554f\u6b63\u89e3\u306e\u65b9\u306f\u3044\u307e\u305b\u3093\u3067\u3057\u305f. \u3053\u306e\u554f\u984c\u304c\u57fa\u672c\u7684\u306a\u90e8\u5206\u3068\u6700\u65b0\u306e\u4ed5\u69d8\u306e\u4e21\u65b9\u306b\u3064\u3044\u3066\u6539\u3081\u3066\u5fa9\u7fd2\u3059\u308b\u304d\u3063\u304b\u3051\u306b\u306a\u308c\u3070\u5e78\u3044\u3067\u3059.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3053\u306e\u8a18\u4e8b\u306f Application Developer Festival 2015 \u5185\u3067\u884c\u308f\u308c\u305f\u30d0\u30b0\u30d5\u30a3\u30c3\u30af\u30b9\u30c1\u30e3\u30ec\u30f3\u30b8\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u554f\u984c\u306e\u89e3\u7b54\u30fb\u89e3\u8aac\u8a18\u4e8b\u3067\u3059. \u3053\u306e\u554f\u984c\u306f\u79c1\u304c\u4f5c\u6210\u3057, \u63a1\u70b9\u3092\u884c\u3063\u305f\u3082\u306e\u3067\u3059.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[73,74,67,8],"_links":{"self":[{"href":"https:\/\/blog.ymyzk.com\/wp-json\/wp\/v2\/posts\/812"}],"collection":[{"href":"https:\/\/blog.ymyzk.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ymyzk.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ymyzk.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ymyzk.com\/wp-json\/wp\/v2\/comments?post=812"}],"version-history":[{"count":41,"href":"https:\/\/blog.ymyzk.com\/wp-json\/wp\/v2\/posts\/812\/revisions"}],"predecessor-version":[{"id":855,"href":"https:\/\/blog.ymyzk.com\/wp-json\/wp\/v2\/posts\/812\/revisions\/855"}],"wp:attachment":[{"href":"https:\/\/blog.ymyzk.com\/wp-json\/wp\/v2\/media?parent=812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ymyzk.com\/wp-json\/wp\/v2\/categories?post=812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ymyzk.com\/wp-json\/wp\/v2\/tags?post=812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}