{"id":4396,"date":"2021-09-19T04:41:16","date_gmt":"2021-09-18T19:41:16","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=4396"},"modified":"2023-01-04T22:54:40","modified_gmt":"2023-01-04T13:54:40","slug":"javascript-ex2","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2021\/09\/19\/javascript-ex2\/","title":{"rendered":"Javascript ex1(Javascript\u306e\u69cb\u6587)"},"content":{"rendered":"<p>Javascript\u306e\u57fa\u672c\u69cb\u6587\u3068\u305d\u306e\u51fa\u529b\u7d50\u679c\u3092\u307e\u3068\u3081\u3066\u307f\u305f\u3002<\/p>\n<h3>1:\u5909\u6570\u306e\u5b9a\u7fa9var,let,const<\/h3>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ var, let, const\r\n\/\/ var\u306f\u4e0a\u66f8\u304d\u3067\u304d\u308b\r\nvar name = 'Tom';\r\nconsole.log('hello' + name);\r\n\r\n\/\/ let\u3082\u4e0a\u66f8\u304d\u3067\u304d\u308b\u3088\r\nlet name2 = 'anna';\r\nname2 = 'Pon'\r\nconsole.log('hello' + name);\r\n\r\n\/\/ \u30c7\u30fc\u30bf\u578b\u306f Number, String, Boolean, Undefined, Null, Symbol\r\n\r\nlet variable = 'str';\r\nvariable = 12;\r\nvariable = undefined;\r\nvariable = null;\r\nvariable = false;\r\n\r\n\/\/ \u5b9f\u969b\u306b\u78ba\u8a8d\u3059\u308b\u306b\u306f\uff1f\r\nconsole.log(typeof variable);\r\n\/\/ \u30dd\u30a4\u30f3\u30c8\u4e0a\u66f8\u304d\u7981\u6b62\u306fconst\u3067\u5b9a\u7fa9\u3057\u3088\u3046\uff01\r\n\r\n\/\/ \u3042\u3068\u304b\u3089\u4e0a\u66f8\u304d\u3067\u304d\u306a\u3044\u306e\u3067\u30a8\u30e9\u30fc\u306b\u306a\u308b\u3088\r\nconst nam = 'Yan';\r\nnam = 'Tim';<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4409\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/331e822eeb11c9d90a97652fa366144b-300x180.png\" alt=\"\" width=\"300\" height=\"180\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/331e822eeb11c9d90a97652fa366144b-300x180.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/331e822eeb11c9d90a97652fa366144b-768x460.png 768w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/331e822eeb11c9d90a97652fa366144b-624x374.png 624w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/331e822eeb11c9d90a97652fa366144b.png 894w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><!--more--><\/p>\n<h3>2:\u95a2\u6570\u5b9a\u7fa9<\/h3>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ ()\u5185\u3092\u5f15\u6570\u3068\u547c\u3076\r\nfunction hi(name, age) {\r\n\u3000 console.log('hi' + name + age);\r\n\/\/ \u95a2\u6570\u304c\u5b9f\u884c\u3055\u308c\u305f\u7d50\u679c(\u623b\u308a\u5024)\u3092\u8868\u793a\r\n   return name + age;\r\n}\r\nconst returnVal = hi('Tarou2 ', 20);\r\nconsole.log(returnVal);\r\n\r\n\/\/ \u3053\u3061\u3089\u306e\u3084\u308a\u65b9\u3067\u3082OK\r\nconst hello = function (name, age) {\r\nconsole.log('hello' + name + age);\r\nreturn name + age;\r\n}\r\n\r\nconst returnVal2 = hello('Tarou2 ', 20);\r\nconsole.log(returnVal2);\r\n\r\n\/\/ \u95a2\u6570\u540d\u3092\u3082\u305f\u306a\u3044\u95a2\u6570\u3092\u7121\u540d\u95a2\u6570\u3068\u547c\u3073\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3067\u3088\u304f\u4f7f\u3046\r\n\/\/ function(name, age) {\r\n\/\/ console.log('hello' + name + age);\r\n\/\/ return name + age;\r\n\/\/ }<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-4413 alignnone\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/e672f4cda0b0dc934461975dee4f3c21-300x146.png\" alt=\"\" width=\"300\" height=\"146\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/e672f4cda0b0dc934461975dee4f3c21-300x146.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/e672f4cda0b0dc934461975dee4f3c21-768x375.png 768w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/e672f4cda0b0dc934461975dee4f3c21-624x304.png 624w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/e672f4cda0b0dc934461975dee4f3c21.png 890w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3>3:\u914d\u5217\u3068\u30eb\u30fc\u30d7\u51e6\u7406<\/h3>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const todos = [\r\n{\r\n  id: 1,\r\n  title: 'Go to travel',\r\n  completed: true\r\n},\r\n{\r\n  id: 2,\r\n  title: 'Go to shopping',\r\n  completed: true\r\n},\r\n{\r\n  id: 3,\r\n  title: 'Go to museum',\r\n  completed: false\r\n }\r\n]\r\n\r\n\/\/ \u666e\u901a\u306e\u66f8\u304d\u65b9\u306e\u3068\u304d\r\n for(let i = 0; i &lt; todos.length; i++) {\r\n\/\/ completed: true\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u53d6\u308a\u51fa\u3057\u305f\u3044\u3068\u304d\r\n   let todo = todos[i];\r\n   if(todo.completed === true) {\r\n   console.log(i, todos[i].title);\r\n   }\r\n }\r\n\r\n\/\/ for in\u306e\u5834\u5408(\u77ed\u7e2e\u8a18\u6cd5)\r\n   for(let i in todos) {\r\n \/\/ completed: true\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u53d6\u308a\u51fa\u3057\u305f\u3044\u3068\u304d\r\n   let todo = todos[i];\r\n   if(todo.completed === true) {\r\n     console.log(i, todos[i].title);\r\n }\r\n }\r\n\r\n\/\/ for of\u306e\u5834\u5408(\u77ed\u7e2e\u8a18\u6cd5)\r\nfor(let v of todos) {\r\n\/\/ completed: true\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u53d6\u308a\u51fa\u3057\u305f\u3044\u3068\u304d\r\nif(v.completed === true) {\r\nconsole.log(v);\r\n}\r\n}<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c(\u5b9f\u969b\u306b\u3084\u308b\u5834\u5408\u306f\u3069\u308c\u304b2\u3064\u3092\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u3057\u3066\u304f\u3060\u3055\u3044)<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4415\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/b2241403dce1c4cf3939a33aa2ab4a34-300x148.png\" alt=\"\" width=\"300\" height=\"148\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/b2241403dce1c4cf3939a33aa2ab4a34-300x148.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/b2241403dce1c4cf3939a33aa2ab4a34-768x380.png 768w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/b2241403dce1c4cf3939a33aa2ab4a34-624x308.png 624w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/b2241403dce1c4cf3939a33aa2ab4a34.png 890w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3>4:if\u6587<\/h3>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>if(false) {\r\n  console.log('this is true');\r\n} else if(true) {\r\n    console.log('this is else if block');\r\n} else {\r\n    console.log('this is false');\r\n}<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4418\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/3673178b4fe82f7d95785789f40b1744-1-300x86.png\" alt=\"\" width=\"300\" height=\"86\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/3673178b4fe82f7d95785789f40b1744-1-300x86.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/3673178b4fe82f7d95785789f40b1744-1-768x220.png 768w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/3673178b4fe82f7d95785789f40b1744-1-624x179.png 624w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/3673178b4fe82f7d95785789f40b1744-1.png 894w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3>5:\u30a2\u30ed\u30fc\u95a2\u6570<\/h3>\n<p>\u30a2\u30ed\u30fc\u95a2\u6570\u3092\u4f7f\u3046\u3068\u7701\u7565\u3057\u305f\u8a18\u6cd5\u3067\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3067\u304d\u308b\u3002<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ \u666e\u901a\u306e\u8a18\u6cd5\r\n\/\/ function hello(name = 'Yama') {\r\n\/\/ console.log('hello ' + name);\r\n\/\/ }\r\n\r\n\/\/ \u666e\u901a\u306e\u8a18\u6cd52\r\n\/\/ const hello = function(name = 'Yama') {\r\n\/\/ console.log('hello ' + name);\r\n\/\/ }\r\n\r\n\/\/ \u2191\u3092\u30a2\u30ed\u30fc\u95a2\u6570\u306b\u3059\u308b\u5834\u54081\u884c\u3060\u3051\u306a\u3089{}\u3092\u9664\u3051\u308b\r\n\/\/ const hello = (name = 'Yama') =&gt; console.log('hello ' + name);\r\n\r\n\/\/ \u5f15\u6570\u304c\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u306a\u3089\u66f4\u306b\u7701\u7565\u3067\u304d\u308b\r\n\/\/ const hello = name =&gt; console.log('hello ' + name);\r\n\r\n\/\/ \u5f15\u6570\u304c2\u3064\u306a\u3089\u3053\u306e\u3088\u3046\u306b\u8a18\u8ff0\r\n\/\/ const hello = (name, age) =&gt; console.log('hello ' + name + age);\r\n\r\n\/\/ \u623b\u308a\u5024\u3092\u51fa\u529b\u3059\u308b\u5834\u5408\u3001\u4e00\u822c\u7684\u8a18\u6cd5\r\n\/\/ const hello = (name, age) =&gt; {\r\n\/\/ return 40;\r\n\/\/ }\r\n\r\n\/\/ \u4e0a\u3068\u540c\u3058\u610f\u5473\u3060\u304c\u66f4\u306b\u7701\u7565\u3067\u304d\u308b\r\n\/\/ const hello = (name, age) =&gt; 40;\r\n\/\/ console.log(hello());\r\n\r\n\/\/ \u4f8b\uff1a\u7701\u7565\u524d\u306e\u8a18\u6cd5\r\n\/\/ const retriever = (name, age) =&gt; 40;\r\n\/\/ const arry = [1,2,3,4,5,6];\r\n\/\/ arry.forEach(value =&gt; {\r\n\/\/ console.log(value);\r\n\/\/ })\r\n\r\n\/\/ \u7701\u7565\u5f8c\u306e\u30a2\u30ed\u30fc\u95a2\u6570\u306e\u8a18\u6cd5\r\nconst retriever = (name, age) =&gt; 40;\r\n\/\/ \u623b\u308a\u502440\u304c\u51fa\u529b\u3055\u308c\u308b\r\nconsole.log(retriever());\r\n\r\nconst arry = [1,2,3,4,5,6];\r\narry.forEach(value =&gt; console.log(value));\r\nconst hello = (name, age) =&gt; console.log('hello ' + name + age);\r\nhello('Tarou Tanaka ', 15);\r\nhello('Tarou Tanaka2 ', 25);<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4419\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/03bac5716d3fa7e6c27144d45ca364ce-300x197.png\" alt=\"\" width=\"300\" height=\"197\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/03bac5716d3fa7e6c27144d45ca364ce-300x197.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/03bac5716d3fa7e6c27144d45ca364ce-768x504.png 768w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/03bac5716d3fa7e6c27144d45ca364ce-624x409.png 624w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/03bac5716d3fa7e6c27144d45ca364ce.png 884w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3>6:\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3068\u30eb\u30fc\u30d7\u51e6\u7406<\/h3>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ \u666e\u901a\u306e\u30eb\u30fc\u30d7\u6587\r\n\/\/ const arry = [1,2,3,4,5,];\r\n\/\/ for(let i = 0; i&lt; arry.length; i++) {\r\n\/\/ console.log(arry[i]);\r\n\/\/ }\r\n\r\nconst arry = [1, 2, 3, 4, 5];\r\n  function forEach(ary, callback) {\r\n  for (let i = 0; i &lt; ary.length; i++) {\r\n  callback(ary[i]);\r\n}\r\n}\r\n\/\/ \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u7528\u610f\u3059\u308b\r\nfunction log(val) {\r\n  console.log(val);\r\n}\r\n\r\nfunction double(val) {\r\n  val = val * 2;\r\n  log(val);\r\n }\r\n\/\/ \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u5207\u308a\u66ff\u3048\u308b\u3053\u3068\u3067\u540c\u3058\u95a2\u6570\u3067\u3082\u51fa\u529b\u7d50\u679c\u3092\u5909\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u308b\r\n\r\nforEach(arry, log);\r\nforEach(arry, double);<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c<\/h3>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4422\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/2de7946f1c3aff415e587ef4d90354a1-300x235.png\" alt=\"\" width=\"300\" height=\"235\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/2de7946f1c3aff415e587ef4d90354a1-300x235.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/2de7946f1c3aff415e587ef4d90354a1-768x602.png 768w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/2de7946f1c3aff415e587ef4d90354a1-624x489.png 624w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/2de7946f1c3aff415e587ef4d90354a1.png 888w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/h3>\n<h3>7:\u914d\u5217\u3068forEach\u30e1\u30bd\u30c3\u30c9<\/h3>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const arry = [1, 2, 3, 4, 5];\r\n\r\n\/\/ \u5909\u6570\u540d\u306f\u4f55\u3067\u3082\u3044\u3044\u306e\u3067v,forEach\u3092\u4f7f\u3063\u305f\u307b\u3046\u304c\u8a18\u8ff0\u304c\u5c11\u306a\u3044\r\n  arry.forEach(function(v, i, ary) {\r\n    console.log(v, i, ary);\r\n})\r\n\r\n\/\/ \u30a2\u30ed\u30fc\u95a2\u6570\u306e\u8a18\u6cd5\u3060\u3068\u66f4\u306b\u7701\u7565\u3067\u304d\u308b\r\n  arry.forEach(v =&gt; console.log(v));<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c<\/h3>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4423\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/2c79e5195f979f779f253e8108614a23-300x226.png\" alt=\"\" width=\"300\" height=\"226\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/2c79e5195f979f779f253e8108614a23-300x226.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/2c79e5195f979f779f253e8108614a23-768x577.png 768w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/2c79e5195f979f779f253e8108614a23-624x469.png 624w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/2c79e5195f979f779f253e8108614a23.png 886w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/h3>\n<h3>8:reduce\u30e1\u30bd\u30c3\u30c9<\/h3>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const arry = [1, 2, 3, 4, 5];\r\n\r\n\/\/reduce\u306e\u7b2c\uff12\u5f15\u6570\u3092\u6307\u5b9a\u3057\u306a\u3044\u5834\u5408\u306b\u306f\u3001accu\u306b\u914d\u5217\u306e0\u756a\u76ee\u3001curr\u306b\u914d\u5217\u306e\uff11\u756a\u76ee\u306e\u8981\u7d20\u304c\u6e21\u3063\u3066\u304f\u308b\r\n\/\/ arry.reduce(function (accu, curr) {\r\n\/\/ console.log(accu, curr);\r\n\/\/ return accu + curr;\r\n\/\/ });\r\n\/\/ \u521d\u671f\u5024\u3092\u8a2d\u5b9a\u3059\u308b\u3068\u304d\u300210\u304c\u6700\u521d\u306baccu\u3001curr\u306b1(\u914d\u5217\u306e\u6700\u521d)\u304c\u6e21\u3063\u3066\u304f\u308b\r\n  arry.reduce(function (accu, curr) {\r\n  console.log(accu, curr);\r\n  return accu + curr;\r\n}, 10);\r\n\r\n  const str = \"animation\";\r\n  const strArry = str.split(\"\");\r\n  const result = strArry.reduce((accu, curr) =&gt; {\r\n  console.log(accu);\r\n\/\/ \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30ea\u30c6\u30e9\u30eb\r\n  return `${accu}&lt;${curr}&gt;`;\r\n\/\/ \u4e0a\u3068\u4e0b\u306f\u540c\u3058\u3060\u3088\r\n\/\/ return accu + \"&lt;\" + curr + \"&gt;\";\r\n}, \"\");\r\n\r\n  console.log(result);<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c<\/h3>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4424\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/0488a87962aeca07348f6b97089943ee-300x279.png\" alt=\"\" width=\"300\" height=\"279\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/0488a87962aeca07348f6b97089943ee-300x279.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/0488a87962aeca07348f6b97089943ee-768x714.png 768w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/0488a87962aeca07348f6b97089943ee-624x581.png 624w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/0488a87962aeca07348f6b97089943ee.png 890w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/h3>\n<h3>\u30af\u30e9\u30b9<\/h3>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const obj = {\r\n\/\/ \u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u30ad\u30fc\u304c\u3042\u308b\u3082\u306e\u304c\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\r\nfirst_name: 'Suzutuki',\r\nlast_name: 'Akina',\r\nprintFullname: function() {\r\nconsole.log('hello');\r\n}\r\n}\r\n\r\n\/\/ class\u3068\u3044\u3046\u6f14\u7b97\u5b50\u3092\u7528\u3044\u3066\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u521d\u671f\u5316\u3059\u308b\u51e6\u7406\u3092\u8a18\u8f09\u3059\u308b\r\nclass Myobj {\r\nconstructor() {\r\nthis.first_name = 'Suzutuki';\r\nthis.last_name = 'Akina';\r\n}\r\n\r\nprintFullname() {\r\nconsole.log('hello');\r\n}\r\n}\r\n\/\/ new\u6f14\u7b97\u5b50\u3092\u4f7f\u3046\u3053\u3068\u306b\u3088\u3063\u3066\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304c\u751f\u6210\u3055\u308c\u308b\r\nconst obj2 = new Myobj();\r\n\r\nobj.printFullname()\r\nobj2.printFullname()\r\nconsole.log(obj.first_name);\r\nconsole.log(obj2.last_name);<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4445\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/ee67b09406ce625ba8796dac4db77b49-300x122.png\" alt=\"\" width=\"300\" height=\"122\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/ee67b09406ce625ba8796dac4db77b49-300x122.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/ee67b09406ce625ba8796dac4db77b49.png 446w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3>this\u3068bind<\/h3>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const obj = {\r\n  first_name: 'Jirou',\r\n  last_name: 'Yamada',\r\n  printFullName: function () {\r\n\/\/ \u3053\u306eThis\u306fobj\u3092\u53c2\u7167\u3059\u308b\u306e\u3067first_name: 'Jirou',last_name: 'Yamada',\u304c\u51fa\u529b\u3055\u308c\u308b\u3088\r\n   console.log(this);\r\n\/\/ this\u3092\u56fa\u5b9a\u3059\u308b\u65b9\u6cd51: \u5909\u6570\u3068\u3057\u3066\u3053\u306e\u6642\u70b9\u306ethis\u3092\u5165\u308c\u308b\r\n   const _that = this;\r\n     window.setTimeout(function () {\r\n\/\/ \u3053\u306ethis\u306fwiondow\u3092\u53c2\u7167\u3059\u308b\r\n   console.log(this);\r\n\/\/ \u3053\u3061\u3089\u306e\u3084\u308a\u65b9\u3060\u3068obj\u304c\u51fa\u529b\u3055\u308c\u308b\u3088\r\n   console.log(_that);\r\n  });\r\n }\r\n} \r\n  console.log(obj.first_name);\r\n  obj.printFullName();\r\n\r\nconst obj2 = {\r\n  first_name: 'Akina',\r\n  last_name: 'Suzutuki',\r\n  printFullName: function () {\r\n    setTimeout(function () {\r\n\/\/ \u3053\u306ethis\u306fwiondow\u3092\u53c2\u7167\u3059\u308b(bind\u304c\u306a\u3044\u5834\u5408)\r\n  console.log(this);\r\n\/\/ this\u3092\u56fa\u5b9a\u3059\u308b\u65b9\u6cd52:.bind\u3092\u4f7f\u3046\r\n\/\/ }.bind(this));\r\n\/\/ this\u306ebind\u306e\u5f15\u6570\u3067\u4e0e\u3048\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5909\u3048\u308b\u3053\u3068\u3082\u3067\u304d\u308b\u3088\r\n  }.bind({ first_name: 'Akina' }));\r\n }\r\n}\r\nconsole.log(obj2.first_name);\r\nobj2.printFullName();<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4446\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/c54847233b3c6658754ed373a5c22d8d-300x226.png\" alt=\"\" width=\"300\" height=\"226\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/c54847233b3c6658754ed373a5c22d8d-300x226.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/c54847233b3c6658754ed373a5c22d8d-768x578.png 768w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/c54847233b3c6658754ed373a5c22d8d-624x470.png 624w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/c54847233b3c6658754ed373a5c22d8d.png 996w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3>\u30af\u30e9\u30b9\u7d99\u627f<\/h3>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>document.addEventListener('DOMContentLoaded', function () {\r\n  const ta = new TweenTextAnimation('.tween-animate-title');\r\n    ta.animate();\r\n });\r\n\r\n\/\/ &lt;span class&gt;\u6587\u5b57&lt;\/span&gt;\u3068\u3057\u305f\u3044\u3001\u7a7a\u767d\u3082\u8868\u73fe\u3057\u305f\u3044\r\nclass TextAnimation {\r\n    constructor(el) {\r\n\/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30ea\u30c6\u30e9\u30eb\u3067\u521d\u671f\u5316\u3059\u308b\r\n    this.DOM = {};\r\n \/\/\u5168\u3066\u306eDOM\u8981\u7d20'.tween-animate-title'\u3092\u683c\u7d0d\u3059\u308b\r\n      this.DOM.el = document.querySelector(el);\r\n      this.chars = this.DOM.el.innerHTML.trim().split(\"\");\r\n      this.DOM.el.innerHTML = this._splitText();\r\n}\r\n  _splitText() {\r\n    return this.chars.reduce((acc, curr) =&gt; {\r\n     curr = curr.replace(\/\\s+\/, '\u00a0');\r\n     return `${acc}&lt;span class=\"char\"&gt;${curr}&lt;\/span&gt;`;\r\n  }, \"\");\r\n}\r\n  animate() {\r\n    this.DOM.el.classList.toggle('inview');\r\n }\r\n}\r\n\/\/ \u7d99\u627f\u3092\u5ba3\u8a00\u3059\u308b\r\n  class TweenTextAnimation extends TextAnimation {\r\n    constructor(el) {\r\n\/\/ \u89aa\u306e\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u3092\u547c\u3073\u51fa\u3059\r\n      super(el);\r\n      console.log(el);\r\n      this.DOM.chars = this.DOM.el.querySelectorAll('.char');\r\n      console.log(this.DOM.chars);\r\n      console.log(this.chars);\r\n}\r\n\/\/ \u8a18\u8f09\u3092\u66f8\u304d\u63db\u3048\u305f\u3044(\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9)\u5834\u5408\r\n  animate() {\r\n  \/\/ inview\u3092\u3064\u3051\u308b\r\n    this.DOM.el.classList.add('inview')\r\n\/\/ i\u304c\u306a\u3044\u3068i is not defined\u3068\u306a\u308b\u3088\r\n    this.DOM.chars.forEach((c, i) =&gt; {\r\n\/\/ TweenMax\u306e\u66f8\u304d\u65b9(to\u30e1\u30bd\u30c3\u30c9)\r\n\/\/ \u7b2c\u4e00\u5f15\u6570\u306bDOM\u3001\u7b2c\u4e8c\u5f15\u6570\u304c\u5bfe\u8c61\u3068\u306a\u308bDOM\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u9593\u9694\r\n    TweenMax.to(c, .6, {\r\n\/\/ \u30aa\u30d7\u30b7\u30e7\u30f3ease\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3,delay\u306e\u9593\u9694,\u59cb\u307e\u308b\u72b6\u614b\r\n      ease: Back.easeOut,\r\n      delay: i * .05,\r\n\/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u59cb\u307e\u308b\u72b6\u614b\r\n      startAt: { y: '-50%', opacity: 0},\r\n\/\/ \u7d42\u4e86\u6642\u306e\u72b6\u614b\u900f\u660e\u5ea6\u89e3\u9664\r\n      y: '0%',\r\n      opacity: 1\r\n   });\r\n  });\r\n }\r\n}\r\n\r\n\r\n\/\/ \u3053\u306e\u90e8\u5206\u7d99\u627f\u3059\u308b\u3053\u3068\u3067\u30ab\u30c3\u30c8\u3057\u305f\u90e8\u5206\r\n\/\/ this.dom.el = document.querySelector(el);\r\n\/\/ this.chars = this.dom.el .innerHTML.trim().split(\"\");\r\n\/\/ this.dom.el .innerHTML = this._splitText();\r\n\/\/ }\r\n\/\/ _splitText() {\r\n\/\/ return this.chars.reduce((acc, curr) =&gt; {\r\n\/\/ curr = curr.replace(\/\\s+\/, '\u00a0');\r\n\/\/ return `${acc}&lt;span class=\"char\"&gt;${curr}&lt;\/span&gt;`;\r\n\/\/ }, \"\");\r\n\/\/ }<\/code><\/pre>\n<\/div>\n<h3>\u51fa\u529b\u7d50\u679c<\/h3>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4447\" src=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/870242ca30ed0c53a31cf2100aeb44b4-300x240.png\" alt=\"\" width=\"300\" height=\"240\" srcset=\"https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/870242ca30ed0c53a31cf2100aeb44b4-300x240.png 300w, https:\/\/suzutukiblog.com\/wp-content\/uploads\/2021\/09\/870242ca30ed0c53a31cf2100aeb44b4.png 499w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>Javascript\u306e\u57fa\u672c\u69cb\u6587\u3068\u305d\u306e\u51fa\u529b\u7d50\u679c\u3092\u307e\u3068\u3081\u3066\u307f\u305f\u3002 1:\u5909\u6570\u306e\u5b9a\u7fa9var,let,const \/\/ var, let, const \/\/ var\u306f\u4e0a\u66f8\u304d\u3067\u304d\u308b var name = &#8216;Tom&#8217;; console [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[25,17,27],"tags":[],"class_list":["post-4396","post","type-post","status-publish","format-standard","hentry","category-cheatsheet","category-javascript","category-programming-note"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/4396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/comments?post=4396"}],"version-history":[{"count":12,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/4396\/revisions"}],"predecessor-version":[{"id":7239,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/4396\/revisions\/7239"}],"wp:attachment":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/media?parent=4396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/categories?post=4396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/tags?post=4396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}