{"id":139,"date":"2023-10-18T22:32:57","date_gmt":"2023-10-18T13:32:57","guid":{"rendered":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/?p=139"},"modified":"2023-10-18T22:50:28","modified_gmt":"2023-10-18T13:50:28","slug":"%e9%96%8b%e7%99%ba%e6%97%a5%e8%aa%8c-10-18","status":"publish","type":"post","link":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/?p=139","title":{"rendered":"\u958b\u767a\u65e5\u8a8c 10\/18"},"content":{"rendered":"\n<ul>\n<li>\u521d\u3081\u3066\u306eThree.js, HTML5\u306b\u3088\u308b\u7269\u7406\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3, \u30af\u30e9\u30a6\u30c9\u3067\u304d\u3067\u308bHTML\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u30a2\u30d7\u30ea\u958b\u767a\u3092\u8aad\u3093\u3060\u3002<\/li>\n\n\n\n<li>WebGL\u306fOpenGL ES 2.0\u304b\u3089\u958b\u767a\u304c\u59cb\u307e\u3063\u305f\u306e\u3067\u3001\u56fa\u5b9a\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u6a5f\u80fd\u306f\u7121\u3044\u3002\u3084\u3063\u3071\u308a\u9762\u5012\u3060\u304b\u3089Three.js\u3092\u4f7f\u304a\u3046\u3002<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>Three.js\u306fScene\u306b\u3001Camera, Mesh\u3092\u8ffd\u52a0\u3059\u308c\u3070\u3044\u3044\u3002\u3059\u3079\u3066\u306e\u30e1\u30c3\u30b7\u30e5\u306f\u3001Scene\u306e\u5b50\u30ce\u30fc\u30c9\u3068\u3057\u3066\u7ba1\u7406\u3055\u308c\u308b\u3002<\/li>\n\n\n\n<li>requestAnimationFrame\u3092\u4f7f\u3048\u3070\u3044\u3044\u30d6\u30e9\u30a6\u30b6\u304c\u3044\u3044\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u5f15\u6570\u306e\u95a2\u6570\u3092\u547c\u3073\u51fa\u3057\u3066\u304f\u308c\u308b\u3089\u3057\u3044\u3002\u305d\u306e\u305f\u3081\u3001\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u95a2\u6570\u306e\u4e2d\u3067\u3053\u308c\u3092\u547c\u3073\u51fa\u3059\u3053\u3068\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u66f8\u3051\u308b\u3060\u308d\u3046\u3002\u3067\u3082\u3001\u305d\u3053\u307e\u3067\u305b\u305a\u3068\u3082\u5024\u3092\u66f4\u65b0\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u3067\u5c11\u3057\u305a\u3064\u547c\u3073\u51fa\u305b\u3070\u5341\u5206\u306a\u6c17\u3082\u3059\u308b\u3002<\/li>\n\n\n\n<li>\u6a19\u6e96\u3067PointerLookControls\u3068\u304bOrbitControls\u3068\u304b\u304c\u5b58\u5728\u3059\u308b\u3002\u4f7f\u308f\u306a\u3044\u307b\u3046\u304c\u30b7\u30f3\u30d7\u30eb\u306b\u306a\u308a\u305d\u3046\u3060\u3051\u3069\u3002<\/li>\n\n\n\n<li>Projector\u3068Raycaster\u3092\u3064\u304b\u3063\u3066\u30af\u30ea\u30c3\u30af\u3057\u305f\u30e1\u30c3\u30b7\u30e5\u3092\u89e6\u308b\u4e8b\u3082\u3067\u304d\u308b\u3089\u3057\u3044\u3002<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>UI\u306b\u3064\u3044\u3066\u3002\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u3068\u304b\u306fhtml\u5185\u306b\u547c\u3073\u51fa\u3059\u95a2\u6570\u3092\u66f8\u304f\u306e\u304c\u7d50\u5c40\u4e00\u756a\u30b7\u30f3\u30d7\u30eb\u306a\u306e\u304b\u3082\u3057\u308c\u306a\u3044\u3002<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>\u53e4\u3044\u8a71\u3060\u304b\u3089\u602a\u3057\u3044\u304c\u3001-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -webkit-overflow-scrolling: touch:\u3092\u4f7f\u3046\u3068\u3088\u308a\u30cd\u30a4\u30c6\u30a3\u30d6\u30a2\u30d7\u30ea\u3063\u307d\u304f\u306a\u308b\u3089\u3057\u3044\u3002<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>JavaScript\u306eNavigator\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u30cd\u30b9\u30b1\u306e\u540d\u6b8b\u3067\u30d6\u30e9\u30a6\u30b6\u3092\u8868\u3057\u3066\u3044\u308b\u3002<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>Cordova\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u30de\u30a4\u30af\u3092\u89e6\u3063\u3066\u3001\u305d\u306e\u969b\u306b\u30d1\u30fc\u30df\u30c3\u30b7\u30e7\u30f3\u3092\u7372\u308c\u3070\u3044\u3044\u306e\u3067\u306f\uff01\uff1f<\/li>\n\n\n\n<li><\/li>\n\n\n\n<li>AngularJS\uff1f\u4f7f\u3046\u4fa1\u5024\u306f\u3042\u308b\u304b\u3002<\/li>\n\n\n\n<li>CSS\u30b3\u30f3\u30d1\u30a4\u30e9\u3068\u3044\u3046\u3082\u306e\u304c\u3042\u308b\u3089\u3057\u3044\u3002<\/li>\n\n\n\n<li>XSS\u653b\u6483\u53d7\u3051\u308b\u306a\u3002\u540d\u524d\u5165\u529b\u306e\u3068\u3053\u308d\u3068\u304b\u3002<\/li>\n\n\n\n<li>JS\u306e\u95a2\u6570\u306f\u5f15\u6570\u304c\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u306a\u3089\u5024\u6e21\u3057\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306a\u3089\u53c2\u7167\u6e21\u3057\u3067\u3042\u308b\u3002<\/li>\n\n\n\n<li>\u7d50\u5c40\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u306e\u4e2d\u306b\u5024\u3092\u6e21\u3059\u306b\u306f\u5916\u5074\u306e\u30b9\u30b3\u30fc\u30d7\u306e\u5909\u6570\u3084\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u901a\u3059\u3053\u3068\u306b\u306a\u308b\u3002\u305d\u308c\u4ee5\u5916\u306b\u308f\u304b\u308a\u3084\u3059\u3044\u65b9\u6cd5\u306f\u7121\u3044\u3002<\/li>\n\n\n\n<li>bind()?\u3088\u3046\u308f\u304b\u3089\u3093<\/li>\n\n\n\n<li>\u3067\u3082\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u5185\u3067\u65b0\u3057\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u751f\u6210\u3057\u3066\u3057\u307e\u3046\u5834\u5408\u304c\u3042\u308b\u3002\u305d\u306e\u5834\u5408\u306e\u5bfe\u51e6\u3092chatGPT\u306b\u6559\u3048\u3066\u3082\u3089\u3063\u305f\u3002<\/li>\n\n\n\n<li>Source\u3068\u3044\u3046\u306e\u306f\u3001\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u4e2d\u306b\u751f\u6210\u3057\u305faudioBufferSource\u3092\uff12\u56de\u3081\u306b\u30af\u30ea\u30c3\u30af\u3057\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u6d88\u3059\u65b9\u6cd5\u304c\u898b\u3064\u304b\u3089\u306a\u304f\u3066\u56f0\u3063\u305f\u304b\u3089\u3002<\/li>\n\n\n\n<li>\u7d50\u5c40\u5916\u5074\u306e\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u5185\u3067\u5ba3\u8a00\u3057\u305f\u304b\u3089\u3044\u3044\u3093\u3060\u3051\u3069\u3002window.variable\u3068\u304b\u306a\u306b\u304b\u308f\u304b\u308a\u3084\u3059\u304f\u3059\u308b\u65b9\u6cd5\u3092\u8003\u3048\u306a\u3044\u3068\u3084\u3070\u3044\u306a\u3002<\/li>\n\n\n\n<li>\u3053\u308c\u306f\u304d\u3063\u3068\u8907\u6570\u306e\u30bd\u30fc\u30b9\u3092\u4f5c\u308b\u3068\u304d\u306b\u5f79\u7acb\u3064\u3060\u308d\u3046\u3002<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"const sources = []; \/\/ \u751f\u6210\u3057\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u683c\u7d0d\u3059\u308b\u914d\u5217\n\nelement.addEventListener('yourEvent', () =&gt; {\n  const source = new YourObject(); \/\/ \u65b0\u3057\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\n  sources.push(source); \/\/ \u914d\u5217\u306b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8ffd\u52a0\n\n  \/\/ \u30a4\u30d9\u30f3\u30c8\u304c\u8d77\u304d\u305f\u3068\u304d\u306e\u51e6\u7406\n});\n\n\/\/ \u3042\u3068\u3067 sources \u914d\u5217\u3092\u7ba1\u7406\u3001\u30a2\u30af\u30bb\u30b9\u3001\u524a\u9664\u3067\u304d\u308b\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">sources<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> []<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ \u751f\u6210\u3057\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u683c\u7d0d\u3059\u308b\u914d\u5217<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">element<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">yourEvent<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">source<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">YourObject<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ \u65b0\u3057\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">sources<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">push<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">source<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #616E88\">\/\/ \u914d\u5217\u306b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8ffd\u52a0<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">  <\/span><span style=\"color: #616E88\">\/\/ \u30a4\u30d9\u30f3\u30c8\u304c\u8d77\u304d\u305f\u3068\u304d\u306e\u51e6\u7406<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ \u3042\u3068\u3067 sources \u914d\u5217\u3092\u7ba1\u7406\u3001\u30a2\u30af\u30bb\u30b9\u3001\u524a\u9664\u3067\u304d\u308b<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u7121\u7406\u3057\u3066\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u3092\u306a\u304f\u305d\u3046\u3068\u3059\u308b\u3068\u95a2\u6570\u3092\u8fd4\u3059\u95a2\u6570\u3092\u66f8\u304f\u306f\u3081\u306b\u306a\u308b\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function outerFunction() {\n  let externalVariable = 42;\n\n  function eventHandler() {\n    console.log(externalVariable);\n    \/\/ \u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u3068\u304d\u306e\u51e6\u7406\n  }\n\n  return eventHandler;\n}\n\nconst clickHandler = outerFunction();\n\nelement.addEventListener('click', clickHandler);\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">outerFunction<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">let<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">externalVariable<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">42<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">eventHandler<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">console<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">log<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">externalVariable<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">    <\/span><span style=\"color: #616E88\">\/\/ \u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u3068\u304d\u306e\u51e6\u7406<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">eventHandler<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">clickHandler<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">outerFunction<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">element<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">click<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">clickHandler<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3042\u308b\u3044\u306fclass\u3092\u3064\u304b\u3046\u3068\u308f\u304b\u308a\u3084\u3059\u304f\u306a\u308b\u304c\u3001\u901a\u5e38\u306e\u95a2\u6570\u5b9a\u7fa9\u3067\u306fthis\u306e\u6307\u3059\u3082\u306e\u304c\u305d\u306e\u6642\u306b\u3088\u3063\u3066\u5909\u308f\u308b\u3089\u3057\u3044\uff1f\u306e\u3067bind\u3092\u4f7f\u3046\u5fc5\u8981\u304c\u3042\u308b\u3002 \u3042\u308b\u3044\u306fvar self = this; \u3068\u3057\u3066self\u3092\u3064\u304b\u3063\u3066\u30a2\u30af\u30bb\u30b9\u3059\u308b\u304b\u3002\uff08\u305d\u308c\u3063\u3066\u95a2\u6570\u306e\u3068\u304d\u3060\u3051\u3067\u3001\u30af\u30e9\u30b9\u306a\u3089\u554f\u984c\u306a\u3044\u3093\u3058\u3083\u306a\u3044\u306e\u304b\uff1f\uff09<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"class MyObject {\n  constructor() {\n    this.externalVariable = 42;\n  }\n\n  eventHandler() {\n    console.log(this.externalVariable);\n    \/\/ \u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u3068\u304d\u306e\u51e6\u7406\n  }\n}\n\nconst myInstance = new MyObject();\n\nelement.addEventListener('click', myInstance.eventHandler.bind(myInstance));\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">class<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">MyObject<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">constructor<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">externalVariable<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">42<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #88C0D0\">eventHandler<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">console<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">log<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">externalVariable<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">    <\/span><span style=\"color: #616E88\">\/\/ \u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u3068\u304d\u306e\u51e6\u7406<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">myInstance<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">MyObject<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">element<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">click<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">myInstance<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">eventHandler<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">bind<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">myInstance<\/span><span style=\"color: #D8DEE9FF\">))<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#39404f;color:#c8d0e0\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" data-code=\"class MyObject {\n  constructor() {\n    this.externalVariable = 42;\n    this.eventHandler = () =&gt; {\n      console.log(this.externalVariable);\n      \/\/ \u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u3068\u304d\u306e\u51e6\u7406\n    };\n  }\n}\n\nconst myInstance = new MyObject();\n\nelement.addEventListener('click', myInstance.eventHandler);\n\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">class<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">MyObject<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">constructor<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">externalVariable<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">42<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">eventHandler<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #D8DEE9\">console<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">log<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">this<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">externalVariable<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">      <\/span><span style=\"color: #616E88\">\/\/ \u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u3068\u304d\u306e\u51e6\u7406<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">myInstance<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">MyObject<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">element<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">click<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">myInstance<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">eventHandler<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u7121\u7406\u3057\u3066\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u3092\u306a\u304f\u305d\u3046\u3068\u3059\u308b\u3068\u95a2\u6570\u3092\u8fd4\u3059\u95a2\u6570\u3092\u66f8\u304f\u306f\u3081\u306b\u306a\u308b\u3002 \u3042\u308b\u3044\u306fclass\u3092\u3064\u304b\u3046\u3068\u308f\u304b\u308a\u3084\u3059\u304f\u306a\u308b\u304c\u3001\u901a\u5e38\u306e\u95a2\u6570\u5b9a\u7fa9\u3067\u306fthis\u306e\u6307\u3059\u3082\u306e\u304c\u305d\u306e\u6642\u306b\u3088\u3063\u3066\u5909\u308f\u308b\u3089\u3057\u3044\uff1f\u306e\u3067bind\u3092\u4f7f\u3046\u5fc5\u8981\u304c\u3042\u308b\u3002  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/139"}],"collection":[{"href":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=139"}],"version-history":[{"count":3,"href":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":142,"href":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/139\/revisions\/142"}],"wp:attachment":[{"href":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/arei1126.ddns.net\/mozihakkou\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}