{"id":3044,"date":"2023-10-28T15:27:14","date_gmt":"2023-10-28T06:27:14","guid":{"rendered":"https:\/\/edu.ujhb.org\/?p=3044"},"modified":"2023-10-28T15:27:14","modified_gmt":"2023-10-28T06:27:14","slug":"angular-rest-api-%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%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=3044","title":{"rendered":"Angular Rest API \u30a2\u30af\u30bb\u30b9\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 RestAPI \u30a2\u30af\u30bb\u30b9 \u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c1\u7ae0:\u306f\u3058\u3081\u306b<\/h2>\n\n\n\n<p>1.1 \u306a\u305cRestAPI\u304c\u5fc5\u8981\u306a\u306e\u304b 1.2 Angular \u3068 RestAPI<br>\u306e\u95a2\u4fc2<br>1.3 \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u76ee\u7684\u3068\u524d\u63d0\u6761\u4ef6<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0: Angular \u74b0\u5883\u306e\u6e96\u5099<\/h2>\n\n\n\n<p>2.1 Node.js \u3068 npm<br>\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb 2.2 Angular \u30d7\u30ed\u30b8\u30a7\u30af\u30c8<br>\u306e\u4f5c\u6210 2.3 Angular CLI \u306e\u57fa\u790e<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 3 \u7ae0: RestAPI \u306e\u57fa\u672c<\/h2>\n\n\n\n<p>3.1 RestAPI<br>\u3068\u306f 3.2 HTTP\u30e1\u30bd\u30c3\u30c9<br>3.3 API\u30ec\u30b9\u30dd\u30f3\u30b9\u3068\u30b9\u30c6\u30fc\u30bf\u30b9\u30b3\u30fc\u30c9<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 4 \u7ae0: Angular \u306e HTTP \u30af\u30e9\u30a4\u30a2\u30f3\u30c8<\/h2>\n\n\n\n<p>4.1 HttpClient \u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u7d39\u4ecb4.2<br>GET \u30ea\u30af\u30a8\u30b9\u30c8\u306e\u9001\u4fe14.3 POST \u30ea\u30af\u30a8\u30b9\u30c8\u306e\u9001\u4fe14.4<br><br>\u30a8\u30e9\u30fc\u51e6\u7406<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 5 \u7ae0: RESTful API \u3068\u5bfe\u8a71\u3059\u308b\u305f\u3081\u306e\u4e00\u822c\u7684\u306a\u624b\u6cd5<\/h2>\n\n\n\n<p>5.1 \u4f7f\u7528Observables<br>5.2 \u4f7f\u7528Promises<br>5.3 \u4f7f\u7528Async\/Await<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c6\u7ae0 \u5b9f\u52d9\u4e8b\u4f8b<\/h2>\n\n\n\n<p>6.1 \u30b7\u30f3\u30d7\u30eb\u306a\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\u3092\u4f5c\u6210\u3059\u308b6.2<br>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 API \u3068\u306e\u5bfe\u8a71<br>6.3 \u30c7\u30fc\u30bf\u306e\u30d0\u30a4\u30f3\u30c9\u3068\u66f4\u65b0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 7 \u7ae0: \u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3068\u627f\u8a8d<\/h2>\n\n\n\n<p>7.1 JWT\u306b\u3088\u308b\u8a8d\u8a3c<br>HTTPS<br>\u3092\u4f7f\u7528\u3057\u305f7.2 7.3 \u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u30ea\u30bd\u30fc\u30b9\u5171\u6709(CORS)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 8 \u7ae0: \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h2>\n\n\n\n<p>8.1 \u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u306e\u4f7f\u75288.2<br>\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u75658.3<br>\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3068\u30bd\u30fc\u30c8<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 9 \u7ae0: \u30c6\u30b9\u30c8\u3068\u30c7\u30d0\u30c3\u30b0<\/h2>\n\n\n\n<p>9.1 Postman\u3092\u4f7f\u7528\u3057\u305fAPI\u30c6\u30b9\u30c8 9.2 Angular \u3067\u306e\u5358\u4f53\u30c6\u30b9\u30c8<br><br>9.3 \u30c7\u30d0\u30c3\u30b0\u306e\u30d2\u30f3\u30c8<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c10\u7ae0:\u307e\u3068\u3081\u3068\u3055\u3089\u306a\u308b\u5b66\u7fd2<\/h2>\n\n\n\n<p>10.1 \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306f\u3001<br>10.2 \u3055\u3089\u306a\u308b\u7814\u7a76\u306e\u305f\u3081\u306e\u53c2\u8003\u6587\u732e\u3092\u307e\u3068\u3081\u3066\u3044\u307e\u3059<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u6b21\u306b\u3001\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u7ae0\u3054\u3068\u3001\u30bb\u30af\u30b7\u30e7\u30f3\u3054\u3068\u306b\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u5404\u5fdc\u7b54\u306f\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3092\u8a73\u7d30\u306b\u8aac\u660e\u3059\u308b\u3060\u3051\u3067\u3059\u3002 \u6982\u8981\u304c\u30cb\u30fc\u30ba\u3092\u6e80\u305f\u3057\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304b\u3089\u3001\u8a73\u7d30\u306a\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u4f5c\u6210\u3092\u958b\u59cb\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c1\u7ae0:\u306f\u3058\u3081\u306b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.1 \u306a\u305cRestAPI\u304c\u5fc5\u8981\u306a\u306e\u304b?<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u73fe\u4ee3\u306eWeb\u958b\u767a\u3067\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u5206\u96e2\u304c\u307e\u3059\u307e\u3059\u4e00\u822c\u7684\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002 \u3053\u306e\u5206\u96e2\u306b\u3088\u308a\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u8005\u306f\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3068\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u306b\u96c6\u4e2d\u3057\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u958b\u767a\u8005\u306f\u30c7\u30fc\u30bf\u51e6\u7406\u3068\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u306b\u96c6\u4e2d\u3067\u304d\u307e\u3059\u3002 \u8efd\u91cf\u306eWeb\u30b5\u30fc\u30d3\u30b9\u901a\u4fe1\u30d7\u30ed\u30c8\u30b3\u30eb\u3068\u3057\u3066\u3001RestAPI(Representational State Transfer API)\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30c7\u30fc\u30bf\u5bfe\u8a71\u306e\u6a19\u6e96\u7684\u306a\u65b9\u6cd5\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>Rest API\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306fHTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u4ecb\u3057\u3066\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u901a\u4fe1\u3057\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u307e\u305f\u306f\u9001\u4fe1\u3067\u304d\u307e\u3059\u3002 \u30b7\u30f3\u30d7\u30eb\u3067\u52b9\u7387\u7684\u3001\u304b\u3064\u4fdd\u5b88\u3068\u62e1\u5f35\u304c\u5bb9\u6613\u3067\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u3001Angular\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067RestAPI\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u65b9\u6cd5\u3092\u7fd2\u5f97\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306f\u5c0e\u5165\u90e8\u3067\u3042\u308b\u305f\u3081\u3001\u5177\u4f53\u7684\u306a\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\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.2 Angular\u3068RestAPI\u306e\u95a2\u4fc2<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular \u306f\u3001HTTP \u8981\u6c42\u7528\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u542b\u3080\u8c4a\u5bcc\u306a\u30e9\u30a4\u30d6\u30e9\u30ea \u30bb\u30c3\u30c8\u3092\u4f7f\u7528\u3057\u3066\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3068\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001Angular \u306f RestAPI \u3068\u306e\u5bfe\u8a71\u306b\u6700\u9069\u3067\u3059\u3002<code>HttpClient<\/code><\/p>\n\n\n\n<p>Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 \u30b5\u30fc\u30d0\u30fc\u3078\u306e HTTP \u8981\u6c42\u3092\u7c21\u5358\u306b\u958b\u59cb\u3057\u3001\u8fd4\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3092\u51e6\u7406\u3067\u304d\u307e\u3059\u3002 \u3053\u306e\u30c7\u30fc\u30bf\u306f\u901a\u5e38JSON\u5f62\u5f0f\u3067\u3042\u308a\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u7c21\u5358\u306b\u4f7f\u7528\u304a\u3088\u3073\u8868\u793a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>Angular \u306f\u3001\u57fa\u672c\u7684\u306a HTTP \u8981\u6c42\u6a5f\u80fd\u3092\u63d0\u4f9b\u3059\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u8981\u6c42\u3068\u5fdc\u7b54\u306e\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30c8\u3001\u30a8\u30e9\u30fc\u51e6\u7406\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3082\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u6a5f\u80fd\u306b\u3088\u308a\u3001Angular \u3068 RestAPI \u306e\u76f8\u4e92\u4f5c\u7528\u304c\u3088\u308a\u5f37\u529b\u3067\u67d4\u8edf\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ \u5f15\u5165HttpClient\u6a21\u5757 import { HttpClient } from '@angular\/common\/http'; \/\/ \u5728\u6784\u9020\u51fd\u6570\u4e2d\u6ce8\u5165HttpClient\u670d\u52a1 constructor(private http: HttpClient) { } \/\/ \u4f7f\u7528HttpClient\u53d1\u9001GET\u8bf7\u6c42 this.http.get('https:\/\/api.example.com\/items').subscribe(data =&gt; { console.log(data); });<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001Angular \u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066 GET \u8981\u6c42\u3092\u9001\u4fe1\u3059\u308b\u65b9\u6cd5\u306e\u7c21\u5358\u306a\u4f8b\u3067\u3059\u3002<code>HttpClient<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c 1 \u7ae0\u306e 2 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.3 \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u76ee\u7684\u3068\u524d\u63d0\u6761\u4ef6<\/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\u3001Angular \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067 RestAPI \u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u65b9\u6cd5\u3092\u8aac\u660e\u3059\u308b\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\u3002 \u57fa\u672c\u304b\u3089\u59cb\u3081\u3066\u3001\u5b9f\u969b\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3084\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3078\u3068\u9032\u3093\u3067\u3044\u304d\u307e\u3059\u3002 \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u7d4c\u9a13\u304c\u3042\u308b\u4eba\u3001\u7279\u306b\u3059\u3067\u306bAngular\u306e\u57fa\u672c\u306b\u7cbe\u901a\u3057\u3066\u3044\u3066\u3001JavaScript\u306e\u7d4c\u9a13\u304c\u3042\u308b\u4eba\u3092\u5bfe\u8c61\u3068\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u958b\u59cb\u3059\u308b\u524d\u306b\u3001\u6b21\u306e\u524d\u63d0\u6761\u4ef6\u3092\u6e80\u305f\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML\u3001CSS\u3001JavaScript\u306e\u57fa\u790e\u77e5\u8b58<\/li>\n\n\n\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u3001\u30b5\u30fc\u30d3\u30b9\u306a\u3069\u306e Angular \u306e\u57fa\u672c\u6982\u5ff5\u3092\u7406\u89e3\u3059\u308b<\/li>\n\n\n\n<li>HTTP\u30d7\u30ed\u30c8\u30b3\u30eb\u3068RESTAPI\u306b\u3064\u3044\u3066\u7c21\u5358\u306b\u7406\u89e3\u3059\u308b<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u57fa\u790e\u3092\u307e\u3060\u304a\u6301\u3061\u3067\u306a\u3044\u5834\u5408\u306f\u3001\u307e\u305a\u95a2\u9023\u3059\u308b\u57fa\u672c\u7684\u306a\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u53d7\u8b1b\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u3053\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306f\u4e3b\u306b\u5165\u9580\u3068\u6e96\u5099\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\u7b2c 1 \u7ae0\u306e 3 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u7b2c1\u7ae0\u306e\u3059\u3079\u3066\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u7b2c2\u7ae0\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3092\u7d9a\u3051\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0: Angular \u74b0\u5883\u306e\u6e96\u5099<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.1 Node.js \u3068 npm \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 \u3067\u958b\u767a\u3092\u958b\u59cb\u3059\u308b\u524d\u306b\u3001\u958b\u767a\u74b0\u5883\u306b Node .js \u3068 npm (\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\u306fJavaScript\u30e9\u30f3\u30bf\u30a4\u30e0\u74b0\u5883\u3067\u3042\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u975e\u5e38\u306b\u5f79\u7acb\u3064\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u30c4\u30fc\u30eb\u306e\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3082\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>npm\u306f\u3001Node .js\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u7ba1\u7406\u3059\u308bNode.js\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u3067\u3059\u3002 Angular CLI(\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb)\u3082npm\u3092\u4ecb\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u308b\u305f\u3081\u3001\u30b7\u30b9\u30c6\u30e0\u306bNode.js\u3068npm\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u307e\u305a\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u307e\u305f\u306f\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u958b\u304d\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5165\u529b\u3057\u3066\u3001Node.js\u3068npm\u304c\u3059\u3067\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>node -v npm -v<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30b3\u30de\u30f3\u30c9\u304c\u30d0\u30fc\u30b8\u30e7\u30f3\u756a\u53f7\u3092\u8fd4\u3059\u5834\u5408\u3001\u30ce\u30fc\u30c9 .js \u3068 npm \u306f\u65e2\u306b\u30b7\u30b9\u30c6\u30e0\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001Node.js\u306e\u516c\u5f0fWeb\u30b5\u30a4\u30c8\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3001\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u306e<a href=\"https:\/\/nodejs.org\/\">Node.js<\/a>\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3068\u3001npm\u304c\u4e00\u7dd2\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u4e0a\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3092\u518d\u5ea6\u5b9f\u884c\u3057\u3066\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u6210\u529f\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\u7b2c2\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.2 Angular \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Node.js \u3068 npm \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u3089\u3001Angular \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\u3092\u958b\u59cb\u3059\u308b\u6e96\u5099\u304c\u6574\u3044\u307e\u3059\u3002 Angular CLI(\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9)\u306f\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u521d\u671f\u5316\u3001\u958b\u767a\u3001\u69cb\u7bc9\u3001\u304a\u3088\u3073\u4fdd\u5b88\u3059\u308b\u305f\u3081\u306e\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u30c4\u30fc\u30eb\u3067\u3059\u3002 \u3053\u306e\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u65b0\u3057\u3044 Angular \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u3059\u3070\u3084\u304f\u751f\u6210\u3057\u305f\u308a\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u3001\u30b5\u30fc\u30d3\u30b9\u306a\u3069\u3092\u8ffd\u52a0\u3057\u305f\u308a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular CLI \u3092\u4f7f\u7528\u3057\u3066\u65b0\u3057\u3044 Angular \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u5b66\u7fd2\u3057\u307e\u3059\u3002 \u3053\u306e\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306f\u3001\u4ee5\u964d\u306e\u7ae0\u3067RestAPI\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306e\u57fa\u790e\u3068\u3057\u3066\u6a5f\u80fd\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u307e\u305a\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u307e\u305f\u306f\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u3092\u958b\u304d\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066AngularCLI\u3092\u30b0\u30ed\u30fc\u30d0\u30eb\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm install -g @angular\/cli<\/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\u65b0\u3057\u3044 Angular \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>ng new my-angular-app<\/code><\/p>\n\n\n\n<p>\u3053\u3053\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u540d\u524d\u304c\u3042\u308a\u3001\u597d\u304d\u306a\u3088\u3046\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<code>my-angular-app<\/code><\/p>\n\n\n\n<p>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\u4e2d\u306b\u3001CLI\u306fAngular\u30eb\u30fc\u30c8\u3092\u8ffd\u52a0\u3059\u308b\u304b\u3069\u3046\u304b\u3001\u304a\u3088\u3073\u8ffd\u52a0\u3059\u308b\u30b9\u30bf\u30a4\u30eb(CSS\u3001SCSS\u3001LESS\u306a\u3069)\u3092\u5c0b\u306d\u307e\u3059\u3002 \u5fc5\u8981\u306b\u5fdc\u3058\u3066\u304a\u9078\u3073\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u4f5c\u6210\u3055\u308c\u305f\u3089\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>cd my-angular-app<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3067\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>ng serve<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u3067\u30d6\u30e9\u30a6\u30b6\u3067\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u65b0\u3057\u304f\u4f5c\u6210\u3055\u308c\u305fAngular\u30a2\u30d7\u30ea\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<code>http:\/\/localhost:4200\/<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c 2 \u7ae0\u306e 2 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<p>2 \/ 2<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.3 Angular CLI\u306e\u57fa\u672c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular CLI\u306fAngular\u958b\u767a\u7528\u306e\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u3067\u3042\u308a\u3001\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3001\u30b5\u30fc\u30d3\u30b9\u306a\u3069\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u3055\u307e\u3056\u307e\u306a\u69cb\u6210\u8981\u7d20\u3092\u751f\u6210\u3059\u308b\u305f\u3081\u306b\u3082\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002 Angular CLI\u306e\u57fa\u672c\u7684\u306a\u30b3\u30de\u30f3\u30c9\u3068\u64cd\u4f5c\u3092\u7406\u89e3\u3059\u308b\u3053\u3068\u306f\u3001\u52b9\u7387\u7684\u306aAngular\u958b\u767a\u306b\u975e\u5e38\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u305d\u306e\u5f8c\u306e\u958b\u767a\u4f5c\u696d\u306b\u5f79\u7acb\u3064\u3044\u304f\u3064\u304b\u306e\u4e00\u822c\u7684\u306a Angular CLI \u30b3\u30de\u30f3\u30c9\u3068\u64cd\u4f5c\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d3\u30eb\u30c9 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f<\/strong>\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u65b0\u3057\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<br>\u3092\u751f\u6210\u3057\u307e\u3059\u3002 bashCopy \u30b3\u30fc\u30c9\u307e\u305f\u306f\u7701\u7565\u5f62: bashCopy \u30b3\u30fc\u30c9<code>ng generate component my-component&nbsp;<\/code><code>ng g c my-component<\/code><\/li>\n\n\n\n<li><strong>\u30d3\u30eb\u30c9<\/strong>&nbsp;\u30b5\u30fc\u30d3\u30b9\u306f\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u65b0\u3057\u3044\u30b5\u30fc\u30d3\u30b9<br>\u3092\u751f\u6210\u3057\u307e\u3059: bashCopy \u30b3\u30fc\u30c9 (\u7565\u3057\u3066 bashCopy \u30b3\u30fc\u30c9)<code>ng generate service my-service&nbsp;<\/code><code>ng g s my-service<\/code><\/li>\n\n\n\n<li>\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066<br>Angular \u30a2\u30d7\u30ea\u3092\u30d3\u30eb\u30c9\u3059\u308b<strong>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u30d3\u30eb\u30c9<\/strong>\u3059\u308b\u3068\u3001\u30c7\u30d7\u30ed\u30a4\u7528\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u542b\u3080\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002 bashCopy \u30b3\u30fc\u30c9<code>dist\/<\/code><code>ng build<\/code><\/li>\n\n\n\n<li>\u30c6\u30b9\u30c8\u306e\u5b9f\u884c \u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u5358\u4f53<strong>\u30c6\u30b9\u30c8<\/strong><br>\u3092\u5b9f\u884c\u3057\u307e\u3059: bashCopy \u30b3\u30fc\u30c9<code>ng test<\/code><\/li>\n\n\n\n<li>\u4f9d\u5b58\u95a2\u4fc2\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u8ffd\u52a0\u3059\u308b \u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001Angular \u30de\u30c6\u30ea\u30a2\u30eb \u30e9\u30a4\u30d6\u30e9\u30ea<br>\u3092<strong>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f9d\u5b58\u95a2\u4fc2<\/strong>\u3068\u3057\u3066\u8ffd\u52a0\u3057\u307e\u3059\u3002 bashCopy \u30b3\u30fc\u30c9<code>ng add @angular\/material<\/code><\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306f\u3001Angular CLI \u304c\u63d0\u4f9b\u3059\u308b\u6a5f\u80fd\u306e\u307b\u3093\u306e\u4e00\u90e8\u3067\u3059\u3002 \u3053\u308c\u3089\u306e\u57fa\u672c\u7684\u306a\u30b3\u30de\u30f3\u30c9\u306b\u6163\u308c\u3066\u304a\u304f\u3068\u3001Angular\u3092\u3088\u308a\u52b9\u679c\u7684\u306b\u958b\u767a\u3059\u308b\u306e\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\u306f\u3001\u7b2c 2 \u7ae0\u306e 3 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u7b2c2\u7ae0\u306e\u3059\u3079\u3066\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002 \u3088\u308d\u3057\u3051\u308c\u3070\u3001\u7b2c3\u7ae0\u306e\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 3 \u7ae0: RestAPI \u306e\u57fa\u672c<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.1 RestAPI\u3068\u306f?<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>RestAPI(Representational State Transfer API)\u306f\u3001HTTP\u30d7\u30ed\u30c8\u30b3\u30eb\u306e\u4e0a\u306b\u69cb\u7bc9\u3055\u308c\u305f\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u901a\u4fe1\u4ed5\u69d8\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u3055\u307e\u3056\u307e\u306a\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8(\u901a\u5e38\u306f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9)\u304c\u3001GET\u3001POST\u3001PUT\u3001DELETE\u306a\u3069\u306e\u6a19\u6e96HTTP\u30e1\u30bd\u30c3\u30c9\u3092\u4ecb\u3057\u3066\u5bfe\u8a71\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>RestAPI \u306e\u4e2d\u5fc3\u7684\u306a\u8003\u3048\u65b9\u306f Resource \u3067\u3042\u308a\u3001\u5404 URL \u306f\u30ea\u30bd\u30fc\u30b9\u3092\u8868\u3057\u307e\u3059\u3002 HTTP \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u3053\u308c\u3089\u306e\u30ea\u30bd\u30fc\u30b9\u306b\u5bfe\u3057\u3066 GET\u3001POST\u3001PUT\u3001DELETE \u306a\u3069\u306e\u3055\u307e\u3056\u307e\u306a\u64cd\u4f5c\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>RestAPI \u306f\u901a\u5e38\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u7c21\u5358\u306b\u4f7f\u7528\u3067\u304d\u308b JSON \u307e\u305f\u306f XML \u5f62\u5f0f\u3067\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u307e\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u3001RestAPI\u306e\u57fa\u672c\u3092\u7406\u89e3\u3059\u308b\u3053\u3068\u306f\u3001\u30d8\u30c3\u30c9\u30ec\u30b9\u958b\u767a\u306e\u9375\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u4e3b\u306bRestAPI\u306e\u57fa\u672c\u6982\u5ff5\u3092\u7d39\u4ecb\u3057\u3001\u7279\u5b9a\u306e\u30b3\u30fc\u30c9\u4f8b\u306f\u3042\u308a\u307e\u305b\u3093\u3002 \u305f\u3060\u3057\u3001\u4e00\u822c\u7684\u306a RestAPI HTTP GET \u8981\u6c42\u3068\u5fdc\u7b54\u306e\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTTP GET\u30ea\u30af\u30a8\u30b9\u30c8vbnetCopy<\/strong>\u30b3\u30fc\u30c9<code>GET \/users\/1 HTTP\/1.1 Host: api.example.com<\/code><\/li>\n\n\n\n<li>HTTP \u304c cssCopy \u30b3\u30fc\u30c9<strong>\u306b\u5fdc\u7b54\u3059\u308b<\/strong><code>HTTP\/1.1 200 OK Content-Type: application\/json { \"id\": 1, \"name\": \"John Doe\", \"email\": \"john.doe@example.com\" }<\/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\u7b2c3\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3.2 HTTP \u30e1\u30bd\u30c3\u30c9<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>HTTP(HyperText Transfer Protocol)\u306f\u3001HTML\u30d5\u30a1\u30a4\u30eb\u306a\u3069\u306e\u30cf\u30a4\u30d1\u30fc\u30c6\u30ad\u30b9\u30c8\u3092\u8ee2\u9001\u3059\u308b\u305f\u3081\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5c64\u30d7\u30ed\u30c8\u30b3\u30eb\u3067\u3059\u3002 Restful API \u3067\u306f\u3001HTTP \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30ea\u30bd\u30fc\u30b9\u306b\u5bfe\u3059\u308b\u3055\u307e\u3056\u307e\u306a\u64cd\u4f5c\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u3053\u308c\u3089\u306eHTTP\u30e1\u30bd\u30c3\u30c9\u3068\u305d\u306e\u4f7f\u7528\u76ee\u7684\u3092\u7406\u89e3\u3059\u308b\u3053\u3068\u306f\u3001RestAPI\u3092\u7fd2\u5f97\u3059\u308b\u305f\u3081\u306e\u57fa\u672c\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u3053\u3067\u306f\u3001\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b HTTP \u30e1\u30bd\u30c3\u30c9\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>GET<\/strong>: \u30ea\u30bd\u30fc\u30b9\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>POST:<\/strong>&nbsp;\u65b0\u3057\u3044\u30ea\u30bd\u30fc\u30b9\u306e\u4f5c\u6210\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>PUT<\/strong>: \u65e2\u5b58\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u66f4\u65b0\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>DELETE:<\/strong>&nbsp;\u30ea\u30bd\u30fc\u30b9\u3092\u524a\u9664\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u57fa\u672c\u7684\u306a\u30e1\u30bd\u30c3\u30c9\u4ee5\u5916\u306b\u3082\u3001PATCH(\u30ea\u30bd\u30fc\u30b9\u3092\u90e8\u5206\u7684\u306b\u66f4\u65b0\u3059\u308b)\u3001HEAD(\u30ea\u30bd\u30fc\u30b9\u306e\u30e1\u30bf\u60c5\u5831\u3092\u53d6\u5f97\u3059\u308b)\u306a\u3069\u306eHTTP\u30e1\u30bd\u30c3\u30c9\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u4e3b\u306b\u3053\u306e4\u3064\u306e\u57fa\u672c\u7684\u306a\u30e1\u30bd\u30c3\u30c9\u306b\u7126\u70b9\u3092\u5f53\u3066\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001JavaScript \u306e Fetch API \u3092\u3055\u307e\u3056\u307e\u306a HTTP \u30e1\u30bd\u30c3\u30c9\u306b\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u306e\u7c21\u5358\u306a\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>GET\u30ea\u30af\u30a8\u30b9\u30c8javascript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/strong><code>fetch('https:\/\/api.example.com\/items\/1') .then(response =&gt; response.json()) .then(data =&gt; console.log(data));<\/code><\/li>\n\n\n\n<li><strong>POST\u30ea\u30af\u30a8\u30b9\u30c8javascript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/strong><code>fetch('https:\/\/api.example.com\/items', { method: 'POST', headers: { 'Content-Type': 'application\/json' }, body: JSON.stringify({name: 'New Item'}) }) .then(response =&gt; response.json()) .then(data =&gt; console.log(data));<\/code><\/li>\n\n\n\n<li><strong>PUT\u30ea\u30af\u30a8\u30b9\u30c8javascript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/strong><code>fetch('https:\/\/api.example.com\/items\/1', { method: 'PUT', headers: { 'Content-Type': 'application\/json' }, body: JSON.stringify({name: 'Updated Item'}) }) .then(response =&gt; response.json()) .then(data =&gt; console.log(data));<\/code><\/li>\n\n\n\n<li><strong>DELETE \u30ea\u30af\u30a8\u30b9\u30c8<\/strong>&nbsp;javascript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>fetch('https:\/\/api.example.com\/items\/1', { method: 'DELETE' }) .then(response =&gt; response.json()) .then(data =&gt; console.log(data));<\/code><\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u4f8b\u306f\u3001RestAPI \u64cd\u4f5c\u306b\u3055\u307e\u3056\u307e\u306a HTTP \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u3092\u793a\u3057\u3066\u3044\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\u7b2c3\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3.3 API\u30ec\u30b9\u30dd\u30f3\u30b9\u3068\u30b9\u30c6\u30fc\u30bf\u30b9\u30b3\u30fc\u30c9<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>HTTP \u8981\u6c42\u3092 RestAPI \u306b\u9001\u4fe1\u3059\u308b\u3068\u3001\u30b5\u30fc\u30d0\u30fc\u306f\u5fdc\u7b54\u3092\u8fd4\u3057\u307e\u3059\u3002 \u3053\u306e\u5fdc\u7b54\u306f\u3001\u901a\u5e38\u3001\u72b6\u614b\u30b3\u30fc\u30c9\u3001\u5fdc\u7b54\u30d8\u30c3\u30c0\u30fc\u3001\u304a\u3088\u3073\u5fdc\u7b54\u672c\u6587\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002 \u72b6\u614b\u30b3\u30fc\u30c9\u306f\u3001\u8981\u6c42\u306e\u7d50\u679c\u3092\u793a\u3059 3 \u6841\u306e\u6570\u5b57\u3067\u3059\u3002 \u4e00\u822c\u7684\u306a HTTP \u30b9\u30c6\u30fc\u30bf\u30b9 \u30b3\u30fc\u30c9\u3068\u305d\u306e\u610f\u5473\u3092\u7406\u89e3\u3059\u308b\u3053\u3068\u306f\u3001\u554f\u984c\u306e\u8a3a\u65ad\u3084 API \u306e\u52d5\u4f5c\u306e\u7406\u89e3\u306b\u5f79\u7acb\u3064\u305f\u3081\u3001\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u4e00\u822c\u7684\u306a HTTP \u30b9\u30c6\u30fc\u30bf\u30b9 \u30b3\u30fc\u30c9\u306b\u306f\u3001\u6b21\u306e\u3088\u3046\u306a\u3082\u306e\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>200 OK:<\/strong>&nbsp;\u8981\u6c42\u306f\u6210\u529f\u3057\u3001\u5fdc\u7b54\u672c\u6587\u306b\u306f\u901a\u5e38\u3001\u8981\u6c42\u306e\u7d50\u679c\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>201 Created<\/strong>: \u30ea\u30bd\u30fc\u30b9\u306f\u6b63\u5e38\u306b\u4f5c\u6210\u3055\u308c\u3001\u901a\u5e38\u306f POST \u8981\u6c42\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>204 No Content<\/strong>: \u8981\u6c42\u306f\u6210\u529f\u3057\u307e\u3059\u304c\u3001\u901a\u5e38\u306f DELETE \u8981\u6c42\u306b\u4f7f\u7528\u3055\u308c\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u8fd4\u3055\u308c\u307e\u305b\u3093\u3002<\/li>\n\n\n\n<li><strong>400 Bad Request<\/strong>: \u8981\u6c42\u306e\u5f62\u5f0f\u304c\u6b63\u3057\u304f\u306a\u3044\u304b\u3001\u8981\u6c42\u3092\u51e6\u7406\u3067\u304d\u307e\u305b\u3093\u3002<\/li>\n\n\n\n<li><strong>401 Unauthorized<\/strong>: \u8981\u6c42\u306b\u8a8d\u8a3c\u8cc7\u683c\u60c5\u5831\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/li>\n\n\n\n<li><strong>403 Forbidden<\/strong>: \u30b5\u30fc\u30d0\u30fc\u306f\u8981\u6c42\u3092\u8a8d\u8b58\u3057\u307e\u3059\u304c\u3001\u5b9f\u884c\u3092\u62d2\u5426\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>404 Not Found<\/strong>: \u8981\u6c42\u3055\u308c\u305f\u30ea\u30bd\u30fc\u30b9\u306f\u5b58\u5728\u3057\u307e\u305b\u3093\u3002<\/li>\n\n\n\n<li><strong>500 Internal Server Error: \u5185\u90e8\u30b5\u30fc\u30d0\u30fc \u30a8\u30e9\u30fc<\/strong>\u3067\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>JavaScript \u306e Fetch API \u3092\u4f7f\u7528\u3057\u3066 GET \u8981\u6c42\u3092\u9001\u4fe1\u3057\u3001\u3055\u307e\u3056\u307e\u306a\u72b6\u614b\u30b3\u30fc\u30c9\u3092\u51e6\u7406\u3059\u308b\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>javascript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>fetch('https:\/\/api.example.com\/items\/1') .then(response =&gt; { if (response.status === 200) { return response.json(); } else if (response.status === 404) { throw new Error('Item not found'); } else { throw new Error('An error occurred'); } }) .then(data =&gt; console.log(data)) .catch(error =&gt; console.error(error));<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u6700\u521d\u306b\u5fdc\u7b54\u306e\u30b9\u30c6\u30fc\u30bf\u30b9\u30b3\u30fc\u30c9\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002 \u72b6\u614b\u30b3\u30fc\u30c9\u304c 200 \u306e\u5834\u5408\u3001\u5fdc\u7b54\u672c\u6587\u306e JSON \u30c7\u30fc\u30bf\u3092\u89e3\u6790\u3057\u307e\u3059\u3002 \u72b6\u614b\u30b3\u30fc\u30c9\u304c 404 \u306e\u5834\u5408\u306f\u3001&#8221;\u30a2\u30a4\u30c6\u30e0\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093&#8221; \u3068\u3044\u3046\u30a8\u30e9\u30fc\u304c\u30b9\u30ed\u30fc\u3055\u308c\u307e\u3059\u3002 \u305d\u306e\u4ed6\u306e\u30b9\u30c6\u30fc\u30bf\u30b9\u30b3\u30fc\u30c9\u306b\u3064\u3044\u3066\u306f\u3001&#8221;\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f&#8221; \u3068\u3044\u3046\u30a8\u30e9\u30fc\u3092\u30b9\u30ed\u30fc\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\u7b2c3\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u7b2c3\u7ae0\u306e\u3059\u3079\u3066\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002 \u3082\u3057\u3088\u308d\u3057\u3051\u308c\u3070\u3001\u7b2c4\u7ae0\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3092\u7d9a\u3051\u305f\u3044\u3068\u601d\u3044\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 4 \u7ae0: Angular \u306e HTTP \u30af\u30e9\u30a4\u30a2\u30f3\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 HttpClient \u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u5c0e\u5165<\/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 HTTP \u3092\u901a\u4fe1\u3059\u308b\u6700\u3082\u4e00\u822c\u7684\u306a\u65b9\u6cd5\u306f\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u3053\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u306f\u3001HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3057\u3001HTTP\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306e\u8c4a\u5bcc\u306a\u30e1\u30bd\u30c3\u30c9\u3068\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u958b\u59cb\u3059\u308b\u524d\u306b\u3001\u3053\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3092 Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u5c0e\u5165\u3057\u3066\u69cb\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>HttpClient<\/code><code>HttpClient<\/code><\/p>\n\n\n\n<p><code>HttpClient<\/code>\u30e2\u30b8\u30e5\u30fc\u30eb\u306f Angular \u306e\u4e00\u90e8\u3067\u3059\u304c\u3001\u3059\u3079\u3066\u306e Angular \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u542b\u307e\u308c\u3066\u3044\u308b\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002 \u3057\u305f\u304c\u3063\u3066\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u624b\u52d5\u3067\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u307e\u305a\u3001Angular\u30d7\u30ed\u30b8\u30a7\u30af\u30c8(\u901a\u5e38\u306f\u30d5\u30a1\u30a4\u30eb\u5185)\u3067\u305d\u308c\u3092\u898b\u3064\u3051\u3066\u304b\u3089\u3001\u6b21\u306e\u3088\u3046\u306b\u53d6\u308a\u8fbc\u307f\u307e\u3059\u3002<code>AppModule<\/code><code>src\/app\/app.module.ts<\/code><code>HttpClientModule<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ \u5f15\u5165HttpClientModule import { HttpClientModule } from '@angular\/common\/http'; @NgModule({ declarations: [ \/\/ ...\u60a8\u7684\u5176\u4ed6\u7ec4\u4ef6\u3001\u6307\u4ee4\u3001\u7ba1\u9053 ], imports: [ \/\/ ...\u60a8\u7684\u5176\u4ed6\u6a21\u5757 HttpClientModule \/\/ \u6dfb\u52a0HttpClientModule\u5230imports\u6570\u7ec4 ], bootstrap: [AppComponent] }) export class AppModule { }<\/code><\/p>\n\n\n\n<p>\u305d\u3046\u3059\u308b\u3053\u3068\u3067\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u3067\u30b5\u30fc\u30d3\u30b9\u3092\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<code>HttpClient<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001HTTP \u8981\u6c42\u3092\u884c\u3046\u5fc5\u8981\u304c\u3042\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u305f\u306f\u30b5\u30fc\u30d3\u30b9\u3067\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165\u3092\u4f7f\u7528\u3057\u3066\u6b21\u306e\u3088\u3046\u306b\u53d6\u308a\u8fbc\u307f\u307e\u3059\u3002<code>HttpClient<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { HttpClient } from '@angular\/common\/http'; constructor(private http: HttpClient) { }<\/code><\/p>\n\n\n\n<p>\u30e2\u30b8\u30e5\u30fc\u30eb\u3092 Angular \u30a2\u30d7\u30ea\u306b\u6b63\u5e38\u306b\u5c0e\u5165\u3057\u305f\u306e\u3067\u3001HTTP \u8981\u6c42\u306b\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f7f\u7528\u3059\u308b\u6e96\u5099\u304c\u6574\u3044\u307e\u3057\u305f\u3002<code>HttpClient<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c4\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 GET\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u9001\u4fe1<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u5c0e\u5165\u3055\u308c\u305f\u3089\u3001HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u4f7f\u7528\u3092\u958b\u59cb\u3067\u304d\u307e\u3059\u3002 \u6700\u3082\u4e00\u822c\u7684\u306a\u30bf\u30a4\u30d7\u306e\u8981\u6c42\u306e 1 \u3064\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b GET \u8981\u6c42\u3067\u3059\u3002 Angular \u3067\u306f\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066 GET \u8981\u6c42\u3092\u9001\u4fe1\u3067\u304d\u307e\u3059\u3002<code>HttpClient<\/code><code>HttpClient<\/code><code>get<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u8fd4\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3067\u304d\u308b Observable \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u3057\u307e\u3059\u3002 Observable \u306f RxJS \u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4e2d\u6838\u3068\u306a\u308b\u6982\u5ff5\u3067\u3042\u308a\u3001\u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306e\u30a8\u30ec\u30ac\u30f3\u30c8\u3067\u8aad\u307f\u3084\u3059\u3044\u65b9\u6cd5\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<code>get<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067 GET \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3059\u308b\u7c21\u5358\u306a\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Component, OnInit } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; @Component({ selector: 'app-my-component', template: '&lt;div&gt;{{ data }}&lt;\/div&gt;' }) export class MyComponent implements OnInit { data: any; constructor(private http: HttpClient) { } ngOnInit(): void { \/\/ \u53d1\u9001GET\u8bf7\u6c42 this.http.get('https:\/\/api.example.com\/items\/1').subscribe( (response) =&gt; { \/\/ \u6210\u529f\u5904\u7406\u903b\u8f91 this.data = response; }, (error) =&gt; { \/\/ \u9519\u8bef\u5904\u7406\u903b\u8f91 console.error('There was an error!', error); } ); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30d5\u30c3\u30af\u3067GET\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3057\u307e\u3059\u3002 \u3053\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u306eObservable\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3057\u3001\u30c7\u30fc\u30bf\u304c\u6b63\u5e38\u306b\u8fd4\u3055\u308c\u305f\u3068\u304d\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u66f4\u65b0\u3057\u3001\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u305f\u3068\u304d\u306b\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u51fa\u529b\u3057\u307e\u3057\u305f\u3002<code>ngOnInit<\/code><code>data<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u3053\u306e\u30c7\u30fc\u30bf\u3092\u4f7f\u7528\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\u7b2c4\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.3 POST\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u9001\u4fe1<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306eGET\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u52a0\u3048\u3066\u3001POST\u30ea\u30af\u30a8\u30b9\u30c8\u306f\u901a\u5e38\u3001\u30b5\u30fc\u30d0\u30fc\u306b\u30c7\u30fc\u30bf\u3092\u9001\u4fe1\u3057\u3066\u65b0\u3057\u3044\u30ea\u30bd\u30fc\u30b9\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 Angular \u3067\u306f\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066 POST \u8981\u6c42\u3092\u9001\u4fe1\u3067\u304d\u307e\u3059\u3002<code>HttpClient<\/code><code>post<\/code><\/p>\n\n\n\n<p>\u30e1\u30bd\u30c3\u30c9\u3068\u540c\u69d8\u306b\u3001\u30e1\u30bd\u30c3\u30c9\u3082 Observable \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u3057\u3001\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u8fd4\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3084\u30a8\u30e9\u30fc\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3067\u304d\u307e\u3059\u3002<code>get<\/code><code>post<\/code><\/p>\n\n\n\n<p>POST \u8981\u6c42\u3092\u9001\u4fe1\u3059\u308b\u3068\u304d\u306f\u3001\u901a\u5e38\u3001\u8981\u6c42\u672c\u6587\u306b\u3044\u304f\u3064\u304b\u306e\u30c7\u30fc\u30bf\u3092\u542b\u3081\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u901a\u5e38\u3001\u3053\u306e\u30c7\u30fc\u30bf\u306f JSON \u5f62\u5f0f\u3067\u3059\u304c\u3001\u30d5\u30a9\u30fc\u30e0 \u30c7\u30fc\u30bf\u306a\u3069\u306e\u4ed6\u306e\u5f62\u5f0f\u306b\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001Angular\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067POST\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3059\u308b\u7c21\u5358\u306a\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Component, OnInit } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; @Component({ selector: 'app-my-component', template: '&lt;div&gt;{{ message }}&lt;\/div&gt;' }) export class MyComponent implements OnInit { message: string; constructor(private http: HttpClient) { } ngOnInit(): void { \/\/ \u8981\u53d1\u9001\u7684\u6570\u636e const payload = { name: 'New Item', description: 'Description of new item' }; \/\/ \u53d1\u9001POST\u8bf7\u6c42 this.http.post('https:\/\/api.example.com\/items', payload).subscribe( (response) =&gt; { \/\/ \u6210\u529f\u5904\u7406\u903b\u8f91 this.message = 'Item successfully created!'; }, (error) =&gt; { \/\/ \u9519\u8bef\u5904\u7406\u903b\u8f91 this.message = 'There was an error!'; console.error('There was an error!', error); } ); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u9001\u4fe1\u3059\u308b\u30c7\u30fc\u30bf\u3092\u542b\u3080 \u3068\u3044\u3046\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001\u4f7f\u7528\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u304cPOST\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3057\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u672c\u6587\u3068\u3057\u3066\u6a5f\u80fd\u3057\u307e\u3059\u3002<code>payload<\/code><code>HttpClient<\/code><code>post<\/code><code>payload<\/code><\/p>\n\n\n\n<p>GET\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u4f8b\u3068\u540c\u69d8\u306b\u3001\u3053\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u306eObservable\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3057\u3001\u30c7\u30fc\u30bf\u304c\u6b63\u5e38\u306b\u8fd4\u3055\u308c\u305f\u3068\u304d\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u66f4\u65b0\u3057\u3001\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u305f\u3068\u304d\u306b\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u51fa\u529b\u3057\u307e\u3057\u305f\u3002<code>message<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c4\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>ChatGPT\u3092\u7d9a\u3051\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.4 \u30a8\u30e9\u30fc\u51e6\u7406<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u884c\u3046\u969b\u306b\u3001\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u969c\u5bb3\u3001\u7121\u52b9\u306a\u30ea\u30af\u30a8\u30b9\u30c8\u30d1\u30e9\u30e1\u30fc\u30bf\u3001\u30b5\u30fc\u30d0\u30fc\u5185\u306e\u30a8\u30e9\u30fc\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u304c\u5e38\u306b\u3042\u308a\u307e\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u3001\u3053\u308c\u3089\u306e\u30a8\u30e9\u30fc\u3092\u6b63\u3057\u304f\u51e6\u7406\u3059\u308b\u3053\u3068\u304c\u975e\u5e38\u306b\u91cd\u8981\u3067\u3059\u3002 \u5e78\u3044\u306a\u3053\u3068\u306b\u3001Angular \u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u3067\u3042\u308a\u306a\u304c\u3089\u5f37\u529b\u306a\u30a8\u30e9\u30fc\u51e6\u7406\u30e1\u30ab\u30cb\u30ba\u30e0\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<code>HttpClient<\/code><\/p>\n\n\n\n<p>HTTP \u8981\u6c42\u304c\u5931\u6557\u3059\u308b\u3068\u3001\u30a8\u30e9\u30fc Observable \u304c\u8fd4\u3055\u308c\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30a8\u30e9\u30fc\u306f\u3001\u30e1\u30bd\u30c3\u30c9\u3067\u30a8\u30e9\u30fc\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u30ad\u30e3\u30c3\u30c1\u3067\u304d\u307e\u3059\u3002<code>HttpClient<\/code><code>subscribe<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306e\u30a8\u30e9\u30fc\u51e6\u7406\u306e\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Component, OnInit } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; @Component({ selector: 'app-my-component', template: '&lt;div&gt;{{ message }}&lt;\/div&gt;' }) export class MyComponent implements OnInit { message: string; constructor(private http: HttpClient) { } ngOnInit(): void { \/\/ \u53d1\u9001GET\u8bf7\u6c42 this.http.get('https:\/\/api.example.com\/items\/1').subscribe( (response) =&gt; { \/\/ \u6210\u529f\u5904\u7406\u903b\u8f91 this.message = 'Data successfully fetched!'; }, (error) =&gt; { \/\/ \u9519\u8bef\u5904\u7406\u903b\u8f91 this.message = 'There was an error!'; console.error('There was an error!', error); } ); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30e1\u30bd\u30c3\u30c9\u306b 2 \u3064\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570 (1 \u3064\u76ee\u306f\u6b63\u5e38\u306a\u5fdc\u7b54\u3092\u51e6\u7406\u3059\u308b\u95a2\u6570\u30012 \u3064\u76ee\u306f\u30a8\u30e9\u30fc\u3092\u51e6\u7406\u3059\u308b\u95a2\u6570) \u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<code>subscribe<\/code><\/p>\n\n\n\n<p>\u8981\u6c42\u304c\u6210\u529f\u3059\u308b\u3068\u3001\u6700\u521d\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u304c\u547c\u3073\u51fa\u3055\u308c\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u66f4\u65b0\u3055\u308c\u307e\u3059\u3002 \u8981\u6c42\u304c\u5931\u6557\u3059\u308b\u3068\u30012 \u756a\u76ee\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u304c\u547c\u3073\u51fa\u3055\u308c\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u66f4\u65b0\u3055\u308c\u3001\u30a8\u30e9\u30fc\u306e\u8a73\u7d30\u304c\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u51fa\u529b\u3055\u308c\u307e\u3059\u3002<code>message<\/code><code>message<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001\u305d\u308c\u306b\u5fdc\u3058\u3066\u3055\u307e\u3056\u307e\u306a\u30a8\u30e9\u30fc\u72b6\u6cc1\u306b\u5bfe\u51e6\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\u3001\u7b2c 4 \u7ae0\u306e 4 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c5\u7ae0:RestAPI\u3068\u5bfe\u8a71\u3059\u308b\u305f\u3081\u306e\u4e00\u822c\u7684\u306a\u30c6\u30af\u30cb\u30c3\u30af 1.&lt;&gt; Observables ChatGPT\u306e\u4f7f\u7528<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.1 \u30aa\u30d6\u30b6\u30fc\u30d0\u30d6\u30eb\u306e\u4f7f\u7528<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular \u3067\u306f\u3001RestAPI \u3068\u5bfe\u8a71\u3059\u308b\u305f\u3081\u306e\u91cd\u8981\u306a\u6982\u5ff5\u306f\u3001Observables \u306e\u4f7f\u7528\u3067\u3059\u3002 RxJS \u30e9\u30a4\u30d6\u30e9\u30ea\u306e Observable \u306f\u3001\u975e\u540c\u671f\u64cd\u4f5c\u3068\u30a4\u30d9\u30f3\u30c8\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u6982\u5ff5\u3067\u3059\u3002 Promise \u3068\u6bd4\u8f03\u3057\u3066\u3001Observables \u306f\u3001\u8981\u6c42\u306e\u30ad\u30e3\u30f3\u30bb\u30eb\u3001\u518d\u8a66\u884c\u3001\u30a8\u30e9\u30fc\u51e6\u7406\u306a\u3069\u3001\u3088\u308a\u67d4\u8edf\u3067\u5236\u5fa1\u6027\u306b\u512a\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>Angular \u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066 HTTP \u8981\u6c42\u3092\u9001\u4fe1\u3059\u308b\u3068\u3001Observable \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u8fd4\u3055\u308c\u307e\u3059\u3002 \u3053\u306eObservable\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3057\u3066\u3001\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30c7\u30fc\u30bf\u304c\u8fd4\u3055\u308c\u305f\u3068\u304d\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u304c\u547c\u3073\u51fa\u3055\u308c\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<code>HttpClient<\/code><\/p>\n\n\n\n<p>Observables\u3092\u4f7f\u7528\u3059\u308b\u5229\u70b9\u306f\u3001\u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3067\u304d\u308b\u3053\u3068\u3060\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002 \u307e\u305f\u3001\u8907\u6570\u306e\u30aa\u30d6\u30b6\u30fc\u30d0\u30d6\u30eb\u3092\u7d50\u5408\u3057\u305f\u308a\u3001\u6f14\u7b97\u5b50(\u3001\u3001\u306a\u3069)\u3092\u9069\u7528\u3057\u305f\u308a\u3001\u30aa\u30d6\u30b6\u30fc\u30d0\u30d6\u30eb\u3092\u5171\u6709\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<code>map<\/code><code>filter<\/code><code>switchMap<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001Observable \u3092\u4f7f\u7528\u3057\u305f HTTP GET \u30ea\u30af\u30a8\u30b9\u30c8\u306e\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Component, OnInit } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; import { catchError } from 'rxjs\/operators'; import { throwError } from 'rxjs'; @Component({ selector: 'app-my-component', template: '&lt;div&gt;{{ data }}&lt;\/div&gt;' }) export class MyComponent implements OnInit { data: any; constructor(private http: HttpClient) { } ngOnInit(): void { \/\/ \u53d1\u9001GET\u8bf7\u6c42\u5e76\u8ba2\u9605Observable this.http.get('https:\/\/api.example.com\/items\/1') .pipe( catchError(this.handleError) ) .subscribe( (response) =&gt; { \/\/ \u6210\u529f\u5904\u7406\u903b\u8f91 this.data = response; } ); } \/\/ \u9519\u8bef\u5904\u7406\u51fd\u6570 private handleError(error: any) { console.error('An error occurred:', error); return throwError('Something went wrong; please try again later.'); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001RxJS \u6f14\u7b97\u5b50\u3092\u4f7f\u7528\u3057\u3066\u3001\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u30a8\u30e9\u30fc\u3092\u51e6\u7406\u3057\u3066\u3044\u307e\u3059\u3002 \u8981\u6c42\u304c\u5931\u6557\u3059\u308b\u3068\u3001\u95a2\u6570\u304c\u547c\u3073\u51fa\u3055\u308c\u3001\u3053\u3053\u306b\u30a8\u30e9\u30fc\u51e6\u7406\u30ed\u30b8\u30c3\u30af\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002<code>catchError<\/code><code>handleError<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001Observables\u306e\u6a5f\u80fd\u3092\u5229\u7528\u3057\u3066\u3001\u3088\u308a\u8907\u96d1\u3067\u67d4\u8edf\u306aHTTP\u30ea\u30af\u30a8\u30b9\u30c8\u64cd\u4f5c\u3092\u884c\u3046\u3053\u3068\u304c\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\u7b2c5\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c5\u7ae0:RestAPI\u3068\u5bfe\u8a71\u3059\u308b\u305f\u3081\u306e\u4e00\u822c\u7684\u306a\u30c6\u30af\u30cb\u30c3\u30af 2.&lt;&gt; PromisesChatGPT\u306e\u4f7f\u7528<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.2 Promise \u306e\u4f7f\u7528<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular \u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067 Observable \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8fd4\u3057\u307e\u3059\u304c\u3001Promise \u306e\u4f7f\u7528\u306b\u6163\u308c\u3066\u3044\u308b\u30b7\u30ca\u30ea\u30aa\u3067\u4f7f\u7528\u3059\u308b\u305f\u3081\u306b Promise \u306b\u5909\u63db\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002 Promise \u306f\u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u6982\u5ff5\u3067\u3042\u308a\u3001\u4fdd\u7559\u4e2d\u3001\u5c65\u884c\u6e08\u307f\u3001\u62d2\u5426\u306e 3 \u3064\u306e\u72b6\u614b\u304c\u3042\u308a\u307e\u3059\u3002<code>HttpClient<\/code><\/p>\n\n\n\n<p>Promise \u306f Observables \u306b\u6bd4\u3079\u3066\u6a5f\u80fd\u304c\u6bd4\u8f03\u7684\u5c11\u306a\u3044\u3067\u3059\u304c\u3001\u4e00\u822c\u7684\u306b\u306f\u7406\u89e3\u3057\u3084\u3059\u304f\u3001\u4f7f\u3044\u3084\u3059\u3044\u3067\u3059\u3002 Promise \u304c\u89e3\u6c7a\u307e\u305f\u306f\u62d2\u5426\u3055\u308c\u308b\u3068\u3001\u72b6\u614b\u3092\u5909\u66f4\u3067\u304d\u306a\u304f\u306a\u308b\u305f\u3081\u3001\u5834\u5408\u306b\u3088\u3063\u3066\u306f\u7ba1\u7406\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001Promise \u3092\u4f7f\u7528\u3057\u305f HTTP GET \u30ea\u30af\u30a8\u30b9\u30c8\u306e\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Component, OnInit } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; @Component({ selector: 'app-my-component', template: '&lt;div&gt;{{ data }}&lt;\/div&gt;' }) export class MyComponent implements OnInit { data: any; constructor(private http: HttpClient) { } ngOnInit(): void { \/\/ \u53d1\u9001GET\u8bf7\u6c42\u5e76\u5c06Observable\u8f6c\u6362\u4e3aPromise this.http.get('https:\/\/api.example.com\/items\/1').toPromise() .then((response) =&gt; { \/\/ \u6210\u529f\u5904\u7406\u903b\u8f91 this.data = response; }) .catch((error) =&gt; { \/\/ \u9519\u8bef\u5904\u7406\u903b\u8f91 console.error('There was an error!', error); }); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001Observable \u3092 Promise \u306b\u5909\u63db\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u307e\u3057\u305f\u3002 \u6b21\u306b\u3001\u6210\u529f\u3057\u305f\u5fdc\u7b54\u3092\u51e6\u7406\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3068\u3001\u30a8\u30e9\u30fc\u3092\u51e6\u7406\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<code>toPromise()<\/code><code>then()<\/code><code>catch()<\/code><\/p>\n\n\n\n<p>Promise \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30ad\u30e3\u30f3\u30bb\u30eb\u3084\u6f14\u7b97\u5b50\u306e\u4f7f\u7528\u306a\u3069\u3001Observable \u304c\u63d0\u4f9b\u3059\u308b\u9ad8\u5ea6\u306a\u6a5f\u80fd\u306e\u4e00\u90e8\u304c\u5931\u308f\u308c\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u305f\u3060\u3057\u3001\u3044\u304f\u3064\u304b\u306e\u5358\u7d14\u306a\u30b7\u30ca\u30ea\u30aa\u3084\u3001Promise \u3092\u4f7f\u7528\u3059\u308b\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u7d71\u5408\u3059\u308b\u5834\u5408\u306f\u3001\u3053\u308c\u304c\u3088\u308a\u826f\u3044\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u3042\u308b\u53ef\u80fd\u6027\u304c\u3042\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\u7b2c5\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c5\u7ae0:RestAPI\u3068\u5bfe\u8a71\u3059\u308b\u305f\u3081\u306e\u4e00\u822c\u7684\u306a\u30c6\u30af\u30cb\u30c3\u30af 3.&lt;&gt; Async\/AwaitChatGPT\u306e\u4f7f\u7528<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.3 async\/await \u306e\u4f7f\u7528<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Async\/Await \u306f\u3001\u975e\u540c\u671f\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u3092\u7c21\u7565\u5316\u3059\u308b\u6700\u65b0\u306e JavaScript \u6a5f\u80fd\u3067\u3059\u3002 \u3053\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u306b\u3088\u308a\u3001\u975e\u540c\u671f\u30b3\u30fc\u30c9\u3092\u540c\u671f\u7684\u306b\u8a18\u8ff0\u3067\u304d\u308b\u305f\u3081\u3001\u30b3\u30fc\u30c9\u306e\u53ef\u8aad\u6027\u3068\u4fdd\u5b88\u6027\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002 Async\/Await \u306f\u3001Promise \u3092\u4f7f\u7528\u3059\u308b\u969b\u306e\u98fe\u308a\u6c17\u306e\u306a\u3044\u4ee3\u66ff\u624b\u6bb5\u3068\u3057\u3066\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>Angular \u3067\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u305f\u306f\u30b5\u30fc\u30d3\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u3067 and \u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306f\u3001Observable \u3092 Promise \u306b\u5909\u63db\u3059\u308b\u969b\u306b\u3088\u304f\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<code>async<\/code><code>await<\/code><code>HttpClient<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067 HTTP GET \u8981\u6c42\u306b Async\/Await \u3092\u4f7f\u7528\u3059\u308b\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Component, OnInit } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; @Component({ selector: 'app-my-component', template: '&lt;div&gt;{{ data }}&lt;\/div&gt;' }) export class MyComponent implements OnInit { data: any; constructor(private http: HttpClient) { } async ngOnInit(): Promise&lt;void&gt; { try { \/\/ \u4f7f\u7528await\u7b49\u5f85Promise\u89e3\u6790 const response = await this.http.get('https:\/\/api.example.com\/items\/1').toPromise(); \/\/ \u6210\u529f\u5904\u7406\u903b\u8f91 this.data = response; } catch (error) { \/\/ \u9519\u8bef\u5904\u7406\u903b\u8f91 console.error('There was an error!', error); } } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3001\u30e1\u30bd\u30c3\u30c9\u306b\u30e9\u30d9\u30eb\u3092\u4ed8\u3051\u308b\u3053\u3068\u304b\u3089\u59cb\u3081\u307e\u3059\u3002 \u6b21\u306b\u3001GET \u8981\u6c42\u3092\u5f85\u6a5f\u3059\u308b Promise \u89e3\u6c7a\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002 \u8981\u6c42\u304c\u6210\u529f\u3059\u308b\u3068\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u66f4\u65b0\u3055\u308c\u307e\u3059\u3002 \u8981\u6c42\u304c\u5931\u6557\u3057\u305f\u5834\u5408\u306f\u3001\u30a8\u30e9\u30fc\u3092\u30ad\u30e3\u30d7\u30c1\u30e3\u3057\u3066\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u51fa\u529b\u3057\u307e\u3059\u3002<code>ngOnInit<\/code><code>async<\/code><code>await<\/code><code>await<\/code><code>data<\/code><\/p>\n\n\n\n<p>Async\/Await \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u7279\u306b\u8907\u6570\u306e\u9023\u7d9a\u3057\u305f\u975e\u540c\u671f\u64cd\u4f5c\u3092\u5b9f\u884c\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u306b\u3001\u30b3\u30fc\u30c9\u304c\u3088\u308a\u7c21\u6f54\u3067\u7406\u89e3\u3057\u3084\u3059\u304f\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\u7b2c5\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044 \u7b2c6\u7ae0 \u5b9f\u52d9\u4e8b\u4f8b 1.&lt;&gt; \u7c21\u5358\u306a\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0ChatGPT\u306e\u4f5c\u6210<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6.1 \u30b7\u30f3\u30d7\u30eb\u306a\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\u3092\u4f5c\u6210\u3059\u308b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u3053\u306e\u5b9f\u969b\u306e\u30b1\u30fc\u30b9\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067 RestAPI \u3068\u5bfe\u8a71\u3059\u308b\u65b9\u6cd5\u3092\u793a\u3059\u30b7\u30f3\u30d7\u30eb\u306a\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 \u3053\u306e\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\u306b\u306f\u3001\u6b21\u306e\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u3059\u3079\u3066\u306e\u30e6\u30fc\u30b6\u30fc\u306e\u4e00\u89a7\u8868\u793a (GET \u8981\u6c42)<\/li>\n\n\n\n<li>\u500b\u3005\u306e\u30e6\u30fc\u30b6\u30fc\u306e\u8a73\u7d30\u3092\u8868\u793a\u3059\u308b (GET \u8981\u6c42)<\/li>\n\n\n\n<li>\u65b0\u3057\u3044\u30e6\u30fc\u30b6\u30fc\u3092\u8ffd\u52a0\u3059\u308b (POST \u8981\u6c42)<\/li>\n\n\n\n<li>\u30e6\u30fc\u30b6\u30fc\u60c5\u5831\u306e\u66f4\u65b0 (PUT \u8981\u6c42)<\/li>\n\n\n\n<li>\u30e6\u30fc\u30b6\u30fc\u306e\u524a\u9664 (DELETE \u8981\u6c42)<\/li>\n<\/ul>\n\n\n\n<p>\u30e2\u30c3\u30af\u3055\u308c\u305fRestAPI\u30b5\u30fc\u30d3\u30b9(JSONPlaceholder\u3084\u30cd\u30a4\u30c6\u30a3\u30d6Mock API\u306a\u3069)\u3092\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u3057\u3066\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u307e\u305a\u3001API \u3068\u5bfe\u8a71\u3059\u308b\u3059\u3079\u3066\u306e\u30ed\u30b8\u30c3\u30af\u3092\u30ab\u30d7\u30bb\u30eb\u5316\u3059\u308b Angular \u30b5\u30fc\u30d3\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Injectable } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; @Injectable({ providedIn: 'root' }) export class UserService { private apiUrl = 'https:\/\/jsonplaceholder.typicode.com\/users'; constructor(private http: HttpClient) { } \/\/ \u83b7\u53d6\u6240\u6709\u7528\u6237 getUsers() { return this.http.get(`${this.apiUrl}`); } \/\/ \u83b7\u53d6\u5355\u4e2a\u7528\u6237 getUser(id: number) { return this.http.get(`${this.apiUrl}\/${id}`); } \/\/ \u6dfb\u52a0\u65b0\u7528\u6237 addUser(user: any) { return this.http.post(`${this.apiUrl}`, user); } \/\/ \u66f4\u65b0\u7528\u6237 updateUser(id: number, user: any) { return this.http.put(`${this.apiUrl}\/${id}`, user); } \/\/ \u5220\u9664\u7528\u6237 deleteUser(id: number) { return this.http.delete(`${this.apiUrl}\/${id}`); } }<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3053\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Component, OnInit } from '@angular\/core'; import { UserService } from '.\/user.service'; @Component({ selector: 'app-user-list', template: ` &lt;div *ngFor=\"let user of users\"&gt; {{ user.name }} &lt;\/div&gt; ` }) export class UserListComponent implements OnInit { users: any[] = []; constructor(private userService: UserService) { } ngOnInit(): void { this.userService.getUsers().subscribe( (data: any[]) =&gt; { this.users = data; }, (error) =&gt; { console.error('There was an error!', error); } ); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u7c21\u5358\u306a\u4f8b\u3067\u306f\u3001\u3059\u3079\u3066\u306e\u30e6\u30fc\u30b6\u30fc\u95a2\u9023\u306e API \u8981\u6c42\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306e API \u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002 \u6b21\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u3001\u3053\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u4f7f\u7528\u3057\u3066\u3059\u3079\u3066\u306e\u30e6\u30fc\u30b6\u30fc\u3092\u53d6\u5f97\u3057\u3001\u8868\u793a\u3057\u307e\u3059\u3002<code>UserService<\/code><code>UserListComponent<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30cf\u30f3\u30ba\u30aa\u30f3 \u30b1\u30fc\u30b9\u3067\u306f\u3001\u6a5f\u80fd\u3084\u8a73\u7d30\u3092\u8ffd\u52a0\u3067\u304d\u308b\u57fa\u672c\u7684\u306a\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u63d0\u4f9b\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\u7b2c6\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c6\u7ae0:\u5b9f\u52d9\u4e8b\u4f8b 2.&lt;&gt; ChatGPT\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9API\u3068\u306e\u5bfe\u8a71<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6.2 \u30d0\u30c3\u30af\u30a8\u30f3\u30c9API\u3068\u306e\u5bfe\u8a71<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u524d\u306e\u4f8b\u3067\u306f\u3001\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3055\u308c\u305f RestAPI \u30b5\u30fc\u30d3\u30b9\u3092\u4f7f\u7528\u3057\u307e\u3057\u305f\u3002 \u305f\u3060\u3057\u3001\u5b9f\u969b\u306b\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u5b9f\u969b\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 API \u3068\u5bfe\u8a71\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u306b\u306f\u3001\u8a8d\u8a3c\u3001\u30a8\u30e9\u30fc\u51e6\u7406\u3001\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u3001\u3044\u304f\u3064\u304b\u306e\u8ffd\u52a0\u306e\u624b\u9806\u3068\u8003\u616e\u4e8b\u9805\u304c\u542b\u307e\u308c\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u5b9f\u969b\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 API \u3068\u5bfe\u8a71\u3059\u308b\u65b9\u6cd5\u3092\u63a2\u308a\u307e\u3059\u3002 \u8a8d\u8a3c\u306bJWT(JSON Web Token)\u3092\u4f7f\u7528\u3057\u3001\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u3055\u307e\u3056\u307e\u306a\u30a8\u30e9\u30fc\u3078\u306e\u5bfe\u51e6\u65b9\u6cd5\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u307e\u305a\u3001\u8a8d\u8a3c\u7528\u306e\u30d8\u30c3\u30c0\u30fc\u3092\u8ffd\u52a0\u3059\u308b\u3088\u3046\u306b\u66f4\u65b0\u3057\u307e\u3057\u305f\u3002<code>UserService<\/code><code>Authorization<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Injectable } from '@angular\/core'; import { HttpClient, HttpHeaders } from '@angular\/common\/http'; @Injectable({ providedIn: 'root' }) export class UserService { private apiUrl = 'https:\/\/your-real-api.com\/users'; private headers = new HttpHeaders({ 'Authorization': 'Bearer YOUR_ACCESS_TOKEN' }); constructor(private http: HttpClient) { } \/\/ \u83b7\u53d6\u6240\u6709\u7528\u6237 getUsers() { return this.http.get(`${this.apiUrl}`, { headers: this.headers }); } \/\/ ...\u5176\u4ed6\u65b9\u6cd5\u4fdd\u6301\u4e0d\u53d8 }<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u3068\u304d\u306b\u30a8\u30e9\u30fc\u51e6\u7406\u30ed\u30b8\u30c3\u30af\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Component, OnInit } from '@angular\/core'; import { UserService } from '.\/user.service'; @Component({ selector: 'app-user-list', template: ` &lt;div *ngFor=\"let user of users\"&gt; {{ user.name }} &lt;\/div&gt; ` }) export class UserListComponent implements OnInit { users: any[] = []; constructor(private userService: UserService) { } ngOnInit(): void { this.userService.getUsers().subscribe( (data: any[]) =&gt; { this.users = data; }, (error) =&gt; { if (error.status === 401) { \/\/ \u672a\u6388\u6743\uff0c\u8df3\u8f6c\u5230\u767b\u5f55\u9875\u9762 } else { \/\/ \u5176\u4ed6\u9519\u8bef\uff0c\u663e\u793a\u9519\u8bef\u4fe1\u606f console.error('There was an error!', error); } } ); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u6700\u521d\u306b JWT \u8a8d\u8a3c\u7528\u306e\u30d8\u30c3\u30c0\u30fc\u3092\u8ffd\u52a0\u3059\u308b\u3088\u3046\u306b\u66f4\u65b0\u3057\u307e\u3057\u305f\u3002 \u6b21\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30a8\u30e9\u30fc\u51e6\u7406\u30ed\u30b8\u30c3\u30af\u3092\u8ffd\u52a0\u3057\u307e\u3057\u305f\u3002 401(\u672a\u627f\u8a8d)\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u305f\u5834\u5408\u3001\u30ed\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u306b\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3055\u308c\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002 \u305d\u306e\u4ed6\u306e\u30a8\u30e9\u30fc\u306b\u3064\u3044\u3066\u306f\u3001\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u51fa\u529b\u3057\u307e\u3059\u3002<code>UserService<\/code><code>Authorization<\/code><code>UserListComponent<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001\u3088\u308a\u5b8c\u5168\u3067\u5b9f\u7528\u7684\u306a\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\u304c\u5f97\u3089\u308c\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\u7b2c6\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044 \u7b2c6\u7ae0 \u5b9f\u52d9\u4e8b\u4f8b 3.&lt;&gt; \u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3068ChatGPT\u306e\u66f4\u65b0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6.3 \u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3068\u66f4\u65b0<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u304a\u3044\u3066\u975e\u5e38\u306b\u91cd\u8981\u306a\u6982\u5ff5\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u72b6\u614b(\u901a\u5e38\u306fTypeScript\u30af\u30e9\u30b9\u306e\u30d7\u30ed\u30d1\u30c6\u30a3)\u3068\u30d3\u30e5\u30fc(HTML\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8)\u3092\u9023\u7d50\u3067\u304d\u307e\u3059\u3002 Angular \u306f\u3001\u88dc\u9593\u3001\u30d7\u30ed\u30d1\u30c6\u30a3 \u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3001\u30a4\u30d9\u30f3\u30c8 \u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3001\u53cc\u65b9\u5411\u30c7\u30fc\u30bf \u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u30c7\u30fc\u30bf \u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u65b9\u6cd5\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\u306b\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3068\u66f4\u65b0\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002 \u5177\u4f53\u7684\u306b\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u3092\u8ffd\u52a0\u304a\u3088\u3073\u7de8\u96c6\u3059\u308b\u305f\u3081\u306e\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u6210\u3057\u3001\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3092\u4ecb\u3057\u3066\u30d5\u30a9\u30fc\u30e0\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u72b6\u614b\u306b\u63a5\u7d9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u307e\u305a\u3001\u30e6\u30fc\u30b6\u30fc\u3092\u8ffd\u52a0\u304a\u3088\u3073\u7de8\u96c6\u3059\u308b\u305f\u3081\u306e\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>htmlCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>&lt;!-- user-form.component.html --&gt; &lt;form (ngSubmit)=\"onSubmit()\"&gt; &lt;label for=\"username\"&gt;Username:&lt;\/label&gt; &lt;input id=\"username\" [(ngModel)]=\"user.username\" name=\"username\"&gt; &lt;label for=\"email\"&gt;Email:&lt;\/label&gt; &lt;input id=\"email\" [(ngModel)]=\"user.email\" name=\"email\"&gt; &lt;button type=\"submit\"&gt;Save&lt;\/button&gt; &lt;\/form&gt;<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u5bfe\u5fdc\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ user-form.component.ts import { Component, OnInit, Input, Output, EventEmitter } from '@angular\/core'; @Component({ selector: 'app-user-form', templateUrl: '.\/user-form.component.html' }) export class UserFormComponent implements OnInit { @Input() user: any = {}; @Output() userSaved = new EventEmitter&lt;any&gt;(); constructor() { } ngOnInit(): void { } onSubmit() { this.userSaved.emit(this.user); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u3001\u30c7\u30b3\u30ec\u30fc\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066\u5165\u529b\u3092\u53d7\u3051\u53d6\u308a\u3001\u51fa\u529b\u3092\u9001\u4fe1\u3057\u307e\u3059\u3002 \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u6e21\u3055\u308c\u3001\u30d5\u30a9\u30fc\u30e0\u304c\u9001\u4fe1\u3055\u308c\u305f\u5f8c\u306e\u65b0\u3057\u3044\u30e6\u30fc\u30b6\u30fc\u30c7\u30fc\u30bf\u304c\u9001\u53d7\u4fe1\u3055\u308c\u307e\u3059\u3002<code>@Input()<\/code><code>@Output()<\/code><code>user<\/code><code>@Input()<\/code><code>@Output()<\/code><code>EventEmitter<\/code><\/p>\n\n\n\n<p>\u6700\u5f8c\u306b\u3001\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3053\u306e\u30d5\u30a9\u30fc\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\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;app-user-form [user]=\"selectedUser\" (userSaved)=\"saveUser($event)\"&gt;&lt;\/app-user-form&gt; &lt;div *ngFor=\"let user of users\" (click)=\"selectUser(user)\"&gt; {{ user.username }} &lt;\/div&gt; ` }) export class UserListComponent implements OnInit { users: any[] = []; selectedUser: any = {}; constructor(private userService: UserService) { } ngOnInit(): void { this.userService.getUsers().subscribe( (data: any[]) =&gt; { this.users = data; }, (error) =&gt; { console.error('There was an error!', error); } ); } selectUser(user: any) { this.selectedUser = user; } saveUser(user: any) { \/\/ \u4fdd\u5b58\u7528\u6237\u903b\u8f91\uff08\u8c03\u7528API\u7b49\uff09 } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u3092\u8ffd\u52a0\u304a\u3088\u3073\u7de8\u96c6\u3059\u308b\u305f\u3081\u306e\u3082\u306e\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002 \u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u3067\u306f\u3001\u3053\u306e\u30d5\u30a9\u30fc\u30e0\u3092\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u63a5\u7d9a\u3057\u307e\u3059\u3002 \u30e6\u30fc\u30b6\u30fc\u304c\u30ea\u30b9\u30c8\u5185\u306e\u30e6\u30fc\u30b6\u30fc\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u305d\u306e\u30e6\u30fc\u30b6\u30fc\u306f\u81ea\u52d5\u7684\u306b\u30d5\u30a9\u30fc\u30e0\u306b\u5165\u529b\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<code>UserFormComponent<\/code><code>UserListComponent<\/code><code>selectedUser<\/code><code>selectedUser<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u7b2c6\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c7\u7ae0:\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3068\u8a8d\u53ef 1.&lt;&gt; JWT ChatGPT\u306b\u3088\u308b\u8a8d\u8a3c<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7.1 JWT\u306b\u3088\u308b\u8a8d\u8a3c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u8a8d\u8a3c\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 API \u3068\u5bfe\u8a71\u3059\u308b\u969b\u306e\u91cd\u8981\u306a\u8003\u616e\u4e8b\u9805\u3067\u3059\u3002 JSON Web \u30c8\u30fc\u30af\u30f3 (JWT) \u306f\u3001\u30b5\u30fc\u30d0\u30fc\u304c\u6697\u53f7\u5316\u3055\u308c\u305f\u30c8\u30fc\u30af\u30f3\u3092\u751f\u6210\u3057\u3066\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u9001\u4fe1\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u4e00\u822c\u7684\u306a\u8a8d\u8a3c\u65b9\u6cd5\u3067\u3059\u3002 \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u3001\u3053\u306e\u30c8\u30fc\u30af\u30f3\u3092\u5f8c\u7d9a\u306e\u8981\u6c42\u306e\u30d8\u30c3\u30c0\u30fc\u306b\u6dfb\u4ed8\u3057\u3066\u3001\u305d\u306e ID \u3092\u8a3c\u660e\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067 JWT \u3092\u4f7f\u7528\u3057\u3066\u8a8d\u8a3c\u3059\u308b\u65b9\u6cd5\u3092\u63a2\u308a\u307e\u3059\u3002 \u5177\u4f53\u7684\u306b\u306f\u3001JWT \u30c8\u30fc\u30af\u30f3\u3092\u53d6\u5f97\u3059\u308b\u65b9\u6cd5\u3068\u3001\u305d\u308c\u3092\u5f8c\u7d9a\u306e API \u8981\u6c42\u306b\u30a2\u30bf\u30c3\u30c1\u3059\u308b\u65b9\u6cd5\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u307e\u305a\u3001\u8a8d\u8a3c\u7528\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Injectable } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; @Injectable({ providedIn: 'root' }) export class AuthService { private authUrl = 'https:\/\/your-auth-api.com\/token'; constructor(private http: HttpClient) { } \/\/ \u83b7\u53d6JWT\u4ee4\u724c login(username: string, password: string) { const payload = { username, password }; return this.http.post(this.authUrl, payload); } }<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u30ed\u30b0\u30a4\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3053\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Component } from '@angular\/core'; import { AuthService } from '.\/auth.service'; @Component({ selector: 'app-login', template: ` &lt;button (click)=\"login()\"&gt;Login&lt;\/button&gt; ` }) export class LoginComponent { constructor(private authService: AuthService) { } login() { this.authService.login('username', 'password').subscribe( (response: any) =&gt; { \/\/ \u5b58\u50a8JWT\u4ee4\u724c localStorage.setItem('access_token', response.access_token); }, (error) =&gt; { console.error('There was an error!', error); } ); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u300c\u30ed\u30b0\u30a4\u30f3\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306b\u30e1\u30bd\u30c3\u30c9\u304c\u547c\u3073\u51fa\u3055\u308c\u307e\u3059\u3002 \u3053\u306e\u30e1\u30bd\u30c3\u30c9\u3067\u306f\u3001POST \u8981\u6c42\u3092\u9001\u4fe1\u3057\u3066 JWT \u30c8\u30fc\u30af\u30f3\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002 \u30c8\u30fc\u30af\u30f3\u3092\u53d7\u4fe1\u3059\u308b\u3068\u3001\u30d6\u30e9\u30a6\u30b6\u306b\u4fdd\u5b58\u3055\u308c\u307e\u3059\u3002<code>login<\/code><code>AuthService<\/code><code>localStorage<\/code><\/p>\n\n\n\n<p>\u6700\u5f8c\u306b\u3001\u3053\u306e\u30c8\u30fc\u30af\u30f3\u304c\u5f8c\u7d9a\u306e\u3059\u3079\u3066\u306e API \u8981\u6c42\u306b\u8ffd\u52a0\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u306f\u901a\u5e38\u3001\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3067\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>import { Injectable } from '@angular\/core'; import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular\/common\/http'; @Injectable() export class AuthInterceptor implements HttpInterceptor { intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler) { const token = localStorage.getItem('access_token'); if (token) { const clonedReq = req.clone({ headers: req.headers.set('Authorization', `Bearer ${token}`) }); return next.handle(clonedReq); } else { return next.handle(req); } } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u3059\u3079\u3066\u306e\u30a2\u30a6\u30c8\u30d0\u30a6\u30f3\u30c9 HTTP \u8981\u6c42\u306b JWT \u30c8\u30fc\u30af\u30f3 (\u5b58\u5728\u3059\u308b\u5834\u5408) \u304c\u81ea\u52d5\u7684\u306b\u6dfb\u4ed8\u3055\u308c\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\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c7\u7ae0:\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3068\u8a8d\u8a3c 2.&lt;&gt; HTTPSChatGPT\u306e\u4f7f\u7528<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7.2 HTTPS\u306e\u4f7f\u7528<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306f\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 API \u3068\u5bfe\u8a71\u3059\u308b\u969b\u306e\u91cd\u8981\u306a\u8003\u616e\u4e8b\u9805\u3067\u3059\u3002 HTTPS(Hypertext Transfer Secure Protocol)\u306e\u4f7f\u7528\u306f\u3001\u8ee2\u9001\u4e2d\u306e\u30c7\u30fc\u30bf\u306e\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3092\u78ba\u4fdd\u3059\u308b\u305f\u3081\u306e\u57fa\u672c\u7684\u306a\u65b9\u6cd5\u306e1\u3064\u3067\u3059\u3002 HTTPS\u306f\u3001\u30c7\u30fc\u30bf\u306e\u6697\u53f7\u5316\u3060\u3051\u3067\u306a\u304f\u3001\u30b5\u30fc\u30d0\u30fc\u306e\u8eab\u5143\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306b\u3082\u4f7f\u7528\u3055\u308c\u308b\u305f\u3081\u3001\u4e2d\u9593\u8005\u653b\u6483\u3092\u9632\u3050\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 API \u3068\u306e\u3059\u3079\u3066\u306e\u3084\u308a\u53d6\u308a\u304c HTTPS \u7d4c\u7531\u3067\u884c\u308f\u308c\u308b\u3088\u3046\u306b\u3059\u308b\u65b9\u6cd5\u3092\u63a2\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u307b\u3068\u3093\u3069\u306e\u5834\u5408\u3001HTTPS \u304c\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u306e\u306f\u3001\u4e3b\u306b\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30c7\u30d7\u30ed\u30a4\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u306e\u8cac\u4efb\u3067\u3059\u3002 \u305f\u3060\u3057\u3001Angular \u30a2\u30d7\u30ea\u306b\u3044\u304f\u3064\u304b\u306e\u30c1\u30a7\u30c3\u30af\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u307e\u305a\u3001\u3059\u3079\u3066\u306e API URL \u304c\u6b21\u306e\u6587\u3067\u59cb\u307e\u3063\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>https:\/\/<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ user.service.ts import { Injectable } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; @Injectable({ providedIn: 'root' }) export class UserService { private apiUrl = 'https:\/\/your-secure-api.com\/users'; constructor(private http: HttpClient) { } \/\/ ...\u5176\u4ed6\u4ee3\u7801 }<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001HTTP \u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u4f5c\u6210\u3057\u3066\u3001\u3059\u3079\u3066\u306e\u9001\u4fe1\u8981\u6c42\u304c HTTPS \u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ https-check.interceptor.ts import { Injectable } from '@angular\/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular\/common\/http'; import { throwError } from 'rxjs'; import { catchError } from 'rxjs\/operators'; @Injectable() export class HttpsCheckInterceptor implements HttpInterceptor { intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler) { if (req.url.startsWith('http:\/\/')) { console.warn('Unsecure HTTP request detected. Switch to HTTPS.'); } return next.handle(req).pipe( catchError((error: HttpErrorResponse) =&gt; { \/\/ \u5176\u4ed6\u9519\u8bef\u5904\u7406\u903b\u8f91 return throwError(error); }) ); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3067\u306f\u3001\u5404\u9001\u4fe1\u8981\u6c42\u306e URL \u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002 URL \u304c \u3067\u59cb\u307e\u308b\u5834\u5408\u306f\u3001\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u8b66\u544a\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<code>http:\/\/<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u3089\u306f\u57fa\u672c\u7684\u306a\u624b\u9806\u306e\u4e00\u90e8\u3067\u3059\u304c\u3001\u7279\u306b\u958b\u767a\u4e2d\u306b\u30a2\u30d7\u30ea\u306e\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3092\u5f37\u5316\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\u7b2c7\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c 7 \u7ae0: 3.&lt;&gt; Cross-Origin Resource Sharing (CORS) ChatGPT \u306e\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3068\u627f\u8a8d<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7.3 \u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u30ea\u30bd\u30fc\u30b9\u5171\u6709(CORS)<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u30ea\u30bd\u30fc\u30b9\u5171\u6709(CORS)\u306f\u3001\u7279\u306bAngular\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9API\u304c\u7570\u306a\u308b\u30c9\u30e1\u30a4\u30f3\u540d\u3067\u30c7\u30d7\u30ed\u30a4\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u3001\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306b\u95a2\u3059\u308b\u91cd\u8981\u306a\u8003\u616e\u4e8b\u9805\u3067\u3059\u3002 CORS \u306f\u3001\u3055\u307e\u3056\u307e\u306a\u30bd\u30fc\u30b9 (\u30c9\u30e1\u30a4\u30f3\u3001\u30d7\u30ed\u30c8\u30b3\u30eb\u3001\u307e\u305f\u306f\u30dd\u30fc\u30c8) \u304b\u3089\u306e Web \u30d6\u30e9\u30a6\u30b6\u30fc\u304b\u3089\u306e\u8981\u6c42\u3092\u8a31\u53ef\u307e\u305f\u306f\u62d2\u5426\u3059\u308b\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3 \u30e1\u30ab\u30cb\u30ba\u30e0\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067 CORS \u306e\u554f\u984c\u3092\u51e6\u7406\u3057\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 API \u3068\u306e\u5b89\u5168\u306a\u5bfe\u8a71\u3092\u78ba\u4fdd\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>CORS \u306e\u51e6\u7406\u306f\u3001\u901a\u5e38\u3001\u4e3b\u306b\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u8cac\u4efb\u3067\u3059\u3002 \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306f\u3001\u7279\u5b9a\u306e\u30bd\u30fc\u30b9\u304b\u3089\u306e\u8981\u6c42\u3092\u8a31\u53ef\u3059\u308b\u305f\u3081\u306b\u3001\u9069\u5207\u306a CORS \u30dd\u30ea\u30b7\u30fc\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u305f\u3060\u3057\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u306f\u3001CORS \u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u3067\u304d\u308b\u3053\u3068\u3082\u3044\u304f\u3064\u304b\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d7\u30ed\u30ad\u30b7\u3092\u4f7f\u7528\u3059\u308b<\/strong>: \u958b\u767a\u74b0\u5883\u3067\u306f\u3001\u3059\u3079\u3066\u306e API \u30ea\u30af\u30a8\u30b9\u30c8\u3092\u5b9f\u969b\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 \u30b5\u30fc\u30d0\u30fc\u306b\u8ee2\u9001\u3059\u308b\u30d7\u30ed\u30ad\u30b7\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002 \u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u306f\u3059\u3079\u3066\u306e\u8981\u6c42\u304c\u540c\u3058\u30aa\u30ea\u30b8\u30f3\u304b\u3089\u306e\u3082\u306e\u3067\u3042\u308b\u3068\u898b\u306a\u3057\u307e\u3059\u3002 \u6b21\u306e\u69cb\u6210\u3092\u30d5\u30a1\u30a4\u30eb\u306b\u8ffd\u52a0\u3057\u307e\u3059: jsonCopy \u30b3\u30fc\u30c9\u3001\u6b21\u306b\u3001\u30d5\u30a1\u30a4\u30eb\u306b\u8ffd\u52a0\u3057\u307e\u3059: jsonCopy \u30b3\u30fc\u30c9<code>angular.json<\/code><code>{ \"serve\": { \"options\": { \"proxyConfig\": \"proxy.conf.json\" } } }&nbsp;<\/code><code>proxy.conf.json<\/code><code>{ \"\/api\": { \"target\": \"https:\/\/your-backend-server.com\", \"secure\": true, \"changeOrigin\": true } }<\/code><\/li>\n\n\n\n<li><strong>\u30d7\u30ea\u30d5\u30e9\u30a4\u30c8<\/strong>\u8981\u6c42\u306e\u51e6\u7406: \u7279\u5b9a\u306e\u7a2e\u985e\u306e\u30af\u30ed\u30b9\u30aa\u30ea\u30b8\u30f3\u8981\u6c42\u3092\u9001\u4fe1\u3059\u308b\u5834\u5408\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u306f\u6700\u521d\u306b\u30d7\u30ea\u30d5\u30e9\u30a4\u30c8\u8981\u6c42 (HTTP OPTIONS \u8981\u6c42) \u3092\u9001\u4fe1\u3057\u3066\u3001\u5b9f\u969b\u306e\u8981\u6c42\u304c\u8a31\u53ef\u3055\u308c\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30d7\u30ea\u30d5\u30e9\u30a4\u30c8\u8981\u6c42\u306f\u3001HTTP \u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3067\u51e6\u7406\u3067\u304d\u307e\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>\/\/ cors.interceptor.ts import { Injectable } from '@angular\/core'; import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular\/common\/http'; @Injectable() export class CorsInterceptor implements HttpInterceptor { intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler) { const corsReq = req.clone({ headers: req.headers.set('Access-Control-Allow-Origin', '*') }); return next.handle(corsReq); } }<\/code><\/li>\n<\/ol>\n\n\n\n<p>\u3053\u3053\u3067\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9 \u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u4e3b\u306b\u958b\u767a\u3068\u30c7\u30d0\u30c3\u30b0\u7528\u3067\u3042\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u5b9f\u969b\u306e CORS \u30dd\u30ea\u30b7\u30fc\u306f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3067\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u3001\u8a31\u53ef\u3055\u308c\u308b\u30bd\u30fc\u30b9\u306f\u3001\u5358\u306b\u3059\u3079\u3066\u306e\u30bd\u30fc\u30b9\u3092\u8a31\u53ef\u3059\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u53ef\u80fd\u306a\u9650\u308a\u5236\u9650\u3059\u308b\u5fc5\u8981\u304c\u3042\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\u7b2c7\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c8\u7ae0:\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9 1.&lt;&gt; \u30d6\u30ed\u30c3\u30ab\u30fcChatGPT\u306e\u4f7f\u7528<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8.1 \u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u306e\u4f7f\u7528<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u5927\u898f\u6a21\u3067\u8907\u96d1\u306a Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u5834\u5408\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306f\u898b\u843d\u3068\u3059\u3053\u3068\u306e\u3067\u304d\u306a\u3044\u5074\u9762\u3067\u3059\u3002 HTTP Interceptor \u306f\u3001\u9001\u53d7\u4fe1\u3055\u308c\u308b HTTP \u8981\u6c42\u3068\u5fdc\u7b54\u3092\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30c8\u3059\u308b\u305f\u3081\u306b Angular \u304c\u63d0\u4f9b\u3059\u308b\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u3067\u3059\u3002 \u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u3001\u30a8\u30e9\u30fc\u51e6\u7406\u3001\u8981\u6c42\u306e\u5909\u66f4\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u4e00\u822c\u7684\u306a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9 \u30bf\u30b9\u30af\u3092\u4e00\u5143\u5316\u3057\u3066\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u4fdd\u5b88\u5bb9\u6613\u6027\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306e\u305f\u3081\u306b\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30ad\u30e3\u30c3\u30b7\u30e5\u30d6\u30ed\u30c3\u30ab\u30fc<\/strong>: \u3053\u306e\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u306f\u3001GET \u8981\u6c42\u306e\u5fdc\u7b54\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3066\u3001\u4e0d\u8981\u306a\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u8981\u6c42\u3092\u6e1b\u3089\u3059\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>\/\/ cache.interceptor.ts import { Injectable } from '@angular\/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } from '@angular\/common\/http'; import { tap } from 'rxjs\/operators'; import { CacheService } from '.\/cache.service'; @Injectable() export class CacheInterceptor implements HttpInterceptor { constructor(private cacheService: CacheService) {} intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler) { if (req.method !== 'GET') { return next.handle(req); } const cachedResponse = this.cacheService.get(req.url); if (cachedResponse) { return cachedResponse; } return next.handle(req).pipe( tap(event =&gt; { if (event instanceof HttpResponse) { this.cacheService.put(req.url, event); } }) ); } }<\/code><\/li>\n\n\n\n<li><strong>\u30a8\u30e9\u30fc\u51e6\u7406\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc: \u3053\u306e\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc<\/strong>\u306f\u3001\u3059\u3079\u3066\u306e HTTP \u8981\u6c42\u306e\u30a8\u30e9\u30fc\u3092\u4e00\u5143\u7684\u306b\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>\/\/ error-handling.interceptor.ts import { Injectable } from '@angular\/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular\/common\/http'; import { catchError } from 'rxjs\/operators'; import { throwError } from 'rxjs'; @Injectable() export class ErrorHandlingInterceptor implements HttpInterceptor { intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler) { return next.handle(req).pipe( catchError((error: HttpErrorResponse) =&gt; { \/\/ \u96c6\u4e2d\u5904\u7406\u9519\u8bef console.error('An error occurred:', error); return throwError(error); }) ); } }<\/code><\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b\u306b\u306f\u3001\u30a2\u30d7\u30ea\u306e\u30e1\u30a4\u30f3 \u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u767b\u9332\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059 (\u901a\u5e38)\u3002<code>AppModule<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ app.module.ts import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular\/common\/http'; import { CacheInterceptor } from '.\/cache.interceptor'; import { ErrorHandlingInterceptor } from '.\/error-handling.interceptor'; @NgModule({ imports: [HttpClientModule], providers: [ { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: ErrorHandlingInterceptor, multi: true } ] }) export class AppModule { }<\/code><\/p>\n\n\n\n<p>\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001HTTP \u8981\u6c42\u3068\u5fdc\u7b54\u3092\u3088\u308a\u52b9\u679c\u7684\u306b\u7ba1\u7406\u3067\u304d\u3001\u30a2\u30d7\u30ea\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30e6\u30fc\u30b6\u30fc \u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u304c\u5411\u4e0a\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\u7b2c8\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c8\u7ae0:\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9 2.&lt;&gt; ChatGPT\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8.2 \u30ad\u30e3\u30c3\u30b7\u30e5\u30fb\u30dd\u30ea\u30b7\u30fc<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30ad\u30e3\u30c3\u30b7\u30e5\u306f\u3001\u4ee5\u524d\u306b\u53d6\u5f97\u3057\u305f\u30ea\u30bd\u30fc\u30b9\u3092\u683c\u7d0d\u3057\u3066\u518d\u5229\u7528\u3057\u3001\u30b5\u30fc\u30d0\u30fc\u306e\u8ca0\u8377\u3092\u8efd\u6e1b\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306e\u6700\u9069\u5316\u3067\u3059\u3002 Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001HTTP \u30ad\u30e3\u30c3\u30b7\u30e5\u3001\u30c7\u30fc\u30bf\u30fb\u30ad\u30e3\u30c3\u30b7\u30e5\u3001\u30a4\u30e1\u30fc\u30b8\u30fb\u30ad\u30e3\u30c3\u30b7\u30e5\u306a\u3069\u3001\u8907\u6570\u306e\u30ec\u30d9\u30eb\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u9069\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u52b9\u679c\u7684\u306a\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u3092\u5b9f\u88c5\u3057\u3066\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u65b9\u6cd5\u3092\u63a2\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>HTTP \u30ad\u30e3\u30c3\u30b7\u30e5: HTTP \u30d8\u30c3\u30c0\u30fc\u60c5\u5831\u306f\u3001<strong>\u30ad\u30e3\u30c3\u30b7\u30e5<\/strong>\u3092\u5236\u5fa1\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 \u3053\u308c\u306f\u901a\u5e38\u3001\u30b5\u30fc\u30d0\u30fc\u5074\u3067\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u304c\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306f\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u4ecb\u3057\u3066\u51e6\u7406\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>\/\/ http-cache.interceptor.ts import { Injectable } from '@angular\/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpHeaders } from '@angular\/common\/http'; @Injectable() export class HttpCacheInterceptor implements HttpInterceptor { intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler) { const httpRequest = req.clone({ headers: new HttpHeaders({ 'Cache-Control': 'no-cache', 'Pragma': 'no-cache', 'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT' }) }); return next.handle(httpRequest); } }<\/code><\/li>\n\n\n\n<li><strong>\u30c7\u30fc\u30bf\u30ad\u30e3\u30c3\u30b7\u30e5:<\/strong>\u30b5\u30fc\u30d3\u30b9\u307e\u305f\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30c7\u30fc\u30bf\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u3066\u3001API\u547c\u3073\u51fa\u3057\u306e\u91cd\u8907\u3092\u56de\u907f\u3057\u307e\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>\/\/ user.service.ts import { Injectable } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; import { of } from 'rxjs'; import { tap } from 'rxjs\/operators'; @Injectable({ providedIn: 'root' }) export class UserService { private apiUrl = 'https:\/\/your-api.com\/users'; private cache: any = null; constructor(private http: HttpClient) { } getUsers() { if (this.cache) { return of(this.cache); } return this.http.get(this.apiUrl).pipe( tap(data =&gt; this.cache = data) ); } }<\/code><\/li>\n\n\n\n<li>\u753b\u50cf\u3068\u9759\u7684<strong>\u30a2\u30bb\u30c3\u30c8\u306e\u30ad\u30e3\u30c3\u30b7\u30e5<\/strong>: Service Worker \u3092\u4f7f\u7528\u3057\u3066\u3001\u753b\u50cf\u3084\u305d\u306e\u4ed6\u306e\u9759\u7684\u30a2\u30bb\u30c3\u30c8\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u307e\u3059\u3002 \u30ea\u30bd\u30fc\u30b9\u30ad\u30e3\u30c3\u30b7\u30e5\u69cb\u6210\u3092 jsonCopy \u30b3\u30fc\u30c9\u306b\u8ffd\u52a0\u3059\u308b<code>ngsw-config.json<\/code><code>{ \"name\": \"assets\", \"urls\": [\"\/assets\/**\"], \"cacheConfig\": { \"strategy\": \"performance\", \"maxSize\": 50, \"maxAge\": \"1d\" } }<\/code><\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30ad\u30e3\u30c3\u30b7\u30e5 \u30dd\u30ea\u30b7\u30fc\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u306e\u8aad\u307f\u8fbc\u307f\u901f\u5ea6\u3068\u5fdc\u7b54\u6027\u3092\u5927\u5e45\u306b\u5411\u4e0a\u3055\u305b\u3001\u30e6\u30fc\u30b6\u30fc \u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\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\u7b2c8\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c8\u7ae0:\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9 3.&lt;&gt; ChatGPT\u306e\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3068\u30bd\u30fc\u30c8<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8.3 \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3068\u30bd\u30fc\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u5927\u91cf\u306e\u30c7\u30fc\u30bf\u3092\u6271\u3046\u5834\u5408\u3001\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3068\u4e26\u3079\u66ff\u3048\u306f 2 \u3064\u306e\u91cd\u8981\u306a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3067\u3059\u3002 \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306b\u3088\u308a\u30011 \u3064\u306e\u8981\u6c42\u3067\u8ee2\u9001\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u30c7\u30fc\u30bf\u306e\u91cf\u3092\u6e1b\u3089\u3059\u3053\u3068\u304c\u3067\u304d\u308b\u305f\u3081\u3001\u8aad\u307f\u8fbc\u307f\u304c\u901f\u304f\u306a\u308a\u3001\u5fdc\u7b54\u6027\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002 \u4e26\u3079\u66ff\u3048\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u5fc5\u8981\u306a\u60c5\u5831\u3092\u3059\u3070\u3084\u304f\u898b\u3064\u3051\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3068\u4e26\u3079\u66ff\u3048\u3092\u5b9f\u88c5\u3057\u3066\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u65b9\u6cd5\u3092\u63a2\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3<\/strong>: Angular \u306e HTTP \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u4f7f\u7528\u3057\u3066\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 API \u3067\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3092\u884c\u3044\u307e\u3059\u3002 typescriptCopy code \u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067 typescriptCopy code \u3068\u3044\u3046\u30b5\u30fc\u30d3\u30b9\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<code>\/\/ user.service.ts import { Injectable } from '@angular\/core'; import { HttpClient, HttpParams } from '@angular\/common\/http'; @Injectable({ providedIn: 'root' }) export class UserService { private apiUrl = 'https:\/\/your-api.com\/users'; constructor(private http: HttpClient) { } getUsers(page: number, size: number) { const params = new HttpParams() .set('page', page.toString()) .set('size', size.toString()); return this.http.get(this.apiUrl, { params }); } }&nbsp;<\/code><code>\/\/ user-list.component.ts import { Component, OnInit } from '@angular\/core'; import { UserService } from '.\/user.service'; @Component({ selector: 'app-user-list', template: `...` }) export class UserListComponent implements OnInit { users: any[] = []; currentPage = 1; pageSize = 10; constructor(private userService: UserService) { } ngOnInit(): void { this.loadUsers(); } loadUsers() { this.userService.getUsers(this.currentPage, this.pageSize).subscribe( data =&gt; this.users = data, error =&gt; console.error(error) ); } }<\/code><\/li>\n\n\n\n<li><strong>\u4e26\u3079\u66ff\u3048<\/strong>: \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u4e26\u3079\u66ff\u3048\u306b\u306f\u3001Angular \u306e\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u307e\u305f\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 \u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>\/\/ user-list.component.ts import { Component, OnInit } from '@angular\/core'; @Component({ selector: 'app-user-list', template: ` &lt;button (click)=\"sortUsers('username')\"&gt;Sort by Username&lt;\/button&gt; &lt;button (click)=\"sortUsers('email')\"&gt;Sort by Email&lt;\/button&gt; &lt;!-- ... --&gt; ` }) export class UserListComponent implements OnInit { users: any[] = []; \/\/ ...\u5176\u4ed6\u4ee3\u7801 sortUsers(key: string) { this.users.sort((a, b) =&gt; a[key].localeCompare(b[key])); } }<\/code><\/li>\n<\/ol>\n\n\n\n<p>\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3068\u4e26\u3079\u66ff\u3048\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u3088\u308a\u30e6\u30fc\u30b6\u30fc\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u3067\u52b9\u7387\u7684\u306a\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u63d0\u4f9b\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\u7b2c8\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c9\u7ae0:\u30c6\u30b9\u30c8\u3068\u30c7\u30d0\u30c3\u30b0 1.&lt;&gt; API Postman \u3092\u4f7f\u7528\u3057\u305f ChatGPT \u306e\u30c6\u30b9\u30c8<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9.1 API\u30c6\u30b9\u30c8\u3067\u306ePostman\u306e\u4f7f\u7528<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30c6\u30b9\u30c8\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u54c1\u8cea\u3068\u5b89\u5b9a\u6027\u3092\u78ba\u4fdd\u3059\u308b\u305f\u3081\u306e\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u306e\u91cd\u8981\u306a\u90e8\u5206\u3067\u3059\u3002 API\u30c6\u30b9\u30c8\u306f\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u30d0\u30c3\u30af\u30a8\u30f3\u30c9API\u3068\u5bfe\u8a71\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u306b\u7279\u306b\u91cd\u8981\u306b\u306a\u308a\u307e\u3059\u3002 Postman \u306f\u3001API \u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3057\u3001\u5fdc\u7b54\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u76f4\u611f\u7684\u306a\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u63d0\u4f9b\u3059\u308b\u3001\u5e83\u304f\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b API \u30c6\u30b9\u30c8 \u30c4\u30fc\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001API \u30c6\u30b9\u30c8\u306b Postman \u3092\u4f7f\u7528\u3057\u3066\u3001Angular \u30a2\u30d7\u30ea\u304c\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 \u30b5\u30fc\u30d3\u30b9\u3068\u6b63\u3057\u304f\u5bfe\u8a71\u3059\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Postman\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u8d77\u52d5\u3059\u308b:\u307e\u305a\u3001<strong>Postman<\/strong>\u306e\u516c\u5f0fWeb\u30b5\u30a4\u30c8\u304b\u3089\u30c4\u30fc\u30eb\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001Postman \u3092\u8d77\u52d5\u3057\u3001\u65b0\u3057\u3044\u8981\u6c42\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u8981\u6c42\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc<strong>\u306e\u8a2d\u5b9a<\/strong>: Postman \u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3067\u306f\u3001HTTP \u30e1\u30bd\u30c3\u30c9 (GET\u3001POST\u3001PUT \u306a\u3069)\u3001\u8981\u6c42 URL\u3001\u8981\u6c42\u30d8\u30c3\u30c0\u30fc\u3001\u8981\u6c42\u672c\u6587\u306a\u3069\u3001\u3055\u307e\u3056\u307e\u306a\u8981\u6c42\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<img decoding=\"async\" src=\"https:\/\/www.postman.com\/wp-content\/uploads\/2019\/02\/Screen-Shot-2019-02-14-at-4.02.27-PM.png\" alt=\"Postman \u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\"><\/li>\n\n\n\n<li>\u8981\u6c42\u306e\u9001\u4fe1: \u8981\u6c42\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u69cb\u6210\u3057\u305f\u3089\u3001[<strong>\u9001\u4fe1<\/strong>] \u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u8981\u6c42\u3092\u9001\u4fe1\u3057\u307e\u3059\u3002 Postman \u306f\u3001\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u8fd4\u3055\u308c\u305f\u5fdc\u7b54 (\u72b6\u614b\u30b3\u30fc\u30c9\u3001\u5fdc\u7b54\u30d8\u30c3\u30c0\u30fc\u3001\u5fdc\u7b54\u672c\u6587\u306a\u3069) \u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30c6\u30b9\u30c8\u3092\u4fdd\u5b58\u3057\u3066\u6574\u7406<\/strong>\u3059\u308b: \u8981\u6c42\u3092\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u306b\u4fdd\u5b58\u3057\u3066\u3001\u5f8c\u3067\u518d\u5229\u7528\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306f\u3001\u8907\u96d1\u306a API \u30c6\u30b9\u30c8\u3092\u6574\u7406\u3059\u308b\u5834\u5408\u306b\u4fbf\u5229\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>Ostman<\/strong>&nbsp;:P\u81ea\u52d5\u30c6\u30b9\u30c8\u306b\u306f\u3001\u81ea\u52d5\u30c6\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u6a5f\u80fd\u3082\u3042\u308a\u307e\u3059\u3002 \u5fdc\u7b54\u306e\u72b6\u614b\u3068\u30c7\u30fc\u30bf\u3092\u78ba\u8a8d\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8a18\u8ff0\u3057\u3066\u3001API \u306e\u6b63\u3057\u3044\u52d5\u4f5c\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002 javascript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>pm.test(\"Status code is 200\", function () { pm.response.to.have.status(200); }); pm.test(\"Response time is less than 500ms\", function () { pm.expect(pm.response.responseTime).to.be.below(500); });<\/code><\/li>\n<\/ol>\n\n\n\n<p>API \u30c6\u30b9\u30c8\u306b Postman \u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u4e2d\u306b\u30d0\u30c3\u30af\u30a8\u30f3\u30c9 \u30b5\u30fc\u30d3\u30b9\u3092\u3059\u3070\u3084\u304f\u691c\u8a3c\u304a\u3088\u3073\u30c7\u30d0\u30c3\u30b0\u3057\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3068\u306e\u5b89\u5b9a\u3057\u305f\u52b9\u7387\u7684\u306a\u5bfe\u8a71\u3092\u78ba\u4fdd\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\u7b2c9\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c9\u7ae0:\u30c6\u30b9\u30c8\u3068\u30c7\u30d0\u30c3\u30b0 2.&lt;&gt; Angular\u3067\u306eChatGPT\u306e\u5358\u4f53\u30c6\u30b9\u30c8<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9.2 Angular\u3067\u306e\u5358\u4f53\u30c6\u30b9\u30c8<\/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\u30b3\u30fc\u30c9\u306e\u54c1\u8cea\u3068\u4fdd\u5b88\u6027\u3092\u78ba\u4fdd\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u306e\u91cd\u8981\u306a\u90e8\u5206\u3067\u3059\u3002 Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u5358\u4f53\u30c6\u30b9\u30c8\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b5\u30fc\u30d3\u30b9\u3001\u547d\u4ee4\u3001\u304a\u3088\u3073\u305d\u306e\u4ed6\u306e\u30c6\u30b9\u30c8\u53ef\u80fd\u306a\u30b3\u30fc\u30c9\u5358\u4f4d\u3092\u30c6\u30b9\u30c8\u3059\u308b\u305f\u3081\u306b\u3088\u304f\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 Angular \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u306f\u3001\u5358\u4f53\u30c6\u30b9\u30c8\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u305f\u3081\u306e Jasmine \u3084 Karma \u306a\u3069\u306e\u8c4a\u5bcc\u306a\u30c6\u30b9\u30c8 \u30c4\u30fc\u30eb\u3068\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5358\u4f53\u30c6\u30b9\u30c8\u3057\u3066\u3001\u30b3\u30fc\u30c9\u304c\u5805\u7262\u3067\u4fe1\u983c\u6027\u304c\u3042\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8<\/strong>: Angular \u3092\u4f7f\u7528\u3057\u3066\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8\u74b0\u5883\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>TestBed<\/code><code>\/\/ app.component.spec.ts import { TestBed, ComponentFixture } from '@angular\/core\/testing'; import { AppComponent } from '.\/app.component'; describe('AppComponent', () =&gt; { let fixture: ComponentFixture&lt;AppComponent&gt;; let component: AppComponent; beforeEach(() =&gt; { TestBed.configureTestingModule({ declarations: [AppComponent] }); fixture = TestBed.createComponent(AppComponent); component = fixture.componentInstance; }); it('should create the component', () =&gt; { expect(component).toBeTruthy(); }); it('should have a title', () =&gt; { expect(component.title).toBe('My Angular App'); }); });<\/code><\/li>\n\n\n\n<li><strong>\u30b5\u30fc\u30d3\u30b9\u3092\u30c6\u30b9\u30c8\u3059\u308b<\/strong>: Angular \u306e\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165\u3092\u4f7f\u7528\u3057\u3066\u30b5\u30fc\u30d3\u30b9\u3092\u30c6\u30b9\u30c8\u3057\u307e\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>\/\/ user.service.spec.ts import { TestBed } from '@angular\/core\/testing'; import { UserService } from '.\/user.service'; import { HttpClientTestingModule } from '@angular\/common\/http\/testing'; describe('UserService', () =&gt; { let service: UserService; beforeEach(() =&gt; { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [UserService] }); service = TestBed.inject(UserService); }); it('should be created', () =&gt; { expect(service).toBeTruthy(); }); });<\/code><\/li>\n\n\n\n<li>HTTP \u8981\u6c42\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3059\u308b: HTTP&nbsp;<strong>\u8981\u6c42\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8<\/strong>\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>HttpClientTestingModule<\/code><code>HttpTestingController<\/code><code>\/\/ user.service.spec.ts import { HttpTestingController } from '@angular\/common\/http\/testing'; \/\/ ...\u5176\u4ed6\u4ee3\u7801 it('should fetch users', () =&gt; { const mockUsers = [{ id: 1, name: 'John' }, { id: 2, name: 'Doe' }]; const httpTestingController = TestBed.inject(HttpTestingController); service.getUsers().subscribe(users =&gt; { expect(users).toEqual(mockUsers); }); const req = httpTestingController.expectOne('https:\/\/your-api.com\/users'); req.flush(mockUsers); });<\/code><\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u5358\u4f53\u30c6\u30b9\u30c8\u3092\u8a18\u8ff0\u3057\u3066\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u3059\u3079\u3066\u306e\u6761\u4ef6\u4e0b\u3067\u52d5\u4f5c\u3059\u308b\u3053\u3068\u3092\u4fdd\u8a3c\u3057\u3001\u30b3\u30fc\u30c9\u306e\u54c1\u8cea\u3068\u4fdd\u5b88\u6027\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\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\u7b2c9\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c9\u7ae0:\u30c6\u30b9\u30c8\u3068\u30c7\u30d0\u30c3\u30b0 3.&lt;&gt; \u30c7\u30d0\u30c3\u30b0\u306e\u30d2\u30f3\u30c8 ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9.3 \u30c7\u30d0\u30c3\u30b0\u306e\u30d2\u30f3\u30c8<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30c7\u30d0\u30c3\u30b0\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u306b\u4e0d\u53ef\u6b20\u306a\u90e8\u5206\u3067\u3059\u3002 \u52b9\u679c\u7684\u306a\u30c7\u30d0\u30c3\u30b0\u306f\u3001\u554f\u984c\u3092\u8fc5\u901f\u306b\u7279\u5b9a\u3057\u3066\u89e3\u6c7a\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u3060\u3051\u3067\u306a\u304f\u3001\u958b\u767a\u52b9\u7387\u3082\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002 \u5e78\u3044\u306a\u3053\u3068\u306b\u3001Angular \u3068\u6700\u65b0\u306e\u30d6\u30e9\u30a6\u30b6\u30fc\u306b\u306f\u3001\u3055\u307e\u3056\u307e\u306a\u30c7\u30d0\u30c3\u30b0 \u30c4\u30fc\u30eb\u3068\u624b\u6cd5\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u4f7f\u7528\u3055\u308c\u308b\u6700\u3082\u4e00\u822c\u7684\u306a\u30c7\u30d0\u30c3\u30b0\u624b\u6cd5\u306e\u3044\u304f\u3064\u304b\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Angular DevTools \u306e\u4f7f\u7528<strong>: Angular DevTools<\/strong>&nbsp;\u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u691c\u67fb\u304a\u3088\u3073\u30c7\u30d0\u30c3\u30b0\u3059\u308b\u305f\u3081\u306e\u76f4\u611f\u7684\u306a\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u63d0\u4f9b\u3059\u308b Chrome \u62e1\u5f35\u6a5f\u80fd\u3067\u3059\u3002&nbsp;<img decoding=\"async\" src=\"https:\/\/blog.angular.io\/media\/2021\/04\/15\/angular-devtools.png\" alt=\"Angular Dev\u30c4\u30fc\u30eb\">\u3053\u306e\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c4\u30ea\u30fc\u3092\u7c21\u5358\u306b\u8868\u793a\u3057\u305f\u308a\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b9\u30c6\u30fc\u30bf\u30b9\u3068\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u78ba\u8a8d\u3057\u305f\u308a\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5206\u6790\u3092\u5b9f\u884c\u3057\u305f\u308a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong><code>console<\/code>..log \u3068<code>\u30c7\u30d0\u30c3\u30ac<\/code>\u3092\u4f7f\u7528\u3059\u308b<\/strong>: \u3053\u308c\u306f\u6700\u3082\u57fa\u672c\u7684\u3067\u3059\u304c\u3001\u6700\u3082\u7c21\u5358\u3067\u52b9\u679c\u7684\u306a\u30c7\u30d0\u30c3\u30b0\u65b9\u6cd5\u3067\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>ngOnInit(): void { console.log('Component initialized'); debugger; \/\/ \u6682\u505c\u6267\u884c\uff0c\u4ee5\u4fbf\u5728\u6d4f\u89c8\u5668\u5f00\u53d1\u8005\u5de5\u5177\u4e2d\u8fdb\u884c\u8c03\u8bd5 }<\/code><\/li>\n\n\n\n<li><strong>Augury\u3092\u4f7f\u7528\u3059\u308b: Augury<\/strong>\u306f\u3001Angular\u30c7\u30d0\u30c3\u30b0\u7528\u306e\u5225\u306eChrome\u62e1\u5f35\u6a5f\u80fd\u3067\u3059\u3002 \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 \u30c4\u30ea\u30fc\u3001\u30eb\u30fc\u30c8 \u30d3\u30e5\u30fc\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165\u30d3\u30e5\u30fc\u30a2\u30fc\u306a\u3069\u306e\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<img decoding=\"async\" src=\"https:\/\/augury.rangle.io\/images\/augury-logo.png\" alt=\"\u535c\u5360\"><\/li>\n\n\n\n<li><strong>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u3092\u4f7f\u7528\u3059\u308b<\/strong>: \u958b\u767a\u74b0\u5883\u3067\u3001\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u304c\u6709\u52b9\u306b\u306a\u3063\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u958b\u767a\u8005\u30c4\u30fc\u30eb\u3067\u30c7\u30d0\u30c3\u30b0\u3059\u308b\u3068\u304d\u306b\u3001\u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u305f JavaScript \u30b3\u30fc\u30c9\u3067\u306f\u306a\u304f\u3001\u5143\u306e TypeScript \u30b3\u30fc\u30c9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>RxJS \u6f14\u7b97\u5b50<strong>\u3092\u4f7f\u7528\u3057\u305f\u30c7\u30d0\u30c3\u30b0<\/strong>: \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067 RxJS \u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u3001Observables \u306a\u3069\u306e\u7279\u6b8a\u306a\u6f14\u7b97\u5b50\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30d0\u30c3\u30b0\u3067\u304d\u307e\u3059\u3002 typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<code>tap<\/code><code>import { tap } from 'rxjs\/operators'; someObservable$.pipe( tap(value =&gt; console.log('Value:', value)) ).subscribe();<\/code><\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c7\u30d0\u30c3\u30b0\u30b9\u30ad\u30eb\u3092\u7fd2\u5f97\u3059\u308b\u3053\u3068\u3067\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u3088\u308a\u52b9\u679c\u7684\u306b\u958b\u767a\u304a\u3088\u3073\u4fdd\u5b88\u3067\u304d\u308b\u3088\u3046\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\u7b2c9\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c10\u7ae0:\u307e\u3068\u3081\u3068\u3055\u3089\u306a\u308b\u5b66\u7fd2 1.&lt;&gt; \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001ChatGPT \u3092\u307e\u3068\u3081\u3066\u3044\u307e\u3059<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">10.1 \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u307e\u3068\u3081<\/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\u3067\u306f\u3001Angular \u306e\u57fa\u672c\u7684\u306a\u6982\u5ff5\u304b\u3089\u59cb\u3081\u3066\u3001RestAPI \u3068\u306e\u5bfe\u8a71\u3084\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u3001\u30c6\u30b9\u30c8\u3001\u30c7\u30d0\u30c3\u30b0\u306a\u3069\u306e\u3088\u308a\u9ad8\u5ea6\u306a\u30c8\u30d4\u30c3\u30af\u306b\u9032\u307f\u307e\u3059\u3002 \u5404\u6982\u5ff5\u3092\u4f8b\u3068\u30b3\u30fc\u30c9\u4f8b\u3067\u8a73\u7d30\u306b\u8aac\u660e\u3057\u3001\u7406\u89e3\u3092\u6df1\u3081\u3066\u9069\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306bAngular\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u3001\u7279\u306bRestAPI\u3092\u4ecb\u3057\u3066\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30b5\u30fc\u30d3\u30b9\u3068\u5bfe\u8a71\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3057\u305f\u3002 \u307e\u305f\u3001\u3055\u307e\u3056\u307e\u306a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u624b\u6cd5\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u63a2\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u5f37\u529b\u3067\u3042\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u52b9\u7387\u7684\u3067\u30e6\u30fc\u30b6\u30fc\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u3067\u3042\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4e3b\u306a\u30cf\u30a4\u30e9\u30a4\u30c8:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u57fa\u672c<\/strong>: \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u3001\u30b5\u30fc\u30d3\u30b9\u306a\u3069\u306e Angular \u306e\u30b3\u30a2\u6982\u5ff5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3057\u305f\u3002<\/li>\n\n\n\n<li><strong>Restful API \u3068\u306e\u5bfe\u8a71<\/strong>: Angular \u306e HttpClient \u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066 API \u547c\u3073\u51fa\u3057\u3092\u884c\u3046\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3057\u305f\u3002<\/li>\n\n\n\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u3068\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong>: \u30ad\u30e3\u30c3\u30b7\u30e5\u3001\u30da\u30fc\u30b8\u30f3\u30b0\u3001\u4e26\u3079\u66ff\u3048\u306a\u3069\u306e\u624b\u6cd5\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u6700\u9069\u5316\u3059\u308b\u65b9\u6cd5\u3092\u63a2\u308a\u307e\u3057\u305f\u3002<\/li>\n\n\n\n<li><strong>\u30c6\u30b9\u30c8\u3068\u30c7\u30d0\u30c3\u30b0<\/strong>: API \u30c6\u30b9\u30c8\u306b Postman \u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u3068\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306e\u5358\u4f53\u30c6\u30b9\u30c8\u3068\u30c7\u30d0\u30c3\u30b0\u306e\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3057\u305f\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u6982\u8981<\/h4>\n\n\n\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u5b8c\u4e86\u3059\u308b\u3068\u3001Angular \u3092\u4f7f\u7528\u3057\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u57fa\u672c\u3068\u9ad8\u5ea6\u306a\u30c6\u30af\u30cb\u30c3\u30af\u3092\u7fd2\u5f97\u3067\u304d\u307e\u3059\u3002 \u3057\u304b\u3057\u3001\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u306f\u5e38\u306b\u9032\u5316\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u5b66\u7fd2\u3068\u5b9f\u8df5\u3092\u7d9a\u3051\u308b\u3053\u3068\u304c\u91cd\u8981\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\u7b2c10\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3042\u308a\u3001\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u8981\u7d04\u3067\u3059\u3002 \u6b21\u306b\u3001\u3055\u3089\u306a\u308b\u7814\u7a76\u306e\u305f\u3081\u306e\u53c2\u8003\u8cc7\u6599\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb\u3057\u307e\u3059\u3002 \u9069\u5207\u3068\u601d\u308f\u308c\u308b\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u7d30\u306a\u8aac\u660e\u306b\u79fb\u308a\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>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c10\u7ae0:\u307e\u3068\u3081\u3068\u3055\u3089\u306a\u308b\u5b66\u7fd2 2.&lt;&gt; ChatGPT\u3092\u3055\u3089\u306b\u5b66\u7fd2\u3059\u308b\u305f\u3081\u306e\u53c2\u8003\u8cc7\u6599<\/p>\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<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f Angular \u958b\u767a\u306e\u591a\u304f\u306e\u5074\u9762\u3092\u30ab\u30d0\u30fc\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u3055\u3089\u306b\u9ad8\u5ea6\u306a\u30c8\u30d4\u30c3\u30af\u3084\u30d9\u30b9\u30c8 \u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3082\u591a\u6570\u3042\u308a\u307e\u3059\u3002 Angular \u958b\u767a\u30b9\u30ad\u30eb\u3092\u5f15\u304d\u7d9a\u304d\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306b\u3001\u63a8\u5968\u3055\u308c\u308b\u53c2\u8003\u8cc7\u6599\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30ea\u30bd\u30fc\u30b9<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/strong>: Angular \u306e\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f\u3001\u3042\u3089\u3086\u308b\u30ec\u30d9\u30eb\u306e\u958b\u767a\u8005\u304c\u5229\u7528\u3067\u304d\u308b\u6700\u3082\u5305\u62ec\u7684\u3067\u6b63\u78ba\u306a\u30ea\u30bd\u30fc\u30b9\u3067\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/angular.io\/docs\">Angular \u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30aa\u30f3\u30e9\u30a4\u30f3\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3068\u30b3\u30fc\u30b9: \u9ad8\u54c1\u8cea\u306e Angular\u00a0<strong>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3068\u30b3\u30fc\u30b9<\/strong>\u3092\u63d0\u4f9b\u3059\u308b\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u8907\u6570\u3042\u308a\u307e\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/angular-university.io\/\">\u30a2\u30f3\u30ae\u30e5\u30e9\u30fc\u5927\u5b66<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.udemy.com\/topic\/angular\/\">Udemy Angular\u30b3\u30fc\u30b9<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.pluralsight.com\/paths\/angular\">Pluralsight Angular Path<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u66f8\u7c4d<\/strong>: Angular \u306b\u95a2\u3059\u308b\u512a\u308c\u305f\u66f8\u7c4d\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb\u3057\u307e\u3059\u3002\n<ul class=\"wp-block-list\">\n<li>\u300cAngular:Up and Running\u300dShyam Seshadri\u8457<\/li>\n\n\n\n<li>&#8220;Angular Development with TypeScript&#8221; Yakov Fain\u3001Anton Moiseev \u5171\u8457<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3<\/strong>\u3068\u30d5\u30a9\u30fc\u30e9\u30e0: \u30b3\u30df\u30e5\u30cb\u30c6\u30a3 \u30a4\u30d9\u30f3\u30c8\u3084\u30aa\u30f3\u30e9\u30a4\u30f3 \u30d5\u30a9\u30fc\u30e9\u30e0\u306b\u53c2\u52a0\u3059\u308b\u3068\u3001\u554f\u984c\u306e\u89e3\u6c7a\u306b\u5f79\u7acb\u3061\u3001\u4ed6\u306e\u958b\u767a\u8005\u3068\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u3092\u7bc9\u304f\u7d76\u597d\u306e\u6a5f\u4f1a\u306b\u306a\u308a\u307e\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/angular\">\u30b9\u30bf\u30c3\u30af\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.reddit.com\/r\/Angular2\/\">RedditAngular\u30b3\u30df\u30e5\u30cb\u30c6\u30a3<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/discord.com\/invite\/angular\">AngularDiscord\u30c1\u30e3\u30f3\u30cd\u30eb<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30d6\u30ed\u30b0\u3068\u8a18\u4e8b: \u591a\u304f\u306e\u7d4c\u9a13\u8c4a\u5bcc\u306a\u958b\u767a\u8005<strong>\u304c\u3001\u30d6\u30ed\u30b0\u3084\u8a18\u4e8b<\/strong>\u3092\u901a\u3058\u3066\u77e5\u8b58\u3068\u7d4c\u9a13\u3092\u5171\u6709\u3057\u3066\u3044\u307e\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/indepth.dev\/angular\/\">Angular In Depth(\u89d2\u5ea6\u306e\u6df1\u3055)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/tag\/angular\">Medium \u2013 Angular \u30c8\u30d4\u30c3\u30af<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3068\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9:\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9<strong>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/strong>\u3092\u8aad\u307f\u3001\u8ca2\u732e\u3059\u308b\u3053\u3068\u3067\u3001\u5b9f\u969b\u306b\u30b9\u30ad\u30eb\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/topics\/angular\">GitHub Angular \u30c8\u30d4\u30c3\u30af<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/PatrickJS\/awesome-angular\">\u6050\u308d\u3057\u3044\u89d2\u5ea6<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001Angular \u306b\u3064\u3044\u3066\u3055\u3089\u306b\u5b66\u3073\u3001\u3088\u308a\u512a\u308c\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u8005\u306b\u306a\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a Re &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-3044","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\/3044","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=3044"}],"version-history":[{"count":1,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3044\/revisions"}],"predecessor-version":[{"id":3045,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3044\/revisions\/3045"}],"wp:attachment":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}