{"id":3029,"date":"2023-10-28T14:54:10","date_gmt":"2023-10-28T05:54:10","guid":{"rendered":"https:\/\/edu.ujhb.org\/?p=3029"},"modified":"2023-10-28T14:54:10","modified_gmt":"2023-10-28T05:54:10","slug":"angular%e9%96%8b%e7%99%ba%e3%81%a8%e3%83%86%e3%82%b9%e3%83%88%e3%81%ae%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab","status":"publish","type":"post","link":"https:\/\/edu.ujhb.org\/?p=3029","title":{"rendered":"Angular\u958b\u767a\u3068\u30c6\u30b9\u30c8\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Angular\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u30c6\u30b9\u30c8\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c1\u7ae0:\u30c6\u30b9\u30c8\u306e\u91cd\u8981\u6027<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30c6\u30b9\u30c8\u304c\u5fc5\u8981\u306a\u7406\u7531<\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u306e\u7a2e\u985e<\/li>\n\n\n\n<li>\u89d2\u5ea6\u3067\u5f79\u5272\u3092\u30c6\u30b9\u30c8\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0 : \u30c6\u30b9\u30c8\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30ce\u30fc\u30c9.js\u3068npm\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/li>\n\n\n\n<li>\u30ab\u30eb\u30de\u3068\u30b8\u30e3\u30b9\u30df\u30f3\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u74b0\u5883\u3092\u69cb\u6210\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 3 \u7ae0: \u5358\u4f53\u30c6\u30b9\u30c8\u306e\u57fa\u672c<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5358\u4f53\u30c6\u30b9\u30c8\u3068\u306f<\/li>\n\n\n\n<li>\u7c21\u5358\u306a\u5358\u4f53\u30c6\u30b9\u30c8\u306e\u66f8\u304d\u65b9<\/li>\n\n\n\n<li>\u5358\u4f53\u30c6\u30b9\u30c8\u306b\u30b8\u30e3\u30b9\u30df\u30f3\u3092\u4f7f\u7528\u3059\u308b<\/li>\n\n\n\n<li>Karma \u3092\u4f7f\u7528\u3057\u3066\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 4 \u7ae0: \u89d2\u5ea6\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u3068\u30c6\u30b9\u30c8<\/li>\n\n\n\n<li>\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u30c6\u30b9\u30c8\u3059\u308b<\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u5165\u529b\u3068\u51fa\u529b<\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 5 \u7ae0: \u30b5\u30fc\u30d3\u30b9\u3068 HTTP \u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b5\u30fc\u30d3\u30b9\u30c6\u30b9\u30c8\u306e\u57fa\u672c<\/li>\n\n\n\n<li>\u30b5\u30fc\u30d3\u30b9\u30c6\u30b9\u30c8\u306b\u30e2\u30c3\u30af\u3092\u4f7f\u7528\u3059\u308b<\/li>\n\n\n\n<li>HTTP \u8981\u6c42\u30c6\u30b9\u30c8<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0: \u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9 (E&lt;&gt;E) \u30c6\u30b9\u30c8<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>E2E\u30c6\u30b9\u30c8\u3068\u306f<\/li>\n\n\n\n<li>\u5206\u5ea6\u5668\u306b\u3088\u308bE2E\u30c6\u30b9\u30c8<\/li>\n\n\n\n<li>\u30da\u30fc\u30b8\u8981\u7d20\u306e\u914d\u7f6e\u3068\u64cd\u4f5c<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 7 \u7ae0: \u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8\u3068\u30ec\u30dd\u30fc\u30c8<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u306e\u751f\u6210<\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u30ec\u30dd\u30fc\u30c8\u306e\u89e3\u91c8<\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u306e\u5411\u4e0a<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 8 \u7ae0: \u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u306f<\/li>\n\n\n\n<li>\u30c8\u30e9\u30d3\u30b9CI\u306b\u3088\u308b\u81ea\u52d5\u30c6\u30b9\u30c8<\/li>\n\n\n\n<li>\u305d\u306e\u4ed6\u306e\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30c4\u30fc\u30eb<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c9\u7ae0:\u9ad8\u5ea6\u306a\u30c6\u30b9\u30c8\u624b\u6cd5<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u95a2\u6570\u547c\u3073\u51fa\u3057\u306e\u30c1\u30a7\u30c3\u30af\u306b Spy \u3092\u4f7f\u7528\u3059\u308b<\/li>\n\n\n\n<li>\u975e\u540c\u671f\u30c6\u30b9\u30c8<\/li>\n\n\n\n<li>\u6027\u80fd\u8a66\u9a13<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c10\u7ae0:\u8981\u7d04\u3068\u3055\u3089\u306a\u308b\u7814\u7a76<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981<\/li>\n\n\n\n<li>\u305d\u306e\u4ed6\u306e\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u4ee5\u4e0a\u304c\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981\u3067\u3042\u308a\u3001\u7ae0\u3054\u3068\u3001\u30bb\u30af\u30b7\u30e7\u30f3\u3054\u3068\u306b\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u5404\u56de\u7b54\u3067\u306f\u30011\u3064\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u306e\u307f\u3092\u8a73\u7d30\u306b\u8aac\u660e\u3057\u307e\u3059\u3002 \u6982\u8981\u304c\u3042\u306a\u305f\u306e\u30cb\u30fc\u30ba\u3092\u6e80\u305f\u3057\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304b\u3089\u3001\u79c1\u305f\u3061\u306f\u59cb\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c1\u7ae0:\u30c6\u30b9\u30c8\u306e\u91cd\u8981\u6027<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.1 \u30c6\u30b9\u30c8\u304c\u5fc5\u8981\u306a\u7406\u7531<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30c6\u30b9\u30c8\u306f\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u306e\u4e0d\u53ef\u6b20\u306a\u90e8\u5206\u3067\u3059\u3002 \u30b3\u30fc\u30c9\u306e\u54c1\u8cea\u3092\u4fdd\u8a3c\u3059\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u30d0\u30b0\u3092\u65e9\u671f\u306b\u767a\u898b\u3057\u3066\u4fee\u6b63\u3057\u3001\u958b\u767a\u6642\u9593\u3068\u30b3\u30b9\u30c8\u3092\u7bc0\u7d04\u3057\u307e\u3059\u3002 \u7279\u306b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u64cd\u4f5c\u304c\u8907\u96d1\u306a\u305f\u3081\u3001\u30c6\u30b9\u30c8\u306e\u91cd\u8981\u6027\u304c\u3088\u308a\u9855\u8457\u306b\u306a\u308a\u307e\u3059\u3002 Angular\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067\u306f\u3001\u30c6\u30b9\u30c8\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b5\u30fc\u30d3\u30b9\u3001\u304a\u3088\u3073\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u306e\u5b89\u5b9a\u6027\u3068\u4fe1\u983c\u6027\u3092\u78ba\u4fdd\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u3053\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306f\u672c\u8cea\u7684\u306b\u4e3b\u306b\u5165\u9580\u7684\u306a\u3082\u306e\u3067\u3042\u308b\u305f\u3081\u3001\u7279\u5b9a\u306e\u30b3\u30fc\u30c9\u4f8b\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c1\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u305d\u306e\u3088\u3046\u306a\u5f62\u5f0f\u3068\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u30cb\u30fc\u30ba\u3092\u6e80\u305f\u3057\u3066\u3044\u308b\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306b\u9032\u3093\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c1\u7ae0:\u30c6\u30b9\u30c8\u306e\u91cd\u8981\u6027<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.2 \u30c6\u30b9\u30c8\u306e\u7a2e\u985e<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2 \u30c6\u30b9\u30c8\u306b\u306f\u3044\u304f\u3064\u304b\u306e\u7570\u306a\u308b\u7a2e\u985e\u306e\u30c6\u30b9\u30c8\u304c\u3042\u308a\u3001\u305d\u308c\u305e\u308c\u306b\u7279\u5b9a\u306e\u76ee\u7684\u3068\u30b7\u30ca\u30ea\u30aa\u304c\u3042\u308a\u307e\u3059\u3002 \u30c6\u30b9\u30c8\u306e\u4e3b\u306a\u7a2e\u985e\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5358\u4f53\u30c6\u30b9\u30c8<\/strong>:\u4e3b\u306b\u5358\u4e00\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u6b63\u78ba\u6027\u3092\u691c\u8a3c\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u3001\u5358\u4e00\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u305f\u306f\u95a2\u6570\u306e\u30c6\u30b9\u30c8\u3002<\/li>\n\n\n\n<li><strong>\u7d71\u5408\u30c6\u30b9\u30c8<\/strong>: \u8907\u6570\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u305f\u306f\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u3069\u306e\u3088\u3046\u306b\u9023\u643a\u3059\u308b\u304b\u3092\u30c6\u30b9\u30c8\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u30c6\u30b9\u30c8(E2E\u30c6\u30b9\u30c8):<\/strong>\u30e6\u30fc\u30b6\u30fc\u306e\u884c\u52d5\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u3066\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30d7\u30ed\u30bb\u30b9\u5168\u4f53\u3092\u30c6\u30b9\u30c8\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c6\u30b9\u30c8<\/strong>:\u9ad8\u8ca0\u8377\u307e\u305f\u306f\u5927\u91cf\u306e\u30c7\u30fc\u30bf\u306e\u4e0b\u3067\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u30c6\u30b9\u30c8\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u56de\u5e30\u30c6\u30b9\u30c8<\/strong>: \u65b0\u3057\u3044\u5909\u66f4\u306b\u3088\u3063\u3066\u65e2\u5b58\u306e\u6a5f\u80fd\u304c\u640d\u306a\u308f\u308c\u306a\u3044\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306b\u3001\u30b3\u30fc\u30c9\u304c\u5909\u66f4\u3055\u308c\u308b\u305f\u3073\u306b\u5b9f\u884c\u3055\u308c\u308b\u30c6\u30b9\u30c8\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c6\u30b9\u30c8\u306e\u7a2e\u985e\u3092\u7406\u89e3\u3059\u308b\u3053\u3068\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30cb\u30fc\u30ba\u306b\u6700\u3082\u9069\u3057\u305f\u30c6\u30b9\u30c8\u6226\u7565\u3092\u9078\u629e\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u3053\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306f\u672c\u8cea\u7684\u306b\u4e3b\u306b\u5165\u9580\u7684\u306a\u3082\u306e\u3067\u3042\u308b\u305f\u3081\u3001\u7279\u5b9a\u306e\u30b3\u30fc\u30c9\u4f8b\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u304c\u7b2c1\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c1\u7ae0:\u30c6\u30b9\u30c8\u306e\u91cd\u8981\u6027<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.3 \u89d2\u5ea6\u3067\u5f79\u5272\u3092\u30c6\u30b9\u30c8\u3059\u308b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067\u306f\u3001\u30c6\u30b9\u30c8\u304c\u91cd\u8981\u306a\u5f79\u5272\u3092\u679c\u305f\u3057\u307e\u3059\u3002 Angular\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u81ea\u4f53\u306f\u30c6\u30b9\u30c8\u3057\u3084\u3059\u3044\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3066\u304a\u308a\u3001\u3055\u307e\u3056\u307e\u306a\u30bf\u30a4\u30d7\u306e\u30c6\u30b9\u30c8\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u305f\u3081\u306e\u3055\u307e\u3056\u307e\u306a\u30c4\u30fc\u30eb\u3068\u30e9\u30a4\u30d6\u30e9\u30ea(\u30b8\u30e3\u30b9\u30df\u30f3\u3001\u30ab\u30eb\u30de\u3001\u5206\u5ea6\u5668\u306a\u3069)\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u958b\u767a\u8005\u306f\u5358\u4f53\u30c6\u30b9\u30c8\u3001\u7d71\u5408\u30c6\u30b9\u30c8\u3001\u304a\u3088\u3073\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8\u3092\u7c21\u5358\u306b\u8a18\u8ff0\u3057\u3066\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>Angular\u3067\u306e\u30c6\u30b9\u30c8\u306b\u306f\u3001\u4e3b\u306b\u6b21\u306e\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30b3\u30fc\u30c9\u306e\u54c1\u8cea\u3092\u78ba\u4fdd\u3059\u308b<\/strong>: \u30c6\u30b9\u30c8\u3059\u308b\u3053\u3068\u3067\u3001\u30b3\u30fc\u30c9\u306e\u6a5f\u80fd\u6027\u3001\u4fe1\u983c\u6027\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d0\u30b0\u3092\u3059\u3070\u3084\u304f\u898b\u3064\u3051\u3066\u4fee\u6b63<\/strong>\u3059\u308b: \u30c6\u30b9\u30c8\u3067\u306f\u3001\u554f\u984c\u3092\u65e9\u671f\u306b\u7279\u5b9a\u3067\u304d\u308b\u305f\u3081\u3001\u5f8c\u3067\u4fee\u6b63\u3059\u308b\u30b3\u30b9\u30c8\u3068\u6642\u9593\u3092\u524a\u6e1b\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30c7\u30d0\u30c3\u30b0\u306e\u7c21\u7d20\u5316<\/strong>: \u554f\u984c\u304c\u767a\u751f\u3057\u305f\u5834\u5408\u3001\u30c6\u30b9\u30c8\u306b\u3088\u3063\u3066\u554f\u984c\u3092\u7c21\u5358\u306b\u898b\u3064\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30c1\u30fc\u30e0\u306e\u30b3\u30e9\u30dc\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u4fc3\u9032\u3059\u308b<\/strong>: \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u306e\u4e00\u7a2e\u3068\u3057\u3066\u30b3\u30fc\u30c9\u3092\u30c6\u30b9\u30c8\u3059\u308b\u3068\u3001\u30c1\u30fc\u30e0 \u30e1\u30f3\u30d0\u30fc\u304c\u30b3\u30fc\u30c9\u306e\u6a5f\u80fd\u3068\u5236\u9650\u3092\u7406\u89e3\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u3053\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306f\u672c\u8cea\u7684\u306b\u4e3b\u306b\u5165\u9580\u7684\u306a\u3082\u306e\u3067\u3042\u308b\u305f\u3081\u3001\u7279\u5b9a\u306e\u30b3\u30fc\u30c9\u4f8b\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c1\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0 : \u30c6\u30b9\u30c8\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.1 \u30ce\u30fc\u30c9.js\u3068npm\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular\u30c6\u30b9\u30c8\u3092\u958b\u59cb\u3059\u308b\u524d\u306b\u3001Node.js\u3068npm(\u30ce\u30fc\u30c9\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u30fc)\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 Node.js \u306f JavaScript \u30e9\u30f3\u30bf\u30a4\u30e0\u74b0\u5883\u3067\u3042\u308a\u3001npm \u306f Node.js \u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u7ba1\u7406\u3059\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u3067\u3059\u3002 \u3053\u308c\u30892\u3064\u306f\u3001Angular\u306e\u958b\u767a\u3068\u30c6\u30b9\u30c8\u306e\u57fa\u790e\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>Node.js\u3068npm\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306f\u901a\u5e38\u3001\u516c\u5f0fWeb\u30b5\u30a4\u30c8\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b\u304b\u3001\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u3092\u4f7f\u7528\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u308b\u7c21\u5358\u306a\u30d7\u30ed\u30bb\u30b9\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>Windows\u307e\u305f\u306fMac\u3067\u306f\u3001<a href=\"https:\/\/nodejs.org\/\">Node .js\u306e\u516c\u5f0fWeb\u30b5\u30a4\u30c8\u304b\u3089<\/a>\u30a4\u30f3\u30b9\u30c8\u30fc\u30e9\u30fc\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3001\u30d7\u30ed\u30f3\u30d7\u30c8\u306b\u5f93\u3063\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>Linux\u3067\u306f\u3001\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u3092\u4f7f\u7528\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002 \u4f8b\u3068\u3057\u3066Ubuntu\u3092\u53d6\u308a\u4e0a\u3052\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d0\u30c3\u30b7\u30e5\u30b3\u30d4\u30fc\u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>sudo apt update sudo apt install nodejs npm<\/code><\/p>\n\n\n\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d0\u30c3\u30b7\u30e5\u30b3\u30d4\u30fc\u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>node -v # \u67e5\u770bNode.js\u7248\u672c npm -v # \u67e5\u770bnpm\u7248\u672c<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2cII\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0 : \u30c6\u30b9\u30c8\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.2 \u30ab\u30eb\u30de\u3068\u30b8\u30e3\u30b9\u30df\u30f3\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30ce\u30fc\u30c9.js\u3068npm\u3092\u8a2d\u5b9a\u3057\u305f\u3089\u3001\u6b21\u306b\u30ab\u30eb\u30de\u3068\u30b8\u30e3\u30b9\u30df\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 Karma \u306f\u3001\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u3068\u7d50\u679c\u306e\u5831\u544a\u3092\u81ea\u52d5\u5316\u3059\u308b\u30c6\u30b9\u30c8\u30e9\u30f3\u30ca\u30fc\u3067\u3059\u3002 \u30b8\u30e3\u30b9\u30df\u30f3\u306f\u3001\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u3092\u66f8\u304f\u305f\u3081\u306e\u4eba\u6c17\u306e\u3042\u308bJavaScript\u30c6\u30b9\u30c8\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u3089\u306e2\u3064\u306e\u30c4\u30fc\u30eb\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u5b8c\u5168\u306a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30c6\u30b9\u30c8\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3059\u308b\u305f\u3081\u306b\u4e00\u7dd2\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 Angular \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u305d\u308c\u3089\u306f\u901a\u5e38 devDependencies \u3068\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u307e\u305a\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067npm\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u521d\u671f\u5316\u3057\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002 \u307e\u3060\u521d\u671f\u5316\u3057\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3067\u521d\u671f\u5316\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d0\u30c3\u30b7\u30e5\u30b3\u30d4\u30fc\u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm init -y<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001npm\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30ab\u30eb\u30de\u3068\u30b8\u30e3\u30b9\u30df\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d0\u30c3\u30b7\u30e5\u30b3\u30d4\u30fc\u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm install --save-dev karma jasmine karma-jasmine karma-chrome-launcher<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001Karma\u3068Jasmine\u3001\u304a\u3088\u3073\u305d\u306e\u4ed6\u306e\u4f9d\u5b58\u95a2\u4fc2\u304c\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u6700\u5f8c\u306b\u3001Karma \u69cb\u6210\u30d5\u30a1\u30a4\u30eb\u3092\u521d\u671f\u5316\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d0\u30c3\u30b7\u30e5\u30b3\u30d4\u30fc\u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npx karma init<\/code><\/p>\n\n\n\n<p>\u30d7\u30ed\u30f3\u30d7\u30c8\u306b\u5f93\u3063\u3066\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3059\u308b\u3068\u3001Karma\u3068Jasmine\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u69cb\u6210\u304c\u5b8c\u4e86\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2cII\u7ae0\u306e\u7b2c2\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0 : \u30c6\u30b9\u30c8\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.3 \u30c6\u30b9\u30c8\u74b0\u5883\u3092\u69cb\u6210\u3059\u308b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Karma \u3068 Jasmine \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u3089\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u306f\u30c6\u30b9\u30c8\u74b0\u5883\u3092\u69cb\u6210\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u3053\u308c\u306b\u306f\u901a\u5e38\u3001\u5b9f\u884c\u6642\u306b\u4f5c\u6210\u3055\u308c\u308b\u30d5\u30a1\u30a4\u30eb\u306e\u7de8\u96c6\u304c\u542b\u307e\u308c\u307e\u3059\u3002 \u3053\u306e\u69cb\u6210\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001\u30c6\u30b9\u30c8\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3001\u8d77\u52d5\u3059\u308b\u30d6\u30e9\u30a6\u30b6\u30fc\u3001\u30c6\u30b9\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u5834\u6240\u306a\u3069\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<code>karma.conf.js<\/code><code>npx karma init<\/code><\/p>\n\n\n\n<p>\u9069\u5207\u306a\u30c6\u30b9\u30c8\u74b0\u5883\u3092\u69cb\u6210\u3059\u308b\u3053\u3068\u306f\u3001\u52b9\u679c\u7684\u306a\u30c6\u30b9\u30c8\u306e\u9375\u3067\u3059\u3002 \u3053\u308c\u3089\u306e\u8a2d\u5b9a\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u7279\u5b9a\u306e\u30cb\u30fc\u30ba\u306b\u5408\u308f\u305b\u3066\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u5358\u7d14\u306a\u69cb\u6210\u30d5\u30a1\u30a4\u30eb\u306e\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<code>karma.conf.js<\/code><\/p>\n\n\n\n<p>\u30b8\u30e3\u30d0\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>module.exports = function(config) { config.set({ frameworks: ['jasmine'], \/\/ \u4f7f\u7528Jasmine\u4f5c\u4e3a\u6d4b\u8bd5\u6846\u67b6 browsers: ['Chrome'], \/\/ \u4f7f\u7528Chrome\u6d4f\u89c8\u5668\u8fd0\u884c\u6d4b\u8bd5 files: [ 'src\/**\/*.spec.js' \/\/ \u6307\u5b9a\u6d4b\u8bd5\u6587\u4ef6\u7684\u4f4d\u7f6e ], reporters: ['progress'], \/\/ \u4f7f\u7528\u8fdb\u5ea6\u62a5\u544a port: 9876, \/\/ \u8bbe\u7f6e\u7aef\u53e3\u53f7 colors: true, \/\/ \u5728\u63a7\u5236\u53f0\u8f93\u51fa\u5f69\u8272\u65e5\u5fd7 autoWatch: true, \/\/ \u81ea\u52a8\u76d1\u89c6\u6587\u4ef6\u53d8\u5316\u5e76\u91cd\u65b0\u8fd0\u884c\u6d4b\u8bd5 singleRun: false, \/\/ \u662f\u5426\u53ea\u8fd0\u884c\u4e00\u6b21\u6d4b\u8bd5 }); };<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u305f\u3089\u3001\u305d\u308c\u3092\u5b9f\u884c\u3057\u3066Karma\u30c6\u30b9\u30c8\u30e9\u30f3\u30ca\u30fc\u3092\u8d77\u52d5\u3067\u304d\u307e\u3059\u3002<code>npx karma start<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u304c\u7b2cII\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 3 \u7ae0: \u5358\u4f53\u30c6\u30b9\u30c8\u306e\u57fa\u672c<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.1 \u5358\u4f53\u30c6\u30b9\u30c8\u3068\u306f<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u5358\u4f53\u30c6\u30b9\u30c8\u306f\u3001\u4e3b\u306b\u5358\u4e00\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u305f\u306f\u6a5f\u80fd\u306e\u6b63\u78ba\u6027\u3092\u691c\u8a3c\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u30c6\u30b9\u30c8\u306e\u4e00\u7a2e\u3067\u3059\u3002 Angular\u3067\u306f\u3001\u3053\u308c\u306f\u901a\u5e38\u3001\u500b\u3005\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b5\u30fc\u30d3\u30b9\u3001\u307e\u305f\u306f\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306a\u3069\u3092\u30c6\u30b9\u30c8\u3059\u308b\u3053\u3068\u3092\u610f\u5473\u3057\u307e\u3059\u3002 \u5358\u4f53\u30c6\u30b9\u30c8\u306e\u76ee\u7684\u306f\u3001\u30b3\u30fc\u30c9\u306e\u5c0f\u3055\u306a\u90e8\u5206\u304c\u3059\u3079\u3066\u671f\u5f85\u3069\u304a\u308a\u306b\u52d5\u4f5c\u3059\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u5358\u4f53\u30c6\u30b9\u30c8\u306f\u901a\u5e38\u81ea\u52d5\u5316\u3055\u308c\u3001\u8fc5\u901f\u306b\u5b9f\u884c\u3067\u304d\u308b\u305f\u3081\u3001\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 (CI) \u30d7\u30ed\u30bb\u30b9\u3078\u306e\u7d71\u5408\u306b\u6700\u9069\u3067\u3059\u3002 \u3053\u308c\u3089\u306f\u30c6\u30b9\u30c8\u30d4\u30e9\u30df\u30c3\u30c9\u306e\u57fa\u790e\u3067\u3082\u3042\u308a\u3001\u6700\u3082\u983b\u7e41\u306b\u5b9f\u884c\u3055\u308c\u308b\u30c6\u30b9\u30c8\u306e\u30bf\u30a4\u30d7\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>Angular\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u5358\u4f53\u30c6\u30b9\u30c8\u306f\u901a\u5e38\u3001\u30c6\u30b9\u30c8\u3059\u308b\u30b3\u30fc\u30c9\u3068\u540c\u3058\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u63a5\u5c3e\u8f9e\u3092\u4ed8\u3051\u3066\u683c\u7d0d\u3055\u308c\u307e\u3059\u3002 2 \u3064\u306e\u6570\u5024\u306e\u5408\u8a08\u3092\u8fd4\u3059\u95a2\u6570\u3092\u30c6\u30b9\u30c8\u3059\u308b\u305f\u3081\u306e\u7c21\u5358\u306a\u5358\u4f53\u30c6\u30b9\u30c8\u306e\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<code>.spec.ts<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ adder.ts export function add(a: number, b: number): number { return a + b; } \/\/ adder.spec.ts import { add } from '.\/adder'; describe('adder', () =&gt; { it('should return the sum of two numbers', () =&gt; { expect(add(1, 2)).toEqual(3); expect(add(-1, 1)).toEqual(0); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001Jasmine \u306e sum \u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u30c6\u30b9\u30c8\u3092\u6574\u7406\u3057\u3001\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30b5\u30fc\u30c8\u3057\u307e\u3059\u3002<code>describe<\/code><code>it<\/code><code>expect<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2cIII\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 3 \u7ae0: \u5358\u4f53\u30c6\u30b9\u30c8\u306e\u57fa\u672c<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.2 \u7c21\u5358\u306a\u5358\u4f53\u30c6\u30b9\u30c8\u306e\u66f8\u304d\u65b9<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u5358\u4f53\u30c6\u30b9\u30c8\u306e\u4f5c\u6210\u306b\u306f\u3001\u901a\u5e38\u3001\u30c6\u30b9\u30c8 \u30c7\u30fc\u30bf\u306e\u6e96\u5099 (\u914d\u7f6e)\u3001\u30c6\u30b9\u30c8\u5bfe\u8c61\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u5b9f\u884c (Act)\u3001\u7d50\u679c\u306e\u691c\u8a3c (Assert) \u3068\u3044\u3046\u3044\u304f\u3064\u304b\u306e\u57fa\u672c\u7684\u306a\u624b\u9806\u304c\u542b\u307e\u308c\u307e\u3059\u3002 \u3053\u308c\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001AAA \u30e2\u30c7\u30eb\u3068\u547c\u3070\u308c\u307e\u3059\u3002 Angular\u3067\u306f\u3001\u901a\u5e38\u3001\u30c6\u30b9\u30c8\u3092\u6574\u7406\u3057\u3066\u30a2\u30b5\u30fc\u30b7\u30e7\u30f3\u3092\u884c\u3046\u305f\u3081\u306e\u3055\u307e\u3056\u307e\u306aAPI\u3092\u63d0\u4f9b\u3059\u308bJasmine\u30c6\u30b9\u30c8\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f7f\u7528\u3057\u3066\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001\u96fb\u5353\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30c6\u30b9\u30c8\u3059\u308b\u305f\u3081\u306e\u7c21\u5358\u306aAngular\u5358\u4f53\u30c6\u30b9\u30c8\u306e\u4f8b\u3067\u3059\u3002<code>add<\/code><\/p>\n\n\n\n<p>\u307e\u305a\u3001\u96fb\u5353\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8()\u306e\u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<code>calculator.component.ts<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ calculator.component.ts import { Component } from '@angular\/core'; @Component({ selector: 'app-calculator', template: '&lt;div&gt;&lt;\/div&gt;', }) export class CalculatorComponent { add(a: number, b: number): number { return a + b; } }<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u5bfe\u5fdc\u3059\u308b\u5358\u4f53\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9()\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<code>calculator.component.spec.ts<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ calculator.component.spec.ts import { CalculatorComponent } from '.\/calculator.component'; describe('CalculatorComponent', () =&gt; { let component: CalculatorComponent; beforeEach(() =&gt; { component = new CalculatorComponent(); }); it('should add two numbers correctly', () =&gt; { \/\/ Arrange const a = 1; const b = 2; const expectedResult = 3; \/\/ Act const result = component.add(a, b); \/\/ Assert expect(result).toEqual(expectedResult); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u6700\u521d\u306b\u30d5\u30c3\u30af\u3067\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306e\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf\u3092\u6e96\u5099\u3057(and)\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u5b9f\u884c\u3057\u3001\u30b8\u30e3\u30b9\u30df\u30f3\u306e\u5408\u8a08\u3092\u4f7f\u7528\u3057\u3066\u7d50\u679c\u3092\u691c\u8a3c\u3057\u307e\u3057\u305f\u3002<code>beforeEach<\/code><code>CalculatorComponent<\/code><code>add<\/code><code>a<\/code><code>b<\/code><code>add<\/code><code>expect<\/code><code>toEqual<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2cIII\u7ae0\u306e\u7b2c2\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 3 \u7ae0: \u5358\u4f53\u30c6\u30b9\u30c8\u306e\u57fa\u672c<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.3 \u30b8\u30e3\u30b9\u30df\u30f3\u306b\u3088\u308b\u5358\u4f53\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Jasmine \u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304a\u3088\u3073 Node.js \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u5e83\u304f\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u4e00\u822c\u7684\u306a JavaScript \u30c6\u30b9\u30c8\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002 \u8a18\u8ff0\u7684\u306a\u30c6\u30b9\u30c8 \u30b1\u30fc\u30b9\u3092\u8a18\u8ff0\u3059\u308b\u305f\u3081\u306e\u8c4a\u5bcc\u306a API \u3068\u30c4\u30fc\u30eb\u306e\u30bb\u30c3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 Angular\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u901a\u5e38\u3001\u30b8\u30e3\u30b9\u30df\u30f3\u304c\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30c6\u30b9\u30c8\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u30b8\u30e3\u30b9\u30df\u30f3\u306e\u4e3b\u306a\u6a5f\u80fd\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u8a18\u8ff0\u69cb\u6587<\/strong>: \u30a2\u30f3\u30d1\u30b5\u30f3\u30c9\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u30c6\u30b9\u30c8 \u30b1\u30fc\u30b9\u3092\u660e\u78ba\u306b\u8a18\u8ff0\u3057\u307e\u3059\u3002<code>describe<\/code><code>it<\/code><\/li>\n\n\n\n<li><strong>\u8c4a\u5bcc\u306a\u30a2\u30b5\u30fc\u30b7\u30e7\u30f3\u30e9\u30a4\u30d6\u30e9\u30ea<\/strong>:\u3055\u307e\u3056\u307e\u306a\u30bf\u30a4\u30d7\u306e\u30a2\u30b5\u30fc\u30b7\u30e7\u30f3\u306b\u5bfe\u3057\u3066\u3055\u307e\u3056\u307e\u306a\u95a2\u6570\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<code>expect<\/code><\/li>\n\n\n\n<li><strong>\u30d5\u30c3\u30af\u6a5f\u80fd<\/strong>:\u30c6\u30b9\u30c8\u524d\u306e\u6e96\u5099\u3084\u30c6\u30b9\u30c8\u5f8c\u306e\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u306a\u3069\u3002<code>beforeEach<\/code><code>afterEach<\/code><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001Jasmine\u3092\u4f7f\u7528\u3057\u305f\u5358\u4f53\u30c6\u30b9\u30c8\u306e\u7c21\u5358\u306a\u4f8b\u3067\u3059\u3002 \u3053\u306e\u30c6\u30b9\u30c8 \u30b1\u30fc\u30b9\u306f\u3001\u30af\u30e9\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u691c\u8a3c\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<code>Person<\/code><code>getFullName<\/code><\/p>\n\n\n\n<p>\u307e\u305a\u3001\u30af\u30e9\u30b9()\u306e\u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<code>Person<\/code><code>person.ts<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ person.ts export class Person { constructor(public firstName: string, public lastName: string) {} getFullName(): string { return `${this.firstName} ${this.lastName}`; } }<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u5bfe\u5fdc\u3059\u308b\u5358\u4f53\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9()\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<code>person.spec.ts<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ person.spec.ts import { Person } from '.\/person'; describe('Person', () =&gt; { let person: Person; beforeEach(() =&gt; { person = new Person('John', 'Doe'); }); it('should return full name', () =&gt; { const result = person.getFullName(); expect(result).toEqual('John Doe'); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001Jasmine \u306e\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u30c6\u30b9\u30c8\u3092\u6574\u7406\u3057\u3001\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u500b\u3005\u306e\u30c6\u30b9\u30c8 \u30b1\u30fc\u30b9\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u307e\u305f\u3001\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3001\u5404\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u306e\u5b9f\u884c\u524d\u306b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u521d\u671f\u5316\u3057\u307e\u3057\u305f\u3002 \u6700\u5f8c\u306b\u3001\u30a2\u30b5\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u3066\u4f5c\u6210\u3057\u307e\u3059\u3002<code>describe<\/code><code>it<\/code><code>beforeEach<\/code><code>Person<\/code><code>expect<\/code><code>toEqual<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2cIII\u7ae0\u306e\u7b2c3\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 3 \u7ae0: \u5358\u4f53\u30c6\u30b9\u30c8\u306e\u57fa\u672c<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.4 \u30ab\u30eb\u30de\u3067\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Karma \u306f\u3001\u30d6\u30e9\u30a6\u30b6\u74b0\u5883\u3067 JavaScript \u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306e\u30c6\u30b9\u30c8\u30e9\u30f3\u30ca\u30fc\u3067\u3059\u3002 \u3053\u308c\u306f\u30b8\u30e3\u30b9\u30df\u30f3\u3067\u975e\u5e38\u306b\u3046\u307e\u304f\u6a5f\u80fd\u3057\u3001Angular\u306e\u5358\u4f53\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u3088\u304f\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 Karma \u306f\u3001\u30c6\u30b9\u30c8\u306e\u958b\u59cb\u3001\u30c6\u30b9\u30c8\u7d50\u679c\u306e\u8868\u793a\u3001\u30d5\u30a1\u30a4\u30eb\u306e\u5909\u66f4\u306e\u76e3\u8996\u3092\u884c\u3063\u3066\u30c6\u30b9\u30c8\u3092\u81ea\u52d5\u7684\u306b\u518d\u5b9f\u884c\u3059\u308b\u305f\u3081\u306e\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>Karma \u3092\u4f7f\u7528\u3059\u308b\u5229\u70b9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30de\u30eb\u30c1\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u30b5\u30dd\u30fc\u30c8<\/strong>: \u30b3\u30fc\u30c9\u306e\u4e92\u63db\u6027\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306b\u3001\u8907\u6570\u306e\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af<\/strong>:Karma\u306f\u30d5\u30a1\u30a4\u30eb\u306e\u5909\u66f4\u3092\u81ea\u52d5\u7684\u306b\u691c\u51fa\u3057\u3001\u95a2\u9023\u3059\u308b\u30c6\u30b9\u30c8\u3092\u518d\u5b9f\u884c\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u7d71\u5408\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc<\/strong>:Travis CI\u3001Jenkins\u306a\u3069\u306e\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3(CI)\u30c4\u30fc\u30eb\u3068\u7c21\u5358\u306b\u7d71\u5408\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>Karma \u3092\u4f7f\u7528\u3057\u3066\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u306b\u306f\u3001\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u3092\u5b9a\u7fa9\u3059\u308b Karma \u69cb\u6210\u30d5\u30a1\u30a4\u30eb (\u901a\u5e38) \u304c\u5fc5\u8981\u3067\u3059\u3002 \u7b2c 2 \u7ae0\u306e\u30ac\u30a4\u30c9\u306b\u5f93\u3063\u3066\u3059\u3067\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u3001\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u65e2\u306b\u3042\u308b\u306f\u305a\u3067\u3059\u3002<code>karma.conf.js<\/code><\/p>\n\n\n\n<p>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30eb\u30fc\u30c8\u3067\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066 Karma \u3092\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d0\u30c3\u30b7\u30e5\u30b3\u30d4\u30fc\u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npx karma start<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001Karma\u304c\u8d77\u52d5\u3057\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30d6\u30e9\u30a6\u30b6\u304c\u81ea\u52d5\u7684\u306b\u958b\u3044\u3066\u30c6\u30b9\u30c8\u304c\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002 \u30c6\u30b9\u30c8\u7d50\u679c\u306f\u30b3\u30de\u30f3\u30c9 \u30e9\u30a4\u30f3\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3059\u3079\u3066\u306e\u30c6\u30b9\u30c8\u3092 1 \u56de\u306e\u5b9f\u884c\u3067\u5b9f\u884c\u3057\u3066\u7d42\u4e86\u3059\u308b\u5834\u5408\u306f\u3001\u6b21\u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d0\u30c3\u30b7\u30e5\u30b3\u30d4\u30fc\u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npx karma start --single-run<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u74b0\u5883\u3067\u7279\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u304c\u7b2cIII\u7ae0\u306e\u7b2c4\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 4 \u7ae0: \u89d2\u5ea6\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u3068\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular \u3067\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u306f\u72ec\u81ea\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u304c\u3042\u308a\u3001, \u306a\u3069\u306e\u4e00\u9023\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30d5\u30c3\u30af\u95a2\u6570\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30c6\u30b9\u30c8\u3059\u308b\u3068\u304d\u306f\u3001\u521d\u671f\u5316\u30ed\u30b8\u30c3\u30af\u3084\u526f\u4f5c\u7528\u304c\u542b\u307e\u308c\u3066\u3044\u308b\u3053\u3068\u304c\u591a\u3044\u305f\u3081\u3001\u3053\u308c\u3089\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30d5\u30c3\u30af\u304c\u3069\u306e\u3088\u3046\u306b\u6a5f\u80fd\u3059\u308b\u304b\u3092\u7406\u89e3\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<code>ngOnInit<\/code><code>ngOnChanges<\/code><\/p>\n\n\n\n<p>\u30c6\u30b9\u30c8\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30d5\u30c3\u30af\u306e\u547c\u3073\u51fa\u3057\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u305f\u308a\u3001\u671f\u5f85\u3069\u304a\u308a\u306b\u547c\u3073\u51fa\u3055\u308c\u305f\u3053\u3068\u3092\u78ba\u8a8d\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u30d5\u30c3\u30af\u5185\u306e\u30b5\u30fc\u30d3\u30b9\u304b\u3089\u30e6\u30fc\u30b6\u30fc\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u5358\u7d14\u306a\u3082\u306e\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002<code>UserProfileComponent<\/code><code>ngOnInit<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ user-profile.component.ts import { Component, OnInit } from '@angular\/core'; import { UserService } from '.\/user.service'; @Component({ selector: 'app-user-profile', template: '&lt;div&gt;{{ user.name }}&lt;\/div&gt;', }) export class UserProfileComponent implements OnInit { user: any; constructor(private userService: UserService) {} ngOnInit() { this.user = this.userService.getUser(); } }<\/code><\/p>\n\n\n\n<p>\u5bfe\u5fdc\u3059\u308b\u30c6\u30b9\u30c8 \u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ user-profile.component.spec.ts import { UserProfileComponent } from '.\/user-profile.component'; import { UserService } from '.\/user.service'; describe('UserProfileComponent', () =&gt; { let component: UserProfileComponent; let userService: UserService; beforeEach(() =&gt; { userService = new UserService(); component = new UserProfileComponent(userService); }); it('should fetch user data on ngOnInit', () =&gt; { const user = { name: 'John' }; spyOn(userService, 'getUser').and.returnValue(user); component.ngOnInit(); expect(component.user).toBe(user); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001Jasmine\u306e\u624b\u6cd5\u3092\u4f7f\u7528\u3057\u3066\u30e1\u30bd\u30c3\u30c9\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u30c7\u30fc\u30bf\u304c\u6b63\u3057\u304f\u53d6\u5f97\u3055\u308c\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<code>spyOn<\/code><code>UserService<\/code><code>getUser<\/code><code>ngOnInit<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u304c\u7b2cIV\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 4 \u7ae0: \u89d2\u5ea6\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 \u30c6\u30b9\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30af\u30e9\u30b9\u306e\u30ed\u30b8\u30c3\u30af\u306b\u52a0\u3048\u3066\u3001Angular\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u306f\u305d\u308c\u3089\u306b\u95a2\u9023\u4ed8\u3051\u3089\u308c\u305f\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u306f\u3001\u901a\u5e38\u3001\u30c7\u30fc\u30bf \u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3001\u30a4\u30d9\u30f3\u30c8 \u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3001\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306a\u3069\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002 \u901a\u5e38\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001DOM \u8981\u7d20\u304c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u72b6\u614b\u3092\u6b63\u3057\u304f\u53cd\u6620\u3057\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u30c6\u30b9\u30c8\u3059\u308b\u306b\u306f\u3001\u901a\u5e38\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210\u3084\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u64cd\u4f5c\u306a\u3069\u3001Angular\u306e\u30c6\u30b9\u30c8\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>TestBed<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u30dc\u30bf\u30f3\u3068\u30ab\u30a6\u30f3\u30c8\u3092\u793a\u3059\u30e9\u30d9\u30eb\u3092\u6301\u3064\u5358\u7d14\u306a\u3082\u306e\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002<code>CounterComponent<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ counter.component.ts import { Component } from '@angular\/core'; @Component({ selector: 'app-counter', template: ` &lt;button (click)=\"increment()\"&gt;Increment&lt;\/button&gt; &lt;p&gt;{{ count }}&lt;\/p&gt; `, }) export class CounterComponent { count = 0; increment() { this.count++; } }<\/code><\/p>\n\n\n\n<p>\u5bfe\u5fdc\u3059\u308b\u30c6\u30b9\u30c8 \u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ counter.component.spec.ts import { ComponentFixture, TestBed } from '@angular\/core\/testing'; import { CounterComponent } from '.\/counter.component'; describe('CounterComponent', () =&gt; { let component: CounterComponent; let fixture: ComponentFixture&lt;CounterComponent&gt;; beforeEach(() =&gt; { TestBed.configureTestingModule({ declarations: [CounterComponent], }); fixture = TestBed.createComponent(CounterComponent); component = fixture.componentInstance; }); it('should increment count when the button is clicked', () =&gt; { fixture.detectChanges(); \/\/ \u521d\u59cb\u5316\u7ec4\u4ef6\u548c\u6a21\u677f const compiled = fixture.nativeElement; const button = compiled.querySelector('button'); const p = compiled.querySelector('p'); expect(p.textContent).toContain('0'); button.click(); fixture.detectChanges(); \/\/ \u66f4\u65b0\u6a21\u677f expect(p.textContent).toContain('1'); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u6210\u3057\u3001\u305d\u308c\u306b\u3088\u3063\u3066\u305d\u306eDOM\u8981\u7d20\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001\u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u30ab\u30a6\u30f3\u30c8\u304c\u6b63\u3057\u304f\u66f4\u65b0\u3055\u308c\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<code>TestBed<\/code><code>CounterComponent<\/code><code>fixture.nativeElement<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2cIV\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 4 \u7ae0: \u89d2\u5ea6\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.3 \u30c6\u30b9\u30c8\u5165\u529b\u304a\u3088\u3073\u51fa\u529b\u30d7\u30ed\u30d1\u30c6\u30a3<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u3001input() \u30d7\u30ed\u30d1\u30c6\u30a3\u3068 output() \u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u9593\u3067\u901a\u4fe1\u3059\u308b\u305f\u3081\u306e\u4e00\u822c\u7684\u306a\u65b9\u6cd5\u3067\u3059\u3002 \u5165\u529b\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30c7\u30fc\u30bf\u3092\u6e21\u3059\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u51fa\u529b\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u9001\u4fe1\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<code>@Input<\/code><code>@Output<\/code><\/p>\n\n\n\n<p>\u901a\u5e38\u3001\u3053\u308c\u3089\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u30c6\u30b9\u30c8\u306b\u306f\u3001\u5165\u529b\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u306e\u8a2d\u5b9a\u3068\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u72b6\u614b\u306e\u78ba\u8a8d\u3001\u307e\u305f\u306f\u51fa\u529b\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u30ea\u30c3\u30b9\u30f3\u3057\u3066\u6b63\u3057\u304f\u8d77\u52d5\u3059\u308b\u691c\u8a3c\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5165\u529b\u3068\u3057\u3066\u53d7\u3051\u5165\u308c\u3001\u30bf\u30b9\u30af\u304c\u5b8c\u4e86\u3057\u305f\u3068\u304d\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u767a\u751f\u3055\u305b\u308b\u3082\u306e\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002<code>TodoItemComponent<\/code><code>todo<\/code><code>completed<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ todo-item.component.ts import { Component, Input, Output, EventEmitter } from '@angular\/core'; @Component({ selector: 'app-todo-item', template: ` &lt;div&gt; &lt;span&gt;{{ todo.title }}&lt;\/span&gt; &lt;button (click)=\"completeTodo()\"&gt;Complete&lt;\/button&gt; &lt;\/div&gt; `, }) export class TodoItemComponent { @Input() todo: { title: string, completed: boolean }; @Output() completed = new EventEmitter&lt;void&gt;(); completeTodo() { this.todo.completed = true; this.completed.emit(); } }<\/code><\/p>\n\n\n\n<p>\u5bfe\u5fdc\u3059\u308b\u30c6\u30b9\u30c8 \u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ todo-item.component.spec.ts import { TodoItemComponent } from '.\/todo-item.component'; describe('TodoItemComponent', () =&gt; { let component: TodoItemComponent; beforeEach(() =&gt; { component = new TodoItemComponent(); }); it('should mark todo as completed and emit completed event', () =&gt; { const todo = { title: 'Test Todo', completed: false }; component.todo = todo; let emitted = false; component.completed.subscribe(() =&gt; { emitted = true; }); component.completeTodo(); expect(todo.completed).toBe(true); expect(emitted).toBe(true); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u5165\u529b\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3057\u3001\u51fa\u529b\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u72b6\u614b\u3068\u30a4\u30d9\u30f3\u30c8\u304c\u6b63\u3057\u304f\u767a\u751f\u3057\u305f\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<code>todo<\/code><code>completed<\/code><code>completeTodo<\/code><code>todo<\/code><code>completed<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u304c\u7b2cIV\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 4 \u7ae0: \u89d2\u5ea6\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.4 \u4f9d\u5b58\u30b5\u30fc\u30d3\u30b9\u306e\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u591a\u304f\u306e\u5834\u5408\u3001\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1\u3001\u72b6\u614b\u7ba1\u7406\u306a\u3069\u306e\u7279\u5b9a\u306e\u30bf\u30b9\u30af\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u30b5\u30fc\u30d3\u30b9\u306b\u4f9d\u5b58\u3057\u3066\u3044\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u4f9d\u5b58\u95a2\u4fc2\u306e\u51e6\u7406\u306f\u3001\u3053\u308c\u3089\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30c6\u30b9\u30c8\u3059\u308b\u969b\u306e\u91cd\u8981\u306a\u8003\u616e\u4e8b\u9805\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u5b9f\u969b\u306e\u30b5\u30fc\u30d3\u30b9\u3067\u30c6\u30b9\u30c8\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u304c\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u30c6\u30b9\u30c8\u304c\u8907\u96d1\u306b\u306a\u308a\u3001\u5b9f\u884c\u6642\u9593\u304c\u9577\u304f\u306a\u308a\u307e\u3059\u3002 \u5b9f\u969b\u306e\u30b5\u30fc\u30d3\u30b9\u306e\u4ee3\u308f\u308a\u306b\u30e2\u30c3\u30af\u307e\u305f\u306f\u30b9\u30bf\u30d6\u3092\u4f7f\u7528\u3059\u308b\u65b9\u304c\u4e00\u822c\u7684\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>1\u3064\u3042\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u30ea\u30b9\u30c8\u3092\u53d6\u5f97\u3059\u308b\u306e\u306f1\u3064\u306b\u4f9d\u5b58\u3057\u3066\u3044\u308b\u3068\u3057\u307e\u3059\u3002<code>UserListComponent<\/code><code>UserService<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ user-list.component.ts import { Component, OnInit } from '@angular\/core'; import { UserService } from '.\/user.service'; @Component({ selector: 'app-user-list', template: '&lt;ul&gt;&lt;li *ngFor=\"let user of users\"&gt;{{ user.name }}&lt;\/li&gt;&lt;\/ul&gt;', }) export class UserListComponent implements OnInit { users: any[]; constructor(private userService: UserService) {} ngOnInit() { this.users = this.userService.getUsers(); } }<\/code><\/p>\n\n\n\n<p>\u5bfe\u5fdc\u3059\u308b\u30c6\u30b9\u30c8 \u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ user-list.component.spec.ts import { UserListComponent } from '.\/user-list.component'; import { UserService } from '.\/user.service'; describe('UserListComponent', () =&gt; { let component: UserListComponent; let userServiceStub: Partial&lt;UserService&gt;; beforeEach(() =&gt; { \/\/ Create a stub for the UserService userServiceStub = { getUsers: () =&gt; [{ name: 'John' }, { name: 'Jane' }], }; component = new UserListComponent(userServiceStub as UserService); }); it('should fetch user list on ngOnInit', () =&gt; { component.ngOnInit(); expect(component.users.length).toBe(2); expect(component.users[0].name).toBe('John'); expect(component.users[1].name).toBe('Jane'); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u30b9\u30bf\u30d6\u3092\u4f5c\u6210\u3057\u3001\u305d\u308c\u3092\u4f7f\u7528\u3057\u3066\u521d\u671f\u5316\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u3001\u914d\u5217\u304c\u6b63\u3057\u304f\u5165\u529b\u3055\u308c\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<code>UserService<\/code><code>UserListComponent<\/code><code>ngOnInit<\/code><code>users<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c4\u7ae0\u7b2c4\u9805\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 5 \u7ae0: \u89d2\u5ea6\u547d\u4ee4\u3068\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.1 \u30ab\u30b9\u30bf\u30e0\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306e\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular \u3067\u306f\u3001\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306f DOM \u8981\u7d20\u307e\u305f\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u52d5\u4f5c\u3092\u64cd\u4f5c\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306f\u7570\u306a\u308a\u3001\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306b\u306f\u72ec\u81ea\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u30d3\u30e5\u30fc\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u591a\u304f\u306e\u5834\u5408\u3001DOM \u3068\u5bfe\u8a71\u3059\u308b\u30ed\u30b8\u30c3\u30af\u304c\u3042\u308a\u307e\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u3001\u30ab\u30b9\u30bf\u30e0 \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u306e\u30c6\u30b9\u30c8\u306b\u306f\u3001\u901a\u5e38\u3001DOM \u304c\u6b63\u3057\u304f\u52d5\u4f5c\u3059\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c6\u30b9\u30c8\u3068\u540c\u69d8\u306b\u3001Angular\u3092\u4f7f\u7528\u3057\u3066\u547d\u4ee4\u3092\u30c6\u30b9\u30c8\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<code>TestBed<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u8981\u7d20\u306e\u80cc\u666f\u8272\u3092\u5909\u66f4\u3059\u308b\u305f\u3081\u306e\u5358\u7d14\u306a\u3082\u306e\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002<code>HighlightDirective<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ highlight.directive.ts import { Directive, ElementRef, Input, OnInit } from '@angular\/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective implements OnInit { @Input() appHighlight: string; constructor(private el: ElementRef) {} ngOnInit() { this.el.nativeElement.style.backgroundColor = this.appHighlight; } }<\/code><\/p>\n\n\n\n<p>\u5bfe\u5fdc\u3059\u308b\u30c6\u30b9\u30c8 \u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ highlight.directive.spec.ts import { ComponentFixture, TestBed } from '@angular\/core\/testing'; import { HighlightDirective } from '.\/highlight.directive'; import { Component } from '@angular\/core'; @Component({ template: `&lt;div [appHighlight]=\"'yellow'\"&gt;&lt;\/div&gt;` }) class TestComponent {} describe('HighlightDirective', () =&gt; { let fixture: ComponentFixture&lt;TestComponent&gt;; let div: HTMLElement; beforeEach(() =&gt; { TestBed.configureTestingModule({ declarations: [HighlightDirective, TestComponent] }); fixture = TestBed.createComponent(TestComponent); div = fixture.nativeElement.querySelector('div'); }); it('should change background color', () =&gt; { fixture.detectChanges(); expect(div.style.backgroundColor).toBe('yellow'); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u30db\u30b9\u30c8\u3059\u308b\u30c6\u30b9\u30c8 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002 \u6b21\u306b\u3001\u3092\u4f7f\u7528\u3057\u3066\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3001\u305d\u308c\u306b\u3088\u3063\u3066\u305d\u306eDOM\u8981\u7d20\u306b\u30a2\u30af\u30bb\u30b9\u3057\u307e\u3059\u3002 \u6700\u5f8c\u306b\u3001\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u304c\u8981\u7d20\u306e\u80cc\u666f\u8272\u3092\u6b63\u3057\u304f\u5909\u66f4\u3059\u308b\u3053\u3068\u3092\u691c\u8a3c\u3057\u307e\u3059\u3002<code>TestComponent<\/code><code>HighlightDirective<\/code><code>TestBed<\/code><code>fixture.nativeElement<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u304c\u7b2cV\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 5 \u7ae0: \u89d2\u5ea6\u547d\u4ee4\u3068\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.2 \u30ab\u30b9\u30bf\u30e0 \u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3092\u30c6\u30b9\u30c8\u3059\u308b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30d1\u30a4\u30d7\u306f\u3001\u30c7\u30fc\u30bf\u3092\u5909\u63db\u3059\u308b\u305f\u3081\u306eAngular\u306e\u7279\u5225\u306a\u30bf\u30a4\u30d7\u306e\u30af\u30e9\u30b9\u3067\u3059\u3002 \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3084\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u306f\u7570\u306a\u308a\u3001\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u306f DOM \u3084\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u72b6\u614b\u3068\u5bfe\u8a71\u3059\u308b\u30ed\u30b8\u30c3\u30af\u304c\u306a\u3044\u3053\u3068\u304c\u591a\u3044\u305f\u3081\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u30c6\u30b9\u30c8\u304c\u7c21\u5358\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u30ab\u30b9\u30bf\u30e0 \u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u901a\u5e38\u3001\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u6210\u3057\u3001\u305d\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u76f4\u63a5\u547c\u3073\u51fa\u3057\u3066\u3001\u51fa\u529b\u304c\u671f\u5f85\u3069\u304a\u308a\u3067\u3042\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>transform<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u6587\u5b57\u5217\u3092\u53cd\u8ee2\u3059\u308b\u305f\u3081\u306e\u5358\u7d14\u306a\u3082\u306e\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002<code>ReversePipe<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ reverse.pipe.ts import { Pipe, PipeTransform } from '@angular\/core'; @Pipe({ name: 'reverse' }) export class ReversePipe implements PipeTransform { transform(value: string): string { return value.split('').reverse().join(''); } }<\/code><\/p>\n\n\n\n<p>\u5bfe\u5fdc\u3059\u308b\u30c6\u30b9\u30c8 \u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ reverse.pipe.spec.ts import { ReversePipe } from '.\/reverse.pipe'; describe('ReversePipe', () =&gt; { let pipe: ReversePipe; beforeEach(() =&gt; { pipe = new ReversePipe(); }); it('should reverse the string', () =&gt; { const result = pipe.transform('hello'); expect(result).toBe('olleh'); }); it('should return an empty string if input is empty', () =&gt; { const result = pipe.transform(''); expect(result).toBe(''); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u6700\u521d\u306b\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002 \u6b21\u306b\u3001\u305d\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u76f4\u63a5\u547c\u3073\u51fa\u3057\u3001Jasmine \u306e\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u51fa\u529b\u3092\u691c\u8a3c\u3057\u307e\u3059\u3002<code>ReversePipe<\/code><code>transform<\/code><code>expect<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u65b9\u6cd5\u306f\u3001DOM\u74b0\u5883\u3084Angular\u30c6\u30b9\u30c8\u30d9\u30c3\u30c9\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u306a\u3044\u305f\u3081\u3001\u975e\u5e38\u306b\u7c21\u5358\u3067\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2cV\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0: \u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9 (E&lt;&gt;E) \u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">6.1 \u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u30c6\u30b9\u30c8\u3068\u306f<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9(E2E)\u30c6\u30b9\u30c8\u306f\u3001\u5b8c\u5168\u306a\u30d3\u30b8\u30cd\u30b9\u30d7\u30ed\u30bb\u30b9\u306b\u304a\u3051\u308b\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u306e\u52d5\u4f5c\u3092\u691c\u8a3c\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u30c6\u30b9\u30c8\u65b9\u6cd5\u3067\u3059\u3002 \u5358\u4f53\u30c6\u30b9\u30c8\u3084\u7d71\u5408\u30c6\u30b9\u30c8\u3068\u306f\u7570\u306a\u308a\u3001E2E \u30c6\u30b9\u30c8\u306b\u306f\u901a\u5e38\u3001\u5b9f\u969b\u306e\u30e6\u30fc\u30b6\u30fc \u30b7\u30ca\u30ea\u30aa\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3059\u308b\u305f\u3081\u306b\u3001\u8907\u6570\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b5\u30fc\u30d3\u30b9\u3001\u3055\u3089\u306b\u306f\u5916\u90e8\u4f9d\u5b58\u95a2\u4fc2\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u89d2\u5ea6\u3067\u306f\u3001\u5206\u5ea6\u5668\u306f\u4eba\u6c17\u306e\u3042\u308bE2E\u30c6\u30b9\u30c8\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002 WebDriver \u3092\u4f7f\u7528\u3057\u3066\u30d6\u30e9\u30a6\u30b6\u30fc\u3092\u5236\u5fa1\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u3068\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3068\u306e\u5bfe\u8a71\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u30e6\u30fc\u30b6\u30fc\u304c\u30e6\u30fc\u30b6\u30fc\u540d\u3068\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u5165\u529b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5358\u7d14\u306a\u30ed\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002 \u5206\u5ea6\u5668\u3092\u4f7f\u7528\u3057\u3066E2E\u30c6\u30b9\u30c8\u3092\u4f5c\u6210\u3057\u3001\u30ed\u30b0\u30a4\u30f3\u6a5f\u80fd\u304c\u6a5f\u80fd\u3057\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u307e\u305a\u3001\u5206\u5ea6\u5668\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb(\u901a\u5e38)\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<code>protractor.conf.js<\/code><\/p>\n\n\n\n<p>\u30b8\u30e3\u30d0\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ protractor.conf.js exports.config = { framework: 'jasmine', seleniumAddress: 'http:\/\/localhost:4444\/wd\/hub', specs: ['e2e\/*.spec.ts'] };<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u5bfe\u5fdc\u3059\u308bE2E\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ e2e\/login.spec.ts import { browser, element, by } from 'protractor'; describe('Login Page', () =&gt; { it('should login with valid credentials', () =&gt; { \/\/ Navigate to login page browser.get('\/login'); \/\/ Find input fields and button const usernameInput = element(by.id('username')); const passwordInput = element(by.id('password')); const loginButton = element(by.id('login-button')); \/\/ Input username and password usernameInput.sendKeys('testuser'); passwordInput.sendKeys('testpass'); \/\/ Click login button loginButton.click(); \/\/ Verify login successful expect(browser.getCurrentUrl()).toContain('\/dashboard'); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u5206\u5ea6\u5668\u306eAPI\u3092\u4f7f\u7528\u3057\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30ed\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u3092\u958b\u304d\u3001\u30e6\u30fc\u30b6\u30fc\u540d\u3068\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u5165\u529b\u3057\u3001\u30ed\u30b0\u30a4\u30f3\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3053\u3068\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u307e\u3057\u305f\u3002 \u6700\u5f8c\u306b\u3001\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u30da\u30fc\u30b8\u306b\u6b63\u5e38\u306b\u30b8\u30e3\u30f3\u30d7\u3057\u305f\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2cVI\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0: \u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9 (E&lt;&gt;E) \u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">6.2 \u30da\u30fc\u30b8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u3088\u308bE2E\u30c6\u30b9\u30c8\u306e\u7c21\u7d20\u5316<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30da\u30fc\u30b8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u3001E2E\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092\u7c21\u7d20\u5316\u304a\u3088\u3073\u6574\u7406\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002 \u3053\u306e\u30d1\u30bf\u30fc\u30f3\u3067\u306f\u3001\u5404\u30da\u30fc\u30b8\u307e\u305f\u306f\u30da\u30fc\u30b8\u306e\u4e00\u90e8\u304c\u500b\u5225\u306e Page \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u3088\u3063\u3066\u8868\u3055\u308c\u307e\u3059\u3002 \u3053\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u3001\u30da\u30fc\u30b8\u3068\u5bfe\u8a71\u3059\u308b\u305f\u3081\u306e\u3059\u3079\u3066\u306e\u30ed\u30b8\u30c3\u30af\u3092\u30ab\u30d7\u30bb\u30eb\u5316\u3057\u3001\u30c6\u30b9\u30c8 \u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u3068\u8aad\u307f\u53d6\u308a\u3092\u5bb9\u6613\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30da\u30fc\u30b8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3059\u308b\u5229\u70b9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30b3\u30fc\u30c9\u306e\u518d\u5229\u7528<\/strong>: \u540c\u3058 Page \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8907\u6570\u306e\u30c6\u30b9\u30c8\u3067\u518d\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u304c\u7c21\u5358<\/strong>:\u30da\u30fc\u30b8\u69cb\u9020\u304c\u5909\u66f4\u3055\u308c\u305f\u5834\u5408\u306f\u3001\u500b\u3005\u306e\u30c6\u30b9\u30c8\u3067\u306f\u306a\u304f\u3001\u5bfe\u5fdc\u3059\u308b\u30da\u30fc\u30b8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u66f4\u65b0\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u8aad\u307f\u3084\u3059\u3055\u306e\u5411\u4e0a<\/strong>: \u30da\u30fc\u30b8 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3057\u3066\u3001\u30c6\u30b9\u30c8 \u30b3\u30fc\u30c9\u3092\u30c9\u30e1\u30a4\u30f3\u56fa\u6709\u8a00\u8a9e (DSL) \u306b\u8fd1\u3065\u3051\u3001\u7406\u89e3\u3057\u3084\u3059\u304f\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u524d\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u30ed\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u306e\u4f8b\u3092\u7d9a\u3051\u308b\u3068\u3001\u30da\u30fc\u30b8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<code>LoginPage<\/code><\/p>\n\n\n\n<p>\u307e\u305a\u3001\u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<code>LoginPage<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ e2e\/page-objects\/login.page.ts import { browser, element, by } from 'protractor'; export class LoginPage { navigateTo() { return browser.get('\/login'); } getUsernameInput() { return element(by.id('username')); } getPasswordInput() { return element(by.id('password')); } getLoginButton() { return element(by.id('login-button')); } }<\/code><\/p>\n\n\n\n<p>\u305d\u306e\u5f8c\u3001\u3053\u306e\u30da\u30fc\u30b8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u30c6\u30b9\u30c8\u3067\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ e2e\/login.spec.ts import { LoginPage } from '.\/page-objects\/login.page'; describe('Login Page', () =&gt; { const loginPage = new LoginPage(); it('should login with valid credentials', () =&gt; { \/\/ Navigate to login page loginPage.navigateTo(); \/\/ Input username and password loginPage.getUsernameInput().sendKeys('testuser'); loginPage.getPasswordInput().sendKeys('testpass'); \/\/ Click login button loginPage.getLoginButton().click(); \/\/ Verify login successful expect(browser.getCurrentUrl()).toContain('\/dashboard'); }); });<\/code><\/p>\n\n\n\n<p>Page \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30c6\u30b9\u30c8 \u30b3\u30fc\u30c9\u304c\u660e\u78ba\u306b\u306a\u308a\u3001\u4fdd\u5b88\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2cVI\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002 \u305d\u308c\u4ee5\u5916\u306e\u5834\u5408\u306f\u3001\u6b21\u306e\u7ae0\u306e\u8981\u7d04\u306b\u9032\u307f\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u30c1\u30e3\u30c3\u30c8GPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981<\/h2>\n\n\n\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001Angular\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3092\u30c6\u30b9\u30c8\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u5358\u4f53\u30c6\u30b9\u30c8\u306e\u57fa\u672c\u304b\u3089\u59cb\u3081\u3066\u3001\u30c6\u30b9\u30c8\u306b\u30b8\u30e3\u30b9\u30df\u30f3\u3068\u30ab\u30eb\u30de\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u3092\u63a2\u308a\u307e\u3057\u305f\u3002 \u6b21\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3001\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306a\u3069\u3001Angular \u306e\u3055\u307e\u3056\u307e\u306a\u90e8\u5206\u3092\u30c6\u30b9\u30c8\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u307e\u305f\u3001\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9(E2E)\u30c6\u30b9\u30c8\u306e\u6982\u5ff5\u3092\u7d39\u4ecb\u3057\u3001E2E\u30c6\u30b9\u30c8\u306b\u5206\u5ea6\u5668\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u3092\u793a\u3057\u307e\u3059\u3002 \u6700\u5f8c\u306b\u3001\u30da\u30fc\u30b8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3057\u3066E2E\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092\u7c21\u7d20\u5316\u304a\u3088\u3073\u6574\u7406\u3059\u308b\u3053\u3068\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u3055\u3089\u306a\u308b\u7814\u7a76\u306e\u305f\u3081\u306e\u53c2\u8003\u6587\u732e<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/angular.io\/guide\/testing\">\u89d2\u5ea6\u30c6\u30b9\u30c8<\/a>\u30ac\u30a4\u30c9 \u2013\u5305\u62ec\u7684\u3067\u8a73\u7d30\u306a\u30c6\u30b9\u30c8\u30ac\u30a4\u30c9\u3092\u63d0\u4f9b\u3059\u308b\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/jasmine.github.io\/\">Jasmine \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8 \u2013<\/a>&nbsp;API \u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u542b\u3080 Jasmine \u306e\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3002<\/li>\n\n\n\n<li>\u5206\u5ea6\u5668\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb \u2013\u521d\u5fc3\u8005\u5411\u3051\u306e<a href=\"https:\/\/www.protractortest.org\/#\/tutorial\">\u5206\u5ea6\u5668\u306e\u516c\u5f0f\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/a>\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/www.manning.com\/books\/testing-angular-applications\">\u89d2\u5ea6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e<\/a>\u30c6\u30b9\u30c8 \u2013\u89d2\u5ea6\u30c6\u30b9\u30c8\u5c02\u7528\u306e\u672c\u3002<\/li>\n\n\n\n<li>\u5206\u5ea6\u5668\u3068\u89d2\u5ea6<a href=\"https:\/\/www.udemy.com\/course\/end-to-end-testing-with-protractor-and-angular\/\">\u3092\u4f7f\u7528\u3057\u305f\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8<\/a>&nbsp;\u2013\u5206\u5ea6\u5668\u3068\u89d2\u5ea6\u306eE2E\u30c6\u30b9\u30c8\u306b\u7279\u5316\u3057\u305fUdemy\u30b3\u30fc\u30b9\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u304c\u3001Angular\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u30c6\u30b9\u30c8\u65b9\u6cd5\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u3088\u308a\u3088\u304f\u7406\u89e3\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u3053\u3068\u3092\u9858\u3063\u3066\u3044\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c2\u7ae0:\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9(E&lt;&gt;E)\u30c6\u30b9\u30c8ChatGPT\u306e\u305f\u3081\u306e\u30da\u30fc\u30b8\u8981\u7d20\u306e\u914d\u7f6e\u3068\u64cd\u4f5c<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0: \u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9 (E&lt;&gt;E) \u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">6.3 \u30da\u30fc\u30b8\u8981\u7d20\u306e\u914d\u7f6e\u3068\u64cd\u4f5c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9(E2E)\u30c6\u30b9\u30c8\u3067\u306f\u3001\u30da\u30fc\u30b8\u8981\u7d20\u306e\u914d\u7f6e\u3068\u64cd\u4f5c\u304c\u91cd\u8981\u306a\u30b9\u30c6\u30c3\u30d7\u3067\u3059\u3002 \u30da\u30fc\u30b8\u8981\u7d20\u3092\u6b63\u3057\u304f\u914d\u7f6e\u3057\u3066\u64cd\u4f5c\u3059\u308b\u3053\u3068\u306f\u3001\u30c6\u30b9\u30c8\u306e\u7cbe\u5ea6\u3092\u78ba\u4fdd\u3059\u308b\u305f\u3081\u306e\u524d\u63d0\u6761\u4ef6\u3067\u3059\u3002 \u5206\u5ea6\u5668\u306b\u306f\u3001\u30da\u30fc\u30b8\u8981\u7d20\u3092\u914d\u7f6e\u304a\u3088\u3073\u64cd\u4f5c\u3059\u308b\u305f\u3081\u306e\u3055\u307e\u3056\u307e\u306a\u65b9\u6cd5\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30da\u30fc\u30b8\u8981\u7d20\u306e\u914d\u7f6e<\/h4>\n\n\n\n<p>\u5206\u5ea6\u5668\u306f\u3001\u4ee5\u4e0b\u3092\u542b\u3080\u304c\u3053\u308c\u3089\u306b\u9650\u5b9a\u3055\u308c\u306a\u3044\u3055\u307e\u3056\u307e\u306a\u30bf\u30fc\u30b2\u30c6\u30a3\u30f3\u30b0\u6226\u7565\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>ID\u306b\u3088\u308b\u30dd\u30b8\u30b7\u30e7\u30cb\u30f3\u30b0<\/strong>:&nbsp;<code>element(by.id('some-id'))<\/code><\/li>\n\n\n\n<li><strong>CSS\u30bb\u30ec\u30af\u30bf\u306b\u3088\u308b\u914d\u7f6e<\/strong>:&nbsp;<code>element(by.css('.some-class'))<\/code><\/li>\n\n\n\n<li><strong>\u30bf\u30b0\u540d\u306b\u3088\u308b\u30bf\u30fc\u30b2\u30c6\u30a3\u30f3\u30b0<\/strong>:&nbsp;<code>element(by.tagName('tag-name'))<\/code><\/li>\n\n\n\n<li><strong>\u30e2\u30c7\u30eb\u306b\u3088\u308b\u4f4d\u7f6e\u6c7a\u3081(\u89d2\u5ea6\u306b\u56fa\u6709):<\/strong>&nbsp;<code>element(by.model('someModel'))<\/code><\/li>\n\n\n\n<li><strong>\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306b\u3088\u308b\u30bf\u30fc\u30b2\u30c6\u30a3\u30f3\u30b0(Angular\u306b\u56fa\u6709):<\/strong>&nbsp;<code>element(by.binding('someBinding'))<\/code><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u30da\u30fc\u30b8\u8981\u7d20\u306e\u64cd\u4f5c<\/h4>\n\n\n\n<p>\u8981\u7d20\u3092\u914d\u7f6e\u3059\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306a\u3055\u307e\u3056\u307e\u306a\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30af\u30ea\u30c3\u30af:<\/strong>&nbsp;<code>element.click()<\/code><\/li>\n\n\n\n<li><strong>\u30c6\u30ad\u30b9\u30c8\u3092\u5165\u529b<\/strong>:&nbsp;<code>element.sendKeys('some text')<\/code><\/li>\n\n\n\n<li><strong>\u30c6\u30ad\u30b9\u30c8\u3092\u53d6\u5f97\u3057\u307e\u3059<\/strong>\u3002&nbsp;<code>element.getText()<\/code><\/li>\n\n\n\n<li><strong>\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u78ba\u8a8d\u3057\u307e\u3059<\/strong>\u3002&nbsp;<code>element.getAttribute('some-attribute')<\/code><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u3055\u307e\u3056\u307e\u306a\u30bf\u30fc\u30b2\u30c6\u30a3\u30f3\u30b0 \u30dd\u30ea\u30b7\u30fc\u3068\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u4f7f\u7528\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ e2e\/sample.spec.ts import { browser, element, by } from 'protractor'; describe('Sample E2E Test', () =&gt; { it('should perform various operations', () =&gt; { \/\/ Navigate to the page browser.get('\/sample'); \/\/ Locate elements by different strategies const buttonById = element(by.id('myButton')); const divByCss = element(by.css('.myDiv')); const inputByModel = element(by.model('myModel')); \/\/ Perform operations buttonById.click(); \/\/ Click the button inputByModel.sendKeys('Hello, world!'); \/\/ Input text into a model divByCss.getText().then(text =&gt; { \/\/ Get text from a div console.log(`Div text is: ${text}`); }); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u6700\u521d\u306b\u30da\u30fc\u30b8\u306b\u79fb\u52d5\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001\u3055\u307e\u3056\u307e\u306a\u30bf\u30fc\u30b2\u30c6\u30a3\u30f3\u30b0\u6226\u7565\u3092\u4f7f\u7528\u3057\u3066\u30da\u30fc\u30b8\u4e0a\u306e\u8981\u7d20\u3092\u898b\u3064\u3051\u3001\u30af\u30ea\u30c3\u30af\u3001\u5165\u529b\u3001\u30c6\u30ad\u30b9\u30c8\u306e\u53d6\u5f97\u306a\u3069\u3092\u884c\u3044\u307e\u3059\u3002<code>\/sample<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u30da\u30fc\u30b8\u8981\u7d20\u306e\u914d\u7f6e\u3068\u64cd\u4f5c\u306b\u7279\u5316\u3057\u305f\u7b2c6\u7ae0\u306e\u8ffd\u52a0\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c5\u7ae0:\u30b5\u30fc\u30d3\u30b9\u304a\u3088\u3073HTTP\u30c6\u30b9\u30c8\u30c1\u30e3\u30c3\u30c8GPT\u306e\u30b5\u30fc\u30d3\u30b9\u30c6\u30b9\u30c8\u306e\u57fa\u672c<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 5 \u7ae0: \u30b5\u30fc\u30d3\u30b9\u3068 HTTP \u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.1 \u30b5\u30fc\u30d3\u30b9\u30c6\u30b9\u30c8\u306e\u57fa\u672c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u306f\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u3001\u30c7\u30fc\u30bf\u30a2\u30af\u30bb\u30b9\u3001\u307e\u305f\u306f\u305d\u306e\u4ed6\u306e\u518d\u5229\u7528\u53ef\u80fd\u306a\u6a5f\u80fd\u3092\u30ab\u30d7\u30bb\u30eb\u5316\u3059\u308b\u30af\u30e9\u30b9\u3067\u3059\u3002 \u30b5\u30fc\u30d3\u30b9\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u3067\u91cd\u8981\u306a\u5f79\u5272\u3092\u679c\u305f\u3059\u305f\u3081\u3001\u30b5\u30fc\u30d3\u30b9\u3092\u30c6\u30b9\u30c8\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u30b5\u30fc\u30d3\u30b9 \u30c6\u30b9\u30c8\u306f\u3001\u901a\u5e38\u3001\u6b21\u306e 2 \u3064\u306e\u30ab\u30c6\u30b4\u30ea\u306b\u5206\u985e\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5358\u4f53<\/strong>\u30c6\u30b9\u30c8: \u3053\u306e\u7a2e\u985e\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u81ea\u4f53\u306e\u6a5f\u80fd\u306b\u306e\u307f\u7126\u70b9\u304c\u5f53\u3066\u3089\u308c\u3001\u5916\u90e8\u306e\u4f9d\u5b58\u95a2\u4fc2\u306f\u542b\u307e\u308c\u307e\u305b\u3093\u3002 \u3053\u308c\u306f\u901a\u5e38\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165 (DI) \u3068\u30e2\u30c3\u30af\u306b\u3088\u3063\u3066\u5b9f\u73fe\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u7d71\u5408<\/strong>\u30c6\u30b9\u30c8:\u3053\u306e\u30bf\u30a4\u30d7\u306e\u30c6\u30b9\u30c8\u306b\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u3068\u305d\u306e\u4f9d\u5b58\u95a2\u4fc2(HTTP\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306a\u3069)\u9593\u306e\u76f8\u4e92\u4f5c\u7528\u304c\u542b\u307e\u308c\u307e\u3059\u3002 \u3053\u308c\u306b\u306f\u901a\u5e38\u3001\u5b9f\u969b\u306e\u5916\u90e8\u74b0\u5883\u307e\u305f\u306f\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3055\u308c\u305f\u5916\u90e8\u74b0\u5883\u304c\u5fc5\u8981\u3067\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u5358\u4f53\u30c6\u30b9\u30c8<\/h5>\n\n\n\n<p>\u52a0\u7b97\u95a2\u6570\u3068\u6e1b\u7b97\u95a2\u6570\u3092\u63d0\u4f9b\u3059\u308b\u5358\u7d14\u306a\u3082\u306e\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002<code>CalculatorService<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ calculator.service.ts export class CalculatorService { add(a: number, b: number): number { return a + b; } subtract(a: number, b: number): number { return a - b; } }<\/code><\/p>\n\n\n\n<p>\u5bfe\u5fdc\u3059\u308b\u5358\u4f53\u30c6\u30b9\u30c8 \u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ calculator.service.spec.ts import { CalculatorService } from '.\/calculator.service'; describe('CalculatorService', () =&gt; { let service: CalculatorService; beforeEach(() =&gt; { service = new CalculatorService(); }); it('should add two numbers', () =&gt; { const result = service.add(2, 3); expect(result).toBe(5); }); it('should subtract two numbers', () =&gt; { const result = service.subtract(5, 3); expect(result).toBe(2); }); });<\/code><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u96c6\u6210\u6d4b\u8bd5<\/h5>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\uff0c\u5b83\u4f9d\u8d56\u4e8e\u4e00\u4e2aHTTP\u5ba2\u6237\u7aef\u6765\u83b7\u53d6\u7528\u6237\u6570\u636e\u3002<code>UserService<\/code><\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ user.service.ts import { HttpClient } from '@angular\/common\/http'; export class UserService { constructor(private http: HttpClient) {} getUsers() { return this.http.get('\/api\/users'); } }<\/code><\/p>\n\n\n\n<p>\u5bf9\u5e94\u7684\u96c6\u6210\u6d4b\u8bd5\u4ee3\u7801\u53ef\u80fd\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ user.service.spec.ts import { TestBed } from '@angular\/core\/testing'; import { HttpClientTestingModule, HttpTestingController } from '@angular\/common\/http\/testing'; import { UserService } from '.\/user.service'; describe('UserService', () =&gt; { let service: UserService; let httpMock: HttpTestingController; beforeEach(() =&gt; { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [UserService] }); service = TestBed.inject(UserService); httpMock = TestBed.inject(HttpTestingController); }); it('should fetch users', () =&gt; { const mockUsers = [{ name: 'John' }, { name: 'Jane' }]; service.getUsers().subscribe(users =&gt; { expect(users).toEqual(mockUsers); }); const req = httpMock.expectOne('\/api\/users'); req.flush(mockUsers); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001Angular \u306e\u5408\u8a08\u3092\u4f7f\u7528\u3057\u3066 HTTP \u8981\u6c42\u3068\u5fdc\u7b54\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u307e\u3059\u3002<code>HttpClientTestingModule<\/code><code>HttpTestingController<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u30c6\u30b9\u30c8\u306e\u57fa\u672c\u306b\u7279\u5316\u3057\u305f\u7b2c5\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c5\u7ae0:\u6a21\u64ec\u30b5\u30fc\u30d3\u30b9\u30c6\u30b9\u30c8ChatGPT\u306b\u3088\u308b\u30b5\u30fc\u30d3\u30b9\u30c6\u30b9\u30c8<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 5 \u7ae0: \u30b5\u30fc\u30d3\u30b9\u3068 HTTP \u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.2 \u30e2\u30c3\u30af\u306b\u3088\u308b\u30b5\u30fc\u30d3\u30b9\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30b5\u30fc\u30d3\u30b9 \u30c6\u30b9\u30c8\u3067\u306f\u3001\u30e2\u30c3\u30af\u306f\u3001\u30c6\u30b9\u30c8\u5bfe\u8c61\u306e\u30b5\u30fc\u30d3\u30b9\u3068\u305d\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u5206\u96e2\u3059\u308b\u305f\u3081\u306b\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u624b\u6cd5\u3067\u3059\u3002 \u5b9f\u969b\u306e\u4f9d\u5b58\u95a2\u4fc2\u306e\u4ee3\u308f\u308a\u306b\u30e2\u30c3\u30af \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30c6\u30b9\u30c8\u74b0\u5883\u3092\u3088\u308a\u7c21\u5358\u306b\u5236\u5fa1\u3057\u3001\u30b5\u30fc\u30d3\u30b9\u81ea\u4f53\u306e\u30ed\u30b8\u30c3\u30af\u306e\u30c6\u30b9\u30c8\u306b\u96c6\u4e2d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u901a\u5e38\u3001\u6b21\u306e\u30b7\u30ca\u30ea\u30aa\u3067\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>HTTP \u8981\u6c42<strong>\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3059\u308b<\/strong>: \u30b5\u30fc\u30d3\u30b9\u304c\u5916\u90e8 API \u306b\u4f9d\u5b58\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u3001\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3055\u308c\u305f HTTP \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u3066\u8981\u6c42\u3068\u5fdc\u7b54\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u4f9d\u5b58\u30b5\u30fc\u30d3\u30b9\u306e\u507d\u88c5<\/strong>: \u30b5\u30fc\u30d3\u30b9\u304c\u4ed6\u306e\u30b5\u30fc\u30d3\u30b9\u306b\u4f9d\u5b58\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u3001\u305d\u308c\u3089\u306e\u30b5\u30fc\u30d3\u30b9\u306e\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3055\u308c\u305f\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u64cd\u4f5c<strong>\u306e\u30b7\u30df\u30e5\u30ec\u30fc\u30c8<\/strong>: \u30b5\u30fc\u30d3\u30b9\u304c\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3068\u5bfe\u8a71\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u306b\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u64cd\u4f5c\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">HTTP \u8981\u6c42\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3059\u308b<\/h5>\n\n\n\n<p>Angular \u306f\u3001HTTP \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3059\u308b\u305f\u3081\u306e \u304a\u3088\u3073 \u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<code>HttpClientTestingModule<\/code><code>HttpTestingController<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ user.service.spec.ts import { TestBed } from '@angular\/core\/testing'; import { HttpClientTestingModule, HttpTestingController } from '@angular\/common\/http\/testing'; import { UserService } from '.\/user.service'; describe('UserService with Mock Http', () =&gt; { let service: UserService; let httpMock: HttpTestingController; beforeEach(() =&gt; { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [UserService] }); service = TestBed.inject(UserService); httpMock = TestBed.inject(HttpTestingController); }); it('should fetch users', () =&gt; { const mockUsers = [{ name: 'John' }, { name: 'Jane' }]; service.getUsers().subscribe(users =&gt; { expect(users).toEqual(mockUsers); }); const req = httpMock.expectOne('\/api\/users'); req.flush(mockUsers); }); });<\/code><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u4f9d\u5b58\u30b5\u30fc\u30d3\u30b9\u306e\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3<\/h5>\n\n\n\n<p>1\u3064\u306b\u4f9d\u5b58\u3057\u3066\u3044\u308b\u3068\u4eee\u5b9a\u3059\u308b\u3068\u3001\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3055\u308c\u305f\u3082\u306e\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<code>OrderService<\/code><code>PaymentService<\/code><code>PaymentService<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ Mock PaymentService const mockPaymentService = { processPayment: jasmine.createSpy('processPayment').and.returnValue(true) }; \/\/ order.service.spec.ts import { OrderService } from '.\/order.service'; describe('OrderService with Mock Service', () =&gt; { let service: OrderService; beforeEach(() =&gt; { service = new OrderService(mockPaymentService); }); it('should complete the order if payment is successful', () =&gt; { const result = service.completeOrder(100); expect(result).toBe(true); expect(mockPaymentService.processPayment).toHaveBeenCalledWith(100); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001Jasmine \u306e\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3055\u308c\u305f\u30e1\u30bd\u30c3\u30c9\u3092\u4f5c\u6210\u3057\u3001\u305d\u306e\u623b\u308a\u5024\u3092 \u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<code>createSpy<\/code><code>processPayment<\/code><code>true<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c5\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3001\u30b5\u30fc\u30d3\u30b9\u30c6\u30b9\u30c8\u306b\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u306b\u5c02\u5ff5\u3057\u3066\u3044\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c5\u7ae0:\u30b5\u30fc\u30d3\u30b9\u3068HTTP\u306e\u30c6\u30b9\u30c8 HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u30c6\u30b9\u30c8\u30c1\u30e3\u30c3\u30c8GPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 5 \u7ae0: \u30b5\u30fc\u30d3\u30b9\u3068 HTTP \u306e\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.3 HTTP \u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u591a\u304f\u306eAngular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u30b5\u30fc\u30d3\u30b9\u306fHTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u4ecb\u3057\u3066\u30d0\u30c3\u30af\u30a8\u30f3\u30c9API\u3068\u5bfe\u8a71\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u3001\u3053\u308c\u3089\u306eHTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u30c6\u30b9\u30c8\u3057\u3066\u3001\u305d\u306e\u6b63\u78ba\u6027\u3068\u4fe1\u983c\u6027\u3092\u78ba\u8a8d\u3059\u308b\u3053\u3068\u304c\u975e\u5e38\u306b\u91cd\u8981\u3067\u3059\u3002 Angular\u306f\u3001\u7279\u306bHTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u304a\u3088\u3073\u30c6\u30b9\u30c8\u3059\u308b\u305f\u3081\u306e\u4e00\u9023\u306e\u30c4\u30fc\u30eb\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<code>HttpClientTestingModule<\/code><code>HttpTestingController<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u4f7f\u7528\u304a\u3088\u3073<code>HttpClientTestingModule<\/code><code>HttpTestingController<\/code><\/h5>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u30011\u3064\u3042\u308a\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9API\u304b\u3089\u3084\u308b\u3053\u3068\u30ea\u30b9\u30c8\u3092\u53d6\u5f97\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002<code>TodoService<\/code><code>getTodos<\/code><\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ todo.service.ts import { HttpClient } from '@angular\/common\/http'; import { Injectable } from '@angular\/core'; @Injectable({ providedIn: 'root' }) export class TodoService { constructor(private http: HttpClient) {} getTodos() { return this.http.get('\/api\/todos'); } }<\/code><\/p>\n\n\n\n<p>\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ todo.service.spec.ts import { TestBed } from '@angular\/core\/testing'; import { HttpClientTestingModule, HttpTestingController } from '@angular\/common\/http\/testing'; import { TodoService } from '.\/todo.service'; describe('TodoService', () =&gt; { let service: TodoService; let httpMock: HttpTestingController; beforeEach(() =&gt; { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [TodoService] }); service = TestBed.inject(TodoService); httpMock = TestBed.inject(HttpTestingController); }); it('should fetch todos', () =&gt; { const mockTodos = [ { id: 1, title: 'Buy groceries' }, { id: 2, title: 'Clean the house' } ]; service.getTodos().subscribe(todos =&gt; { expect(todos).toEqual(mockTodos); }); const req = httpMock.expectOne('\/api\/todos'); expect(req.request.method).toBe('GET'); req.flush(mockTodos); }); afterEach(() =&gt; { httpMock.verify(); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30c6\u30b9\u30c8\u3067\u306f\u3001\u6700\u521d\u306b\u5408\u8a08\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3001\u30d5\u30c3\u30af\u3067\u521d\u671f\u5316\u3057\u307e\u3057\u305f\u3002<code>HttpClientTestingModule<\/code><code>HttpTestingController<\/code><code>beforeEach<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u3067\u306f\u3001\u30e1\u30bd\u30c3\u30c9\u306b\u3088\u3063\u3066\u8fd4\u3055\u308c\u308b Observable \u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3057\u3001\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u8fd4\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3092\u691c\u8a3c\u3057\u307e\u3059\u3002<code>getTodos<\/code><code>expect<\/code><\/p>\n\n\n\n<p>\u6700\u5f8c\u306b\u3001\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u9001\u4fe1 HTTP \u8981\u6c42\u3092\u30ad\u30e3\u30d7\u30c1\u30e3\u3057\u3001\u305d\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u5fdc\u7b54\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u307e\u3059\u3002<code>HttpTestingController<\/code><code>expectOne<\/code><code>flush<\/code><\/p>\n\n\n\n<p><code>afterEach<\/code>\u30d5\u30c3\u30af\u30a4\u30f3\u3057\u3066\u3001\u672a\u51e6\u7406\u306e HTTP \u8981\u6c42\u304c\u306a\u3044\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<code>httpMock.verify()<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001HTTP \u8981\u6c42\u306e\u30c6\u30b9\u30c8\u306b\u7279\u5316\u3057\u305f\u7b2c 5 \u7ae0\u306e 3 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c7\u7ae0:\u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u3068\u30ec\u30dd\u30fc\u30c8\u751f\u6210 \u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u30ec\u30dd\u30fc\u30c8ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 7 \u7ae0: \u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8\u3068\u30ec\u30dd\u30fc\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">7.1 \u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u30ec\u30dd\u30fc\u30c8\u306e\u751f\u6210<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8\u306f\u3001\u30c6\u30b9\u30c8\u3067\u30ab\u30d0\u30fc\u3055\u308c\u308b\u30b3\u30fc\u30c9\u306e\u91cf\u3092\u6e2c\u5b9a\u3059\u308b\u305f\u3081\u306e\u91cd\u8981\u306a\u30e1\u30c8\u30ea\u30c3\u30af\u3067\u3059\u3002 \u3053\u308c\u306f\u3001\u30b3\u30fc\u30c9\u306e\u30c6\u30b9\u30c8\u3055\u308c\u3066\u3044\u306a\u3044\u9818\u57df\u3092\u7279\u5b9a\u3057\u3001\u30c6\u30b9\u30c8\u306e\u54c1\u8cea\u3092\u5411\u4e0a\u3055\u305b\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002 Angular\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001Karma\u306e\u30ab\u30d0\u30ec\u30c3\u30b8\u30d7\u30e9\u30b0\u30a4\u30f3(\u901a\u5e38)\u3092\u4f7f\u7528\u3057\u3066\u30ab\u30d0\u30ec\u30c3\u30b8\u30ec\u30dd\u30fc\u30c8\u3092\u751f\u6210\u3067\u304d\u307e\u3059\u3002<code>karma-coverage<\/code><\/p>\n\n\n\n<p>\u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u306b\u306f\u3001\u901a\u5e38\u3001\u6b21\u306e\u3082\u306e\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u884c\u30ab\u30d0\u30ec\u30c3\u30b8<\/strong>: \u30b3\u30fc\u30c9\u306e\u5408\u8a08\u884c\u6570\u306b\u5bfe\u3059\u308b\u30c6\u30b9\u30c8\u306e\u5bfe\u8c61\u3068\u306a\u308b\u30b3\u30fc\u30c9\u306e\u884c\u6570\u306e\u6bd4\u7387\u3002<\/li>\n\n\n\n<li><strong>\u30d6\u30e9\u30f3\u30c1 \u30ab\u30d0\u30ec\u30c3\u30b8<\/strong>: \u30d6\u30e9\u30f3\u30c1\u306e\u7dcf\u6570\u306b\u5bfe\u3059\u308b\u3001\u30c6\u30b9\u30c8\u3067\u30ab\u30d0\u30fc\u3055\u308c\u308b\u30b3\u30fc\u30c9 \u30d6\u30e9\u30f3\u30c1 (\u5408\u8a08\u306a\u3069) \u306e\u6bd4\u7387\u3002<code>if<\/code><code>else<\/code><\/li>\n\n\n\n<li><strong>\u95a2\u6570\u30ab\u30d0\u30ec\u30c3\u30b8<\/strong>: \u95a2\u6570\u306e\u7dcf\u6570\u306b\u5bfe\u3059\u308b\u30c6\u30b9\u30c8\u306e\u5bfe\u8c61\u3068\u306a\u308b\u95a2\u6570\u306e\u6bd4\u7387\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u30ab\u30eb\u30de\u3092\u69cb\u6210\u3059\u308b<\/h5>\n\n\n\n<p>\u30ab\u30d0\u30ec\u30c3\u30b8\u30ec\u30dd\u30fc\u30c8\u3092\u751f\u6210\u3059\u308b\u306b\u306f\u3001Karma\u30d7\u30ed\u30d5\u30a1\u30a4\u30eb\u306b\u3044\u304f\u3064\u304b\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059(\u901a\u5e38)\u3002<code>karma.conf.js<\/code><\/p>\n\n\n\n<p>\u30b8\u30e3\u30d0\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ karma.conf.js module.exports = function(config) { config.set({ \/\/ ...other settings reporters: ['progress', 'coverage'], coverageReporter: { dir: '.\/coverage\/', reporters: [ { type: 'html', subdir: 'report-html' }, { type: 'lcov', subdir: 'report-lcov' } ] } }); };<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u69cb\u6210\u3067\u306f\u3001\u914d\u5217\u306b\u8ffd\u52a0\u3057\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002 \u3053\u308c\u306b\u3088\u308a\u3001HTML \u3068 LCOV \u306e 2 \u7a2e\u985e\u306e\u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002<code>coverage<\/code><code>reporters<\/code><code>coverageReporter<\/code><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b<\/h5>\n\n\n\n<p>\u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u3092\u751f\u6210\u3059\u308b\u306b\u306f\u3001\u901a\u5e38\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d0\u30c3\u30b7\u30e5\u30b3\u30d4\u30fc\u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>ng test --code-coverage<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u3059\u3079\u3066\u306e\u30c6\u30b9\u30c8\u304c\u5b9f\u884c\u3055\u308c\u3001\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u4e0b\u306b\u30ab\u30d0\u30ec\u30c3\u30b8\u30ec\u30dd\u30fc\u30c8\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002<code>.\/coverage\/<\/code><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u30ec\u30dd\u30fc\u30c8\u3092\u898b\u308b<\/h5>\n\n\n\n<p>\u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u304c\u751f\u6210\u3055\u308c\u305f\u3089\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u8a73\u7d30\u30ec\u30dd\u30fc\u30c8\u3092\u8868\u793a\u3067\u304d\u307e\u3059\u3002<code>.\/coverage\/report-html\/index.html<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c 7 \u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3001\u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u306e\u751f\u6210\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c7\u7ae0:\u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u3068\u30ec\u30dd\u30fc\u30c8\u306e\u89e3\u91c8 \u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u30ec\u30dd\u30fc\u30c8 ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 7 \u7ae0: \u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8\u3068\u30ec\u30dd\u30fc\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">7.2 \u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u30ec\u30dd\u30fc\u30c8\u3092\u89e3\u91c8\u3059\u308b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u3092\u751f\u6210\u3057\u305f\u3089\u3001\u6b21\u306e\u624b\u9806\u306f\u3001\u305d\u308c\u3089\u3092\u7406\u89e3\u3057\u3066\u89e3\u91c8\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u306f\u3001\u901a\u5e38\u3001\u884c\u30ab\u30d0\u30ec\u30c3\u30b8\u3001\u95a2\u6570\u30ab\u30d0\u30ec\u30c3\u30b8\u3001\u30d6\u30e9\u30f3\u30c1 \u30ab\u30d0\u30ec\u30c3\u30b8\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u30e1\u30c8\u30ea\u30c3\u30af\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30e1\u30c8\u30ea\u30c3\u30af\u306f\u3001\u3069\u306e\u30b3\u30fc\u30c9\u304c\u30c6\u30b9\u30c8\u3067\u30ab\u30d0\u30fc\u3055\u308c\u3066\u3044\u308b\u304b\u3001\u3069\u306e\u9818\u57df\u306b\u3082\u3063\u3068\u6ce8\u610f\u304c\u5fc5\u8981\u304b\u3092\u7406\u89e3\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30ec\u30dd\u30fc\u30c8\u306e\u89e3\u91c8\u65b9\u6cd5<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30e9\u30a4\u30f3\u30ab\u30d0\u30ec\u30c3\u30b8<\/strong>: \u3053\u306e\u30e1\u30c8\u30ea\u30c3\u30af\u306f\u3001\u30c6\u30b9\u30c8\u3067\u30ab\u30d0\u30fc\u3055\u308c\u308b\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u884c\u6570\u3092\u793a\u3057\u307e\u3059\u3002 \u30b3\u30fc\u30c9\u884c\u304c\u3069\u306e\u30c6\u30b9\u30c8 \u30b1\u30fc\u30b9\u306b\u3082\u89e6\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u30c6\u30b9\u30c8\u306e\u8ffd\u52a0\u3092\u691c\u8a0e\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u95a2\u6570\u30ab\u30d0\u30ec\u30c3\u30b8<\/strong>: \u3053\u306e\u30e1\u30c8\u30ea\u30c3\u30af\u306f\u3001\u547c\u3073\u51fa\u3055\u308c\u305f\u95a2\u6570\u307e\u305f\u306f\u30e1\u30bd\u30c3\u30c9\u306e\u6570\u3092\u793a\u3057\u307e\u3059\u3002 \u95a2\u6570\u304c\u547c\u3073\u51fa\u3055\u308c\u306a\u3044\u5834\u5408\u306f\u3001\u95a2\u6570\u306e\u6a5f\u80fd\u304c\u9069\u5207\u306b\u30c6\u30b9\u30c8\u3055\u308c\u3066\u3044\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d6\u30e9\u30f3\u30c1\u30ab\u30d0\u30ec\u30c3\u30b8<\/strong>: \u3053\u306e\u30e1\u30c8\u30ea\u30c3\u30af\u306f\u3001\u306e\u5236\u5fa1\u69cb\u9020\u306a\u3069\u306b\u7126\u70b9\u3092\u5f53\u3066\u3066\u3044\u307e\u3059\u3002 \u30d6\u30e9\u30f3\u30c1\u304c\u30c6\u30b9\u30c8\u306e\u5bfe\u8c61\u3067\u306a\u3044\u5834\u5408\u306f\u3001\u305d\u306e\u30d6\u30e9\u30f3\u30c1\u306b\u5bfe\u3057\u3066\u30c6\u30b9\u30c8\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3092\u691c\u8a0e\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>if<\/code><code>else<\/code><code>switch<\/code><\/li>\n\n\n\n<li><strong>\u30d5\u30a1\u30a4\u30eb\u30ec\u30d9\u30eb\u306e<\/strong>\u30ab\u30d0\u30ec\u30c3\u30b8: \u30ec\u30dd\u30fc\u30c8\u306b\u306f\u901a\u5e38\u3001\u5404\u30d5\u30a1\u30a4\u30eb\u306e\u30ab\u30d0\u30ec\u30c3\u30b8\u304c\u4e00\u89a7\u8868\u793a\u3055\u308c\u308b\u305f\u3081\u3001\u3069\u306e\u30d5\u30a1\u30a4\u30eb\u307e\u305f\u306f\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u3055\u3089\u306b\u30c6\u30b9\u30c8\u304c\u5fc5\u8981\u306b\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u304b\u3092\u7406\u89e3\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4f8b<\/h4>\n\n\n\n<p>\u6b21\u306e\u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u306e\u6982\u8981\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u884c\u30ab\u30d0\u30fc\u7387: 85%<\/li>\n\n\n\n<li>\u6a5f\u80fd\u30ab\u30d0\u30fc\u7387:80%<\/li>\n\n\n\n<li>\u30d6\u30e9\u30f3\u30c1\u30ab\u30d0\u30ec\u30c3\u30b8:75%<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u306e\u5834\u5408\u3001\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30e9\u30a4\u30f3\u30ab\u30d0\u30ec\u30c3\u30b8\u306f\u6bd4\u8f03\u7684\u9ad8\u3044\u3067\u3059\u304c\u3001\u30b3\u30fc\u30c9\u306e15%\u306f\u307e\u3060\u30ab\u30d0\u30fc\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002 \u30ab\u30d0\u30fc\u3055\u308c\u3066\u3044\u306a\u3044\u7279\u5b9a\u306e\u884c\u3092\u78ba\u8a8d\u3057\u3001\u30c6\u30b9\u30c8\u306e\u8ffd\u52a0\u3092\u691c\u8a0e\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u95a2\u6570\u3068\u30d6\u30e9\u30f3\u30c1\u306e\u30ab\u30d0\u30ec\u30c3\u30b8\u306f\u308f\u305a\u304b\u306b\u4f4e\u3044\u305f\u3081\u3001\u30c6\u30b9\u30c8\u3055\u308c\u3066\u3044\u306a\u3044\u95a2\u6570\u3068\u8ad6\u7406\u30d6\u30e9\u30f3\u30c1\u304c\u3044\u304f\u3064\u304b\u3042\u308a\u307e\u3059\u3002 \u30ab\u30d0\u30ec\u30c3\u30b8\u3092\u6539\u5584\u3059\u308b\u305f\u3081\u306b\u3001\u3053\u308c\u3089\u306e\u9818\u57df\u306b\u7126\u70b9\u3092\u5f53\u3066\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u7b46\u8a18<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ab\u30d0\u30ec\u30c3\u30b8\u304c\u9ad8\u3044\u304b\u3089\u3068\u3044\u3063\u3066\u3001\u5fc5\u305a\u3057\u3082\u30b3\u30fc\u30c9\u304c\u9ad8\u3044\u3001\u307e\u305f\u306f\u30d0\u30b0\u304c\u306a\u3044\u3053\u3068\u3092\u610f\u5473\u3059\u308b\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u30b3\u30fc\u30c9\u54c1\u8cea\u306e\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9\u3068\u3057\u3066\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>100%\u306e\u30ab\u30d0\u30ec\u30c3\u30b8\u3092\u8ffd\u6c42\u3059\u308b\u3053\u3068\u306f\u975e\u73fe\u5b9f\u7684\u3067\u3042\u308b\u3053\u3068\u304c\u591a\u304f\u3001\u9069\u5207\u306a\u30ab\u30d0\u30ec\u30c3\u30b8\u76ee\u6a19\u3092\u898b\u3064\u3051\u3001\u4e3b\u8981\u306a\u6a5f\u80fd\u3068\u30ed\u30b8\u30c3\u30af\u306e\u30c6\u30b9\u30c8\u306b\u96c6\u4e2d\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c 7 \u7ae0\u306e 2 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3001\u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u306e\u89e3\u91c8\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c7\u7ae0:\u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u3068\u30ec\u30dd\u30fc\u30c8\u306e\u6539\u5584\u3055\u308c\u305f\u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 7 \u7ae0: \u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8\u3068\u30ec\u30dd\u30fc\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">7.3 \u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u306e\u5411\u4e0a<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8\u306e\u5411\u4e0a\u306f\u7d99\u7d9a\u7684\u306a\u30d7\u30ed\u30bb\u30b9\u3067\u3042\u308a\u3001\u30b3\u30fc\u30c9\u3092\u5e38\u306b\u78ba\u8a8d\u3057\u3001\u65b0\u3057\u3044\u30c6\u30b9\u30c8 \u30b1\u30fc\u30b9\u3092\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8\u304c\u9ad8\u3044\u307b\u3069\u3001\u30b3\u30fc\u30c9\u304c\u5805\u7262\u3067\u4fe1\u983c\u6027\u304c\u9ad8\u3044\u3068\u3044\u3046\u78ba\u4fe1\u304c\u9ad8\u307e\u308a\u307e\u3059\u3002 \u3053\u3053\u3067\u306f\u3001\u30c6\u30b9\u30c8 \u30ab\u30d0\u30ec\u30c3\u30b8\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306e\u4e00\u822c\u7684\u306a\u65b9\u6cd5\u3068\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u65b9\u6cd5\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30ab\u30d0\u30fc\u3055\u308c\u3066\u3044\u306a\u3044\u30b3\u30fc\u30c9\u306e\u30c6\u30b9\u30c8\u3092\u8a18\u8ff0\u3059\u308b<\/strong>: \u30ab\u30d0\u30ec\u30c3\u30b8 \u30ec\u30dd\u30fc\u30c8\u3092\u4f7f\u7528\u3057\u3066\u3001\u30c6\u30b9\u30c8\u3055\u308c\u3066\u3044\u306a\u3044\u30b3\u30fc\u30c9\u884c\u3001\u95a2\u6570\u3001\u304a\u3088\u3073\u5206\u5c90\u3092\u7279\u5b9a\u3057\u3001\u305d\u308c\u3089\u306e\u9818\u57df\u306b\u5bfe\u3057\u3066\u65b0\u3057\u3044\u30c6\u30b9\u30c8\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u5883\u754c\u30c6\u30b9\u30c8\u3092\u8ffd\u52a0\u3059\u308b<\/strong>: \u6761\u4ef6\u4ed8\u304d\u5224\u65ad\u3001\u30eb\u30fc\u30d7\u3001\u518d\u5e30\u306a\u3069\u3092\u542b\u3080\u30b3\u30fc\u30c9\u306e\u5883\u754c\u30c6\u30b9\u30c8 \u30b1\u30fc\u30b9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002 \u3053\u308c\u306b\u306f\u901a\u5e38\u3001\u30c6\u30b9\u30c8\u5236\u9650\u5024\u3001null \u5024\u3001\u304a\u3088\u3073\u4e0d\u6b63\u306a\u5165\u529b\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u5316\u3055\u308c\u305f\u30c6\u30b9\u30c8\u3092\u4f7f\u7528\u3059\u308b<\/strong>: \u540c\u3058\u30c6\u30b9\u30c8 \u30ed\u30b8\u30c3\u30af\u3067\u7570\u306a\u308b\u5165\u529b\u5024\u3092\u4f7f\u7528\u3057\u3066\u8907\u6570\u306e\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u3001\u3088\u308a\u591a\u304f\u306e\u30b3\u30fc\u30c9\u3092\u3088\u308a\u52b9\u7387\u7684\u306b\u30ab\u30d0\u30fc\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u5916\u90e8\u4f9d\u5b58\u95a2\u4fc2\u306e\u30e2\u30c3\u30af: \u30e2\u30c3\u30af\u3068\u30b9\u30bf\u30d6\u3092\u4f7f\u7528\u3057\u3066\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3084 API \u306a\u3069\u306e<strong>\u5916\u90e8\u4f9d\u5b58\u95a2\u4fc2<\/strong>\u3092\u5206\u96e2\u3057\u3001\u30b3\u30fc\u30c9\u3092\u3088\u308a\u5fb9\u5e95\u7684\u306b\u30c6\u30b9\u30c8\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30b3\u30fc\u30c9\u306e\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0<\/strong>: \u30b3\u30fc\u30c9\u69cb\u9020\u304c\u30c6\u30b9\u30c8\u306b\u60aa\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u306e\u5834\u5408\u306f\u3001\u30c6\u30b9\u30c8\u3092\u5bb9\u6613\u306b\u3059\u308b\u305f\u3081\u306b\u30b3\u30fc\u30c9\u3092\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3059\u308b\u3053\u3068\u3092\u691c\u8a0e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/li>\n\n\n\n<li><strong>\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u81ea\u52d5\u5316<\/strong>: \u30c6\u30b9\u30c8\u3068\u30ab\u30d0\u30ec\u30c3\u30b8 \u30c1\u30a7\u30c3\u30af\u3092\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30d7\u30ed\u30bb\u30b9\u306b\u7d71\u5408\u3057\u3066\u3001\u65b0\u3057\u304f\u8ffd\u52a0\u307e\u305f\u306f\u5909\u66f4\u3055\u308c\u305f\u30b3\u30fc\u30c9\u304c\u5e38\u306b\u30c6\u30b9\u30c8\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>2\u3064\u306e\u6570\u5024\u306e\u9664\u7b97\u3092\u8a08\u7b97\u3059\u308b\u95a2\u6570\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ math.service.ts export class MathService { divide(a: number, b: number): number { if (b === 0) { throw new Error('Cannot divide by zero'); } return a \/ b; } }<\/code><\/p>\n\n\n\n<p>\u6b21\u306e\u30c6\u30b9\u30c8 \u30b1\u30fc\u30b9\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30ab\u30d0\u30ec\u30c3\u30b8\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ math.service.spec.ts import { MathService } from '.\/math.service'; describe('MathService', () =&gt; { let service: MathService; beforeEach(() =&gt; { service = new MathService(); }); it('should divide two numbers', () =&gt; { expect(service.divide(4, 2)).toBe(2); }); it('should throw an error when dividing by zero', () =&gt; { expect(() =&gt; service.divide(4, 0)).toThrowError('Cannot divide by zero'); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u306f\u3001\u95a2\u6570\u306e\u901a\u5e38\u306e\u52d5\u4f5c\u3068\u7570\u5e38\u3092\u30ab\u30d0\u30fc\u3057\u3001\u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u3092\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c7\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3001\u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u3092\u6539\u5584\u3059\u308b\u65b9\u6cd5\u306b\u5c02\u5ff5\u3057\u3066\u3044\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 ChatGPT \u3068\u306f\u4f55\u304b\u306b\u3064\u3044\u3066\u306f\u3001\u7b2c 8 \u7ae0: \u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u30c6\u30b9\u30c8\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 8 \u7ae0: \u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">8.1 \u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u306f<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 (CI) \u306f\u3001\u958b\u767a\u8005\u304c\u30b3\u30fc\u30c9\u5909\u66f4\u3092\u5171\u6709\u30ea\u30dd\u30b8\u30c8\u30ea\u306b\u983b\u7e41\u306b\u7d71\u5408\u3059\u308b\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3067\u3059\u3002 \u5404\u7d71\u5408\u3067\u306f\u3001\u4e00\u9023\u306e\u81ea\u52d5\u30d3\u30eb\u30c9\u3068\u30c6\u30b9\u30c8\u304c\u81ea\u52d5\u7684\u306b\u30c8\u30ea\u30ac\u30fc\u3055\u308c\u3001\u65b0\u3057\u3044\u5909\u66f4\u306b\u3088\u3063\u3066\u65e2\u5b58\u306e\u6a5f\u80fd\u304c\u640d\u306a\u308f\u308c\u306a\u3044\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002 \u3053\u306e\u76ee\u7684\u306f\u3001\u554f\u984c\u3092\u3067\u304d\u308b\u3060\u3051\u65e9\u304f\u898b\u3064\u3051\u3066\u4fee\u6b63\u3057\u3001\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u306e\u54c1\u8cea\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4e3b\u8981\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30bd\u30fc\u30b9\u7ba1\u7406 (SCM):<\/strong>&nbsp;Git \u306a\u3069\u306e\u30bd\u30fc\u30b9\u7ba1\u7406\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b3\u30fc\u30c9\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3068\u5c65\u6b74\u3092\u4fdd\u6301\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u81ea\u52d5\u30d3\u30eb\u30c9<\/strong>: Maven\u3001Gradle\u3001npm \u306a\u3069\u306e\u30d3\u30eb\u30c9 \u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u30bd\u30fc\u30b9 \u30b3\u30fc\u30c9\u3092\u81ea\u52d5\u7684\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u3001\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3057\u3001\u914d\u7f6e\u53ef\u80fd\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30d3\u30eb\u30c9\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u81ea\u52d5\u30c6\u30b9\u30c8<\/strong>: \u30d3\u30eb\u30c9 \u30d7\u30ed\u30bb\u30b9\u4e2d\u306b\u3001\u5358\u4f53\u30c6\u30b9\u30c8\u3001\u7d71\u5408\u30c6\u30b9\u30c8\u3001\u30a8\u30f3\u30c9 \u30c4\u30fc \u30a8\u30f3\u30c9 \u30c6\u30b9\u30c8\u306a\u3069\u306e\u4e00\u9023\u306e\u30c6\u30b9\u30c8\u3092\u81ea\u52d5\u7684\u306b\u5b9f\u884c\u3057\u3066\u3001\u30b3\u30fc\u30c9\u306e\u54c1\u8cea\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30ec\u30dd\u30fc\u30c8\u3068\u901a\u77e5<\/strong>: \u30d3\u30eb\u30c9\u307e\u305f\u306f\u30c6\u30b9\u30c8\u304c\u5931\u6557\u3057\u305f\u5834\u5408\u3001\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30c4\u30fc\u30eb\u306f\u81ea\u52d5\u7684\u306b\u95a2\u4fc2\u8005\u306b\u901a\u77e5\u3057\u307e\u3059\u3002 \u540c\u6642\u306b\u3001\u30c6\u30b9\u30c8\u30ab\u30d0\u30ec\u30c3\u30b8\u30ec\u30dd\u30fc\u30c8\u3001\u30b3\u30fc\u30c9\u54c1\u8cea\u30ec\u30dd\u30fc\u30c8\u306a\u3069\u306e\u3055\u307e\u3056\u307e\u306a\u30ec\u30dd\u30fc\u30c8\u3082\u751f\u6210\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30c7\u30d7\u30ed\u30a4<\/strong>: \u3059\u3079\u3066\u306e\u30c6\u30b9\u30c8\u306b\u5408\u683c\u3059\u308b\u3068\u3001\u30b3\u30fc\u30c9\u3092\u30b9\u30c6\u30fc\u30b8\u30f3\u30b0\u74b0\u5883\u306b\u81ea\u52d5\u7684\u306b\u30c7\u30d7\u30ed\u30a4\u3057\u3066\u3055\u3089\u306b\u30c6\u30b9\u30c8\u3059\u308b\u3053\u3068\u3082\u3001\u904b\u7528\u74b0\u5883\u306b\u76f4\u63a5\u30c7\u30d7\u30ed\u30a4\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4eba\u6c17\u306e\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30c4\u30fc\u30eb<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b8\u30a7\u30f3\u30ad\u30f3\u30b9<\/li>\n\n\n\n<li>\u30c8\u30e9\u30d3\u30b9CI<\/li>\n\n\n\n<li>GitLab CI\/CD<\/li>\n\n\n\n<li>GitHub \u30a2\u30af\u30b7\u30e7\u30f3<\/li>\n\n\n\n<li>\u30b5\u30fc\u30af\u30ebCI<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>\u4e00\u822c\u7684\u306a Angular \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 (Travis CI \u3092\u4f7f\u7528\u3059\u308b\u5834\u5408) \u307e\u305f\u306f (GitLab CI \u3092\u4f7f\u7528\u3059\u308b\u5834\u5408) \u306e\u30d7\u30ed\u30bb\u30b9\u3092\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002<code>.travis.yml<\/code><code>gitlab-ci.yml<\/code><\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001<code>.travis.yml<\/code><\/p>\n\n\n\n<p>yaml\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc\u3059\u308b<\/p>\n\n\n\n<p><code>language: node_js node_js: - \"12\" cache: directories: - node_modules script: - ng build --prod - ng test --watch=false<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u69cb\u6210\u30d5\u30a1\u30a4\u30eb\u306f\u3001Node \u3092\u4f7f\u7528\u3057\u3066.js\u3059\u308b\u74b0\u5883\u3092\u6307\u5b9a\u3057\u3001\u30d3\u30eb\u30c9\u3092\u9ad8\u901f\u5316\u3059\u308b\u305f\u3081\u306b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u307e\u3059\u3002 \u307e\u305f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u30d3\u30eb\u30c9\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u3068\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u306e 2 \u3064\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3082\u5b9a\u7fa9\u3057\u307e\u3059\u3002<code>node_modules<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u306f\u4f55\u304b\u306b\u7279\u5316\u3057\u305f\u7b2c8\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u7b2c8\u7ae0:ChatGPT\u3001\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u30c6\u30b9\u30c8\u306e\u305f\u3081\u306e\u305d\u306e\u4ed6\u306e\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u304a\u3088\u3073\u30c6\u30b9\u30c8\u30c4\u30fc\u30eb\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 8 \u7ae0: \u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">8.2 \u305d\u306e\u4ed6\u306e\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u304a\u3088\u3073\u30c6\u30b9\u30c8\u30c4\u30fc\u30eb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Jenkins\u3001Travis CI\u3001GitLab CI\/CD \u306a\u3069\u306e\u4e00\u822c\u7684\u306a\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30c4\u30fc\u30eb\u306b\u52a0\u3048\u3066\u3001\u5f37\u529b\u306a\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u304a\u3088\u3073\u30c6\u30b9\u30c8\u6a5f\u80fd\u3082\u63d0\u4f9b\u3059\u308b\u4ed6\u306e\u30c4\u30fc\u30eb\u3068\u30b5\u30fc\u30d3\u30b9\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30c4\u30fc\u30eb\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u30af\u30e9\u30a6\u30c9\u30cd\u30a4\u30c6\u30a3\u30d6 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3001\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9 \u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3001\u7279\u5b9a\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u306a\u3069\u3001\u7279\u5b9a\u306e\u30cb\u30fc\u30ba\u3084\u30b7\u30ca\u30ea\u30aa\u306b\u91cd\u70b9\u3092\u7f6e\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u305d\u306e\u4ed6\u306e\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u304a\u3088\u3073\u30c6\u30b9\u30c8\u30c4\u30fc\u30eb<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Bamboo<\/strong>: \u30a2\u30c8\u30e9\u30b7\u30a2\u30f3\u306b\u3088\u3063\u3066\u958b\u767a\u3055\u308c\u3001Jira \u3084 Bitbucket \u306a\u3069\u306e\u30c4\u30fc\u30eb\u3068\u3046\u307e\u304f\u7d71\u5408\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30c1\u30fc\u30e0\u30b7\u30c6\u30a3<\/strong>:JetBrains\u306b\u3088\u3063\u3066\u958b\u767a\u3055\u308c\u3001\u8c4a\u5bcc\u306a\u30d7\u30e9\u30b0\u30a4\u30f3\u3068\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd\u306a\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>CircleCI:<\/strong>&nbsp;\u30af\u30e9\u30a6\u30c9\u30cd\u30a4\u30c6\u30a3\u30d6 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5411\u3051\u306b\u8a2d\u8a08\u3055\u308c\u3066\u304a\u308a\u3001Docker \u3068 Kubernetes \u306e\u30cd\u30a4\u30c6\u30a3\u30d6 \u30b5\u30dd\u30fc\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30bb\u30de\u30d5\u30a9<\/strong>: \u9ad8\u5ea6\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd\u306a\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3068\u9ad8\u901f\u306a\u30d3\u30eb\u30c9\u901f\u5ea6\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>GitHub<strong>\u30a2\u30af\u30b7\u30e7\u30f3:GitHub<\/strong>\u30ea\u30dd\u30b8\u30c8\u30ea\u306b\u76f4\u63a5\u7d71\u5408\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u3055\u307e\u3056\u307e\u306a\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u81ea\u52d5\u5316\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>Azure&nbsp;<strong>Pipelines<\/strong>: Azure DevOps \u3068\u7dca\u5bc6\u306b\u7d71\u5408\u3055\u308c\u305f Microsoft \u306e\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u304a\u3088\u3073\u7d99\u7d9a\u7684\u30c7\u30d7\u30ed\u30a4 \u30b5\u30fc\u30d3\u30b9\u3002<\/li>\n\n\n\n<li><strong>Buildkite<\/strong>: \u72ec\u81ea\u306e\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u307e\u305f\u306f\u30af\u30e9\u30a6\u30c9 \u30b5\u30fc\u30d3\u30b9\u3067\u30d3\u30eb\u30c9\u3068\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3067\u304d\u308b\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>Drone.io<\/strong>: \u30b3\u30f3\u30c6\u30ca\u30fc \u30c6\u30af\u30ce\u30ed\u30b8\u3092\u4f7f\u7528\u3057\u3066\u30d3\u30eb\u30c9\u3068\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u8efd\u91cf\u306e\u7d99\u7d9a\u7684\u30c7\u30ea\u30d0\u30ea\u30fc \u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3002<\/li>\n\n\n\n<li><strong>GitLab Runner: \u30b9\u30bf\u30f3\u30c9\u30a2\u30ed\u30f3<\/strong>\u306e CI\/CD \u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3068\u5171\u306b\u3001\u307e\u305f\u306f\u30b9\u30bf\u30f3\u30c9\u30a2\u30ed\u30f3\u306e CI\/CD \u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3068\u3057\u3066\u4f7f\u7528\u3067\u304d\u308b GitLab \u306e\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30c4\u30fc\u30eb\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>AppVeyor<\/strong>: Windows \u74b0\u5883\u5411\u3051\u306b\u8a2d\u8a08\u3055\u308c\u305f\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u9069\u5207\u306a\u30c4\u30fc\u30eb\u3092\u9078\u629e\u3059\u308b<\/h4>\n\n\n\n<p>\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30c4\u30fc\u30eb\u3092\u9078\u629e\u3059\u308b\u3068\u304d\u306f\u3001\u6b21\u306e\u70b9\u3092\u8003\u616e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u65e2\u5b58\u306e\u30c4\u30fc\u30eb\u3068<strong>\u306e\u7d71\u5408<\/strong>: \u65e2\u5b58\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u7ba1\u7406\u3001\u305d\u306e\u4ed6\u306e\u30c4\u30fc\u30eb\u3068\u3046\u307e\u304f\u7d71\u5408\u3067\u304d\u308b CI \u30c4\u30fc\u30eb\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<strong>\u6027\u3068\u62e1\u5f35\u6027<\/strong>:\u30c4\u30fc\u30eb\u3067\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u308b\u304b\u3069\u3046\u304b\u3001\u304a\u3088\u3073\u8c4a\u5bcc\u306a\u30d7\u30e9\u30b0\u30a4\u30f3\u3068\u7d71\u5408\u30aa\u30d7\u30b7\u30e7\u30f3\u304c\u3042\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30b3\u30b9\u30c8<\/strong>: \u30c4\u30fc\u30eb\u306e\u4fa1\u683c\u3068\u3001\u7121\u6599\u306e\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u307e\u305f\u306f\u8a66\u7528\u7248\u304c\u5229\u7528\u53ef\u80fd\u304b\u3069\u3046\u304b\u3092\u691c\u8a0e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30b5\u30dd\u30fc\u30c8: \u6d3b\u767a\u306a\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u512a\u308c\u305f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f\u3001\u591a\u304f\u306e\u5834\u5408<strong>\u3001\u3088\u308a\u826f\u3044\u30b5\u30dd\u30fc\u30c8\u3068<\/strong>\u3088\u308a\u8fc5\u901f\u306a\u554f\u984c\u89e3\u6c7a\u3092\u610f\u5473\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c 8 \u7ae0\u306e 2 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3001\u4ed6\u306e\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u304a\u3088\u3073\u30c6\u30b9\u30c8 \u30c4\u30fc\u30eb\u5c02\u7528\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u7d30\u306b\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c8\u7ae0:\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30c6\u30b9\u30c8ChatGPT\u306e\u305f\u3081\u306eTravis CI\u3092\u4f7f\u7528\u3057\u305f\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u30c6\u30b9\u30c8<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 8 \u7ae0: \u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">8.3 Travis CI \u3092\u4f7f\u7528\u3057\u305f\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Travis CI \u306f\u3001GitHub \u3067\u30db\u30b9\u30c8\u3055\u308c\u308b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30d3\u30eb\u30c9\u3068\u30c6\u30b9\u30c8\u306b\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u4e00\u822c\u7684\u306a\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30b5\u30fc\u30d3\u30b9\u3067\u3059\u3002 \u4f7f\u3044\u3084\u3059\u3044\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u63d0\u4f9b\u3057\u3001\u30ce\u30fc\u30c9.js\u3001Python\u3001Java\u306a\u3069\u3092\u542b\u3080\u8907\u6570\u306e\u8a00\u8a9e\u3068\u74b0\u5883\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002 \u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30c6\u30b9\u30c8\u306b Travis CI \u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u624b\u9806<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>GitHub \u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u30ea\u30f3\u30af\u3059\u308b: Travis CI Web \u30b5\u30a4\u30c8\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3001<strong>GitHub \u30a2\u30ab\u30a6\u30f3\u30c8\u3067<\/strong>\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u304b\u3089\u3001\u7d99\u7d9a\u7684\u306b\u7d71\u5408\u3059\u308b\u30ea\u30dd\u30b8\u30c8\u30ea\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>.<strong>travis.yml \u30d5\u30a1\u30a4\u30eb\u3092\u8ffd\u52a0\u3059\u308b<\/strong>: \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30eb\u30fc\u30c8 \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u3001\u30d3\u30eb\u30c9\u3068\u30c6\u30b9\u30c8\u306e\u69cb\u6210\u3092\u542b\u3080 \u3068\u3044\u3046\u540d\u524d\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<code>.travis.yml<\/code><\/li>\n\n\n\n<li><strong>\u30d3\u30eb\u30c9\u74b0\u5883\u3092\u69cb\u6210\u3059\u308b<\/strong>: \u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001\u4f7f\u7528\u3059\u308b\u8a00\u8a9e\u3001\u30d0\u30fc\u30b8\u30e7\u30f3\u3001\u304a\u3088\u3073\u305d\u306e\u4ed6\u306e\u74b0\u5883\u5909\u6570\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<code>.travis.yml<\/code><\/li>\n\n\n\n<li>\u30d3\u30eb\u30c9 \u30b9\u30af\u30ea\u30d7\u30c8\u3068\u30c6\u30b9\u30c8 \u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9a\u7fa9\u3059\u308b: \u3067\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092<strong>\u30d3\u30eb\u30c9\u304a\u3088\u3073\u30c6\u30b9\u30c8<\/strong>\u3059\u308b\u305f\u3081\u306b\u5b9f\u884c\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9a\u7fa9\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>.travis.yml<\/code><\/li>\n\n\n\n<li>\u30d3\u30eb\u30c9\u3092\u30c8\u30ea\u30ac\u30fc\u3059\u308b: \u30b3\u30fc\u30c9\u3092 GitHub \u30ea\u30dd\u30b8\u30c8\u30ea\u306b\u30d7\u30c3\u30b7\u30e5\u3059\u308b\u305f\u3073\u306b\u3001Travis CI \u306b\u3088\u3063\u3066\u30d3\u30eb\u30c9\u3068\u30c6\u30b9\u30c8\u304c\u81ea\u52d5\u7684\u306b\u30c8\u30ea\u30ac\u30fc<strong>\u3055\u308c\u307e\u3059<\/strong>\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<p>Angular\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u7c21\u5358\u306a\u8a2d\u5b9a\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<code>.travis.yml<\/code><\/p>\n\n\n\n<p>yaml\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc\u3059\u308b<\/p>\n\n\n\n<p><code>language: node_js node_js: - \"14\" cache: directories: - node_modules install: - npm install script: - ng build --prod - ng test --watch=false<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d3\u30eb\u30c9\u74b0\u5883\u3068\u3057\u3066 Node.js \u306e\u4f7f\u7528\u3092\u6307\u5b9a\u3057\u3001\u30d0\u30fc\u30b8\u30e7\u30f3 14 \u3092\u9078\u629e\u3057\u307e\u3057\u305f\u3002<\/li>\n\n\n\n<li>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3066\u3001\u5f8c\u7d9a\u306e\u30d3\u30eb\u30c9\u3092\u9ad8\u901f\u5316\u3057\u307e\u3059\u3002<code>node_modules<\/code><\/li>\n\n\n\n<li>\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7 \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<code>npm install<\/code><\/li>\n\n\n\n<li>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30d3\u30eb\u30c9\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<code>ng build --prod<\/code><\/li>\n\n\n\n<li>[\u30c6\u30b9\u30c8\u306e\u5b9f\u884c] \u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<code>ng test --watch=false<\/code><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u30d3\u30eb\u30c9\u7d50\u679c\u3092\u78ba\u8a8d\u3059\u308b<\/h4>\n\n\n\n<p>\u30d3\u30eb\u30c9\u304c\u30c8\u30ea\u30ac\u30fc\u3055\u308c\u308b\u3068\u3001Travis CI\u306e\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3067\u30d3\u30eb\u30c9\u30b9\u30c6\u30fc\u30bf\u30b9\u3001\u30ed\u30b0\u3001\u30c6\u30b9\u30c8\u7d50\u679c\u3092\u8868\u793a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001Travis CI \u3092\u4f7f\u7528\u3057\u305f\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30c6\u30b9\u30c8\u306b\u7279\u5316\u3057\u305f\u7b2c 8 \u7ae0\u306e 3 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c9\u7ae0:Spy ChatGPT\u3092\u4f7f\u7528\u3057\u305f\u95a2\u6570\u547c\u3073\u51fa\u3057\u30c1\u30a7\u30c3\u30af\u306e\u9ad8\u5ea6\u306a\u30c6\u30b9\u30c8\u624b\u6cd5<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c9\u7ae0:\u975e\u540c\u671f\u30c6\u30b9\u30c8ChatGPT\u306e\u305f\u3081\u306e\u9ad8\u5ea6\u306a\u30c6\u30b9\u30c8\u624b\u6cd5<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c9\u7ae0:\u9ad8\u5ea6\u306a\u30c6\u30b9\u30c8\u624b\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">9.2 \u975e\u540c\u671f\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u975e\u540c\u671f\u64cd\u4f5c\u306f\u3001\u6700\u65b0\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067\u306f\u975e\u5e38\u306b\u4e00\u822c\u7684\u3067\u3042\u308a\u3001\u3053\u308c\u306b\u306f\u3001HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3001\u30bf\u30a4\u30de\u30fc\u3001\u307e\u305f\u306f\u7d50\u679c\u3092\u3059\u3050\u306b\u8fd4\u3055\u306a\u3044\u53ef\u80fd\u6027\u306e\u3042\u308b\u305d\u306e\u4ed6\u306e\u3082\u306e\u304c\u542b\u307e\u308c\u307e\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u3001\u975e\u540c\u671f\u30c6\u30b9\u30c8\u306f\u91cd\u8981\u306a\u30c8\u30d4\u30c3\u30af\u306b\u306a\u308a\u307e\u3057\u305f\u3002 Angular \u306b\u306f\u3001\u975e\u540c\u671f\u30b3\u30fc\u30c9\u306e\u30c6\u30b9\u30c8\u3092\u7c21\u7d20\u5316\u3059\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u3068\u624b\u6cd5\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<code>fakeAsync<\/code><code>tick<\/code><code>async<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u975e\u540c\u671f\u30c6\u30b9\u30c8\u30e1\u30bd\u30c3\u30c9<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><code>fakeAsync<\/code>&nbsp;\u3068<code>\u30c6\u30a3\u30c3\u30af<\/code><\/strong>\u3092\u4f7f\u7528\u3059\u308b: \u3053\u308c\u3089 2 \u3064\u306e\u95a2\u6570\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3055\u308c\u305f\u975e\u540c\u671f\u74b0\u5883\u3067\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3057\u3001\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u6642\u9593\u306e\u7d4c\u904e\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002<code>tick<\/code><\/li>\n\n\n\n<li><strong><code>async<\/code>&nbsp;\u3068&nbsp;<code>waitForAsync<\/code>&nbsp;\u3092\u4f7f\u7528\u3059\u308b<\/strong>: \u3053\u308c\u3089 2 \u3064\u306e\u95a2\u6570\u306f\u3001Promise \u3084 Observable \u306a\u3069\u306e\u3088\u308a\u8907\u96d1\u306a\u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong><code>done<\/code>&nbsp;\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u4f7f\u7528\u3059\u308b<\/strong>: \u5834\u5408\u306b\u3088\u3063\u3066\u306f\u3001Jasmine \u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u30c6\u30b9\u30c8\u306e\u5b8c\u4e86\u3092\u624b\u52d5\u3067\u30de\u30fc\u30af\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>done<\/code><\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u4f7f\u7528\u304a\u3088\u3073<code>fakeAsync<\/code><code>tick<\/code><\/h5>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { fakeAsync, tick } from '@angular\/core\/testing'; it('should execute async operation', fakeAsync(() =&gt; { let result = null; setTimeout(() =&gt; { result = 'hello'; }, 1000); tick(1000); expect(result).toBe('hello'); }));<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3055\u308c\u305f\u975e\u540c\u671f\u30c6\u30b9\u30c8\u74b0\u5883\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u30011\u79d2\u306e\u7d4c\u904e\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<code>fakeAsync<\/code><code>tick<\/code><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u4f7f\u7528\u304a\u3088\u3073<code>async<\/code><code>waitForAsync<\/code><\/h5>\n\n\n\n<p>\u30bf\u30a4\u30d7\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { async, ComponentFixture, TestBed, waitForAsync } from '@angular\/core\/testing'; it('should execute async operation', waitForAsync(() =&gt; { someAsyncFunction().then((result) =&gt; { expect(result).toBe('hello'); }); }));<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001Promise \u3092\u8fd4\u3059\u975e\u540c\u671f\u95a2\u6570\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<code>waitForAsync<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u7b46\u8a18<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u3001\u540c\u3058\u30c6\u30b9\u30c8 \u30b1\u30fc\u30b9\u306b\u5b9f\u969b\u306e\u975e\u540c\u671f\u64cd\u4f5c\u3092\u6df7\u5728\u3055\u305b\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002<code>fakeAsync<\/code><\/li>\n\n\n\n<li>\u3068\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u4f7f\u7528\u3057\u3066\u3001\u975e\u540c\u671f\u64cd\u4f5c\u304c\u59a5\u5f53\u306a\u6642\u9593\u5185\u306b\u5b8c\u4e86\u3057\u3001\u30c6\u30b9\u30c8\u306e\u30bf\u30a4\u30e0\u30a2\u30a6\u30c8\u3092\u56de\u907f\u3057\u307e\u3059\u3002<code>async<\/code><code>waitForAsync<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c 9 \u7ae0\u306e 2 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3001\u975e\u540c\u671f\u30c6\u30b9\u30c8\u306e\u3055\u307e\u3056\u307e\u306a\u65b9\u6cd5\u3068\u8003\u616e\u4e8b\u9805\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c9\u7ae0 \u9ad8\u5ea6\u306a\u30c6\u30b9\u30c8\u6280\u8853\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c6\u30b9\u30c8 ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c9\u7ae0:\u9ad8\u5ea6\u306a\u30c6\u30b9\u30c8\u624b\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">9.3 \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9 \u30c6\u30b9\u30c8\u306f\u3001\u5fdc\u7b54\u6642\u9593\u3001\u30ea\u30bd\u30fc\u30b9\u4f7f\u7528\u7387\u3001\u30b9\u30eb\u30fc\u30d7\u30c3\u30c8\u306a\u3069\u306e\u30e1\u30c8\u30ea\u30c3\u30af\u306b\u7126\u70b9\u3092\u5f53\u3066\u3066\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u8a55\u4fa1\u3059\u308b\u30c6\u30b9\u30c8\u65b9\u6cd5\u3067\u3059\u3002 \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067\u306f\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c6\u30b9\u30c8\u306b\u306f\u901a\u5e38\u3001\u30da\u30fc\u30b8\u306e\u8aad\u307f\u8fbc\u307f\u901f\u5ea6\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u6d41\u66a2\u3055\u3001\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf\u306a\u3069\u306e\u5074\u9762\u304c\u542b\u307e\u308c\u307e\u3059\u3002 \u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u6027\u80fd\u8a66\u9a13\u65b9\u6cd5<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d6\u30e9\u30a6\u30b6\u30fc<strong>\u958b\u767a\u8005\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3059\u308b<\/strong>: \u30d6\u30e9\u30a6\u30b6\u30fc\u5185\u958b\u767a\u8005\u30c4\u30fc\u30eb\u306b\u306f\u3001\u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\u3001\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u3001\u30e1\u30e2\u30ea\u5206\u6790\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u30d7\u30ed\u30d5\u30a1\u30a4\u30ea\u30f3\u30b0 \u30c4\u30fc\u30eb\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u7279\u6b8a\u306a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9 \u30c6\u30b9\u30c8 \u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3059\u308b<\/strong>: \u305f\u3068\u3048\u3070\u3001Lighthouse \u3068 WebPageTest \u306f\u5305\u62ec\u7684\u306a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8a55\u4fa1\u3092\u63d0\u4f9b\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30ab\u30b9\u30bf\u30e0\u30d9\u30f3\u30c1\u30de\u30fc\u30af<\/strong>: JavaScript \u307e\u305f\u306f\u305d\u306e\u4ed6\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b3\u30fc\u30c9\u30bb\u30b0\u30e1\u30f3\u30c8\u306e\u5b9f\u884c\u6642\u9593\u3092\u624b\u52d5\u3067\u6e2c\u5b9a\u3057\u307e\u3059\u3002<code>performance.now()<\/code><\/li>\n\n\n\n<li><strong>\u30b5\u30fc\u30d0\u30fc\u5074\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c6\u30b9\u30c8<\/strong>:\u305f\u3068\u3048\u3070\u3001JMeter\u307e\u305f\u306fLoadRunner\u3092\u4f7f\u7528\u3057\u3066\u3001\u8907\u6570\u306e\u30e6\u30fc\u30b6\u30fc\u306b\u3088\u308b\u540c\u6642\u30a2\u30af\u30bb\u30b9\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u3001\u30b5\u30fc\u30d0\u30fc\u306e\u51e6\u7406\u80fd\u529b\u3092\u30c6\u30b9\u30c8\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u4f7f\u3046<code>performance.now()<\/code><\/h5>\n\n\n\n<p>\u30b8\u30e3\u30d0\u30b9\u30af\u30ea\u30d7\u30c8\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>const t0 = performance.now(); \/\/ Your code here const t1 = performance.now(); console.log(`Time taken: ${t1 - t0} milliseconds.`);<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001JavaScript \u3092\u4f7f\u7528\u3057\u3066\u30b3\u30fc\u30c9\u306e\u5b9f\u884c\u6642\u9593\u3092\u6e2c\u5b9a\u3057\u307e\u3059\u3002<code>performance.now()<\/code><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u706f\u53f0\u3092\u4f7f\u3046<\/h5>\n\n\n\n<p>Lighthouse\u306f\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u542b\u3080Web\u30da\u30fc\u30b8\u306e\u54c1\u8cea\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306e\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u81ea\u52d5\u5316\u30c4\u30fc\u30eb\u3067\u3059\u3002 Chrome \u30c7\u30d9\u30ed\u30c3\u30d1\u30fc \u30c4\u30fc\u30eb\u3067\u898b\u3064\u3051\u308b\u3053\u3068\u3082\u3001\u30b9\u30bf\u30f3\u30c9\u30a2\u30ed\u30f3\u306e CLI \u30c4\u30fc\u30eb\u3068\u3057\u3066\u5b9f\u884c\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d0\u30c3\u30b7\u30e5\u30b3\u30d4\u30fc\u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>lighthouse https:\/\/your-angular-app.com<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u8907\u6570\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6307\u6a19\u3092\u542b\u3080\u30ec\u30dd\u30fc\u30c8\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u7b46\u8a18<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c6\u30b9\u30c8\u306f\u901a\u5e38\u3001\u6700\u3082\u6b63\u78ba\u306a\u7d50\u679c\u3092\u5f97\u308b\u305f\u3081\u306b\u3001\u88fd\u54c1\u304c\u30ea\u30ea\u30fc\u30b9\u306b\u8fd1\u3065\u3044\u305f\u5f8c\u3001\u307e\u305f\u306f\u3059\u3067\u306b\u30ea\u30ea\u30fc\u30b9\u3055\u308c\u305f\u5f8c\u306b\u5b9f\u884c\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u7d99\u7d9a\u7684\u306a\u30c6\u30b9\u30c8\u3068\u30c1\u30e5\u30fc\u30cb\u30f3\u30b0\u3092\u5fc5\u8981\u3068\u3059\u308b\u7d99\u7d9a\u7684\u306a\u30d7\u30ed\u30bb\u30b9\u3067\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c9\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3001\u3055\u307e\u3056\u307e\u306a\u30c4\u30fc\u30eb\u3084\u65b9\u6cd5\u306e\u4f7f\u7528\u306a\u3069\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30c6\u30b9\u30c8\u306e\u5b9f\u884c\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u7d30\u306b\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c10\u7ae0:\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981ChatGPT\u306e\u6982\u8981\u3068\u3055\u3089\u306a\u308b\u7814\u7a76<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c10\u7ae0:\u8981\u7d04\u3068\u3055\u3089\u306a\u308b\u7814\u7a76<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">10.1 \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306f\u3001\u57fa\u672c\u7684\u306a\u6982\u5ff5\u304b\u3089\u9ad8\u5ea6\u306a\u30c6\u30af\u30cb\u30c3\u30af\u307e\u3067\u3059\u3079\u3066\u3092\u30ab\u30d0\u30fc\u3059\u308b\u3001Angular\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u958b\u767a\u3068\u30c6\u30b9\u30c8\u306e\u5305\u62ec\u7684\u306a\u30ac\u30a4\u30c9\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u3092\u76ee\u7684\u3068\u3057\u3066\u3044\u307e\u3059\u3002 \u5358\u4f53\u30c6\u30b9\u30c8\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 \u30c6\u30b9\u30c8\u3001\u30b5\u30fc\u30d3\u30b9\u3068 HTTP \u30c6\u30b9\u30c8\u3001\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9 (E2E) \u30c6\u30b9\u30c8\u3001\u304a\u3088\u3073\u975e\u540c\u671f\u30c6\u30b9\u30c8\u3084\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9 \u30c6\u30b9\u30c8\u306a\u3069\u306e\u9ad8\u5ea6\u306a\u30c6\u30b9\u30c8\u624b\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4e3b\u306a\u30cf\u30a4\u30e9\u30a4\u30c8<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u57fa\u672c\u6982\u5ff5<\/strong>: \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30c6\u30b9\u30c8\u306e\u57fa\u672c\u3068 Angular \u30c6\u30b9\u30c8\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u3068\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c6\u30b9\u30c8<\/strong>:Angular\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u65b9\u6cd5\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3002<\/li>\n\n\n\n<li>\u30b5\u30fc\u30d3\u30b9\u3068 HTTP \u306e\u30c6\u30b9\u30c8 : \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u5bfe\u8a71\u3059\u308b\u30b5\u30fc\u30d3\u30b9\u3068&nbsp;<strong>HTTP<\/strong>&nbsp;\u8981\u6c42\u3092\u30c6\u30b9\u30c8\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30a8\u30f3\u30c9&nbsp;<strong>\u30c4\u30fc \u30a8\u30f3\u30c9 (E2E)<\/strong>&nbsp;\u30c6\u30b9\u30c8 : \u5305\u62ec\u7684\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3 \u30ec\u30d9\u30eb\u306e\u30c6\u30b9\u30c8\u3092\u5b9f\u65bd\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u9ad8\u5ea6\u306a\u30c6\u30b9\u30c8\u624b\u6cd5<\/strong>: \u975e\u540c\u671f\u30c6\u30b9\u30c8\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9 \u30c6\u30b9\u30c8\u306e\u307b\u304b\u3001\u3088\u308a\u8907\u96d1\u306a\u30c6\u30b9\u30c8\u306e\u305f\u3081\u306b\u3055\u307e\u3056\u307e\u306a\u30c4\u30fc\u30eb\u3068\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3068\u30c6\u30b9\u30c8<\/strong>: \u81ea\u52d5\u30c6\u30b9\u30c8\u306e\u305f\u3081\u306b\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3 \u30d7\u30ed\u30bb\u30b9\u306b\u30c6\u30b9\u30c8\u3092\u7d71\u5408\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u7d50\u679c\u3068\u5229\u76ca<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u89d2\u5ea6\u30c6\u30b9\u30c8\u306e\u57fa\u672c\u3068\u9ad8\u5ea6\u306a\u6982\u5ff5\u3092\u7fd2\u5f97\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u4fdd\u5b88\u53ef\u80fd\u3067\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a\u30c6\u30b9\u30c8 \u30b1\u30fc\u30b9\u3092\u8a18\u8ff0\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u3055\u307e\u3056\u307e\u306a\u30c4\u30fc\u30eb\u3068\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3001\u30c6\u30b9\u30c8\u306e\u52b9\u7387\u3068\u54c1\u8cea\u3092\u5411\u4e0a\u3055\u305b\u308b\u65b9\u6cd5\u3092\u5b66\u3073\u307e\u3057\u305f\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">10.2 \u3055\u3089\u306a\u308b\u7814\u7a76\u306e\u305f\u3081\u306e\u53c2\u8003\u6587\u732e<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u516c\u5f0f\u306eAngular\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8:Angular<\/strong>\u30c6\u30b9\u30c8\u306e\u6700\u3082\u5305\u62ec\u7684\u3067\u4fe1\u983c\u3067\u304d\u308b\u30ac\u30a4\u30c9\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30b8\u30e3\u30b9\u30df\u30f3\u3068\u30ab\u30eb\u30de\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/strong>:\u3053\u308c\u30892\u3064\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306fAngular\u30c6\u30b9\u30c8\u3067\u983b\u7e41\u306b\u4f7f\u7528\u3055\u308c\u3001\u305d\u308c\u3089\u3092\u7406\u89e3\u3059\u308b\u3053\u3068\u306f\u30c6\u30b9\u30c8\u3092\u3088\u308a\u6df1\u304f\u7406\u89e3\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u7d99\u7d9a\u7684\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30c4\u30fc\u30eb\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/strong>:\u81ea\u52d5\u30c6\u30b9\u30c8\u3092\u3088\u308a\u9069\u5207\u306b\u7d71\u5408\u3059\u308b\u305f\u3081\u306eTravis CI\u3001Jenkins\u306a\u3069\u3002<\/li>\n\n\n\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u95a2\u9023\u306e\u8cc7\u6599<\/strong>: Google \u306e Web Dev \u30c4\u30fc\u30eb\u3084 Lighthouse \u30c4\u30fc\u30eb\u306e\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306a\u3069\u3002<\/li>\n\n\n\n<li><strong>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30d5\u30a9\u30fc\u30e9\u30e0<\/strong>:\u30b9\u30bf\u30c3\u30af\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc\u3084Reddit\u306a\u3069\u306eAngular\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3067\u3001\u554f\u984c\u3092\u89e3\u6c7a\u3057\u3001\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u5b66\u3076\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u4e3b\u306a\u5185\u5bb9\u3068\u5b66\u7fd2\u6210\u679c\u3092\u8981\u7d04\u3057\u3001\u3055\u3089\u306b\u5b66\u7fd2\u3059\u308b\u305f\u3081\u306e\u53c2\u8003\u8cc7\u6599\u3092\u63d0\u4f9b\u3059\u308b\u7b2c10\u7ae0\u306e\u5185\u5bb9\u3067\u3059\u3002 \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u304c\u3001Angular\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u30c6\u30b9\u30c8\u306e\u3059\u3079\u3066\u306e\u5074\u9762\u3092\u7fd2\u5f97\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u3053\u3068\u3092\u9858\u3063\u3066\u3044\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"\u5229\u7528\u8005\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c10\u7ae0:\u3055\u3089\u306a\u308b\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9ChatGPT\u306e\u8981\u7d04\u3068\u3055\u3089\u306a\u308b\u7814\u7a76<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c10\u7ae0:\u8981\u7d04\u3068\u3055\u3089\u306a\u308b\u7814\u7a76<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">10.3 \u305d\u306e\u4ed6\u306e\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u89d2\u5ea6\u30c6\u30b9\u30c8\u306e\u57fa\u672c\u3068\u9ad8\u5ea6\u306a\u6982\u5ff5\u3092\u7fd2\u5f97\u3059\u308b\u3053\u3068\u306f\u3001\u7d99\u7d9a\u7684\u306a\u5b66\u7fd2\u30d7\u30ed\u30bb\u30b9\u3067\u3059\u3002 \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u304c\u63d0\u4f9b\u3059\u308b\u3082\u306e\u306b\u52a0\u3048\u3066\u3001\u30c8\u30d4\u30c3\u30af\u3092\u3088\u308a\u6df1\u304f\u7406\u89e3\u3057\u3001\u7fd2\u5f97\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u4ed6\u306e\u591a\u304f\u306e\u30ea\u30bd\u30fc\u30b9\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u5968\u3055\u308c\u308b\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b9\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/strong>\n<ul class=\"wp-block-list\">\n<li>Pluralsight\u3001Udemy\u3001Coursera\u306a\u3069\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u306f\u3001\u9ad8\u54c1\u8cea\u306eAngular\u30c6\u30b9\u30c8\u30b3\u30fc\u30b9\u304c\u305f\u304f\u3055\u3093\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5c02\u9580\u66f8<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u300cAngular Testing and Debugging\u300d\u3084\u300cPro Angular 9\u300d\u306a\u3069\u306e\u66f8\u7c4d\u306b\u306f\u3001\u30c6\u30b9\u30c8\u306b\u95a2\u3059\u308b\u5c02\u7528\u306e\u7ae0\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30e6\u30fc\u30c1\u30e5\u30fc\u30d6\u3068\u30dd\u30c3\u30c9\u30ad\u30e3\u30b9\u30c8<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u591a\u304f\u306e\u5c02\u9580\u5bb6\u3084\u958b\u767a\u8005\u304c\u3001YouTube\u3084\u30dd\u30c3\u30c9\u30ad\u30e3\u30b9\u30c8\u3067\u7d4c\u9a13\u3084\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u5171\u6709\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/strong>\n<ul class=\"wp-block-list\">\n<li>GitHub\u3067Angular\u3092\u4f7f\u7528\u3057\u3066\u3044\u304f\u3064\u304b\u306e\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u53c2\u52a0\u307e\u305f\u306f\u8abf\u67fb\u3059\u308b\u3068\u3001\u5b9f\u969b\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u30c6\u30b9\u30c8\u30b1\u30fc\u30b9\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30d6\u30ed\u30b0\u3068\u8a18\u4e8b<\/strong>\n<ul class=\"wp-block-list\">\n<li>Medium\u3001Dev.to\u3001\u304a\u3088\u3073\u500b\u4eba\u306e\u30d6\u30ed\u30b0\u306b\u306f\u3001Angular\u30c6\u30b9\u30c8\u306b\u95a2\u3059\u308b\u8a18\u4e8b\u304c\u305f\u304f\u3055\u3093\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30a6\u30a7\u30d3\u30ca\u30fc<\/strong>\n<ul class=\"wp-block-list\">\n<li>Angular\u307e\u305f\u306f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306b\u53c2\u52a0\u3057\u3001\u30a6\u30a7\u30d3\u30ca\u30fc\u306b\u53c2\u52a0\u3057\u3001\u4ef2\u9593\u3068\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u3092\u7bc9\u304d\u307e\u3057\u3087\u3046\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u516c\u5f0f API \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/strong>\n<ul class=\"wp-block-list\">\n<li>Angular\u306e\u516c\u5f0fWeb\u30b5\u30a4\u30c8\u306b\u306f\u3001\u6700\u3082\u6a29\u5a01\u306e\u3042\u308b\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9\u3067\u3042\u308b\u591a\u6570\u306eAPI\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5b9f\u8df5\u7684\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u6f14\u7fd2<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5b66\u3076\u305f\u3081\u306e\u6700\u826f\u306e\u65b9\u6cd5\u306f\u3001\u5b9f\u8df5\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u30c6\u30b9\u30c8\u306b\u3064\u3044\u3066\u5b66\u3093\u3060\u3053\u3068\u3092\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u9069\u7528\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30b3\u30fc\u30c9\u306e\u30ec\u30d3\u30e5\u30fc\u3068\u6bd4\u8f03<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4ed6\u306e\u4eba\u306e\u30b3\u30fc\u30c9\u3092\u30ec\u30d3\u30e5\u30fc\u3057\u305f\u308a\u3001\u81ea\u5206\u306e\u30b3\u30fc\u30c9\u3092\u4ed6\u306e\u4eba\u3068\u6bd4\u8f03\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u3067\u3001\u591a\u304f\u306e\u65b0\u3057\u3044\u3053\u3068\u3092\u5b66\u3076\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u696d\u754c\u306e\u52d5\u5411\u306b\u6ce8\u610f\u3092\u6255\u3044\u7d9a\u3051\u308b<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u95a2\u9023\u3059\u308b\u30cb\u30e5\u30fc\u30b9\u30d5\u30a3\u30fc\u30c9\u3084\u30d6\u30ed\u30b0\u3092\u8cfc\u8aad\u3057\u3066\u3001\u6700\u65b0\u306e\u30c4\u30fc\u30eb\u3001\u30e9\u30a4\u30d6\u30e9\u30ea\u3001\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u6700\u65b0\u306e\u72b6\u614b\u306b\u4fdd\u3061\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u7b46\u8a18<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u73fe\u5728\u306e\u30ec\u30d9\u30eb\u3068\u30cb\u30fc\u30ba\u306b\u5408\u3063\u305f\u30ea\u30bd\u30fc\u30b9\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/li>\n\n\n\n<li>1\u7a2e\u985e\u306e\u30ea\u30bd\u30fc\u30b9\u3060\u3051\u306b\u9650\u5b9a\u3059\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u591a\u69d8\u306a\u5b66\u7fd2\u30b9\u30bf\u30a4\u30eb\u306e\u65b9\u304c\u52b9\u7387\u7684\u3067\u3042\u308b\u3053\u3068\u304c\u3088\u304f\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c10\u7ae0\u306e\u6700\u5f8c\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3001Angular\u30c6\u30b9\u30c8\u306b\u3064\u3044\u3066\u3055\u3089\u306b\u5b66\u3076\u305f\u3081\u306e\u3055\u307e\u3056\u307e\u306a\u30ea\u30bd\u30fc\u30b9\u3068\u63d0\u6848\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u306b\u5c02\u5ff5\u3057\u3066\u3044\u307e\u3059\u3002 \u3046\u307e\u304f\u3044\u3051\u3070\u3001\u3053\u306e\u60c5\u5831\u306f\u3042\u306a\u305f\u304c\u89d2\u5ea6\u30c6\u30b9\u30c8\u3067\u3088\u308a\u9ad8\u3044\u30ec\u30d9\u30eb\u306b\u5230\u9054\u3059\u308b\u306e\u3092\u52a9\u3051\u308b\u3067\u3057\u3087\u3046\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3001\u307e\u305f\u306f\u3055\u3089\u306b\u8aac\u660e\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u77e5\u3089\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u30c6\u30b9\u30c8\u30c1 &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-3029","post","type-post","status-publish","format-standard","hentry","category-material"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3029"}],"version-history":[{"count":1,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3029\/revisions"}],"predecessor-version":[{"id":3030,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3029\/revisions\/3030"}],"wp:attachment":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}