{"id":42270,"date":"2023-02-14T17:28:26","date_gmt":"2023-02-14T08:28:26","guid":{"rendered":"https:\/\/kinsta.com\/jp\/?p=42270&#038;preview=true&#038;preview_id=42270"},"modified":"2023-08-25T16:55:06","modified_gmt":"2023-08-25T07:55:06","slug":"javascript-design-patterns","status":"publish","type":"post","link":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/","title":{"rendered":"JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/jp\/blog\/what-is-javascript\/\">JavaScript<\/a>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9\u3067\u306f\u3001\u3042\u308b\u7279\u5b9a\u306e\u4e8b\u524d\u306b\u5b9a\u7fa9\u3055\u308c\u305f\u65b9\u6cd5\u3067\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u305f\u308a\u3001\u3055\u307e\u3056\u307e\u306a\u76ee\u7684\u306b\u5fdc\u3058\u3066\u5171\u901a\u30af\u30e9\u30b9\u3092\u4fee\u6b63\u3057\u3001\u9069\u5408\u3055\u305b\u3066\u518d\u5229\u7528\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u3088\u3046\u306a\u4f5c\u696d\u3092\u7e70\u308a\u8fd4\u3057\u884c\u3046\u306e\u306f\u3001\u3082\u3061\u308d\u3093\u697d\u3057\u3044\u3053\u3068\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u305d\u3053\u3067\u4e00\u5f79\u8cb7\u3063\u3066\u304f\u308c\u308b\u306e\u304c\u3001JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002<\/p>\n\n<p>JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001JavaScript\u306e\u958b\u767a\u3067\u983b\u51fa\u3059\u308b\u554f\u984c\u306b\u5bfe\u3057\u3001\u69cb\u9020\u5316\u3055\u308c\u3001\u7e70\u308a\u8fd4\u3057\u5229\u7528\u53ef\u80fd\u306a\u89e3\u6c7a\u7b56\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u6982\u8981\u3068\u3001JavaScript\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u304a\u3051\u308b\u4f7f\u7528\u65b9\u6cd5\u3092\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u6982\u8981<\/h2>\n<p>JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001JavaScript\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u3067\u983b\u7e41\u306b\u767a\u751f\u3059\u308b\u554f\u984c\u3078\u306e\u3001\u7e70\u308a\u8fd4\u3057\u53ef\u80fd\u306a\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u3088\u308b\u89e3\u6c7a\u7b56\u3067\u3059\u3002<\/p>\n<p>\u8003\u3048\u65b9\u306f\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002\u4e16\u754c\u4e2d\u306e\u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u306f\u3001\u305d\u306e\u9ece\u660e\u671f\u304b\u3089\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/application-developer\/\">\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a<\/a>\u3059\u308b\u969b\u306b\u7e70\u308a\u8fd4\u3057\u767a\u751f\u3059\u308b\u554f\u984c\u306b\u76f4\u9762\u3057\u3066\u304d\u307e\u3057\u305f\u3002\u6642\u304c\u7d4c\u3064\u306b\u3064\u308c\u3001\u4e00\u90e8\u306e\u958b\u767a\u8005\u306f\u3001\u3053\u3046\u3057\u305f\u554f\u984c\u306e\u89e3\u6c7a\u306e\u305f\u3081\u306b\u81ea\u8eab\u304c\u57f9\u3063\u305f\u7d4c\u9a13\u3084\u65b9\u6cd5\u3092\u4ed6\u306e\u958b\u767a\u8005\u306e\u305f\u3081\u306b\u6587\u66f8\u5316\u3059\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>\u591a\u304f\u306e\u958b\u767a\u8005\u304c\u305d\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u8003\u306b\u3001\u554f\u984c\u89e3\u6c7a\u306e\u52b9\u7387\u5316\u306b\u6210\u529f\u3057\u3001\u4e00\u822c\u7684\u306b\u53d7\u3051\u5165\u308c\u3089\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u3084\u304c\u3066\u300c\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u300d\u3068\u547c\u3070\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u91cd\u8981\u6027\u304c\u5e83\u304f\u7406\u89e3\u3055\u308c\u308b\u3053\u3068\u3067\u3001\u958b\u767a\u306f\u3055\u3089\u306b\u9032\u307f\u3001\u6a19\u6e96\u5316\u3055\u308c\u307e\u3057\u305f\u3002\u73fe\u4ee3\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u307b\u3068\u3093\u3069\u306f\u3001\u5b9a\u7fa9\u3055\u308c\u305f\u69cb\u9020\u3092\u6301\u3061\u3001\u8907\u6570\u306e\u30ab\u30c6\u30b4\u30ea\u306b\u6574\u7406\u3055\u308c\u3001\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u30b5\u30a4\u30a8\u30f3\u30b9\u95a2\u9023\u306e\u5b66\u4f4d\u3067\u72ec\u7acb\u3057\u305f\u5206\u91ce\u3068\u3057\u3066\u6559\u3048\u3089\u308c\u308b\u307e\u3067\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<h2>JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u7a2e\u985e<\/h2>\n<p>\u6700\u3082\u4e00\u822c\u7684\u306aJavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u3044\u304f\u3064\u304b\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<h3>\u751f\u6210<\/h3>\n<p>\u751f\u6210\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001JavaScript\u3067\u306e\u65b0\u3057\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u4f5c\u6210\u3084\u3001\u7ba1\u7406\u306b\u95a2\u9023\u3059\u308b\u554f\u984c\u89e3\u6c7a\u3092\u652f\u63f4\u3057\u307e\u3059\u3002\u30af\u30e9\u30b9\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30921\u3064\u306b\u9650\u5b9a\u3059\u308b\u5358\u7d14\u306a\u3082\u306e\u304b\u3089\u3001JavaScript\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5404\u6a5f\u80fd\u3092\u9010\u4e00\u9078\u629e\u3057\u3066\u8ffd\u52a0\u3059\u308b\u3088\u3046\u306a\u3001\u8fbc\u307f\u5165\u3063\u305f\u65b9\u6cd5\u3092\u5b9a\u7fa9\u3059\u308b\u8907\u96d1\u306a\u3082\u306e\u307e\u3067\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u751f\u6210\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u4f8b\u3068\u3057\u3066\u306f\u3001Singleton\u3001Factory Method\u3001Abstract Factory\u3001Builder\u306a\u3069\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h3>\u69cb\u9020<\/h3>\n<p>\u69cb\u9020\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001JavaScript\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u69cb\u9020\uff08\u307e\u305f\u306f\u30b9\u30ad\u30fc\u30de\uff09\u7ba1\u7406\u306b\u95a2\u9023\u3059\u308b\u554f\u984c\u89e3\u6c7a\u3092\u652f\u63f4\u3057\u307e\u3059\u3002\u3053\u306e\u3088\u3046\u306a\u554f\u984c\u306b\u306f\u30012\u3064\u306e\u7570\u306a\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u9593\u306e\u95a2\u4fc2\u306e\u69cb\u7bc9\u3084\u3001\u7279\u5b9a\u30e6\u30fc\u30b6\u30fc\u5411\u3051\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6a5f\u80fd\u306e\u62bd\u8c61\u5316\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u69cb\u9020\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u4f8b\u3068\u3057\u3066\u306f\u3001Adapter\u3001Bridge\u3001Composite\u3001Facade\u306a\u3069\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h3>\u632f\u308b\u821e\u3044<\/h3>\n<p>\u632f\u308b\u821e\u3044\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u69d8\u3005\u306a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u9593\u3067\u5236\u5fa1\uff08\u3068\u8cac\u4efb\uff09\u3092\u53d7\u3051\u6e21\u3059\u65b9\u6cd5\u306b\u95a2\u9023\u3059\u308b\u554f\u984c\u89e3\u6c7a\u3092\u652f\u63f4\u3057\u307e\u3059\u3002\u3053\u306e\u3088\u3046\u306a\u554f\u984c\u306b\u306f\u3001\u30ea\u30f3\u30af\u30ea\u30b9\u30c8\u3078\u306e\u30a2\u30af\u30bb\u30b9\u306e\u5236\u5fa1\u3084\u3001\u8907\u6570\u7a2e\u985e\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3092\u5236\u5fa1\u3067\u304d\u308b\u5358\u4e00\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u306e\u78ba\u7acb\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u632f\u308b\u821e\u3044\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u4f8b\u3068\u3057\u3066\u306f\u3001Command\u3001Iterator\u3001Memento\u3001Observer\u306a\u3069\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h3>\u4e26\u884c<\/h3>\n<p>\u4e26\u884c\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30de\u30eb\u30c1\u30b9\u30ec\u30c3\u30c9\u3084\u30de\u30eb\u30c1\u30bf\u30b9\u30af\u306b\u95a2\u9023\u3059\u308b\u554f\u984c\u89e3\u6c7a\u3092\u652f\u63f4\u3057\u307e\u3059\u3002\u3053\u306e\u3088\u3046\u306a\u554f\u984c\u306b\u306f\u3001\u8907\u6570\u306e\u5229\u7528\u53ef\u80fd\u306a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u4e2d\u3067\u306e\u30a2\u30af\u30c6\u30a3\u30d6\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u7dad\u6301\u3084\u3001\u6d41\u5165\u3059\u308b\u5165\u529b\u3092\u591a\u91cd\u5316\u305b\u305a\u3001\u9010\u6b21\u51e6\u7406\u3059\u308b\u3053\u3068\u3067\u30b7\u30b9\u30c6\u30e0\u3067\u767a\u751f\u3059\u308b\u8907\u6570\u306e\u30a4\u30d9\u30f3\u30c8\u51e6\u7406\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u4e26\u884c\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u4f8b\u3068\u3057\u3066\u306f\u3001active object\u3001nuclear react\u3001scheduler\u306a\u3069\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h3>\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3<\/h3>\n<p>\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u5e83\u3044\u610f\u5473\u3067\u306e<a href=\"https:\/\/kinsta.com\/jp\/blog\/web-application-architecture\/\">\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u8a2d\u8a08<\/a>\u306b\u95a2\u9023\u3059\u308b\u554f\u984c\u89e3\u6c7a\u3092\u652f\u63f4\u3057\u307e\u3059\u3002\u30b7\u30b9\u30c6\u30e0\u8a2d\u8a08\u3001\u9ad8\u53ef\u7528\u6027\u306e\u78ba\u4fdd\u3001\u30ea\u30b9\u30af\u306e\u8efd\u6e1b\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/application-performance-monitoring\/\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u30dc\u30c8\u30eb\u30cd\u30c3\u30af\u306e\u56de\u907f<\/a>\u306a\u3069\u304c\u305d\u306e\u4e00\u4f8b\u3067\u3059\u3002<\/p>\n<p>\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u4f8b\u3068\u3057\u3066\u306f\u3001MVC\u3068MVVM\u306e2\u3064\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h2>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u8981\u7d20<\/h2>\n<p>\u307b\u3068\u3093\u3069\u3059\u3079\u3066\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u30014\u3064\u306e\u91cd\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5206\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li><strong>\u30d1\u30bf\u30fc\u30f3\u540d<\/strong>\uff1a\u4ed6\u306e\u30e6\u30fc\u30b6\u30fc\u3068\u306e\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3\u6642\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u8b58\u5225\u306b\u4f7f\u7528\uff08\u300cSingleton\u300d\u3084\u300cPrototype\u300d\u306a\u3069\uff09\u3002<\/li>\n<li><strong>\u554f\u984c<\/strong>\uff1a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u76ee\u7684\u3092\u8a18\u8ff0\u3002\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u89e3\u6c7a\u3057\u3088\u3046\u3068\u3057\u3066\u3044\u308b\u554f\u984c\u306e\u77ed\u3044\u8aac\u660e\u3067\u3059\u3002\u554f\u984c\u3092\u3088\u308a\u660e\u78ba\u306b\u8aac\u660e\u3059\u308b\u30b7\u30ca\u30ea\u30aa\u4f8b\u3092\u542b\u3080\u5834\u5408\u3082\u3042\u308a\u307e\u3059\u3002\u307e\u305f\u6839\u672c\u306e\u554f\u984c\u306e\u5b8c\u5168\u306a\u89e3\u6c7a\u306e\u305f\u3081\u306b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u5fc5\u8981\u3068\u3059\u308b\u3001\u6761\u4ef6\u306e\u4e00\u89a7\u3082\u542b\u307e\u308c\u307e\u3059\u3002<\/li>\n<li><strong>\u89e3\u6cd5<\/strong>\uff1a\u30af\u30e9\u30b9\u3001\u30e1\u30bd\u30c3\u30c9\u3001\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306a\u3069\u306e\u8981\u7d20\u3067\u69cb\u6210\u3055\u308c\u305f\u554f\u984c\u3092\u89e3\u6c7a\u3002\u660e\u78ba\u306b\u5b9a\u7fa9\u3055\u308c\u305f\u69d8\u3005\u306a\u8981\u7d20\u306e\u95a2\u4fc2\u3001\u8cac\u4efb\u3001\u5354\u8abf\u3092\u4f34\u3044\u307e\u3059\u3002<\/li>\n<li><strong>\u7d50\u679c<\/strong>\uff1a\u30d1\u30bf\u30fc\u30f3\u304c\u3069\u306e\u7a0b\u5ea6\u3046\u307e\u304f\u554f\u984c\u3092\u89e3\u6c7a\u3067\u304d\u305f\u304b\u3092\u5206\u6790\u3002\u7a7a\u9593\u3084\u6642\u9593\u306e\u4f7f\u3044\u65b9\u306a\u3069\u3068\u3068\u3082\u306b\u3001\u540c\u3058\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u4ee3\u66ff\u30a2\u30d7\u30ed\u30fc\u30c1\u3082\u8b70\u8ad6\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n<p>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3068\u305d\u306e\u8d77\u6e90\u306b\u3064\u3044\u3066\u3055\u3089\u306b\u6398\u308a\u4e0b\u3052\u305f\u3044\u65b9\u306f\u3001<a href=\"https:\/\/www.cse.msu.edu\/~cse870\/Lectures\/SS2005\/08-design-patterns.ppt\">MSU\uff08\u30df\u30b7\u30ac\u30f3\u5dde\u7acb\u5927\u5b66\uff09\u306e\u7c21\u6f54\u306a\u5b66\u7fd2\u6559\u6750<\/a>\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u30e1\u30ea\u30c3\u30c8<\/h2>\n<p>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306b\u306f\u3001\u6570\u3005\u306e\u30e1\u30ea\u30c3\u30c8\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li><strong>\u8a66\u884c\u3001\u30c6\u30b9\u30c8\u6e08\u307f<\/strong>\uff1a\u554f\u984c\u306b\u5bfe\u3057\u3066\u3001\u8a66\u884c\u3057\u3001\u30c6\u30b9\u30c8\u3055\u308c\u305f\u89e3\u6cd5\u3092\u5165\u624b\u3067\u304d\u308b\u305f\u3081\uff08\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u554f\u984c\u306e\u8a18\u8ff0\u306b\u9069\u3057\u3066\u3044\u308b\u9650\u308a\uff09\u3001\u5225\u306e\u89e3\u6c7a\u7b56\u3092\u63a2\u3059\u624b\u9593\u3092\u7701\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u307e\u305f\u57fa\u672c\u7684\u306a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u304c\u884c\u308f\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u5b89\u5fc3\u3067\u3059\u3002<\/li>\n<li><strong>\u7406\u89e3\u3057\u3084\u3059\u3044<\/strong>\uff1a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u5c0f\u3055\u304f\u3001\u30b7\u30f3\u30d7\u30eb\u3002\u719f\u7df4\u3057\u305f\u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u3067\u306a\u304f\u3066\u3082\u3001\u4f7f\u7528\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u5bb9\u6613\u306b\u9078\u629e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u6c4e\u7528\u6027\u306b\u5bcc\u307f\uff08\u7279\u5b9a\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u306b\u9650\u5b9a\u3055\u308c\u306a\u3044\uff09\u3001\u5341\u5206\u306a\u554f\u984c\u89e3\u6c7a\u80fd\u529b\u304c\u3042\u308c\u3070\u8ab0\u3067\u3082\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002\u65b0\u5165\u308a\u306e\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u8005\u3067\u3082\u7406\u89e3\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u305f\u3081\u3001\u6280\u8853\u30c1\u30fc\u30e0\u306e\u4eba\u54e1\u63a1\u7528\u30b3\u30b9\u30c8\u306e\u524a\u6e1b\u306b\u3082\u3064\u306a\u304c\u308a\u307e\u3059\u3002<\/li>\n<li><strong>\u5b9f\u88c5\u304c\u7c21\u5358<\/strong>\uff1a\u5f8c\u307b\u3069\u3054\u8aac\u660e\u3057\u307e\u3059\u304c\u3001\u307b\u3068\u3093\u3069\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u975e\u5e38\u306b\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002\u30b3\u30fc\u30c9\u5185\u3067\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u5b9f\u88c5\u306b\u3001\u8907\u6570\u306e<a href=\"https:\/\/kinsta.com\/blog\/python-object-oriented-programming\/\">\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u6982\u5ff5<\/a>\u3092\u77e5\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/li>\n<li><strong>\u518d\u5229\u7528\u3057\u3084\u3059\u3044\u30b3\u30fc\u30c9\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u63d0\u6848<\/strong>\uff1a\u30b3\u30fc\u30c9\u306e\u518d\u5229\u7528\u3068<a href=\"https:\/\/kinsta.com\/blog\/html-best-practices\/\">\u30af\u30ea\u30fc\u30f3\u3055<\/a>\u306f\u3001\u6280\u8853\u696d\u754c\u5168\u4f53\u3067\u5f37\u304f\u63a8\u5968\u3055\u308c\u3066\u304a\u308a\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3053\u308c\u306b\u4e00\u5f79\u8cb7\u3063\u3066\u304f\u308c\u307e\u3059\u3002\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u6a19\u6e96\u7684\u306a\u65b9\u6cd5\u3067\u3042\u308b\u305f\u3081\u3001\u30d1\u30bf\u30fc\u30f3\u306e\u8a2d\u8a08\u8005\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u5168\u4f53\u304c\u518d\u5229\u7528\u53ef\u80fd\u3067\u3001\u67d4\u8edf\u6027\u304c\u3042\u308a\u3001\u307b\u3068\u3093\u3069\u306e\u30b3\u30fc\u30c9\u8a18\u6cd5\u3068\u4e92\u63db\u6027\u3092\u4fdd\u3064\u3088\u3046\u306b\u914d\u616e\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n<li><strong>\u6642\u9593\u3068\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30b5\u30a4\u30ba\u306e\u524a\u6e1b<\/strong>\uff1a\u6a19\u6e96\u7684\u306a\u89e3\u6cd5\u306b\u5f93\u3046\u5927\u304d\u306a\u30e1\u30ea\u30c3\u30c8\u306f\u3001\u5b9f\u88c5\u306b\u304b\u304b\u308b\u624b\u9593\u306e\u524a\u6e1b\u3002\u958b\u767a\u30c1\u30fc\u30e0\u5168\u54e1\u304c\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u7406\u89e3\u3057\u3066\u3044\u308b\u53ef\u80fd\u6027\u306f\u9ad8\u304f\u3001\u5b9f\u88c5\u3059\u308b\u969b\u306e<a href=\"https:\/\/kinsta.com\/jp\/blog\/microsoft-teams-vs-slack\/\">\u8a08\u753b\u3001\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3\u3001\u30b3\u30e9\u30dc\u30ec\u30fc\u30b7\u30e7\u30f3<\/a>\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002\u8a66\u884c\u3057\u3001\u30c6\u30b9\u30c8\u3055\u308c\u305f\u89e3\u6cd5\u306f\u3001\u6a5f\u80fd\u306e\u69cb\u7bc9\u4e2d\u306b\u30ea\u30bd\u30fc\u30b9\u30ea\u30fc\u30af\u306b\u898b\u821e\u308f\u308c\u305f\u308a\u3001\u9060\u56de\u308a\u3059\u308b\u53ef\u80fd\u6027\u306f\u4f4e\u304f\u3001\u6642\u9593\u3068\u7a7a\u9593\u306e\u4e21\u65b9\u3092\u52b9\u7387\u7684\u306b\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u307e\u305f\u3001\u307b\u3068\u3093\u3069\u306e<a href=\"https:\/\/kinsta.com\/blog\/best-programming-language-to-learn\/\">\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e<\/a>\u306b\u306f\u3001Iterator\u3084Observer\u306e\u3088\u3046\u306b\u4e00\u822c\u7684\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u5b9f\u88c5\u3057\u305f\u6a19\u6e96\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<h2>\u304a\u3059\u3059\u3081\u306eJavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3<\/h2>\n<p>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u69cb\u6210\u3068\u30e1\u30ea\u30c3\u30c8\u304c\u5206\u304b\u3063\u305f\u3068\u3053\u308d\u3067\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/node-js-apps\/\">JavaScript\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3<\/a>\u3067\u6700\u3082\u3088\u304f\u4f7f\u7528\u3055\u308c\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u5b9f\u88c5\u65b9\u6cd5\u3068\u5171\u306b\u3054\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<h3>\u751f\u6210\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3<\/h3>\n<p>\u307e\u305a\u306f\u7fd2\u5f97\u3057\u3084\u3059\u3044\u3001\u751f\u6210\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304b\u3089\u3067\u3059\u3002<\/p>\n<h4>1. Singleton<\/h4>\n<p>Singleton\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u696d\u754c\u3067\u6700\u3082\u3088\u304f\u4f7f\u7528\u3055\u308c\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e1\u3064\u3067\u3059\u3002\u3053\u306e\u30d1\u30bf\u30fc\u30f3\u304c\u89e3\u6c7a\u3059\u308b\u554f\u984c\u306f\u3001\u305f\u30601\u3064\u3060\u3051\u306e\u30af\u30e9\u30b9\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u4fdd\u6301\u3002\u3053\u308c\u306f\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30cf\u30f3\u30c9\u30e9\u306a\u3069\u3001\u30ea\u30bd\u30fc\u30b9\u3092\u5927\u91cf\u306b\u6d88\u8cbb\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u3059\u308b\u969b\u306b\u6709\u7528\u3067\u3059\u3002<\/p>\n<p>JavaScript\u306b\u3088\u308b\u5b9f\u88c5\u4f8b\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre><code class=\"language-js\">function SingletonFoo() {\n\n   let fooInstance = null;\n\n   \/\/ For our reference, let's create a counter that will track the number of active instances\n   let count = 0;\n\n   function printCount() {\n       console.log(\"Number of instances: \" + count);\n   }\n\n   function init() {\n       \/\/ For our reference, we'll increase the count by one whenever init() is called\n       count++;\n\n       \/\/ Do the initialization of the resource-intensive object here and return it\n       return {}\n   }\n\n   function createInstance() {\n       if (fooInstance == null) {\n           fooInstance = init();\n       }\n       return fooInstance;\n   }\n\n   function closeInstance() {\n       count--;\n       fooInstance = null;\n   }\n\n   return {\n       initialize: createInstance,\n       close: closeInstance,\n       printCount: printCount\n   }\n}\n\nlet foo = SingletonFoo();\n\nfoo.printCount() \/\/ Prints 0\nfoo.initialize()\nfoo.printCount() \/\/ Prints 1\nfoo.initialize()\nfoo.printCount() \/\/ Still prints 1\nfoo.initialize()\nfoo.printCount() \/\/ Still 1\nfoo.close()\nfoo.printCount() \/\/ Prints 0<\/code><\/pre>\n<p>Singleton\u30d1\u30bf\u30fc\u30f3\u306f\u5341\u5206\u306b\u76ee\u7684\u3092\u679c\u305f\u3057\u307e\u3059\u304c\u3001\u30c7\u30d0\u30c3\u30b0\u304c\u96e3\u3057\u3044\u3053\u3068\u3067\u3082\u77e5\u3089\u308c\u3066\u3044\u307e\u3059\u3002\u306a\u305c\u306a\u3089\u4f9d\u5b58\u95a2\u4fc2\u304c\u96a0\u853d\u3055\u308c\u3001\u30af\u30e9\u30b9\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u521d\u671f\u5316\u3084\u7834\u68c4\u3078\u306e\u30a2\u30af\u30bb\u30b9\u304c\u5236\u9650\u3055\u308c\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n<h4>2. Factory Method<\/h4>\n<p>Factory Method\u30d1\u30bf\u30fc\u30f3\u3082\u307e\u305f\u3001\u6700\u3082\u4e00\u822c\u7684\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e1\u3064\u3002\u901a\u5e38\u306e\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u3092\u4f7f\u7528\u305b\u305a\u306b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u306e\u304c\u76ee\u7684\u3067\u3059\u3002Factory Method\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u4f5c\u6210\u3057\u305f\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u69cb\u6210\uff08\u307e\u305f\u306f\u8a18\u8ff0\uff09\u3092\u53d7\u3051\u53d6\u308a\u3001\u65b0\u898f\u306b\u4f5c\u6210\u3057\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u3057\u307e\u3059\u3002<\/p>\n<p>JavaScript\u306b\u3088\u308b\u5b9f\u88c5\u4f8b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">function Factory() {\n   this.createDog = function (breed) {\n       let dog;\n\n       if (breed === \"labrador\") {\n           dog = new Labrador();\n       } else if (breed === \"bulldog\") {\n           dog = new Bulldog();\n       } else if (breed === \"golden retriever\") {\n           dog = new GoldenRetriever();\n       } else if (breed === \"german shepherd\") {\n           dog = new GermanShepherd();\n       }\n\n       dog.breed = breed;\n       dog.printInfo = function () {\n           console.log(\"\\n\\nBreed: \" + dog.breed + \"\\nShedding Level (out of 5): \" + dog.sheddingLevel + \"\\nCoat Length: \" + dog.coatLength + \"\\nCoat Type: \" + dog.coatType)\n       }\n\n       return dog;\n   }\n}\n\nfunction Labrador() {\n   this.sheddingLevel = 4\n   this.coatLength = \"short\"\n   this.coatType = \"double\"\n}\n\nfunction Bulldog() {\n   this.sheddingLevel = 3\n   this.coatLength = \"short\"\n   this.coatType = \"smooth\"\n}\n\nfunction GoldenRetriever() {\n   this.sheddingLevel = 4\n   this.coatLength = \"medium\"\n   this.coatType = \"double\"\n}\n\nfunction GermanShepherd() {\n   this.sheddingLevel = 4\n   this.coatLength = \"medium\"\n   this.coatType = \"double\"\n}\n\nfunction run() {\n\n   let dogs = [];\n   let factory = new Factory();\n\n   dogs.push(factory.createDog(\"labrador\"));\n   dogs.push(factory.createDog(\"bulldog\"));\n   dogs.push(factory.createDog(\"golden retriever\"));\n   dogs.push(factory.createDog(\"german shepherd\"));\n\n   for (var i = 0, len = dogs.length; i &lt; len; i++) {\n       dogs[i].printInfo();\n   }\n}\n\nrun()\n\n\/**\nOutput:\n\nBreed: labrador\nShedding Level (out of 5): 4\nCoat Length: short\nCoat Type: double\n\n\nBreed: bulldog\nShedding Level (out of 5): 3\nCoat Length: short\nCoat Type: smooth\n\n\nBreed: golden retriever\nShedding Level (out of 5): 4\nCoat Length: medium\nCoat Type: double\n\n\nBreed: german shepherd\nShedding Level (out of 5): 4\nCoat Length: medium\nCoat Type: double\n*\/<\/code><\/pre>\n<p>Factory Method\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u3069\u306e\u3088\u3046\u306b\u4f5c\u6210\u3055\u308c\u308b\u304b\u3092\u5236\u5fa1\u3057\u3001\u7d20\u65e9\u304f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3068\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5b9a\u7fa9\u3059\u308b\u7d71\u4e00\u3055\u308c\u305f\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u63d0\u4f9b\u3057\u3066\u304f\u308c\u307e\u3059\u3002\u516c\u958b\u30e1\u30bd\u30c3\u30c9\u3068\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u540c\u3058\u3067\u3042\u308b\u9650\u308a\u3001\u3069\u308c\u307b\u3069\u72ac\u7a2e\u3092\u8ffd\u52a0\u3057\u3066\u3082\u3001\u30d7\u30ed\u30b0\u30e9\u30e0\u306f\u554f\u984c\u306a\u304f\u52d5\u4f5c\u3057\u307e\u3059\u3002<\/p>\n<p>\u305f\u3060\u3057\u3001Factory Method\u30d1\u30bf\u30fc\u30f3\u3067\u306f\u30af\u30e9\u30b9\u304c\u5927\u91cf\u306b\u751f\u6210\u3055\u308c\u3001\u7ba1\u7406\u304c\u96e3\u3057\u304f\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u70b9\u306f\u5ff5\u982d\u306b\u7f6e\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h4>3. Abstract Factory<\/h4>\n<p>Abstract Factory\u30d1\u30bf\u30fc\u30f3\u306f\u3001Factory Method\u30d1\u30bf\u30fc\u30f3\u306e\u30ec\u30d9\u30eb\u3092\u4e00\u6bb5\u968e\u5f15\u304d\u4e0a\u3052\u3066\u304f\u308c\u307e\u3059\u3002\u30d5\u30a1\u30af\u30c8\u30ea\u306f\u62bd\u8c61\u5316\u3055\u308c\u3001\u7f6e\u304d\u63db\u3048\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u304c\u3001\u547c\u3073\u51fa\u3057\u5143\u306e\u74b0\u5883\u306f\u3001\u4f7f\u7528\u3055\u308c\u308b\u30d5\u30a1\u30af\u30c8\u30ea\u306e\u8a73\u7d30\u3084\u5185\u90e8\u69cb\u9020\u3092\u77e5\u308a\u307e\u305b\u3093\u3002\u547c\u3073\u51fa\u3057\u5143\u306e\u74b0\u5883\u304c\u77e5\u308b\u306e\u306f\u3001\u3059\u3079\u3066\u306e\u30d5\u30a1\u30af\u30c8\u30ea\u304c\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3059\u308b\u4e00\u9023\u306e\u5171\u901a\u30e1\u30bd\u30c3\u30c9\u3060\u3051\u3067\u3059\u3002<\/p>\n<p>\u5148\u307b\u3069\u306e\u4f8b\u3092\u7528\u3044\u305f\u5b9f\u88c5\u4f8b\u3092\u898b\u3066\u307f\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ A factory to create dogs\nfunction DogFactory() {\n   \/\/ Notice that the create function is now createPet instead of createDog, since we need\n   \/\/ it to be uniform across the other factories that will be used with this\n   this.createPet = function (breed) {\n       let dog;\n\n       if (breed === \"labrador\") {\n           dog = new Labrador();\n       } else if (breed === \"pug\") {\n           dog = new Pug();\n       }\n\n       dog.breed = breed;\n       dog.printInfo = function () {\n           console.log(\"\\n\\nType: \" + dog.type + \"\\nBreed: \" + dog.breed + \"\\nSize: \" + dog.size)\n       }\n\n       return dog;\n   }\n}\n\n\/\/ A factory to create cats\nfunction CatFactory() {\n   this.createPet = function (breed) {\n       let cat;\n\n       if (breed === \"ragdoll\") {\n           cat = new Ragdoll();\n       } else if (breed === \"singapura\") {\n           cat = new Singapura();\n       }\n\n       cat.breed = breed;\n       cat.printInfo = function () {\n           console.log(\"\\n\\nType: \" + cat.type + \"\\nBreed: \" + cat.breed + \"\\nSize: \" + cat.size)\n       }\n\n       return cat;\n   }\n}\n\n\/\/ Dog and cat breed definitions\nfunction Labrador() {\n   this.type = \"dog\"\n   this.size = \"large\"\n}\n\nfunction Pug() {\n   this.type = \"dog\"\n   this.size = \"small\"\n}\n\nfunction Ragdoll() {\n   this.type = \"cat\"\n   this.size = \"large\"\n}\n\nfunction Singapura() {\n   this.type = \"cat\"\n   this.size = \"small\"\n}\n\nfunction run() {\n\n   let pets = [];\n\n   \/\/ Initialize the two factories\n   let catFactory = new CatFactory();\n   let dogFactory = new DogFactory();\n\n   \/\/ Create a common petFactory that can produce both cats and dogs\n   \/\/ Set it to produce dogs first\n   let petFactory = dogFactory;\n\n   pets.push(petFactory.createPet(\"labrador\"));\n   pets.push(petFactory.createPet(\"pug\"));\n\n   \/\/ Set the petFactory to produce cats\n   petFactory = catFactory;\n\n   pets.push(petFactory.createPet(\"ragdoll\"));\n   pets.push(petFactory.createPet(\"singapura\"));\n\n   for (var i = 0, len = pets.length; i &lt; len; i++) {\n       pets[i].printInfo();\n   }\n}\n\nrun()\n\n\/**\nOutput:\n\nType: dog\nBreed: labrador\nSize: large\n\n\nType: dog\nBreed: pug\nSize: small\n\n\nType: cat\nBreed: ragdoll\nSize: large\n\n\nType: cat\nBreed: singapura\nSize: small\n\n*\/<\/code><\/pre>\n<p>Abstract Factory\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30d5\u30a1\u30af\u30c8\u30ea\u306e\u5177\u8c61\u3092\u7c21\u5358\u306b\u4ea4\u63db\u3067\u304d\u3001\u30d5\u30a1\u30af\u30c8\u30ea\u3068\u751f\u6210\u3055\u308c\u308b\u88fd\u54c1\u9593\u306e\u7d71\u4e00\u6027\u304c\u9ad8\u307e\u308a\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u65b0\u305f\u306a\u7a2e\u985e\u306e\u88fd\u54c1\u306e\u5c0e\u5165\u306f\u3001\u96e3\u6613\u5ea6\u304c\u4e0a\u304c\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u3068\u3044\u3046\u306e\u3082\u3001\u65b0\u898f\u30e1\u30bd\u30c3\u30c9\u3084\u30d7\u30ed\u30d1\u30c6\u30a3\u3078\u5bfe\u5fdc\u3059\u308b\u306b\u306f\u3001\u8907\u6570\u306e\u30af\u30e9\u30b9\u3092\u5909\u66f4\u3057\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002<\/p>\n<h4>4. Builder<\/h4>\n<p>Builder\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u8907\u96d1\u306a\u304c\u3089\u67d4\u8edf\u6027\u306e\u9ad8\u3044JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002\u5185\u90e8\u7684\u306a\u60c5\u5831\u3092\u62bd\u8c61\u5316\u3057\u3064\u3064\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u69cb\u7bc9\u65b9\u6cd5\u3092\u5b8c\u5168\u306b\u5236\u5fa1\u3067\u304d\u3001\u5404\u6a5f\u80fd\u30921\u3064\u305a\u3064\u88fd\u54c1\u306b\u7d44\u307f\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Builder\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3068Director\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u30d4\u30b6\u4f5c\u308a\u306e\u4f8b\u3092\u898b\u3066\u307f\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ Here's the PizzaBuilder (you can also call it the chef)\nfunction PizzaBuilder() {\n   let base\n   let sauce\n   let cheese\n   let toppings = []\n\n   \/\/ The definition of pizza is hidden from the customers\n   function Pizza(base, sauce, cheese, toppings) {\n       this.base = base\n       this.sauce = sauce\n       this.cheese = cheese\n       this.toppings = toppings\n\n       this.printInfo = function() {\n           console.log(\"This pizza has \" + this.base + \" base with \" + this.sauce + \" sauce \"\n           + (this.cheese !== undefined ? \"with cheese. \" : \"without cheese. \")\n           + (this.toppings.length !== 0 ? \"It has the following toppings: \" + toppings.toString() : \"\"))\n       }\n   }\n\n   \/\/ You can request the PizzaBuilder (\/chef) to perform any of the following actions on your pizza\n   return {\n       addFlatbreadBase: function() {\n           base = \"flatbread\"\n           return this;\n       },\n       addTomatoSauce: function() {\n           sauce = \"tomato\"\n           return this;\n       },\n       addAlfredoSauce: function() {\n           sauce = \"alfredo\"\n           return this;\n       },\n       addCheese: function() {\n           cheese = \"parmesan\"\n           return this;\n       },\n       addOlives: function() {\n           toppings.push(\"olives\")\n           return this\n       },\n       addJalapeno: function() {\n           toppings.push(\"jalapeno\")\n           return this\n       },\n       cook: function() {\n           if (base === null){\n               console.log(\"Can't make a pizza without a base\")\n               return\n           }\n           return new Pizza(base, sauce, cheese, toppings)\n       }\n   }\n\n}\n\n\/\/ This is the Director for the PizzaBuilder, aka the PizzaShop.\n\/\/ It contains a list of preset steps that can be used to prepare common pizzas (aka recipes!)\nfunction PizzaShop() {\n   return {\n       makePizzaMargherita: function() {\n           pizzaBuilder = new PizzaBuilder()\n           pizzaMargherita = pizzaBuilder.addFlatbreadBase().addTomatoSauce().addCheese().addOlives().cook()\n           return pizzaMargherita\n       },\n       makePizzaAlfredo: function() {\n           pizzaBuilder = new PizzaBuilder()\n           pizzaAlfredo = pizzaBuilder.addFlatbreadBase().addAlfredoSauce().addCheese().addJalapeno().cook()\n           return pizzaAlfredo\n       },\n       makePizzaMarinara: function() {\n           pizzaBuilder = new PizzaBuilder()\n           pizzaMarinara = pizzaBuilder.addFlatbreadBase().addTomatoSauce().addOlives().cook()\n           return pizzaMarinara\n       }\n   }\n}\n\n\/\/ Here's where the customer can request pizzas from\nfunction run() {\n\n   let pizzaShop = new PizzaShop()\n\n   \/\/ You can ask for one of the popular pizza recipes...\n   let pizzaMargherita = pizzaShop.makePizzaMargherita()\n   pizzaMargherita.printInfo()\n   \/\/ Output: This pizza has flatbread base with tomato sauce with cheese. It has the following toppings: olives\n\n   let pizzaAlfredo = pizzaShop.makePizzaAlfredo()\n   pizzaAlfredo.printInfo()\n   \/\/ Output: This pizza has flatbread base with alfredo sauce with cheese. It has the following toppings: jalapeno\n\n   let pizzaMarinara = pizzaShop.makePizzaMarinara()\n   pizzaMarinara.printInfo()\n   \/\/ Output: This pizza has flatbread base with tomato sauce without cheese. It has the following toppings: olives\n\n   \/\/ Or send your custom request directly to the chef!\n   let chef = PizzaBuilder()\n   let customPizza = chef.addFlatbreadBase().addTomatoSauce().addCheese().addOlives().addJalapeno().cook()\n   customPizza.printInfo()\n   \/\/ Output: This pizza has flatbread base with tomato sauce with cheese. It has the following toppings: olives,jalapeno\n\n}\n\nrun()<\/code><\/pre>\n<p>\u4e0a\u306e<code>PizzaShop<\/code>\u30af\u30e9\u30b9\u306e\u3088\u3046\u306b\u3001Builder\u3068Director\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u3001\u88fd\u54c1\u306e\u6a19\u6e96\u7684\u306a\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\uff08\u4f8b\u3048\u3070\u7279\u5225\u306a\u30d4\u30b6\u306e\u30ec\u30b7\u30d4\uff09\u69cb\u7bc9\u306e\u305f\u3081\u306b\u3001\u6bce\u56de\u5f93\u308f\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u4e00\u9023\u306e\u624b\u9806\u3092\u4e8b\u524d\u306b\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u552f\u4e00\u306e\u554f\u984c\u306f\u3001\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u7dad\u6301\u304c\u304b\u306a\u308a\u8907\u96d1\u306a\u70b9\u3067\u3059\u3002\u305f\u3060\u3057\u3001\u65b0\u6a5f\u80fd\u306e\u8ffd\u52a0\u306b\u3064\u3044\u3066\u306f\u3001Factory Method\u30d1\u30bf\u30fc\u30f3\u3088\u308a\u3082\u5bb9\u6613\u3067\u3059\u3002<\/p>\n<h4>5. Prototype<\/h4>\n<p>Prototype\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u65e2\u5b58\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8907\u88fd\u3059\u308b\u3053\u3068\u3067\u65b0\u3057\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u7d20\u65e9\u304f\u7c21\u5358\u306b\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<p>\u6700\u521d\u306b\u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u3001\u4f55\u5ea6\u304b\u8907\u88fd\u3057\u3066\u3001\u65b0\u898f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u76f4\u63a5\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u6210\u3059\u308b\u3068\u3001\u65e2\u5b58\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30b3\u30d4\u30fc\u306b\u6bd4\u3079\u3066\u591a\u304f\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u6d88\u8cbb\u3059\u308b\u5834\u5408\u306b\u6709\u7528\u3067\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306f\u3001Prototype\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3057\u3066\u3001\u8a2d\u5b9a\u3055\u308c\u305f\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u57fa\u3065\u3044\u3066\u65b0\u3057\u3044\u6587\u66f8\u3092\u4f5c\u6210\u3059\u308b\u4f8b\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ Defining how a document would look like\nfunction Document() {\n   this.header = \"Acme Co\"\n   this.footer = \"For internal use only\"\n   this.pages = 2\n   this.text = \"\"\n  \n   this.addText = function(text) {\n       this.text += text\n   }\n\n   \/\/ Method to help you see the contents of the object\n   this.printInfo = function() {\n       console.log(\"\\n\\nHeader: \" + this.header + \"\\nFooter: \" + this.footer + \"\\nPages: \" + this.pages + \"\\nText: \" + this.text)\n   }\n\n  \n}\n\n\/\/ A protype (or template) for creating new blank documents with boilerplate information\nfunction DocumentPrototype(baseDocument) {\n   this.baseDocument = baseDocument\n  \n   \/\/ This is where the magic happens. A new document object is created and is assigned the values of the current object\n   this.clone = function() {\n       let document = new Document();\n\n       document.header = this.baseDocument.header\n       document.footer = this.baseDocument.footer\n       document.pages = this.baseDocument.pages\n       document.text = this.baseDocument.text\n\n       return document\n   }\n}\n\nfunction run() {\n   \/\/ Create a document to use as the base for the prototype\n   let baseDocument = new Document()\n\n   \/\/ Make some changes to the prototype\n   baseDocument.addText(\"This text was added before cloning and will be common in both documents. \")\n\n   let prototype = new DocumentPrototype(baseDocument)\n\n   \/\/ Create two documents from the prototype\n   let doc1 = prototype.clone()\n   let doc2 = prototype.clone()\n\n   \/\/ Make some changes to both objects\n   doc1.pages = 3\n\n   doc1.addText(\"This is document 1\")\n   doc2.addText(\"This is document 2\")\n\n   \/\/ Print their values\n   doc1.printInfo()\n   \/* Output:\n       Header: Acme Co\n       Footer: For internal use only\n       Pages: 3\n       Text: This text was added before cloning and will be common in both documents. This is document 1\n    *\/\n\n   doc2.printInfo()\n   \/** Output:\n       Header: Acme Co\n       Footer: For internal use only\n       Pages: 2\n       Text: This text was added before cloning and will be common in both documents. This is document 2\n    *\/\n}\n\nrun()<\/code><\/pre>\n<p>Prototype\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5927\u90e8\u5206\u304c\u540c\u3058\u5024\u3092\u5171\u6709\u3059\u308b\u5834\u5408\u3084\u3001\u5b8c\u5168\u306a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\u306b\u76f8\u5f53\u306e\u30b3\u30b9\u30c8\u304c\u304b\u304b\u308b\u5834\u5408\u306b\u6709\u52b9\u3067\u3059\u3002\u30af\u30e9\u30b9\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u6570\u500b\u3057\u304b\u4f5c\u6210\u3057\u306a\u3044\u5834\u5408\u306f\u3001\u4e0d\u8981\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n<h3>\u69cb\u9020\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3<\/h3>\n<p>\u69cb\u9020\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u8a66\u884c\u3055\u308c\u3001\u30c6\u30b9\u30c8\u3055\u308c\u305f\u30af\u30e9\u30b9\u306e\u69cb\u9020\u5316\u65b9\u6cd5\u3092\u63d0\u4f9b\u3057\u3001\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u306e\u6574\u7406\u306b\u4fbf\u5229\u3067\u3059\u3002\u3042\u3089\u3086\u308b\u7528\u9014\u306b\u5fdc\u3058\u305f\u30d1\u30bf\u30fc\u30f3\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h4>6. Adapter<\/h4>\n<p>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u69cb\u7bc9\u6642\u306b\u767a\u751f\u3059\u308b\u4e00\u822c\u7684\u306a\u554f\u984c\u3068\u3057\u3066\u6319\u3052\u3089\u308c\u308b\u306e\u304c\u3001\u4e92\u63db\u6027\u306e\u306a\u3044\u30af\u30e9\u30b9\u9593\u3067\u306e\u5354\u8abf\u3067\u3059\u3002<\/p>\n<p>\u3053\u308c\u3092\u7406\u89e3\u3059\u308b\u826f\u3044\u4f8b\u304c\u3001\u5f8c\u65b9\u4e92\u63db\u6027\u306e\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3067\u3059\u3002\u3042\u308b\u30af\u30e9\u30b9\u306e\u65b0\u3057\u3044\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u305f\u3089\u3001\u5f53\u7136\u3001\u53e4\u3044\u30d0\u30fc\u30b8\u30e7\u30f3\u304c\u52d5\u4f5c\u3057\u3066\u3044\u305f\u3059\u3079\u3066\u306e\u5834\u6240\u3067\u30b9\u30e0\u30fc\u30ba\u306b\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u305f\u3044\u3082\u306e\u3002\u3057\u304b\u3057\u3001\u53e4\u3044\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u6a5f\u80fd\u3067\u91cd\u8981\u306a\u30e1\u30bd\u30c3\u30c9\u3092\u524a\u9664\u3001\u66f4\u65b0\u3059\u308b\u306a\u3069\u3057\u3066\u7834\u58ca\u7684\u306a\u5909\u66f4\u3092\u52a0\u3048\u308c\u3070\u3001\u65b0\u3057\u3044\u30af\u30e9\u30b9\u306e\u5b9f\u884c\u306e\u305f\u3081\u306b\u3001\u3059\u3079\u3066\u306e\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u66f4\u65b0\u3057\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u305d\u3053\u3067\u767b\u5834\u3059\u308b\u306e\u304c\u3001\u3053\u306eAdapter\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002<\/p>\n<p>Adapter\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u65b0\u3057\u3044\u30af\u30e9\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u3084\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u53e4\u3044\u30af\u30e9\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u3084\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u306e\u9593\u306e\u30ae\u30e3\u30c3\u30d7\u3092\u57cb\u3081\u308b\u62bd\u8c61\u5316\u306e\u5f79\u5272\u3092\u679c\u305f\u3057\u307e\u3059\u3002\u53e4\u3044\u30af\u30e9\u30b9\u3068\u540c\u3058\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u6301\u3061\u3001\u53e4\u3044\u30e1\u30bd\u30c3\u30c9\u3092\u65b0\u3057\u3044\u30e1\u30bd\u30c3\u30c9\u306b\u30de\u30c3\u30d4\u30f3\u30b0\u3057\u3066\u540c\u69d8\u306e\u51e6\u7406\u3092\u5b9f\u884c\u3059\u308b\u30ed\u30b8\u30c3\u30af\u3092\u542b\u307f\u307e\u3059\u3002\u96fb\u6e90\u30d7\u30e9\u30b0\u306e\u30bd\u30b1\u30c3\u30c8\u304c\u3001\u7c73\u56fd\u5f0f\u30d7\u30e9\u30b0\u3068\u6b27\u5dde\u5f0f\u30d7\u30e9\u30b0\u306e\u9593\u306e\u30a2\u30c0\u30d7\u30bf\u30fc\u3068\u3057\u3066\u6a5f\u80fd\u3059\u308b\u306e\u306b\u4f3c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306f\u305d\u306e\u4f8b\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ Old bot\nfunction Robot() {\n\n   this.walk = function(numberOfSteps) {\n       \/\/ code to make the robot walk\n       console.log(\"walked \" + numberOfSteps + \" steps\")\n   }\n\n   this.sit = function() {\n       \/\/ code to make the robot sit\n       console.log(\"sit\")\n   }\n\n}\n\n\/\/ New bot that does not have the walk function anymore\n\/\/ but instead has functions to control each step independently\nfunction AdvancedRobot(botName) {\n   \/\/ the new bot has a name as well\n   this.name = botName\n\n   this.sit = function() {\n       \/\/ code to make the robot sit\n       console.log(\"sit\")\n   }\n\n   this.rightStepForward = function() {\n       \/\/ code to take 1 step from right leg forward\n       console.log(\"right step forward\")\n   }\n\n   this.leftStepForward = function () {\n       \/\/ code to take 1 step from left leg forward\n       console.log(\"left step forward\")\n   }\n}\n\nfunction RobotAdapter(botName) {\n   \/\/ No references to the old interfact since that is usually\n   \/\/ phased out of development\n   const robot = new AdvancedRobot(botName)\n\n   \/\/ The adapter defines the walk function by using the\n   \/\/ two step controls. You now have room to choose which leg to begin\/end with,\n   \/\/ and do something at each step.\n   this.walk = function(numberOfSteps) {\n       for (let i=0; i&lt;numberOfSteps; i++) {\n          \n           if (i % 2 === 0) {\n               robot.rightStepForward()\n           } else {\n               robot.leftStepForward()\n           }\n       }\n   }\n\n   this.sit = robot.sit\n\n}\n\nfunction run() {\n\n   let robot = new Robot()\n\n   robot.sit()\n   \/\/ Output: sit\n   robot.walk(5)\n   \/\/ Output: walked 5 steps\n\n   robot = new RobotAdapter(\"my bot\")\n\n   robot.sit()\n   \/\/ Output: sit\n   robot.walk(5)\n   \/\/ Output:\n   \/\/ right step forward\n   \/\/ left step forward\n   \/\/ right step forward\n   \/\/ left step forward\n   \/\/ right step forward\n\n}\n\nrun()<\/code><\/pre>\n<p>\u30c7\u30e1\u30ea\u30c3\u30c8\u306f\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u304c\u8907\u96d1\u306b\u306a\u308b\u70b9\u3067\u3059\u3002\u4e0a\u8a18\u3067\u306f\u3059\u3067\u306b2\u3064\u306e\u7570\u306a\u308b\u30af\u30e9\u30b9\u3092\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3059\u308b\u5fc5\u8981\u304c\u3042\u3063\u305f\u3068\u3053\u308d\u306b\u3001\u3055\u3089\u306b\u3082\u30461\u3064Adapter\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<h4>7. Bridge<\/h4>\n<p>Adapter\u30d1\u30bf\u30fc\u30f3\u3092\u62e1\u5f35\u3057\u305fBridge\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u306f\u3001\u30af\u30e9\u30b9\u3068\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u4e21\u65b9\u304c\u4e92\u63db\u6027\u306e\u306a\u3044\u30cd\u30a4\u30c6\u30a3\u30d6\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3067\u3042\u3063\u3066\u3082\u6a5f\u80fd\u3059\u308b\u3088\u3046\u3001\u5225\u3005\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30d1\u30bf\u30fc\u30f3\u306f\u30012\u3064\u306e\u30bf\u30a4\u30d7\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u9593\u306e\u975e\u5e38\u306b\u758e\u7d50\u5408\u306a\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306e\u958b\u767a\u306b\u6709\u7528\u3067\u3059\u3002\u307e\u305f\u3001\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3068\u305d\u306e\u5b9f\u88c5\u306e\u62e1\u5f35\u6027\u3092\u9ad8\u3081\u3001\u67d4\u8edf\u6027\u3092\u6700\u5927\u5316\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n<p>\u4f7f\u7528\u4f8b\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ The TV and speaker share the same interface\nfunction TV() {\n   this.increaseVolume = function() {\n       \/\/ logic to increase TV volume\n   }\n\n   this.decreaseVolume = function() {\n       \/\/ logic to decrease TV volume\n   }\n\n   this.mute = function() {\n       \/\/ logic to mute TV audio\n   }\n}\n\nfunction Speaker() {\n   this.increaseVolume = function() {\n       \/\/ logic to increase speaker volume\n   }\n\n   this.decreaseVolume = function() {\n       \/\/ logic to decrease speaker volume\n   }\n\n   this.mute() = function() {\n       \/\/ logic to mute speaker audio\n   }\n}\n\n\/\/ The two remotes make use of the same common interface\n\/\/ that supports volume up and volume down features\nfunction SimpleRemote(device) {\n   this.pressVolumeDownKey = function() {\n       device.decreaseVolume()\n   }\n\n   this.pressVolumeUpKey = function() {\n       device.increaseVolume()\n   }\n}\n\nfunction AdvancedRemote(device) {\n\n   this.pressVolumeDownKey = function() {\n       device.decreaseVolume()\n   }\n\n   this.pressVolumeUpKey = function() {\n       device.increaseVolume()\n   }\n\n   this.pressMuteKey = function() {\n       device.mute()\n   }\n}\n\nfunction run() {\n\n   let tv = new TV()\n   let speaker = new Speaker()\n\n   let tvSimpleRemote = new SimpleRemote(tv)\n   let tvAdvancedRemote = new AdvancedRemote(tv)\n\n   let speakerSimpleRemote = new SimpleRemote(speaker)\n   let speakerAdvancedRemote = new AdvancedRemote(speaker)\n\n   \/\/ The methods listed in pair below will have the same effect\n   \/\/ on their target devices\n   tvSimpleRemote.pressVolumeDownKey()\n   tvAdvancedRemote.pressVolumeDownKey()\n\n   tvSimpleRemote.pressVolumeUpKey()\n   tvAdvancedRemote.pressVolumeUpKey()\n\n   \/\/ The advanced remote has additional functionality\n   tvAdvancedRemote.pressMuteKey()\n\n   speakerSimpleRemote.pressVolumeDownKey()\n   speakerAdvancedRemote.pressVolumeDownKey()\n\n   speakerSimpleRemote.pressVolumeUpKey()\n   speakerAdvancedRemote.pressVolumeUpKey()\n\n   speakerAdvancedRemote.pressMuteKey()\n}<\/code><\/pre>\n<p>\u3059\u3067\u306b\u304a\u6c17\u3065\u304d\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001Bridge\u30d1\u30bf\u30fc\u30f3\u306f\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u304c\u683c\u6bb5\u306b\u8907\u96d1\u306b\u306a\u308a\u307e\u3059\u3002\u307e\u305f\u5b9f\u969b\u306b\u306f\u3001\u307b\u3068\u3093\u3069\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u304c\u901a\u5e381\u3064\u306e\u5b9f\u88c5\u3067\u5b8c\u4e86\u3059\u308b\u305f\u3081\u3001\u30b3\u30fc\u30c9\u306e\u518d\u5229\u7528\u6027\u306b\u306f\u3042\u307e\u308a\u30e1\u30ea\u30c3\u30c8\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<h4>8. Composite<\/h4>\n<p>Composite\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u4f3c\u305f\u3088\u3046\u306a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3084\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u3092\u7c21\u5358\u306b\u69cb\u9020\u5316\u3057\u7ba1\u7406\u3067\u304d\u307e\u3059\u3002Composite\u30d1\u30bf\u30fc\u30f3\u306e\u80cc\u666f\u306b\u3042\u308b\u57fa\u672c\u7684\u306a\u8003\u3048\u65b9\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u305d\u306e\u8ad6\u7406\u30b3\u30f3\u30c6\u30ca\u306f\u3001\u5358\u4e00\u306e\u62bd\u8c61\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3057\u3066\u8868\u73fe\u3067\u304d\u308b\u3068\u3044\u3046\u3082\u306e\u3067\u3059\u3002\u3053\u306e\u62bd\u8c61\u30af\u30e9\u30b9\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u95a2\u9023\u3059\u308b\u30c7\u30fc\u30bf\u3084\u30e1\u30bd\u30c3\u30c9\u3068\u3001\u30b3\u30f3\u30c6\u30ca\u81ea\u8eab\u3078\u306e\u53c2\u7167\u3092\u683c\u7d0d\u3057\u307e\u3059\u3002<\/p>\n<p>Composite\u30d1\u30bf\u30fc\u30f3\u306e\u4f7f\u7528\u304c\u3082\u3063\u3068\u3082\u9069\u3057\u3066\u3044\u308b\u306e\u306f\u3001\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u304c\u30c4\u30ea\u30fc\u69cb\u9020\u306e\u5834\u5408\u3067\u3059\u3002\u305f\u3060\u3057\u3001Composite\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u3060\u3051\u306b\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u3092\u30c4\u30ea\u30fc\u72b6\u306b\u5909\u3048\u306a\u3044\u3088\u3046\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u67d4\u8edf\u6027\u304c\u5927\u304d\u304f\u640d\u306a\u308f\u308c\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306f\u3001EC\u5546\u54c1\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0\u3092\u69cb\u7bc9\u3059\u308b\u3001Composite\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u4f7f\u7528\u4f8b\u3067\u3059\u3002\u30d1\u30c3\u30b1\u30fc\u30b8\u3054\u3068\u306e\u6ce8\u6587\u7dcf\u984d\u3082\u8a08\u7b97\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ A product class, that acts as a Leaf node\nfunction Product(name, price) {\n   this.name = name\n   this.price = price\n\n   this.getTotalPrice = function() {\n       return this.price\n   }\n}\n\n\/\/ A box class, that acts as a parent\/child node\nfunction Box(name) {\n   this.contents = []\n   this.name = name\n\n   \/\/ Helper function to add an item to the box\n   this.add = function(content){\n       this.contents.push(content)\n   }\n\n   \/\/ Helper function to remove an item from the box\n   this.remove = function() {\n       var length = this.contents.length;\n       for (var i = 0; i &lt; length; i++) {\n           if (this.contents[i] === child) {\n               this.contents.splice(i, 1);\n               return;\n           }\n       }\n   }\n\n   \/\/ Helper function to get one item from the box\n   this.getContent = function(position) {\n       return this.contents[position]\n   }\n\n   \/\/ Helper function to get the total count of the items in the box\n   this.getTotalCount = function() {\n       return this.contents.length\n   }\n\n   \/\/ Helper function to calculate the total price of all items in the box\n   this.getTotalPrice = function() {\n       let totalPrice = 0;\n\n       for (let i=0; i &lt; this.getTotalCount(); i++){\n           totalPrice += this.getContent(i).getTotalPrice()\n       }\n\n       return totalPrice\n   }\n}\n\nfunction run() {\n\n   \/\/ Let's create some electronics\n   const mobilePhone = new Product(\"mobile phone\", 1000)\n   const phoneCase = new Product(\"phone case\", 30)\n   const screenProtector = new Product(\"screen protector\", 20)\n\n   \/\/ and some stationery products\n   const pen = new Product(\"pen\", 2)\n   const pencil = new Product(\"pencil\", 0.5)\n   const eraser = new Product(\"eraser\", 0.5)\n   const stickyNotes = new Product(\"sticky notes\", 10)\n\n   \/\/ and put them in separate boxes\n   const electronicsBox = new Box(\"electronics\")\n   electronicsBox.add(mobilePhone)\n   electronicsBox.add(phoneCase)\n   electronicsBox.add(screenProtector)\n  \n   const stationeryBox = new Box(\"stationery\")\n   stationeryBox.add(pen)\n   stationeryBox.add(pencil)\n   stationeryBox.add(eraser)\n   stationeryBox.add(stickyNotes)\n\n   \/\/ and finally, put them into one big box for convenient shipping\n   const package = new Box('package')\n   package.add(electronicsBox)\n   package.add(stationeryBox)\n\n   \/\/ Here's an easy way to calculate the total order value\n   console.log(\"Total order price: USD \" + package.getTotalPrice())\n   \/\/ Output: USD 1063\n}\n\nrun()<\/code><\/pre>\n<p>Composite\u30d1\u30bf\u30fc\u30f3\u306e\u6700\u5927\u306e\u6b20\u70b9\u306f\u3001\u5c06\u6765\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306e\u5909\u66f4\u304c\u975e\u5e38\u306b\u96e3\u3057\u304f\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u3053\u3068\u3067\u3059\u3002\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306e\u8a2d\u8a08\u306b\u306f\u3001\u6642\u9593\u3068\u52b4\u529b\u304c\u304b\u304b\u308b\u3082\u306e\u3067\u3059\u304c\u3001\u30c4\u30ea\u30fc\u72b6\u306e\u30c7\u30fc\u30bf\u30e2\u30c7\u30eb\u306e\u5909\u66f4\u306f\u3001\u3088\u308a\u96e3\u6613\u5ea6\u304c\u4e0a\u304c\u308a\u307e\u3059\u3002<\/p>\n<h4>9. Decorator<\/h4>\n<p>Decorator\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u65e2\u5b58\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u65b0\u898f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u5185\u306b\u5305\u307f\u8fbc\u3093\u3067\u3001\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u4f8b\u3048\u308b\u306a\u3089\u3001\u5305\u88c5\u3055\u308c\u305f\u30d7\u30ec\u30bc\u30f3\u30c8\u3092\u3055\u3089\u306b\u5305\u88c5\u7d19\u3067\u4f55\u5ea6\u3067\u3082\u5305\u3080\u3088\u3046\u306a\u3082\u306e\u3067\u3059\u3002\u5305\u88c5\u306e\u305f\u3073\u306b\u6a5f\u80fd\u3092\u5b9f\u88c5\u3067\u304d\u308b\u305f\u3081\u3001\u67d4\u8edf\u6027\u306e\u9762\u3067\u3082\u512a\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u6280\u8853\u7684\u306a\u89b3\u70b9\u3067\u306f\u3001\u30d1\u30bf\u30fc\u30f3\u5185\u306b\u7d99\u627f\u304c\u306a\u3044\u305f\u3081\u3001\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u8a2d\u8a08\u306e\u81ea\u7531\u5ea6\u304c\u9ad8\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306f\u3001Decorator\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3057\u3066\u3001\u6a19\u6e96\u306e<code>Customer<\/code>\u30af\u30e9\u30b9\u306b\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b\u4f8b\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-js\">function Customer(name, age) {\n   this.name = name\n   this.age = age\n\n   this.printInfo = function() {\n       console.log(\"Customer:\\nName : \" + this.name + \" | Age: \" + this.age)\n   }\n}\n\nfunction DecoratedCustomer(customer, location) {\n   this.customer = customer\n   this.name = customer.name\n   this.age = customer.age\n   this.location = location\n\n   this.printInfo = function() {\n       console.log(\"Decorated Customer:\\nName: \" + this.name + \" | Age: \" + this.age + \" | Location: \" + this.location)\n   }\n}\n\nfunction run() {\n   let customer = new Customer(\"John\", 25)\n   customer.printInfo()\n   \/\/ Output:\n   \/\/ Customer:\n   \/\/ Name : John | Age: 25\n\n   let decoratedCustomer = new DecoratedCustomer(customer, \"FL\")\n   decoratedCustomer.printInfo()\n   \/\/ Output:\n   \/\/ Customer:\n   \/\/ Name : John | Age: 25 | Location: FL\n}\n\nrun()<\/code><\/pre>\n<p>Decorator\u30d1\u30bf\u30fc\u30f3\u306e\u30c7\u30e1\u30ea\u30c3\u30c8\u306f\u3001\u30b3\u30fc\u30c9\u306e\u8907\u96d1\u3055\u3067\u3059\u3002\u3053\u308c\u306f\u3001Decorator\u3092\u5229\u7528\u3057\u305f\u6a5f\u80fd\u306e\u8ffd\u52a0\u306b\u3001\u6a19\u6e96\u7684\u306a\u30d1\u30bf\u30fc\u30f3\u304c\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u306a\u3044\u305f\u3081\u3067\u3059\u3002\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u304c\u7d42\u308f\u308b\u3068\u304d\u306b\u306f\u3001\u7d71\u4e00\u6027\u306e\u306a\u3044\u3001\u3042\u308b\u3044\u306f\u4f3c\u305f\u3088\u3046\u306aDecorator\u304c\u5927\u91cf\u306b\u751f\u6210\u3055\u308c\u3066\u3044\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n<p>Decorator\u3092\u8a2d\u8a08\u3059\u308b\u969b\u306b\u306f\u3001\u4ed6\u306eDecorator\u306b\u8ad6\u7406\u7684\u306b\u4f9d\u5b58\u3057\u306a\u3044\u3088\u3046\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u4f9d\u5b58\u3092\u89e3\u6d88\u3057\u306a\u3051\u308c\u3070\u3001\u5c06\u6765\u306eDecorator\u306e\u524a\u9664\u3084\u518d\u69cb\u7bc9\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5b89\u5b9a\u6027\u304c\u640d\u306a\u308f\u308c\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h4>10. Facade<\/h4>\n<p>\u591a\u304f\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u306f\u3001\u69cb\u7bc9\u304c\u5b8c\u4e86\u3059\u308b\u9803\u306b\u306f\u8907\u96d1\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u4e3b\u8981\u306a\u64cd\u4f5c\u306e\u5b9f\u884c\u306b\u306f\u3001\u8907\u6570\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3084\u30e1\u30bd\u30c3\u30c9\u304c\u95a2\u4e0e\u3057\u307e\u3059\u3002\u521d\u671f\u5316\u3001\u4f9d\u5b58\u95a2\u4fc2\u3001\u30e1\u30bd\u30c3\u30c9\u306e\u6b63\u3057\u3044\u5b9f\u884c\u9806\u5e8f\u306a\u3069\u3092\u7ba1\u7406\u3001\u7dad\u6301\u3059\u308b\u3053\u3068\u306f\u304b\u306a\u308a\u96e3\u3057\u304f\u3001\u6b63\u3057\u304f\u884c\u308f\u308c\u306a\u3051\u308c\u3070\u30a8\u30e9\u30fc\u306b\u3064\u306a\u304c\u308a\u307e\u3059\u3002<\/p>\n<p>Facade\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u524d\u8ff0\u306e\u4e00\u9023\u306e\u64cd\u4f5c\u3092\u547c\u3073\u51fa\u3059\u74b0\u5883\u3068\u3001\u64cd\u4f5c\u306e\u5b9f\u884c\u306b\u95a2\u4e0e\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3084\u30e1\u30bd\u30c3\u30c9\u3068\u306e\u9593\u3092\u62bd\u8c61\u5316\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u62bd\u8c61\u5316\u306b\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u521d\u671f\u5316\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u8ffd\u8de1\u3001\u305d\u306e\u4ed6\u306e\u91cd\u8981\u306a\u30a2\u30af\u30c6\u30a3\u30d3\u30c6\u30a3\u306e\u30ed\u30b8\u30c3\u30af\u304c\u542b\u307e\u308c\u307e\u3059\u3002\u547c\u3073\u51fa\u3057\u5074\u306e\u74b0\u5883\u306f\u3001\u64cd\u4f5c\u306e\u5b9f\u884c\u306b\u95a2\u3059\u308b\u60c5\u5831\u3092\u6301\u3061\u307e\u305b\u3093\u3002\u3053\u306e\u305f\u3081\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u5bfe\u3057\u3066\u7834\u58ca\u7684\u306a\u5909\u66f4\u3092\u52a0\u3048\u308b\u3053\u3068\u306a\u304f\u3001\u81ea\u7531\u306b\u30ed\u30b8\u30c3\u30af\u3092\u66f4\u65b0\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306eFacade\u30d1\u30bf\u30fc\u30f3\u306e\u4f7f\u7528\u4f8b\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/**\n* Let's say you're trying to build an online store. It will have multiple components and\n* complex business logic. In the example below, you will find a tiny segment of an online\n* store composed together using the Facade design pattern. The various manager and helper\n* classes are defined first of all.\n*\/\n\n\nfunction CartManager() {\n   this.getItems = function() {\n       \/\/ logic to return items\n       return []\n   }\n  \n   this.clearCart = function() {\n       \/\/ logic to clear cart\n   }\n}\n\nfunction InvoiceManager() {\n   this.createInvoice = function(items) {\n       \/\/ logic to create invoice\n       return {}\n   }\n\n   this.notifyCustomerOfFailure = function(invoice) {\n       \/\/ logic to notify customer\n   }\n\n   this.updateInvoicePaymentDetails = function(paymentResult) {\n       \/\/ logic to update invoice after payment attempt\n   }\n}\n\nfunction PaymentProcessor() {\n   this.processPayment = function(invoice) {\n       \/\/ logic to initiate and process payment\n       return {}\n   }\n}\n\nfunction WarehouseManager() {\n   this.prepareForShipping = function(items, invoice) {\n       \/\/ logic to prepare the items to be shipped\n   }\n}\n\n\/\/ This is where facade comes in. You create an additional interface on top of your\n\/\/ existing interfaces to define the business logic clearly. This interface exposes\n\/\/ very simple, high-level methods for the calling environment.\nfunction OnlineStore() {\n   this.name = \"Online Store\"\n  \n   this.placeOrder = function() {\n       let cartManager = new CartManager()\n       let items = cartManager.getItems()\n\n       let invoiceManager = new InvoiceManager()\n       let invoice = invoiceManager.createInvoice(items)\n      \n       let paymentResult = new PaymentProcessor().processPayment(invoice)\n       invoiceManager.updateInvoicePaymentDetails(paymentResult)\n\n       if (paymentResult.status === 'success') {\n           new WarehouseManager().prepareForShipping(items, invoice)\n           cartManager.clearCart()\n       } else {\n           invoiceManager.notifyCustomerOfFailure(invoice)\n       }\n      \n   }\n}\n\n\/\/ The calling environment is unaware of what goes on when somebody clicks a button to\n\/\/ place the order. You can easily change the underlying business logic without breaking\n\/\/ your calling environment.\nfunction run() {\n   let onlineStore = new OnlineStore()\n\n   onlineStore.placeOrder()\n}<\/code><\/pre>\n<p>Facade\u30d1\u30bf\u30fc\u30f3\u306e\u6b20\u70b9\u306f\u3001\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u3068\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u9593\u306b\u62bd\u8c61\u5316\u30ec\u30a4\u30e4\u30fc\u3092\u633f\u5165\u3059\u308b\u305f\u3081\u3001\u8ffd\u52a0\u306e\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u4f5c\u696d\u304c\u5fc5\u8981\u306b\u306a\u308b\u3053\u3068\u3067\u3059\u3002\u591a\u304f\u306e\u5834\u5408\u3001\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u304c\u5168\u4f53\u7684\u306b\u8907\u96d1\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u3055\u3089\u306b\u3001<code>Facade<\/code>\u30af\u30e9\u30b9\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u6a5f\u80fd\u306b\u3068\u3063\u3066\u5fc5\u9808\u306e\u4f9d\u5b58\u95a2\u4fc2\u306b\u306a\u308a\u307e\u3059\u3002\u3064\u307e\u308a\u3001<code>Facade<\/code>\u30af\u30e9\u30b9\u306e\u30a8\u30e9\u30fc\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u6a5f\u80fd\u306b\u76f4\u63a5\u5f71\u97ff\u3057\u307e\u3059\u3002<\/p>\n<h4>11. Flyweight<\/h4>\n<p>Flyweight\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u4f55\u5ea6\u3082\u7e70\u308a\u8fd4\u3057\u767b\u5834\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u6301\u3064\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30e1\u30e2\u30ea\u554f\u984c\u89e3\u6c7a\u3092\u652f\u63f4\u3057\u307e\u3059\u3002\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30d7\u30fc\u30eb\u306e\u5171\u901a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u518d\u5229\u7528\u3059\u308b\u3053\u3068\u3067\u30e1\u30e2\u30ea\u52b9\u7387\u306e\u5411\u4e0a\u304c\u671f\u5f85\u3067\u304d\u307e\u3059\u3002\u30e1\u30e2\u30ea\u3078\u306e\u8ca0\u8377\u304c\u8efd\u6e1b\u3055\u308c\u3001\u5b9f\u884c\u6642\u9593\u3082\u901f\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u4f8b\u3067\u306f\u3001Flyweight\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3057\u3066\u3001\u9577\u5c3a\u306e\u6587\u7ae0\u3092\u30e1\u30e2\u30ea\u306b\u683c\u7d0d\u3057\u307e\u3059\u3002\u6587\u5b57\u3092\u691c\u51fa\u3059\u308b\u305f\u3073\u306b\u30e1\u30e2\u30ea\u306b\u683c\u7d0d\u3059\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u30d7\u30ed\u30b0\u30e9\u30e0\u306f\u3001\u6bb5\u843d\u3092\u8a18\u8ff0\u3059\u308b\u6587\u5b57\u306e\u96c6\u5408\u3068\u305d\u306e\u30bf\u30a4\u30d7\uff08\u6570\u5b57\u304b\u30a2\u30eb\u30d5\u30a1\u30d9\u30c3\u30c8\uff09\u3092\u8b58\u5225\u3057\u3001\u6587\u5b57\u3054\u3068\u306b\u518d\u5229\u7528\u53ef\u80fd\u306aFlyweight\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u69cb\u7bc9\u3057\u3066\u3001\u683c\u7d0d\u3055\u308c\u3066\u3044\u308b\u6587\u5b57\u3068\u30bf\u30a4\u30d7\u306e\u60c5\u5831\u3092\u4fdd\u5b58\u3057\u307e\u3059\u3002<\/p>\n<p>\u30e1\u30a4\u30f3\u306e\u914d\u5217\u306f\u3001\u6587\u5b57\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u683c\u7d0d\u305b\u305a\u3001\u6587\u4e2d\u306b\u6587\u5b57\u304c\u51fa\u73fe\u3059\u308b\u305f\u3073\u306b\u3001Flyweight\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3078\u306e\u53c2\u7167\u306e\u30ea\u30b9\u30c8\u3092\u683c\u7d0d\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u6587\u7ae0\u304c\u6d88\u8cbb\u3059\u308b\u30e1\u30e2\u30ea\u3092\u534a\u5206\u306b\u6e1b\u3089\u305b\u307e\u3059\u3002\u306a\u304a\u3001\u4ee5\u4e0b\u306f\u3042\u304f\u307e\u3067\u3082\u30c6\u30ad\u30b9\u30c8\u30d7\u30ed\u30bb\u30c3\u30b5\u306e\u30c6\u30ad\u30b9\u30c8\u683c\u7d0d\u65b9\u6cd5\u306b\u95a2\u3059\u308b\u57fa\u672c\u7684\u306a\u8a18\u8ff0\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ A simple Character class that stores the value, type, and position of a character\nfunction Character(value, type, position) {\n   this.value = value\n   this.type = type\n   this.position = position\n}\n\n\/\/ A Flyweight class that stores character value and type combinations\nfunction CharacterFlyweight(value, type) {\n   this.value = value\n   this.type = type\n}\n\n\/\/ A factory to automatically create the flyweights that are not present in the list,\n\/\/ and also generate a count of the total flyweights in the list\nconst CharacterFlyweightFactory = (function () {\n   const flyweights = {}\n\n   return {\n       get: function (value, type) {\n           if (flyweights[value + type] === undefined)\n               flyweights[value + type] = new CharacterFlyweight(value, type)\n\n           return flyweights[value + type]\n       },\n       count: function () {\n           let count = 0;\n           for (var f in flyweights) count++;\n           return count;\n       }\n   }\n})()\n\n\/\/ An enhanced Character class that uses flyweights to store references\n\/\/ to recurring value and type combinations\nfunction CharacterWithFlyweight(value, type, position) {\n   this.flyweight = CharacterFlyweightFactory.get(value, type)\n   this.position = position\n}\n\n\/\/ A helper function to define the type of a character\n\/\/ It identifies numbers as N and everything as A (for alphabets)\nfunction getCharacterType(char) {\n   switch (char) {\n       case \"0\":\n       case \"1\":\n       case \"2\":\n       case \"3\":\n       case \"4\":\n       case \"5\":\n       case \"6\":\n       case \"7\":\n       case \"8\":\n       case \"9\": return \"N\"\n       default:\n           return \"A\"\n   }\n}\n\n\/\/ A list class to create an array of Characters from a given string\nfunction CharactersList(str) {\n   chars = []\n   for (let i = 0; i &lt; str.length; i++) {\n       const char = str[i]\n       chars.push(new Character(char, getCharacterType(char), i))\n   }\n\n   return chars\n}\n\n\/\/ A list class to create an array of CharacterWithFlyweights from a given string\nfunction CharactersWithFlyweightsList(str) {\n   chars = []\n   for (let i = 0; i &lt; str.length; i++) {\n       const char = str[i]\n       chars.push(new CharacterWithFlyweight(char, getCharacterType(char), i))\n   }\n\n   return chars\n}\n\n\nfunction run() {\n   \/\/ Our input is a large paragraph with over 600 characters\n   let input = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et velit pretium, consectetur mauris eu, interdum erat. Aliquam sed nisl turpis. Proin eget urna magna. Nam commodo felis neque, in imperdiet libero dictum vitae. Donec finibus consectetur nibh at blandit. Pellentesque consectetur ipsum metus, ut viverra felis rutrum id. Mauris convallis elit sed ante venenatis mollis. Suspendisse urna libero, dapibus gravida semper viverra, aliquam eu mauris. Integer suscipit bibendum viverra. Suspendisse felis diam, ultrices sit amet ornare id, egestas ut diam. Nulla facilisi. Praesent ullamcorper eros in quam tincidunt, eu tincidunt ipsum imperdiet.\"\n\n   \/\/ We store the string into lists of characters and characterWithFlyweights\n   const charactersList = CharactersList(input)\n   const charactersWithFlyweightsList = CharactersWithFlyweightsList(input)\n\n   \/\/ The characters list turns out to be as long as the string, with each object taking\n   \/\/ more than 3 times the size of a primitive character (because of its type and position metadata).\n\n   console.log(\"Character count -&gt; \" + charactersList.length)\n   \/\/ Output: Character count -&gt; 656\n\n   \/\/ The number of flyweights created is only 31, since only \n   \/\/ 31 characters are used to write the entire paragraph.\n   \/\/ This means that to store 656 characters, a total of\n   \/\/ (31 * 2 + 656 * 1 = 718) memory blocks are used instead of\n   \/\/ (656 * 3 = 1968) which would have used by the standard array.\n   \/\/ (We have assumed each variable to take up one memory block for simplicity.\n   \/\/ This may vary in real-life scenarios.)\n   \n   console.log(\"Flyweights created -&gt; \" + CharacterFlyweightFactory.count())\n   \/\/ Output: Flyweights created -&gt; 31\n\n}\n\nrun()<\/code><\/pre>\n<p>\u3059\u3067\u306b\u304a\u6c17\u3065\u304d\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001Flyweight\u30d1\u30bf\u30fc\u30f3\u306f\u7279\u306b\u76f4\u611f\u7684\u3067\u306a\u3044\u305f\u3081\u3001\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u8a2d\u8a08\u304c\u8907\u96d1\u306b\u306a\u308a\u307e\u3059\u3002\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u7279\u306b\u30e1\u30e2\u30ea\u306e\u524a\u6e1b\u304c\u5fc5\u8981\u3067\u306a\u3044\u5834\u5408\u306f\u3001\u4f7f\u7528\u3057\u306a\u3044\u65b9\u304c\u8ce2\u660e\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n<p>\u3055\u3089\u306b\u3001Flyweight\u30d1\u30bf\u30fc\u30f3\u306f\u30e1\u30e2\u30ea\u52b9\u7387\u3068\u5f15\u304d\u63db\u3048\u306b\u51e6\u7406\u52b9\u7387\u3092\u4e0b\u3052\u308b\u305f\u3081\u3001CPU\u30d1\u30ef\u30fc\u304c\u4e0d\u8db3\u3057\u3066\u3044\u308b\u3068\u826f\u3044\u89e3\u6c7a\u7b56\u306b\u306a\u308a\u307e\u305b\u3093\u3002<\/p>\n<h4>12. Proxy<\/h4>\n<p>Proxy\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5225\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u7f6e\u304d\u63db\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u8a00\u3044\u63db\u3048\u308b\u3068\u3001Proxy\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u3001\u5b9f\u969b\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u4ee3\u308f\u308a\u3068\u306a\u3063\u3066\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3092\u5236\u5fa1\u3057\u307e\u3059\u3002Proxy\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u547c\u3073\u51fa\u3057\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u5b9f\u969b\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u6e21\u3059\u524d\u5f8c\u3067\u3001\u4f55\u3089\u304b\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306f\u3001Proxy\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4ecb\u3057\u3066\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3092\u5236\u5fa1\u3059\u308b\u4f8b\u3067\u3059\u3002\u8981\u6c42\u3092\u8a31\u53ef\u3059\u308b\u524d\u306b\u3001\u57fa\u672c\u7684\u306a\u691c\u8a3c\u30c1\u30a7\u30c3\u30af\u3092\u884c\u3044\u307e\u3059<\/p>\n<pre><code class=\"language-js\">function DatabaseHandler() {\n   const data = {}\n\n   this.set = function (key, val) {\n       data[key] = val;\n   }\n   this.get = function (key, val) {\n       return data[key]\n   }\n   this.remove = function (key) {\n       data[key] = null;\n   }\n\n\n}\n\nfunction DatabaseProxy(databaseInstance) {\n\n   this.set = function (key, val) {\n       if (key === \"\") {\n           console.log(\"Invalid input\")\n           return\n       }\n\n       if (val === undefined) {\n           console.log(\"Setting value to undefined not allowed!\")\n           return\n       }\n\n       databaseInstance.set(key, val)\n   }\n\n   this.get = function (key) {\n       if (databaseInstance.get(key) === null) {\n           console.log(\"Element deleted\")\n       }\n\n       if (databaseInstance.get(key) === undefined) {\n           console.log(\"Element not created\")\n       }\n\n       return databaseInstance.get(key)\n   }\n\n   this.remove = function (key) {\n       if (databaseInstance.get(key) === undefined) {\n           console.log(\"Element not added\")\n           return\n       }\n\n       if (databaseInstance.get(key) === null) {\n           console.log(\"Element removed already\")\n           return\n       }\n\n       return databaseInstance.remove(key)\n   }\n\n}\n\nfunction run() {\n   let databaseInstance = new DatabaseHandler()\n\n   databaseInstance.set(\"foo\", \"bar\")\n   databaseInstance.set(\"foo\", undefined)\n   console.log(\"#1: \" + databaseInstance.get(\"foo\"))\n   \/\/ #1: undefined\n\n   console.log(\"#2: \" + databaseInstance.get(\"baz\"))\n   \/\/ #2: undefined\n\n   databaseInstance.set(\"\", \"something\")\n\n   databaseInstance.remove(\"foo\")\n   console.log(\"#3: \" + databaseInstance.get(\"foo\"))\n   \/\/ #3: null\n\n   databaseInstance.remove(\"foo\")\n   \/\/ databaseInstance.remove(\"baz\")\n\n   \/\/ Create a fresh database instance to try the same operations\n   \/\/ using the proxy\n   databaseInstance = new DatabaseHandler()\n   let proxy = new DatabaseProxy(databaseInstance)\n\n   proxy.set(\"foo\", \"bar\")\n   proxy.set(\"foo\", undefined)\n   \/\/ Proxy jumps in:\n   \/\/ Output: Setting value to undefined not allowed!\n\n   console.log(\"#1: \" + proxy.get(\"foo\"))\n   \/\/ Original value is retained:\n   \/\/ Output: #1: bar\n\n   console.log(\"#2: \" + proxy.get(\"baz\"))\n   \/\/ Proxy jumps in again\n   \/\/ Output:\n   \/\/ Element not created\n   \/\/ #2: undefined\n\n   proxy.set(\"\", \"something\")\n   \/\/ Proxy jumps in again\n   \/\/ Output: Invalid input\n\n   proxy.remove(\"foo\")\n\n   console.log(\"#3: \" + proxy.get(\"foo\"))\n   \/\/ Proxy jumps in again\n   \/\/ Output:\n   \/\/ Element deleted\n   \/\/ #3: null\n\n   proxy.remove(\"foo\")\n   \/\/ Proxy output: Element removed already\n   proxy.remove(\"baz\")\n   \/\/ Proxy output: Element not added\n\n}\n\nrun()<\/code><\/pre>\n<p>\u3053\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u5b9f\u884c\u524d\u5f8c\u306e\u51e6\u7406\u3092\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u308b\u305f\u3081\u3001\u5e83\u304f\u4f7f\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3068\u306f\u8a00\u3048\u3001\u4ed6\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u540c\u69d8\u3001\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u306f\u8907\u96d1\u306b\u306a\u308b\u305f\u3081\u3001\u672c\u5f53\u306b\u5fc5\u8981\u306a\u3068\u304d\u306b\u3060\u3051\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u306a\u304a\u3001\u5b9f\u969b\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u547c\u3073\u51fa\u3059\u969b\u306b\u3001\u8ffd\u52a0\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u95a2\u4e0e\u3059\u308b\u305f\u3081\u3001\u633f\u5165\u3055\u308c\u305f\u51e6\u7406\u64cd\u4f5c\u306b\u3088\u308b\u5f85\u3061\u6642\u9593\u304c\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u307e\u305f\u30e1\u30a4\u30f3\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u6700\u9069\u5316\u3059\u308b\u969b\u306b\u306f\u3001Proxy\u30af\u30e9\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u306e\u6700\u9069\u5316\u3082\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<h3>\u632f\u308b\u821e\u3044\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3<\/h3>\n<p>\u632f\u308b\u821e\u3044\u306b\u95a2\u3059\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u540c\u58eb\u306e\u5bfe\u8a71\u306b\u95a2\u9023\u3059\u308b\u554f\u984c\u89e3\u6c7a\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002\u3053\u308c\u306b\u306f\u3001\u4e00\u9023\u306e\u64cd\u4f5c\u3092\u5b8c\u4e86\u3059\u308b\u305f\u3081\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u9593\u3067\u306e\u8cac\u4efb\u3084\u5236\u5fa1\u306e\u5171\u6709\u3068\u3001\u53d7\u3051\u6e21\u3057\u3001\u307e\u305f\u53ef\u80fd\u306a\u9650\u308a\u52b9\u7387\u7684\u306a\u65b9\u6cd5\u3067\u306e\u3001\u8907\u6570\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u9593\u3067\u306e\u30c7\u30fc\u30bf\u306e\u53d7\u3051\u6e21\u3057\u3084\u5171\u6709\u3082\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n<h4>13. Chain of Responsibility<\/h4>\n<p>Chain of Responsibility\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u632f\u308b\u821e\u3044\u306b\u95a2\u3059\u308b\u30b7\u30f3\u30d7\u30eb\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002\u8907\u6570\u30cf\u30f3\u30c9\u30e9\u3067\u51e6\u7406\u3055\u308c\u308b\u64cd\u4f5c\u30ed\u30b8\u30c3\u30af\u306e\u8a2d\u8a08\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30dd\u30fc\u30c8\u306e\u30a8\u30b9\u30ab\u30ec\u30fc\u30b7\u30e7\u30f3\u5bfe\u5fdc\u306b\u4f3c\u3066\u3001\u5236\u5fa1\u306f\u30cf\u30f3\u30c9\u30e9\u306e\u9023\u9396\u3067\u6e21\u3055\u308c\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u5bfe\u3059\u308b\u8cac\u4efb\u3092\u6301\u3064\u30cf\u30f3\u30c9\u30e9\u304c\u64cd\u4f5c\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002\u3053\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001UI\u30c7\u30b6\u30a4\u30f3\u3067\u3088\u304f\u4f7f\u7528\u3055\u308c\u3001\u30bf\u30c3\u30c1\u3084\u30b9\u30ef\u30a4\u30d7\u306a\u3069\u306e\u30e6\u30fc\u30b6\u30fc\u5165\u529b\u30a4\u30d9\u30f3\u30c8\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8907\u6570\u30ec\u30a4\u30e4\u30fc\u3067\u51e6\u7406\u3057\u307e\u3059\u3002<\/p>\n<p>Chain of Responsibility\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u3063\u3066\u3001\u30a8\u30b9\u30ab\u30ec\u30fc\u30b7\u30e7\u30f3\u5bfe\u5fdc\u306e\u4f8b\u3092\u898b\u3066\u307f\u307e\u3059\u3002\u9867\u5ba2\u304b\u3089\u306e\u30af\u30ec\u30fc\u30e0\u304c\u91cd\u5927\u6027\u306b\u57fa\u3065\u304d\u5404\u30cf\u30f3\u30c9\u30e9\u3067\u51e6\u7406\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ Complaint class that stores title and severity of a complaint\n\/\/ Higher value of severity indicates a more severe complaint\nfunction Complaint (title, severity) {\n    this.title = title\n    this.severity = severity\n}\n\n\/\/ Base level handler that receives all complaints\nfunction Representative () {\n    \/\/ If this handler can not handle the complaint, it will be forwarded to the next level\n    this.nextLevel = new Management()\n\n    this.handleComplaint = function (complaint) {\n        if (complaint.severity === 0)\n            console.log(\"Representative resolved the following complaint: \" + complaint.title)\n        else\n            this.nextLevel.handleComplaint(complaint)\n    }\n}\n\n\/\/ Second level handler to handle complaints of severity 1\nfunction Management() {\n    \/\/ If this handler can not handle the complaint, it will be forwarded to the next level\n    this.nextLevel = new Leadership()\n\n    this.handleComplaint = function (complaint) {\n        if (complaint.severity === 1)\n            console.log(\"Management resolved the following complaint: \" + complaint.title)\n        else\n            this.nextLevel.handleComplaint(complaint)\n    }\n}\n\n\/\/ Highest level handler that handles all complaints unhandled so far\nfunction Leadership() {\n    this.handleComplaint = function (complaint) {\n        console.log(\"Leadership resolved the following complaint: \" + complaint.title)\n    }\n}\n\nfunction run() {\n    \/\/ Create an instance of the base level handler\n    let customerSupport = new Representative()\n\n    \/\/ Create multiple complaints of varying severity and pass them to the base handler\n\n    let complaint1 = new Complaint(\"Submit button doesn't work\", 0)\n    customerSupport.handleComplaint(complaint1)\n    \/\/ Output: Representative resolved the following complaint: Submit button doesn't work\n\n    let complaint2 = new Complaint(\"Payment failed\", 1)\n    customerSupport.handleComplaint(complaint2)\n    \/\/ Output: Management resolved the following complaint: Payment failed\n\n    let complaint3 = new Complaint(\"Employee misdemeanour\", 2)\n    customerSupport.handleComplaint(complaint3)\n    \/\/ Output: Leadership resolved the following complaint: Employee misdemeanour\n}\n\nrun()<\/code><\/pre>\n<p>\u3053\u306e\u8a2d\u8a08\u306e\u5927\u304d\u306a\u554f\u984c\u70b9\u306f\u3001\u51e6\u7406\u304c\u4e00\u76f4\u7dda\u3067\u3042\u308b\u3053\u3068\u3002\u5927\u91cf\u306e\u30cf\u30f3\u30c9\u30e9\u304c\u9023\u9396\u3057\u3066\u3044\u308b\u3068\u3001\u64cd\u4f5c\u306e\u51e6\u7406\u306b\u9045\u5ef6\u304c\u751f\u3058\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u307e\u305f\u3001\u30cf\u30f3\u30c9\u30e9\u306e\u6570\u304c\u3042\u308b\u7a0b\u5ea6\u5897\u3048\u308b\u3068\u3001\u30cf\u30f3\u30c9\u30e9\u306e\u8ffd\u8de1\u3001\u305d\u3057\u3066\u30c7\u30d0\u30c3\u30b0\u3082\u5927\u5909\u306b\u306a\u308a\u307e\u3059\u3002\u5404\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u7570\u306a\u308b\u30cf\u30f3\u30c9\u30e9\u3067\u51e6\u7406\u3055\u308c\u308b\u305f\u3081\u3001<a href=\"https:\/\/kinsta.com\/blog\/node-debug\/\">\u30ed\u30b0\u3068\u30c7\u30d0\u30c3\u30b0<\/a>\u306e\u6a19\u6e96\u5316\u306f\u96e3\u3057\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n<h4>14. Iterator<\/h4>\n<p>Iterator\u30d1\u30bf\u30fc\u30f3\u306f\u975e\u5e38\u306b\u30b7\u30f3\u30d7\u30eb\u3067\u3001\u4eca\u65e5\u306e\u307b\u307c\u3059\u3079\u3066\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6307\u5411\u8a00\u8a9e\u3067\u4f7f\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3059\u3079\u3066\u304c\u540c\u3058\u578b\u3067\u306f\u306a\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30ea\u30b9\u30c8\u3092\u51e6\u7406\u3059\u308b\u5834\u5408\u3001for\u30eb\u30fc\u30d7\u306e\u3088\u3046\u306a\u901a\u5e38\u306e\u53cd\u5fa9\u30e1\u30bd\u30c3\u30c9\u3067\u306f\u975e\u5e38\u306b\u9762\u5012\u306b\u306a\u308a\u307e\u3059\u3002\u5185\u90e8\u306b\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u3092\u8a18\u8ff0\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u306a\u304a\u3055\u3089\u3067\u3059\u3002<\/p>\n<p>Iterator\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30e1\u30a4\u30f3\u306e\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u304b\u3089\u30ea\u30b9\u30c8\u306e\u53cd\u5fa9\u51e6\u7406\u3084\u51e6\u7406\u30ed\u30b8\u30c3\u30af\u3092\u5207\u308a\u96e2\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u3001\u8907\u6570\u30bf\u30a4\u30d7\u306e\u8981\u7d20\u3092\u6301\u3064\u30b7\u30f3\u30d7\u30eb\u306a\u30ea\u30b9\u30c8\u3067\u4f7f\u7528\u65b9\u6cd5\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ Iterator for a complex list with custom methods\nfunction Iterator(list) {\n   this.list = list\n   this.index = 0\n\n   \/\/ Fetch the current element\n   this.current = function() {\n       return this.list[this.index]\n   }\n\n   \/\/ Fetch the next element in the list\n   this.next = function() {\n       return this.list[this.index++]\n   }\n\n   \/\/ Check if there is another element in the list\n   this.hasNext = function() {\n       return this.index &lt; this.list.length\n   }\n\n   \/\/ Reset the index to point to the initial element\n   this.resetIndex = function() {\n       this.index = 0\n   }\n\n   \/\/ Run a forEach loop over the list\n   this.forEach = function(callback) {\n       for (let element = this.next(); this.index &lt;= this.list.length; element = this.next()) {\n           callback(element)\n       }\n   }\n}\n\nfunction run() {\n   \/\/ A complex list with elements of multiple data types\n   let list = [\"Lorem ipsum\", 9, [\"lorem ipsum dolor\", true], false]\n\n   \/\/ Create an instance of the iterator and pass it the list\n   let iterator = new Iterator(list)\n\n   \/\/ Log the first element\n   console.log(iterator.current())\n   \/\/ Output: Lorem ipsum\n\n   \/\/ Print all elements of the list using the iterator's methods\n   while (iterator.hasNext()) {\n       console.log(iterator.next())\n       \/**\n        * Output:\n        * Lorem ipsum\n        * 9\n        * [ 'lorem ipsum dolor', true ]\n        * false\n        *\/\n   }\n\n   \/\/ Reset the iterator's index to the first element\n   iterator.resetIndex()\n\n   \/\/ Use the custom iterator to pass an effect that will run for each element of the list\n   iterator.forEach(function (element) {\n       console.log(element)\n   })\n   \/**\n    * Output:\n    * Lorem ipsum\n    * 9\n    * [ 'lorem ipsum dolor', true ]\n    * false\n    *\/\n}\n\nrun()<\/code><\/pre>\n<p>\u8a00\u3046\u307e\u3067\u3082\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u30ea\u30b9\u30c8\u5185\u306e\u8981\u7d20\u304c1\u7a2e\u985e\u3067\u3042\u308c\u3070\u3001\u3053\u306e\u30d1\u30bf\u30fc\u30f3\u306f\u4e0d\u5fc5\u8981\u306b\u8907\u96d1\u3067\u3059\u3002\u9006\u306b\u8981\u7d20\u306e\u7a2e\u985e\u304c\u591a\u3059\u304e\u3066\u3082\u7ba1\u7406\u304c\u5927\u5909\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>Iterator\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u524d\u306b\u306f\u3001\u30ea\u30b9\u30c8\u3068\u5c06\u6765\u7684\u306a\u5909\u66f4\u3092\u541f\u5473\u3057\u3001\u672c\u5f53\u306b\u5fc5\u8981\u304b\u3069\u3046\u304b\u3092\u898b\u6975\u3081\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002\u3055\u3089\u306b\u3053\u306e\u30d1\u30bf\u30fc\u30f3\u306f\u30ea\u30b9\u30c8\u3067\u306e\u307f\u6709\u52b9\u3067\u3059\u304c\u3001\u30ea\u30b9\u30c8\u306f\u7dda\u5f62\u30a2\u30af\u30bb\u30b9\u306b\u7e1b\u3089\u308c\u307e\u3059\u3002\u4ed6\u306e\u30c7\u30fc\u30bf\u69cb\u9020\u3092\u4f7f\u7528\u3057\u305f\u65b9\u304c\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u5411\u4e0a\u3059\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n<h4>15. Mediator<\/h4>\n<p>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u8a08\u3067\u306f\u3001\u5927\u91cf\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6271\u308f\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u306f\u69d8\u3005\u306a\u7a2e\u985e\u306e\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u304c\u683c\u7d0d\u3055\u308c\u3001\u4f9d\u5b58\u3057\u5408\u3063\u3066\u3044\u307e\u3059\u3002\u3053\u3046\u3057\u305f\u4f9d\u5b58\u95a2\u4fc2\u306e\u51e6\u7406\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u540c\u58eb\u306e\u30c7\u30fc\u30bf\u3084\u5236\u5fa1\u306e\u4ea4\u63db\u65b9\u6cd5\u3092\u8ffd\u8de1\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u305f\u3081\u3001\u6642\u3068\u3057\u3066\u975e\u5e38\u306b\u5384\u4ecb\u3067\u3059\u3002<\/p>\n<p>Mediator\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u9593\u306e\u5bfe\u8a71\u30ed\u30b8\u30c3\u30af\u3092\u500b\u5225\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5206\u96e2\u3059\u308b\u3053\u3068\u3067\u3001\u3053\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u5206\u96e2\u3055\u308c\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306fMediator\u3068\u547c\u3070\u308c\u3001\u4f4e\u30ec\u30d9\u30eb\u306e\u30af\u30e9\u30b9\u304c\u884c\u3046\u4f5c\u696d\u306b\u8cac\u4efb\u3092\u6301\u3061\u307e\u3059\u3002\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3084\u547c\u3073\u51fa\u3057\u5143\u74b0\u5883\u3082\u3001\u4f4e\u30ec\u30d9\u30eb\u30af\u30e9\u30b9\u306e\u4ee3\u308f\u308a\u306bMediator\u3068\u5bfe\u8a71\u3057\u307e\u3059\u3002<\/p>\n<p>Mediator\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u4f8b\u306f\u3001\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ Writer class that receives an assignment, writes it in 2 seconds, and marks it as finished\nfunction Writer(name, manager) {\n    \n    \/\/ Reference to the manager, writer's name, and a busy flag that the manager uses while assigning the article\n    this.manager = manager\n    this.name = name\n    this.busy = false\n\n    this.startWriting = function (assignment) {\n        console.log(this.name + \" started writing \\\"\" + assignment + \"\\\"\")\n        this.assignment = assignment\n        this.busy = true\n\n        \/\/ 2 s timer to replicate manual action\n        setTimeout(() =&gt; { this.finishWriting() }, 2000)\n    }\n\n    this.finishWriting = function () {\n        if (this.busy === true) {\n            console.log(this.name + \" finished writing \\\"\" + this.assignment + \"\\\"\")\n            this.busy = false\n            return this.manager.notifyWritingComplete(this.assignment)\n        } else {\n            console.log(this.name + \" is not writing any article\")\n        }\n    }\n}\n\n\/\/ Editor class that receives an assignment, edits it in 3 seconds, and marks it as finished\nfunction Editor(name, manager) {\n    \n    \/\/ Reference to the manager, editor's name, and a busy flag that the manager uses while assigning the article\n    this.manager = manager\n    this.name = name\n    this.busy = false\n\n    this.startEditing = function (assignment) {\n        console.log(this.name + \" started editing \\\"\" + assignment + \"\\\"\")\n        this.assignment = assignment\n        this.busy = true\n\n        \/\/ 3 s timer to replicate manual action\n        setTimeout(() =&gt; { this.finishEditing() }, 3000)\n    }\n\n    this.finishEditing = function () {\n        if (this.busy === true) {\n            console.log(this.name + \" finished editing \\\"\" + this.assignment + \"\\\"\")\n            this.manager.notifyEditingComplete(this.assignment)\n            this.busy = false\n        } else {\n            console.log(this.name + \" is not editing any article\")\n        }\n    }\n}\n\n\/\/ The mediator class\nfunction Manager() {\n    \/\/ Store arrays of workers\n    this.editors = []\n    this.writers = []\n\n    this.setEditors = function (editors) {\n        this.editors = editors\n    }\n    this.setWriters = function (writers) {\n        this.writers = writers\n    }\n\n    \/\/ Manager receives new assignments via this method\n    this.notifyNewAssignment = function (assignment) {\n        let availableWriter = this.writers.find(function (writer) {\n            return writer.busy === false\n        })\n        availableWriter.startWriting(assignment)\n        return availableWriter\n    }\n\n    \/\/ Writers call this method to notify they're done writing\n    this.notifyWritingComplete = function (assignment) {\n        let availableEditor = this.editors.find(function (editor) {\n            return editor.busy === false\n        })\n        availableEditor.startEditing(assignment)\n        return availableEditor\n    }\n\n    \/\/ Editors call this method to notify they're done editing\n    this.notifyEditingComplete = function (assignment) {\n        console.log(\"\\\"\" + assignment + \"\\\" is ready to publish\")\n    }\n\n}\n\nfunction run() {\n    \/\/ Create a manager\n    let manager = new Manager()\n\n    \/\/ Create workers\n    let editors = [\n        new Editor(\"Ed\", manager),\n        new Editor(\"Phil\", manager),\n    ]\n\n    let writers = [\n        new Writer(\"Michael\", manager),\n        new Writer(\"Rick\", manager),\n    ]\n\n    \/\/ Attach workers to manager\n    manager.setEditors(editors)\n    manager.setWriters(writers)\n\n    \/\/ Send two assignments to manager\n    manager.notifyNewAssignment(\"var vs let in JavaScript\")\n    manager.notifyNewAssignment(\"JS promises\")\n\n    \/**\n     * Output:\n     * Michael started writing \"var vs let in JavaScript\"\n     * Rick started writing \"JS promises\"\n     * \n     * After 2s, output:\n     * Michael finished writing \"var vs let in JavaScript\"\n     * Ed started editing \"var vs let in JavaScript\"\n     * Rick finished writing \"JS promises\"\n     * Phil started editing \"JS promises\"\n     *\n     * After 3s, output:\n     * Ed finished editing \"var vs let in JavaScript\"\n     * \"var vs let in JavaScript\" is ready to publish\n     * Phil finished editing \"JS promises\"\n     * \"JS promises\" is ready to publish\n     *\/\n\n}\n\nrun()<\/code><\/pre>\n<p>Mediator\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u8a08\u306b\u5206\u96e2\u3068\u5927\u304d\u306a\u67d4\u8edf\u6027\u3092\u3082\u305f\u3089\u3057\u307e\u3059\u304c\u3001\u5225\u306e\u30af\u30e9\u30b9\u3092\u7dad\u6301\u3057\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002\u4e0d\u5fc5\u8981\u306a\u8907\u96d1\u5316\u3092\u907f\u3051\u308b\u305f\u3081\u3001\u5b9f\u969b\u306b\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u524d\u306b\u3001Mediator\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u30e1\u30ea\u30c3\u30c8\u304c\u3042\u308b\u304b\u3069\u3046\u304b\u691c\u8a0e\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u307e\u305f\u3001Mediator\u30af\u30e9\u30b9\u306f\u76f4\u63a5\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u3092\u6301\u305f\u306a\u3044\u3068\u306f\u3044\u3048\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u6a5f\u80fd\u306b\u4e0d\u53ef\u6b20\u306a\u30b3\u30fc\u30c9\u3092\u591a\u304f\u542b\u3080\u305f\u3081\u3001\u3059\u3050\u306b\u8907\u96d1\u306b\u306a\u308b\u70b9\u306b\u3082\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<h4>16. Memento<\/h4>\n<p>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u3082\u307e\u305f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u6642\u306b\u76f4\u9762\u3059\u308b\u4e00\u822c\u7684\u306a\u554f\u984c\u3067\u3059\u3002\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5c65\u6b74\u3092\u4fdd\u6301\u3057\u3001\u7c21\u5358\u306b\u30ed\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3001\u66f4\u306b\u306f\u305d\u306e\u30ed\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u5143\u306b\u623b\u3057\u305f\u3044\u30b1\u30fc\u30b9\u306f\u591a\u6570\u3042\u308a\u307e\u3059\u3002\u3057\u304b\u3057\u3053\u3046\u3057\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30ed\u30b8\u30c3\u30af\u3092\u66f8\u304f\u306e\u306f\u5927\u5909\u3067\u3059\u3002<\/p>\n<p>\u305d\u3093\u306a\u3068\u304d\u306b\u6d3b\u7528\u3057\u305f\u3044\u306e\u304c\u3001Memento\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002<\/p>\n<p>Memento\u306f\u3001\u3042\u308b\u6642\u70b9\u3067\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30b9\u30ca\u30c3\u30d7\u30b7\u30e7\u30c3\u30c8\u3068\u8a00\u3048\u307e\u3059\u3002Memento\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u3053\u306eMemento\u3092\u5229\u7528\u3057\u3066\u3001\u6642\u9593\u306e\u7d4c\u904e\u3068\u3068\u3082\u306b\u5909\u5316\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30b9\u30ca\u30c3\u30d7\u30b7\u30e7\u30c3\u30c8\u3092\u4fdd\u5b58\u3057\u307e\u3059\u3002\u53e4\u3044\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u30ed\u30fc\u30eb\u30d0\u30c3\u30af\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3068\u304d\u306f\u3001\u305d\u306eMemento\u3092\u5f15\u304d\u51fa\u3059\u3053\u3068\u3067\u5b9f\u73fe\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<p>\u30c6\u30ad\u30b9\u30c8\u51e6\u7406\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306e\u5b9f\u88c5\u4f8b\u3092\u898b\u3066\u307f\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ The memento class that can hold one snapshot of the Originator class - document\nfunction Text(contents) {\n    \/\/ Contents of the document\n    this.contents = contents\n\n    \/\/ Accessor function for contents\n    this.getContents = function () {\n        return this.contents\n    }\n\n    \/\/ Helper function to calculate word count for the current document\n    this.getWordCount = function () {\n        return this.contents.length\n    }\n}\n\n\/\/ The originator class that holds the latest version of the document\nfunction Document(contents) {\n    \/\/ Holder for the memento, i.e., the text of the document\n    this.text = new Text(contents)\n\n    \/\/ Function to save new contents as a memento\n    this.save = function (contents) {\n        this.text = new Text(contents)\n        return this.text\n    }\n\n    \/\/ Function to revert to an older version of the text using a memento\n    this.restore = function (text) {\n        this.text = new Text(text.getContents())\n    }\n\n    \/\/ Helper function to get the current memento\n    this.getText = function () {\n        return this.text\n    }\n\n    \/\/ Helper function to get the word count of the current document\n    this.getWordCount = function () {\n        return this.text.getWordCount()\n    }\n}\n\n\/\/ The caretaker class that providers helper functions to modify the document\nfunction DocumentManager(document) {\n    \/\/ Holder for the originator, i.e., the document\n    this.document = document\n\n    \/\/ Array to maintain a list of mementos\n    this.history = []\n\n    \/\/ Add the initial state of the document as the first version of the document\n    this.history.push(document.getText())\n\n    \/\/ Helper function to get the current contents of the documents\n    this.getContents = function () {\n        return this.document.getText().getContents()\n    }\n\n    \/\/ Helper function to get the total number of versions available for the document\n    this.getVersionCount = function () {\n        return this.history.length\n    }\n\n    \/\/ Helper function to get the complete history of the document\n    this.getHistory = function () {\n        return this.history.map(function (element) {\n            return element.getContents()\n        })\n\n    }\n\n    \/\/ Function to overwrite the contents of the document\n    this.overwrite = function (contents) {\n        let newVersion = this.document.save(contents)\n        this.history.push(newVersion)\n    }\n\n    \/\/ Function to append new content to the existing contents of the document\n    this.append = function (contents) {\n        let currentVersion = this.history[this.history.length - 1]\n        let newVersion\n        if (currentVersion === undefined)\n            newVersion = this.document.save(contents)\n        else\n            newVersion = this.document.save(currentVersion.getContents() + contents)\n        this.history.push(newVersion)\n    }\n\n    \/\/ Function to delete all the contents of the document\n    this.delete = function () {\n        this.history.push(this.document.save(\"\"))\n    }\n\n    \/\/ Function to get a particular version of the document\n    this.getVersion = function (versionNumber) {\n        return this.history[versionNumber - 1]\n    }\n\n    \/\/ Function to undo the last change\n    this.undo = function () {\n        let previousVersion = this.history[this.history.length - 2]\n        this.document.restore(previousVersion)\n        this.history.push(previousVersion)\n    }\n\n    \/\/ Function to revert the document to a previous version\n    this.revertToVersion = function (version) {\n        let previousVersion = this.history[version - 1]\n        this.document.restore(previousVersion)\n        this.history.push(previousVersion)\n    }\n\n    \/\/ Helper function to get the total word count of the document\n    this.getWordCount = function () {\n        return this.document.getWordCount()\n    }\n\n}\n\nfunction run() {\n    \/\/ Create a document\n    let blogPost = new Document(\"\")\n\n    \/\/ Create a caretaker for the document\n    let blogPostManager = new DocumentManager(blogPost)\n\n    \/\/ Change #1: Add some text\n    blogPostManager.append(\"Hello World!\")\n    console.log(blogPostManager.getContents())\n    \/\/ Output: Hello World!\n\n    \/\/ Change #2: Add some more text\n    blogPostManager.append(\" This is the second entry in the document\")\n    console.log(blogPostManager.getContents())\n    \/\/ Output: Hello World! This is the second entry in the document\n\n    \/\/ Change #3: Overwrite the document with some new text\n    blogPostManager.overwrite(\"This entry overwrites everything in the document\")\n    console.log(blogPostManager.getContents())\n    \/\/ Output: This entry overwrites everything in the document\n\n    \/\/ Change #4: Delete the contents of the document\n    blogPostManager.delete()\n    console.log(blogPostManager.getContents())\n    \/\/ Empty output\n\n    \/\/ Get an old version of the document\n    console.log(blogPostManager.getVersion(2).getContents())\n    \/\/ Output: Hello World!\n\n    \/\/ Change #5: Go back to an old version of the document\n    blogPostManager.revertToVersion(3)\n    console.log(blogPostManager.getContents())\n    \/\/ Output: Hello World! This is the second entry in the document\n\n    \/\/ Get the word count of the current document\n    console.log(blogPostManager.getWordCount())\n    \/\/ Output: 53\n\n    \/\/ Change #6: Undo the last change\n    blogPostManager.undo()\n    console.log(blogPostManager.getContents())\n    \/\/ Empty output\n\n    \/\/ Get the total number of versions for the document\n    console.log(blogPostManager.getVersionCount())\n    \/\/ Output: 7\n\n    \/\/ Get the complete history of the document\n    console.log(blogPostManager.getHistory())\n    \/**\n     * Output:\n     * [\n     *   '',\n     *   'Hello World!',\n     *   'Hello World! This is the second entry in the document',\n     *   'This entry overwrites everything in the document',\n     *   '',\n     *   'Hello World! This is the second entry in the document',\n     *   ''\n     * ]\n     *\/\n}\n\nrun()<\/code><\/pre>\n<p>Memento\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5c65\u6b74\u7ba1\u7406\u306b\u5bfe\u3059\u308b\u753b\u671f\u7684\u306a\u89e3\u6c7a\u7b56\u306b\u306a\u308a\u307e\u3059\u304c\u3001\u5927\u91cf\u306b\u30ea\u30bd\u30fc\u30b9\u3092\u6d88\u8cbb\u3057\u307e\u3059\u3002\u5404Memento\u306f\u307b\u307c\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30b3\u30d4\u30fc\u306e\u305f\u3081\u3001\u9069\u5207\u306b\u4f7f\u7528\u3057\u306a\u3051\u308c\u3070\u30e1\u30e2\u30ea\u304c\u6025\u901f\u306b\u80a5\u5927\u5316\u3057\u307e\u3059\u3002<\/p>\n<p>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u6570\u304c\u591a\u3051\u308c\u3070\u3001\u305d\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u7ba1\u7406\u3082\u975e\u5e38\u306b\u9762\u5012\u306a\u4f5c\u696d\u306b\u306a\u308a\u307e\u3059\u3002\u305d\u306e\u4e0a\u3001<code>Originator<\/code>\u30af\u30e9\u30b9\u3068<code>Caretaker<\/code>\u30af\u30e9\u30b9\u306f\u901a\u5e38\u3001\u975e\u5e38\u306b\u5bc6\u63a5\u306b\u7d50\u5408\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u30b3\u30fc\u30c9\u306e\u8907\u96d1\u5316\u3068\u3044\u3046\u61f8\u5ff5\u70b9\u304c\u4ecb\u5728\u3057\u307e\u3059\u3002<\/p>\n<h4>17. Observer<\/h4>\n<p>Observer\u30d1\u30bf\u30fc\u30f3\u306f\u3001Mediator\u3068\u306f\u7570\u306a\u308b\u65b9\u6cd5\u3067\u3001\u8907\u6570\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u9593\u306e\u5bfe\u8a71\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n<p>\u5404\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u6307\u5b9a\u3055\u308c\u305fMediator\u3092\u901a\u3057\u3066\u4e92\u3044\u306b\u901a\u4fe1\u3059\u308b\u4ee3\u308f\u308a\u306b\u3001Observer\u30d1\u30bf\u30fc\u30f3\u3067\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u4e92\u3044\u3092\u89b3\u5bdf\u3057\u307e\u3059\u3002\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u3001\u30c7\u30fc\u30bf\u3084\u5236\u5fa1\u3092\u9001\u4fe1\u3059\u308b\u969b\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u767a\u3059\u308b\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3001\u30a4\u30d9\u30f3\u30c8\u3092\u300c\u30ea\u30c3\u30b9\u30f3\u300d\u3057\u3066\u3044\u308b\u4ed6\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u3001\u30a4\u30d9\u30f3\u30c8\u3092\u53d7\u4fe1\u3057\u3001\u305d\u306e\u5185\u5bb9\u306b\u57fa\u3065\u304d\u5bfe\u8a71\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Observer\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3057\u3001\u8907\u6570\u306e\u4eba\u306b\u30cb\u30e5\u30fc\u30b9\u30ec\u30bf\u30fc\u3092\u914d\u4fe1\u3059\u308b\u4f8b\u3092\u898b\u3066\u307f\u307e\u3059<\/p>\n<pre><code class=\"language-js\">\/\/ The newsletter class that can send out posts to its subscribers\nfunction Newsletter() {\n   \/\/ Maintain a list of subscribers\n   this.subscribers = []\n\n   \/\/ Subscribe a reader by adding them to the subscribers' list\n   this.subscribe = function(subscriber) {\n       this.subscribers.push(subscriber)\n   }\n\n   \/\/ Unsubscribe a reader by removing them from the subscribers' list\n   this.unsubscribe = function(subscriber) {\n       this.subscribers = this.subscribers.filter(\n           function (element) {\n               if (element !== subscriber) return element\n           }\n       )\n   }\n\n   \/\/ Publish a post by calling the receive function of all subscribers\n   this.publish = function(post) {\n       this.subscribers.forEach(function(element) {\n           element.receiveNewsletter(post)\n       })\n   }\n}\n\n\/\/ The reader class that can subscribe to and receive updates from newsletters\nfunction Reader(name) {\n   this.name = name\n\n   this.receiveNewsletter = function(post) {\n       console.log(\"Newsletter received by \" + name + \"!: \" + post)\n   }\n\n}\n\nfunction run() {\n   \/\/ Create two readers\n   let rick = new Reader(\"ed\")\n   let morty = new Reader(\"morty\")\n\n   \/\/ Create your newsletter\n   let newsletter = new Newsletter()\n\n   \/\/ Subscribe a reader to the newsletter\n   newsletter.subscribe(rick)\n\n   \/\/ Publish the first post\n   newsletter.publish(\"This is the first of the many posts in this newsletter\")\n   \/**\n    * Output:\n    * Newsletter received by ed!: This is the first of the many posts in this newsletter\n    *\/\n\n   \/\/ Subscribe another reader to the newsletter\n   newsletter.subscribe(morty)\n\n   \/\/ Publish the second post\n   newsletter.publish(\"This is the second of the many posts in this newsletter\")\n   \/**\n    * Output:\n    * Newsletter received by ed!: This is the second of the many posts in this newsletter\n    * Newsletter received by morty!: This is the second of the many posts in this newsletter\n    *\/\n\n   \/\/ Unsubscribe the first reader\n   newsletter.unsubscribe(rick)\n\n   \/\/ Publish the third post\n   newsletter.publish(\"This is the third of the many posts in this newsletter\")\n   \/**\n    * Output:\n    * Newsletter received by morty!: This is the third of the many posts in this newsletter\n    *\/\n\n}\n\nrun()<\/code><\/pre>\n<p>Observer\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u6d17\u7df4\u3055\u308c\u305f\u65b9\u6cd5\u3067\u5236\u5fa1\u3084\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u6e21\u3057\u3001\u7279\u306b\u9650\u3089\u308c\u305f\u6570\u306e\u63a5\u7d9a\u3092\u901a\u3057\u3066\u3001\u591a\u6570\u306e\u9001\u4fe1\u8005\u3068\u53d7\u4fe1\u8005\u304c\u4e92\u3044\u306b\u5bfe\u8a71\u3059\u308b\u72b6\u6cc1\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002\u3059\u3079\u3066\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c1\u5bfe1\u3067\u63a5\u7d9a\u3059\u308b\u5834\u5408\u30011\u3064\u306e\u30d1\u30d6\u30ea\u30c3\u30b7\u30e3\u30fc\u306b\u5bfe\u3057\u30661\u3064\u306e\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d0\u30fc\u3057\u304b\u306a\u3044\u305f\u3081\u3001\u30a4\u30d9\u30f3\u30c8\u306e\u30d1\u30d6\u30ea\u30c3\u30b7\u30e5\u3068\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u304b\u3089\u5f97\u3089\u308c\u308b\u30e1\u30ea\u30c3\u30c8\u306f\u5931\u308f\u308c\u307e\u3059\uff08\u4e21\u8005\u304c\u76f4\u63a5\u4ea4\u4fe1\u3057\u305f\u65b9\u304c\u52b9\u7387\u7684\u3067\u3042\u308b\u305f\u3081\uff09\u3002<\/p>\n<p>\u3055\u3089\u306bObserver\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u30a4\u30d9\u30f3\u30c8\u304c\u9069\u5207\u306b\u51e6\u7406\u3055\u308c\u306a\u3051\u308c\u3070\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u554f\u984c\u306b\u3064\u306a\u304c\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u4e0d\u8981\u306b\u306a\u3063\u305f\u306b\u3082\u304b\u304b\u308f\u3089\u305a\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u4ed6\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3057\u7d9a\u3051\u308c\u3070\u3001\u305d\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f<a href=\"https:\/\/en.wikipedia.org\/wiki\/Lapsed_listener_problem\">\u30ac\u30d9\u30fc\u30b8\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u306e\u5bfe\u8c61\u306b\u306a\u3089\u305a<\/a>\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf\u304c\u5897\u52a0\u3057\u307e\u3059\u3002<\/p>\n<h4>18. State<\/h4>\n<p>State\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u696d\u754c\u5168\u4f53\u3067\u6700\u3082\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e1\u3064\u3067\u3059\u3002<a href=\"https:\/\/reactjs.org\/docs\/state-and-lifecycle.html\">React<\/a>\u3084<a href=\"https:\/\/medium.com\/olricdigital\/introduction-to-state-management-in-angular-v2-ef6f5144bade\">Angular<\/a>\u306e\u3088\u3046\u306a\u4eba\u6c17\u306e<a href=\"https:\/\/kinsta.com\/jp\/blog\/javascript-libraries\/\">JavaScript\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af<\/a>\u306f\u3001State\u30d1\u30bf\u30fc\u30f3\u306b\u5927\u304d\u304f\u4f9d\u5b58\u3057\u3066\u304a\u308a\u3001\u30c7\u30fc\u30bf\u3068\u305d\u306e\u30c7\u30fc\u30bf\u306b\u57fa\u3065\u3044\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u632f\u308b\u821e\u3044\u3092\u7ba1\u7406\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u7c21\u5358\u306b\u8a00\u3048\u3070\u3001State\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u6709\u52b9\u306a\u30b1\u30fc\u30b9\u306f\u3001\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\uff08\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30da\u30fc\u30b8\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3001\u30b5\u30fc\u30d0\u30fc\u306a\u3069\uff09\u306e\u660e\u78ba\u306a\u72b6\u614b\u3092\u5b9a\u7fa9\u3067\u304d\u3001\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u304c\u72b6\u614b\u306e\u5909\u5316\u306b\u5bfe\u3057\u3066\u3001\u3042\u3089\u304b\u3058\u3081\u5b9a\u7fa9\u3055\u308c\u305f\u30ea\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u6301\u3064\u5834\u5408\u3067\u3059\u3002<\/p>\n<p>\u4f8b\u3048\u3070\u3001\u30ed\u30fc\u30f3\u7533\u8acb\u30d7\u30ed\u30bb\u30b9\u3092\u69cb\u7bc9\u3059\u308b\u3068\u3057\u307e\u3059\u3002\u5404\u30b9\u30c6\u30c3\u30d7\u3092\u72b6\u614b\u3068\u3057\u3066\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u9867\u5ba2\u306f\u901a\u5e38\u3001\u7c21\u7565\u5316\u3055\u308c\u305f\u4e00\u9023\u306e\u7533\u8acb\u306e\u72b6\u614b\uff08\u4fdd\u7559\u3001\u5be9\u67fb\u4e2d\u3001\u53d7\u7406\u3001\u5374\u4e0b\uff09\u306e\u307f\u3092\u8a8d\u8b58\u3057\u307e\u3059\u304c\u3001\u793e\u5185\u3067\u306f\u3055\u3089\u306b\u7d30\u304b\u306a\u6bb5\u968e\u304c\u3042\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u5404\u6bb5\u968e\u306b\u304a\u3044\u3066\u3001\u7533\u8acb\u306f\u500b\u5225\u306e\u62c5\u5f53\u8005\u306b\u5272\u308a\u5f53\u3066\u3089\u308c\u3001\u56fa\u6709\u306e\u8981\u4ef6\u3092\u6301\u3061\u307e\u3059\u3002<\/p>\n<p>\u30b7\u30b9\u30c6\u30e0\u306e\u8a2d\u8a08\u3067\u306f\u3001\u3042\u308b\u72b6\u614b\u3067\u306e\u51e6\u7406\u304c\u7d42\u4e86\u3059\u308b\u3068\u6b21\u306e\u72b6\u614b\u306b\u66f4\u65b0\u3055\u308c\u3001\u6b21\u306e\u95a2\u9023\u3059\u308b\u4e00\u9023\u306e\u30b9\u30c6\u30c3\u30d7\u304c\u958b\u59cb\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>State\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u30bf\u30b9\u30af\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\u3092\u69cb\u7bc9\u3059\u308b\u4f8b\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-js\">\/\/ Create titles for all states of a task\nconst STATE_TODO = \"TODO\"\nconst STATE_IN_PROGRESS = \"IN_PROGRESS\"\nconst STATE_READY_FOR_REVIEW = \"READY_FOR_REVIEW\"\nconst STATE_DONE = \"DONE\"\n\n\/\/ Create the task class with a title, assignee, and duration of the task\nfunction Task(title, assignee) {\n    this.title = title\n    this.assignee = assignee\n\n    \/\/ Helper function to update the assignee of the task\n    this.setAssignee = function (assignee) {\n        this.assignee = assignee\n    }\n\n    \/\/ Function to update the state of the task\n    this.updateState = function (state) {\n\n        switch (state) {\n            case STATE_TODO:\n                this.state = new TODO(this)\n                break\n            case STATE_IN_PROGRESS:\n                this.state = new IN_PROGRESS(this)\n                break\n            case STATE_READY_FOR_REVIEW:\n                this.state = new READY_FOR_REVIEW(this)\n                break\n            case STATE_DONE:\n                this.state = new DONE(this)\n                break\n            default:\n                return\n        }\n        \/\/ Invoke the callback function for the new state after it is set\n        this.state.onStateSet()\n    }\n\n    \/\/ Set the initial state of the task as TODO\n    this.updateState(STATE_TODO)\n}\n\n\/\/ TODO state\nfunction TODO(task) {\n\n    this.onStateSet = function () {\n        console.log(task.assignee + \" notified about new task \\\"\" + task.title + \"\\\"\")\n    }\n}\n\n\/\/ IN_PROGRESS state\nfunction IN_PROGRESS(task) {\n\n    this.onStateSet = function () {\n        console.log(task.assignee + \" started working on the task \\\"\" + task.title + \"\\\"\")\n    }\n}\n\n\/\/ READY_FOR_REVIEW state that updates the assignee of the task to be the manager of the developer\n\/\/ for the review\nfunction READY_FOR_REVIEW(task) {\n    this.getAssignee = function () {\n        return \"Manager 1\"\n    }\n\n    this.onStateSet = function () {\n        task.setAssignee(this.getAssignee())\n        console.log(task.assignee + \" notified about completed task \\\"\" + task.title + \"\\\"\")\n    }\n}\n\n\/\/ DONE state that removes the assignee of the task since it is now completed\nfunction DONE(task) {\n    this.getAssignee = function () {\n        return \"\"\n    }\n\n    this.onStateSet = function () {\n        task.setAssignee(this.getAssignee())\n        console.log(\"Task \\\"\" + task.title + \"\\\" completed\")\n    }\n}\n\nfunction run() {\n    \/\/ Create a task\n    let task1 = new Task(\"Create a login page\", \"Developer 1\")\n    \/\/ Output: Developer 1 notified about new task \"Create a login page\"\n\n    \/\/ Set it to IN_PROGRESS\n    task1.updateState(STATE_IN_PROGRESS)\n    \/\/ Output: Developer 1 started working on the task \"Create a login page\"\n\n    \/\/ Create another task\n    let task2 = new Task(\"Create an auth server\", \"Developer 2\")\n    \/\/ Output: Developer 2 notified about new task \"Create an auth server\"\n\n\n    \/\/ Set it to IN_PROGRESS as well\n    task2.updateState(STATE_IN_PROGRESS)\n    \/\/ Output: Developer 2 started working on the task \"Create an auth server\"\n\n    \/\/ Update the states of the tasks until they are done\n    task2.updateState(STATE_READY_FOR_REVIEW)\n    \/\/ Output: Manager 1 notified about completed task \"Create an auth server\"\n    task1.updateState(STATE_READY_FOR_REVIEW)\n    \/\/ Output: Manager 1 notified about completed task \"Create a login page\"\n\n\n    task1.updateState(STATE_DONE)\n    \/\/ Output: Task \"Create a login page\" completed\n    task2.updateState(STATE_DONE)\n    \/\/ Output: Task \"Create an auth server\" completed\n\n}\n\nrun()<\/code><\/pre>\n<p>State\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30d7\u30ed\u30bb\u30b9\u5185\u306e\u30b9\u30c6\u30c3\u30d7\u3092\u5206\u96e2\u3059\u308b\u70b9\u306b\u304a\u3044\u3066\u306f\u512a\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u8907\u6570\u306e\u72b6\u614b\u3092\u542b\u3080\u5927\u898f\u6a21\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u4fdd\u5b88\u7ba1\u7406\u304c\u975e\u5e38\u306b\u56f0\u96e3\u306b\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u3055\u3089\u306b\u30d7\u30ed\u30bb\u30b9\u8a2d\u8a08\u4e0a\u3059\u3079\u3066\u306e\u72b6\u614b\u306b\u5bfe\u3057\u3066\u3001\u76f4\u7dda\u7684\u306a\u9077\u79fb\u4ee5\u4e0a\u306e\u52d5\u304d\u3092\u8a31\u53ef\u3059\u308b\u3068\u3001\u305d\u308c\u305e\u308c\u306e\u79fb\u52d5\u3092\u500b\u5225\u306b\u51e6\u7406\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u305f\u3081\u3001\u30b3\u30fc\u30c9\u306e\u8a18\u8ff0\u91cf\u304c\u5897\u52a0\u3057\u307e\u3059<\/p>\n<h4>19. Strategy<\/h4>\n<p>Strategy\u30d1\u30bf\u30fc\u30f3\u306f\u3001Policy\u30d1\u30bf\u30fc\u30f3\u3068\u3057\u3066\u3082\u77e5\u3089\u308c\u3001\u5171\u901a\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u4f7f\u7528\u3057\u3066\u30af\u30e9\u30b9\u3092\u30ab\u30d7\u30bb\u30eb\u5316\u3057\u3001\u81ea\u7531\u306b\u4ea4\u63db\u3067\u304d\u308b\u3053\u3068\u3092\u76ee\u7684\u3068\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3068\u30af\u30e9\u30b9\u306e\u9593\u306e\u758e\u7d50\u5408\u304c\u7dad\u6301\u3055\u308c\u3001\u597d\u304d\u306a\u3060\u3051\u5b9f\u88c5\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Strategy\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u7570\u306a\u308b\u30e1\u30bd\u30c3\u30c9\u3084\u30a2\u30eb\u30b4\u30ea\u30ba\u30e0\u3067\u540c\u3058\u51e6\u7406\u3092\u884c\u3046\u5834\u5408\u3084\u3001\u5927\u898f\u6a21\u306aswitch\u30d6\u30ed\u30c3\u30af\u3092\u3088\u308a\u7406\u89e3\u3057\u3084\u3059\u3044\u30b3\u30fc\u30c9\u306b\u7f6e\u304d\u63db\u3048\u308b\u5834\u5408\u306b\u3001\u975e\u5e38\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u3001Strategy\u30d1\u30bf\u30fc\u30f3\u306e\u4f8b\u3092\u898b\u3066\u307f\u307e\u3059<\/p>\n<pre><code class=\"language-js\">\/\/ The strategy class that can encapsulate all hosting providers\nfunction HostingProvider() {\n   \/\/ store the provider\n   this.provider = \"\"\n\n   \/\/ set the provider\n   this.setProvider = function(provider) {\n       this.provider = provider\n   }\n\n   \/\/ set the website configuration for which each hosting provider would calculate costs\n   this.setConfiguration = function(configuration) {\n       this.configuration = configuration\n   }\n\n   \/\/ the generic estimate method that calls the provider's unique methods to calculate the costs\n   this.estimateMonthlyCost = function() {\n       return this.provider.estimateMonthlyCost(this.configuration)\n   }\n}\n\n\/\/ Foo Hosting charges for each second and KB of hosting usage\nfunction FooHosting (){\n   this.name = \"FooHosting\"\n   this.rate = 0.0000027\n\n   this.estimateMonthlyCost = function(configuration){\n       return configuration.duration * configuration.workloadSize * this.rate\n   }\n}\n\n\/\/ Bar Hosting charges per minute instead of seconds\nfunction BarHosting (){\n   this.name = \"BarHosting\"\n   this.rate = 0.00018\n\n   this.estimateMonthlyCost = function(configuration){\n       return configuration.duration \/ 60 * configuration.workloadSize * this.rate\n   }\n}\n\n\/\/ Baz Hosting assumes the average workload to be of 10 MB in size\nfunction BazHosting (){\n   this.name = \"BazHosting\"\n   this.rate = 0.032\n\n   this.estimateMonthlyCost = function(configuration){\n       return configuration.duration * this.rate\n   }\n}\n\nfunction run() {\n\n   \/\/ Create a website configuration for a website that is up for 24 hours and takes 10 MB of hosting space\n   let workloadConfiguration = {\n       duration: 84700,\n       workloadSize: 10240\n   }\n\n   \/\/ Create the hosting provider instances\n   let fooHosting = new FooHosting()\n   let barHosting = new BarHosting()\n   let bazHosting = new BazHosting()\n\n   \/\/ Create the instance of the strategy class\n   let hostingProvider = new HostingProvider()\n\n   \/\/ Set the configuration against which the rates have to be calculated\n   hostingProvider.setConfiguration(workloadConfiguration)\n\n   \/\/ Set each provider one by one and print the rates\n   hostingProvider.setProvider(fooHosting)\n   console.log(\"FooHosting cost: \" + hostingProvider.estimateMonthlyCost())\n   \/\/ Output: FooHosting cost: 2341.7856\n\n   hostingProvider.setProvider(barHosting)\n   console.log(\"BarHosting cost: \" + hostingProvider.estimateMonthlyCost())\n   \/\/ Output: BarHosting cost: 2601.9840\n\n   hostingProvider.setProvider(bazHosting)\n   console.log(\"BarHosting cost: \" + hostingProvider.estimateMonthlyCost())\n   \/\/ Output: BarHosting cost: 2710.4000\n\n}\n\nrun()<\/code><\/pre>\n<p>Strategy\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u5927\u304d\u304f\u5909\u3048\u305a\u306b\u3001\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u306e\u65b0\u3057\u3044\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u3092\u5c0e\u5165\u3067\u304d\u308b\u70b9\u306b\u304a\u3044\u3066\u512a\u308c\u3066\u3044\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u5b9f\u88c5\u3059\u308b\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u304c\u5c11\u306a\u3044\u5834\u5408\u306f\u4e0d\u8981\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n<p>\u307e\u305f\u30ab\u30d7\u30bb\u30eb\u5316\u306b\u3088\u3063\u3066\u3001\u5404\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u306e\u5185\u90e8\u30ed\u30b8\u30c3\u30af\u306e\u60c5\u5831\u306f\u96a0\u3055\u308c\u308b\u305f\u3081\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u305d\u306e\u52d5\u4f5c\u306e\u4e2d\u8eab\u304c\u308f\u304b\u308a\u307e\u305b\u3093<\/p>\n<h4>20. Visitor<\/h4>\n<p>Visitor\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u30b3\u30fc\u30c9\u306e\u62e1\u5f35\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n<p>\u30af\u30e9\u30b9\u306b\u5bfe\u3057\u3066\u3001\u4ed6\u306e\u30af\u30e9\u30b9\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u73fe\u5728\u306e\u30af\u30e9\u30b9\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u7c21\u5358\u306b\u5909\u66f4\u3067\u304d\u308b\u30e1\u30bd\u30c3\u30c9\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u4ed6\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u3001Place\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u3082\u547c\u3070\u308c\u308b\u73fe\u5728\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8a2a\u554f\u3059\u308b\u304b\u3001\u73fe\u5728\u306e\u30af\u30e9\u30b9\u304cVisitor\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53d7\u3051\u5165\u308c\u308b\u3068\u3001Place\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u5404\u5916\u90e8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u8a2a\u554f\u3092\u9069\u5207\u306b\u51e6\u7406\u3057\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u304c\u305d\u306e\u4f7f\u7528\u4f8b\u3067\u3059<\/p>\n<pre><code class=\"language-js\">\/\/ Visitor class that defines the methods to be called when visiting each place\nfunction Reader(name, cash) {\n    this.name = name\n    this.cash = cash\n\n    \/\/ The visit methods can access the place object and invoke available functions\n    this.visitBookstore = function(bookstore) {\n        console.log(this.name + \" visited the bookstore and bought a book\")\n        bookstore.purchaseBook(this)\n    }\n\n    this.visitLibrary = function() {\n        console.log(this.name + \" visited the library and read a book\")\n    }\n\n    \/\/ Helper function to demonstrate a transaction\n    this.pay = function(amount) {\n        this.cash -= amount\n    }\n}\n\n\/\/ Place class for a library\nfunction Library () {\n    this.accept = function(reader) {\n        reader.visitLibrary()\n    }\n}\n\n\/\/ Place class for a bookstore that allows purchasing book\nfunction Bookstore () {\n    this.accept = function(reader) {\n        reader.visitBookstore(this)\n    }\n\n    this.purchaseBook = function (visitor) {\n        console.log(visitor.name + \" bought a book\")\n        visitor.pay(8)\n    }\n}\n\n\nfunction run() {\n    \/\/ Create a reader (the visitor)\n    let reader = new Reader(\"Rick\", 30)\n\n    \/\/ Create the places\n    let booksInc = new Bookstore()\n    let publicLibrary = new Library()\n\n    \/\/ The reader visits the library\n    publicLibrary.accept(reader)\n    \/\/ Output: Rick visited the library and read a book\n    console.log(reader.name + \" has $\" + reader.cash)\n    \/\/ Output: Rick has $30\n\n    \/\/ The reader visits the bookstore\n    booksInc.accept(reader)\n    \/\/ Output: Rick visited the bookstore and bought a book\n    console.log(reader.name + \" has $\" + reader.cash)\n    \/\/ Output: Rick has $22\n}\n\nrun()<\/code><\/pre>\n<p>\u3053\u306e\u8a2d\u8a08\u306e\u552f\u4e00\u306e\u6b20\u70b9\u3068\u3057\u3066\u3001Place\u3092\u8ffd\u52a0\u3001\u5909\u66f4\u3059\u308b\u305f\u3073\u306b\u3001\u5404Visitor\u30af\u30e9\u30b9\u3092\u66f4\u65b0\u3057\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002\u8907\u6570\u306eVisitor\u3068Place\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u4e00\u7dd2\u306b\u5b58\u5728\u3059\u308b\u5834\u5408\u3001\u4fdd\u5b88\u7ba1\u7406\u304c\u5927\u5909\u306b\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u305d\u308c\u3092\u9664\u3051\u3070\u3001\u30af\u30e9\u30b9\u306e\u6a5f\u80fd\u3092\u52d5\u7684\u306b\u62e1\u5f35\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u512a\u308c\u305f\u30d1\u30bf\u30fc\u30f3\u3067\u3059<\/p>\n<h2>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5b9f\u88c5\u6642\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h2>\n<p>\u6700\u3082\u4e00\u822c\u7684\u306aJavaScript\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u898b\u3066\u304d\u305f\u3068\u3053\u308d\u3067\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u5b9f\u88c5\u3059\u308b\u969b\u306b\u899a\u3048\u3066\u304a\u304d\u305f\u3044\u30d2\u30f3\u30c8\u3092\u3044\u304f\u3064\u304b\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<h3>\u672c\u5f53\u306b\u89e3\u6c7a\u7b56\u306b\u306a\u308b\u30d1\u30bf\u30fc\u30f3\u304b\u3069\u3046\u304b\u3092\u614e\u91cd\u306b\u898b\u6975\u3081\u308b<\/h3>\n<p>\u3053\u308c\u306f\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u5185\u3067\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u5b9f\u88c5\u3059\u308b\u524d\u306b\u5ff5\u982d\u306b\u7f6e\u304d\u307e\u3057\u3087\u3046\u3002\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u3059\u3079\u3066\u306e\u60a9\u307f\u3092\u89e3\u6c7a\u3057\u3066\u304f\u308c\u308b\u3088\u3046\u306b\u601d\u3048\u3066\u3082\u3001\u4e00\u5ea6\u7acb\u3061\u6b62\u307e\u308a\u3001\u672c\u5f53\u306b\u305d\u306e\u30d1\u30bf\u30fc\u30f3\u304c\u5fc5\u8981\u304b\u3069\u3046\u304b\u3092\u5fc5\u305a\u541f\u5473\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>1\u3064\u306e\u554f\u984c\u306b\u6709\u52b9\u306a\u30d1\u30bf\u30fc\u30f3\u306f\u8907\u6570\u3042\u308a\u307e\u3059\u304c\u3001\u30a2\u30d7\u30ed\u30fc\u30c1\u3001\u305d\u3057\u3066\u3082\u305f\u3089\u3059\u7d50\u679c\u306f\u7570\u306a\u308a\u307e\u3059\u3002\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u9078\u629e\u3059\u308b\u57fa\u6e96\u306f\u3001\u5358\u306b\u305d\u306e\u30d1\u30bf\u30fc\u30f3\u304c\u554f\u984c\u3092\u89e3\u6c7a\u3057\u3066\u304f\u308c\u308b\u304b\u3069\u3046\u304b\u3060\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u52b9\u7387\u7684\u306b\u554f\u984c\u3092\u89e3\u6c7a\u3067\u304d\u308b\u304b\u3001\u307e\u305f\u3088\u308a\u826f\u3044\u30d1\u30bf\u30fc\u30f3\u304c\u4ed6\u306b\u306a\u3044\u304b\u3082\u691c\u8a0e\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h3>\u30d1\u30bf\u30fc\u30f3\u306e\u5b9f\u88c5\u30b3\u30b9\u30c8\u3092\u8a66\u7b97\u3059\u308b<\/h3>\n<p>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u3042\u3089\u3086\u308b<a href=\"https:\/\/kinsta.com\/jp\/blog\/errors-in-javascript\/\">\u30a8\u30f3\u30b8\u30cb\u30a2\u30ea\u30f3\u30b0\u306e\u554f\u984c<\/a>\u306b\u5bfe\u3059\u308b\u6700\u5584\u7b56\u3068\u601d\u308f\u308c\u304c\u3061\u3067\u3059\u304c\u3001\u3059\u3050\u306b\u98db\u3073\u3064\u304f\u3079\u304d\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3057\u305f\u7d50\u679c\u3092\u4e88\u6e2c\u3059\u308b\u306e\u306f\u3082\u3061\u308d\u3093\u3001\u81ea\u8eab\u306e\u72b6\u6cc1\u3082\u8003\u616e\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u7406\u89e3\u3057\u305f\u4e0a\u3067\u3001\u305d\u306e\u4fdd\u5b88\u7ba1\u7406\u3092\u884c\u3046\u306e\u306b\u5341\u5206\u306a\u898f\u6a21\u306e\u958b\u767a\u30c1\u30fc\u30e0\u3092\u78ba\u4fdd\u3067\u304d\u3066\u3044\u308b\u304b\u3002\u5275\u696d\u3057\u305f\u3070\u304b\u308a\u306e\u4f1a\u793e\u3067\u3001\u6700\u5c0f\u9650\u306e\u958b\u767a\u30c1\u30fc\u30e0\u3067\u88fd\u54c1\u306eMVP\u3092\u65e9\u6025\u306b\u30ea\u30ea\u30fc\u30b9\u3057\u3088\u3046\u3068\u3057\u3066\u3044\u308b\u306a\u3089\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u5229\u7528\u3057\u306a\u3044\u65b9\u304c\u5f97\u7b56\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n<p>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u4f7f\u7528\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u8a2d\u8a08\u306e\u521d\u671f\u6bb5\u968e\u3067\u8a08\u753b\u3057\u306a\u3044\u9650\u308a\u3001\u30b3\u30fc\u30c9\u306e\u518d\u5229\u7528\u306b\u306f\u3064\u306a\u304c\u308a\u307e\u305b\u3093\u3002\u69d8\u3005\u306a\u6bb5\u968e\u3067\u7121\u4f5c\u70ba\u306b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u4e0d\u5fc5\u8981\u306b\u8907\u96d1\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u306a\u308a\u3001\u9031\u5358\u4f4d\u3067\u306e\u5358\u7d14\u5316\u4f5c\u696d\u304c\u751f\u3058\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n<p>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u6709\u52b9\u6027\u306f\u3001\u30c6\u30b9\u30c8\u3067\u6e2c\u308c\u308b\u3082\u306e\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<a href=\"https:\/\/kinsta.com\/jp\/blog\/code-review-tools\/\">\u30c1\u30fc\u30e0\u306e\u7d4c\u9a13\u3068\u5185\u7701<\/a>\u3067\u5224\u65ad\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u5341\u5206\u306a\u6642\u9593\u3068\u30ea\u30bd\u30fc\u30b9\u3092\u78ba\u4fdd\u3067\u304d\u308b\u72b6\u6cc1\u4e0b\u3067\u3053\u305d\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u529b\u3092\u767a\u63ee\u3057\u307e\u3059\u3002<\/p>\n<h3>\u3059\u3079\u3066\u306e\u89e3\u6c7a\u7b56\u3092\u30d1\u30bf\u30fc\u30f3\u5316\u3057\u306a\u3044<\/h3>\n<p>\u3082\u30461\u3064\u306e\u6ce8\u610f\u4e8b\u9805\u306f\u3001\u5c0f\u3055\u306a\u554f\u984c\u3068\u305d\u306e\u89e3\u6c7a\u7b56\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u30d1\u30bf\u30fc\u30f3\u5316\u3057\u306a\u3044\u3053\u3068\u3002\u305d\u3057\u3066\u4e8b\u3042\u308b\u3054\u3068\u306b\u6c7a\u307e\u3063\u305f\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3057\u306a\u3044\u3053\u3068\u3067\u3059\u3002<\/p>\n<p>\u540c\u3058\u3088\u3046\u306a\u554f\u984c\u306b\u906d\u9047\u3057\u305f\u3068\u304d\u306e\u305f\u3081\u306b\u3001\u52b9\u679c\u7684\u306a\u89e3\u6c7a\u7b56\u3092\u7279\u5b9a\u3057\u3001\u8a18\u61b6\u306b\u7559\u3081\u3066\u304a\u304f\u3053\u3068\u306f\u826f\u3044\u3053\u3068\u3067\u3059\u304c\u3001\u906d\u9047\u3057\u305f\u554f\u984c\u3068\u904e\u53bb\u306e\u305d\u308c\u304c\u307e\u3063\u305f\u304f\u540c\u3058\u3067\u3042\u308b\u3068\u306f\u9650\u308a\u307e\u305b\u3093\u3002\u7121\u7406\u306b\u4f7f\u7528\u3059\u308b\u3068\u3001\u9069\u5207\u3067\u306a\u3044\u89e3\u6c7a\u7b56\u3092\u5b9f\u88c5\u3057\u3001\u30ea\u30bd\u30fc\u30b9\u3092\u7121\u99c4\u306b\u6d88\u8cbb\u3057\u304b\u306d\u307e\u305b\u3093\u3002<\/p>\n<p>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u4eca\u65e5\u3001\u554f\u984c\u3068\u89e3\u6c7a\u7b56\u306e\u7d44\u307f\u5408\u308f\u305b\u306e\u4ee3\u8868\u4f8b\u3068\u3057\u3066\u78ba\u7acb\u3057\u3066\u3044\u308b\u306e\u306f\u3001\u4f55\u767e\u4eba\u3001\u4f55\u5343\u4eba\u3082\u306e\u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u306b\u3088\u3063\u3066\u3001\u9577\u3044\u6642\u9593\u3092\u304b\u3051\u3066\u30c6\u30b9\u30c8\u3055\u308c\u3001\u4e00\u822c\u5316\u3055\u308c\u3066\u304d\u305f\u305f\u3081\u3067\u3059\u3002\u767a\u751f\u3057\u305f\u554f\u984c\u304c\u3001\u904e\u53bb\u306b\u898b\u305f\u554f\u984c\u3068\u4f3c\u3066\u3044\u308b\u304b\u3089\u3068\u3044\u3046\u7406\u7531\u3060\u3051\u3067\u3001\u30da\u30a2\u3068\u306a\u308b\u89e3\u6c7a\u7b56\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u30b3\u30fc\u30c9\u3067\u6df1\u523b\u306a\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<h2>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u5f79\u7acb\u3064\u72b6\u6cc1<\/h2>\n<p>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u5f79\u7acb\u3064\u72b6\u6cc1\u306f\u3001\u8981\u7d04\u3059\u308b\u3068\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002\u3059\u3079\u3066\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u5f53\u3066\u306f\u307e\u308b\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306e\u4f7f\u7528\u3092\u691c\u8a0e\u3059\u308b\u969b\u306e\u30d2\u30f3\u30c8\u306b\u306a\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<ul>\n<li>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u3088\u304f\u7406\u89e3\u3057\u3066\u3044\u308b\u512a\u308c\u305f\u958b\u767a\u8005\u30c1\u30fc\u30e0\u304c\u3044\u308b\u3002<\/li>\n<li>\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30e2\u30c7\u30eb\u3092\u9075\u5b88\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u3064\u3044\u3066\u6df1\u304f\u8b70\u8ad6\u3059\u308b\u4f59\u5730\u304c\u3042\u308a\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3082\u305d\u306e\u8b70\u8ad6\u306e\u4e2d\u306b\u51fa\u3066\u304d\u305f\u3053\u3068\u304c\u3042\u308b\u3002<\/li>\n<li>\u540c\u3058\u3088\u3046\u306a\u554f\u984c\u304c\u8a2d\u8a08\u306e\u8b70\u8ad6\u306e\u4e2d\u3067\u4f55\u5ea6\u3082\u51fa\u3066\u304d\u3066\u304a\u308a\u3001\u9069\u5207\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u77e5\u3063\u3066\u3044\u308b\u3002<\/li>\n<li>\u305d\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3057\u3066\u3001\u554f\u984c\u306e\u5c0f\u3055\u306a\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u3092\u72ec\u81ea\u306b\u89e3\u6c7a\u3057\u3088\u3046\u3068\u3057\u305f\u3053\u3068\u304c\u3042\u308b\u3002<\/li>\n<li>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3057\u3066\u3082\u3001\u30b3\u30fc\u30c9\u304c\u8907\u96d1\u5316\u3057\u3059\u304e\u306a\u3044\u3002<\/li>\n<\/ul>\n<p>\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u554f\u984c\u3092\u89e3\u6c7a\u3067\u304d\u3001\u30b7\u30f3\u30d7\u30eb\u304b\u3064\u518d\u5229\u7528\u53ef\u80fd\u3067\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u5316\u3055\u308c\u3001\u758e\u7d50\u5408\u3067\u3001\u7406\u89e3\u3057\u3084\u3059\u3044\u30b3\u30fc\u30c9\u3092\u66f8\u3051\u308b\u306e\u3067\u3042\u308c\u3070\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u5c0e\u5165\u3059\u3079\u304d\u3067\u3057\u3087\u3046\u3002<\/p>\n<p>\u6700\u5f8c\u306b\u3001\u3059\u3079\u3066\u3092\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u5b9f\u88c5\u3057\u306a\u3044\u3088\u3046\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u3042\u304f\u307e\u3067\u554f\u984c\u89e3\u6c7a\u304c\u76ee\u7684\u3067\u3042\u308a\u3001\u9075\u5b88\u3059\u3079\u304d\u6cd5\u5f8b\u3084\u53b3\u5bc6\u306b\u5f93\u3046\u3079\u304d\u30eb\u30fc\u30eb\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u300c\u30af\u30ea\u30fc\u30f3\u304b\u3064\u30b7\u30f3\u30d7\u30eb\u3067\u3001\u8aad\u307f\u3084\u3059\u304f\u3001\u62e1\u5f35\u6027\u306e\u3042\u308b\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u300d\u3068\u3044\u3046\u30eb\u30fc\u30eb\u3084\u6cd5\u5247\u306b\u5909\u308f\u308a\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u306e\u30eb\u30fc\u30eb\u3092\u6e80\u305f\u3057\u305f\u4e0a\u3067\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u554f\u984c\u3092\u89e3\u6c7a\u3067\u304d\u308b\u306a\u3089\u3001\u305c\u3072\u6d3b\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2>\u307e\u3068\u3081<\/h2>\n<p>JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u3001\u5927\u52e2\u306e\u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u306b\u3088\u3063\u3066\u9577\u3044\u6642\u9593\u3092\u304b\u3051\u3066\u78ba\u7acb\u3055\u308c\u305f\u3001\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306e\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u3092\u30af\u30ea\u30fc\u30f3\u3067\u758e\u7d50\u5408\u306b\u4fdd\u3064\u305f\u3081\u3001\u8a66\u884c\u932f\u8aa4\u3092\u91cd\u306d\u3066\u751f\u307e\u308c\u305f\u89e3\u6c7a\u7b56\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u73fe\u5728\u3067\u306f<a href=\"https:\/\/sourcemaking.com\/design-patterns-and-tips\">\u4f55\u767e\u3082\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3<\/a>\u304c\u5b58\u5728\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9\u4e2d\u306b\u906d\u9047\u3059\u308b\u3042\u3089\u3086\u308b\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u3059\u3079\u3066\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u5fc5\u305a\u554f\u984c\u3092\u89e3\u6c7a\u3057\u3066\u304f\u308c\u308b\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n<p><a href=\"https:\/\/kinsta.com\/jp\/blog\/react-best-practices\/\">\u4ed6\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>\u3068\u540c\u3058\u3088\u3046\u306b\u3001\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306f\u554f\u984c\u89e3\u6c7a\u306e\u305f\u3081\u306e\u63d0\u6848\u3092\u76ee\u7684\u3068\u3057\u3066\u3044\u307e\u3059\u3002\u5fc5\u305a\u5f93\u308f\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u30eb\u30fc\u30eb\u3067\u306f\u306a\u304f\u3001\u9006\u306b\u305d\u306e\u3088\u3046\u306b\u6271\u3046\u3068\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u5927\u304d\u306a\u554f\u984c\u3092\u5f15\u304d\u8d77\u3053\u3059\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u69cb\u7bc9\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u30a2\u30d7\u30ea\u3092\u30db\u30b9\u30c8\u3059\u308b\u30b5\u30fc\u30d0\u30fc\u304c\u5fc5\u8981\u3067\u3059\u3002<a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta\u306e\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30b5\u30fc\u30d0\u30fc<\/a>\u306f\u3001\u9ad8\u901f\u304b\u3064\u4fe1\u983c\u6027\u3068\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306b\u512a\u308c\u305f\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002\u5c02\u7528\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u30d1\u30cd\u30eb\u300c<a href=\"https:\/\/kinsta.com\/jp\/mykinsta\/\">MyKinsta<\/a>\u300d\u306b\u30ed\u30b0\u30a4\u30f3\u3057\u3001<a href=\"https:\/\/kinsta.com\/jp\/blog\/what-is-github\/\">GitHub\u30ea\u30dd\u30b8\u30c8\u30ea<\/a>\u3092\u63a5\u7d9a\u3057\u305f\u3089\u3001\u3042\u3068\u306f\u8d77\u52d5\u3059\u308b\u3060\u3051\u3002\u5229\u7528\u6599\u91d1\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u4f7f\u7528\u3059\u308b\u30ea\u30bd\u30fc\u30b9\u306b\u5bfe\u3057\u3066\u306e\u307f\u767a\u751f\u3057\u307e\u3059\u3002<\/p>\n<p>\u3042\u306a\u305f\u306f\u3069\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u304b\uff1f\u4eca\u56de\u3054\u7d39\u4ecb\u3057\u305f\u3082\u306e\u4ee5\u5916\u306e\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3082\u3054\u5b58\u3058\u3067\u3059\u304b\uff1f\u4ee5\u4e0b\u306e\u30b3\u30e1\u30f3\u30c8\u6b04\u3067\u3001\u305c\u3072\u304a\u805e\u304b\u305b\u304f\u3060\u3055\u3044\u3002\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9\u3067\u306f\u3001\u3042\u308b &#8230;<\/p>\n","protected":false},"author":238,"featured_media":42271,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[778],"class_list":["post-42270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac<\/title>\n<meta name=\"description\" content=\"JavaScript\u306b\u306f\u3001\u6642\u9593\u3068\u52b4\u529b\u3092\u5287\u7684\u306b\u524a\u6e1b\u3067\u304d\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u591a\u6570\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac\" \/>\n<meta property=\"og:description\" content=\"JavaScript\u306b\u306f\u3001\u6642\u9593\u3068\u52b4\u529b\u3092\u5287\u7684\u306b\u524a\u6e1b\u3067\u304d\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u591a\u6570\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-14T08:28:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-25T07:55:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kumar Harsh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"JavaScript\u306b\u306f\u3001\u6642\u9593\u3068\u52b4\u529b\u3092\u5287\u7684\u306b\u524a\u6e1b\u3067\u304d\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u591a\u6570\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_JP\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_JP\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kumar Harsh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"30\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/\"},\"author\":{\"name\":\"Kumar Harsh\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\"},\"headline\":\"JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac\",\"datePublished\":\"2023-02-14T08:28:26+00:00\",\"dateModified\":\"2023-08-25T07:55:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/\"},\"wordCount\":212,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png\",\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/\",\"url\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/\",\"name\":\"JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png\",\"datePublished\":\"2023-02-14T08:28:26+00:00\",\"dateModified\":\"2023-08-25T07:55:06+00:00\",\"description\":\"JavaScript\u306b\u306f\u3001\u6642\u9593\u3068\u52b4\u529b\u3092\u5287\u7684\u306b\u524a\u6e1b\u3067\u304d\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u591a\u6570\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png\",\"contentUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/jp\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9\",\"item\":\"https:\/\/kinsta.com\/jp\/topics\/javascript-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/jp\/#website\",\"url\":\"https:\/\/kinsta.com\/jp\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"\u9ad8\u901f\u304b\u3064\u5805\u7262\u306a\u30d7\u30ec\u30df\u30a2\u30e0\u30b5\u30fc\u30d0\u30fc\u30b5\u30fc\u30d3\u30b9\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/jp\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/jp\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/jp\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/\",\"https:\/\/x.com\/Kinsta_JP\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\",\"name\":\"Kumar Harsh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/kinsta.com\/jp\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g\",\"caption\":\"Kumar Harsh\"},\"description\":\"Kumar is a software developer and a technical author based in India. He specializes in JavaScript and DevOps. You can learn more about his work on his website.\",\"sameAs\":[\"https:\/\/kumarharsh.me\"],\"url\":\"https:\/\/kinsta.com\/jp\/blog\/author\/kumarharsh\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac","description":"JavaScript\u306b\u306f\u3001\u6642\u9593\u3068\u52b4\u529b\u3092\u5287\u7684\u306b\u524a\u6e1b\u3067\u304d\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u591a\u6570\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/","og_locale":"ja_JP","og_type":"article","og_title":"JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac","og_description":"JavaScript\u306b\u306f\u3001\u6642\u9593\u3068\u52b4\u529b\u3092\u5287\u7684\u306b\u524a\u6e1b\u3067\u304d\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u591a\u6570\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","og_url":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/","article_published_time":"2023-02-14T08:28:26+00:00","article_modified_time":"2023-08-25T07:55:06+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png","type":"image\/png"}],"author":"Kumar Harsh","twitter_card":"summary_large_image","twitter_description":"JavaScript\u306b\u306f\u3001\u6642\u9593\u3068\u52b4\u529b\u3092\u5287\u7684\u306b\u524a\u6e1b\u3067\u304d\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u591a\u6570\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","twitter_image":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png","twitter_creator":"@Kinsta_JP","twitter_site":"@Kinsta_JP","twitter_misc":{"\u57f7\u7b46\u8005":"Kumar Harsh","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"30\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/"},"author":{"name":"Kumar Harsh","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9"},"headline":"JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac","datePublished":"2023-02-14T08:28:26+00:00","dateModified":"2023-08-25T07:55:06+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/"},"wordCount":212,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/jp\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png","inLanguage":"ja","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/","url":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/","name":"JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac","isPartOf":{"@id":"https:\/\/kinsta.com\/jp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png","datePublished":"2023-02-14T08:28:26+00:00","dateModified":"2023-08-25T07:55:06+00:00","description":"JavaScript\u306b\u306f\u3001\u6642\u9593\u3068\u52b4\u529b\u3092\u5287\u7684\u306b\u524a\u6e1b\u3067\u304d\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u304c\u591a\u6570\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002","breadcrumb":{"@id":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#primaryimage","url":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png","contentUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/02\/javascript-design-patterns.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/jp\/blog\/javascript-design-patterns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/jp\/"},{"@type":"ListItem","position":2,"name":"JavaScript\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9","item":"https:\/\/kinsta.com\/jp\/topics\/javascript-tutorials\/"},{"@type":"ListItem","position":3,"name":"JavaScript\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u5fb9\u5e95\u89e3\u8aac"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/jp\/#website","url":"https:\/\/kinsta.com\/jp\/","name":"Kinsta\u00ae","description":"\u9ad8\u901f\u304b\u3064\u5805\u7262\u306a\u30d7\u30ec\u30df\u30a2\u30e0\u30b5\u30fc\u30d0\u30fc\u30b5\u30fc\u30d3\u30b9","publisher":{"@id":"https:\/\/kinsta.com\/jp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/jp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/jp\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/jp\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/jp\/wp-content\/uploads\/sites\/6\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/jp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Japan-334616080691171\/","https:\/\/x.com\/Kinsta_JP","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9","name":"Kumar Harsh","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/kinsta.com\/jp\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g","caption":"Kumar Harsh"},"description":"Kumar is a software developer and a technical author based in India. He specializes in JavaScript and DevOps. You can learn more about his work on his website.","sameAs":["https:\/\/kumarharsh.me"],"url":"https:\/\/kinsta.com\/jp\/blog\/author\/kumarharsh\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts\/42270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/users\/238"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/comments?post=42270"}],"version-history":[{"count":4,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts\/42270\/revisions"}],"predecessor-version":[{"id":49010,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/posts\/42270\/revisions\/49010"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/translations\/dk"},{"href":"https:\/\/kinsta.com\/jp\/wp-json\/kinsta\/v1\/posts\/42270\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/media\/42271"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/media?parent=42270"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/tags?post=42270"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/jp\/wp-json\/wp\/v2\/topic?post=42270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}