{"id":3025,"date":"2023-10-28T14:50:27","date_gmt":"2023-10-28T05:50:27","guid":{"rendered":"https:\/\/edu.ujhb.org\/?p=3025"},"modified":"2023-10-28T14:50:27","modified_gmt":"2023-10-28T05:50:27","slug":"angular-%e7%8a%b6%e6%85%8b%e7%ae%a1%e7%90%86%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=3025","title":{"rendered":"Angular \u72b6\u614b\u7ba1\u7406\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\u72b6\u614b\u7ba1\u7406\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 \u72b6\u614b\u7ba1\u7406\u306e\u6982\u8981<br>1.2 \u72b6\u614b\u7ba1\u7406\u304c\u5fc5\u8981\u306a\u7406\u75311.3<br>\u89d2\u5ea6\u72b6\u614b\u7ba1\u7406\u306e\u91cd\u8981\u6027<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 2 \u7ae0 &#8211; \u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u6982\u8981<\/h2>\n\n\n\n<p>2.1 Redux\u306e<br>2.2 MobX\u306e 2.3 NgRx<br>\u306e 2.4 \u79cb\u75302.5<br>NgX\u306e<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 3 \u7ae0 &#8211; \u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u9078\u629e<\/h2>\n\n\n\n<p>3.1 \u8a55\u4fa1\u57fa\u6e963.2<br>\u6280\u8853\u306e\u6bd4\u8f033.3<br>\u306a\u305cNgRx(Focused Teaching)\u306a\u306e\u304b<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c4\u7ae0:NgRx\u306e\u57fa\u672c<\/h2>\n\n\n\n<p>4.1 NgRx\u67b6\u6784<br>4.2 \u30a2\u30af\u30b7\u30e7\u30f3<br>4.3 \u30ec\u30c7\u30e5\u30fc\u30b5\u30fc<br>4.4 \u52b9\u679c<br>4.5 \u30b9\u30c8\u30a2<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c5\u7ae0:NgRx\u30a2\u30c9\u30d0\u30f3\u30b9\u30c8<\/h2>\n\n\n\n<p>5.1 \u975e\u540c\u671f\u64cd\u4f5c5.2 Angular \u30b5\u30fc\u30d3\u30b9\u3068<br>\u306e\u7d71\u5408<br>5.3 \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u53165.4<br>\u30c6\u30b9\u30c8\u6226\u7565<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c6\u7ae0:\u5b9f\u4f8b<\/h2>\n\n\n\n<p>6.1 \u7c21\u5358\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b6.2 \u72b6\u614b\u7ba1\u7406\u306bNgRx<br>\u3092\u9069\u7528\u3059\u308b6.3<br>\u5206\u6790\u3068\u6700\u9069\u5316<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 7 \u7ae0: \u4e00\u822c\u7684\u306a\u554f\u984c\u3068\u89e3\u6c7a\u7b56<\/h2>\n\n\n\n<p>7.1 \u30c7\u30d0\u30c3\u30b0<br>7.2 \u4ed6\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u306e\u7d71\u5408<br>7.3 \u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c 8 \u7ae0 &#8211; \u305d\u306e\u4ed6\u306e\u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u7d39\u4ecb<\/h2>\n\n\n\n<p>8.1 Redux \u3068 Angular \u306e\u6bd4\u8f03 8.2 MobX \u3068 Angular \u306e\u6bd4\u8f03<br>8.3 \u79cb\u7530\u3068 Angular<br>\u306e\u6bd4\u8f03<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c9\u7ae0:\u307e\u3068\u3081<\/h2>\n\n\n\n<p>9.1 \u30b3\u30fc\u30b9\u306e\u5fa9\u7fd29.2<br>\u6b21\u306e\u65b9\u5411\u6027<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c10\u7ae0:\u53c2\u8003\u6587\u732e\u3068\u3055\u3089\u306a\u308b\u5b66\u7fd2<\/h2>\n\n\n\n<p>10.1 \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb10.2<br>\u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b910.3<br>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30d5\u30a9\u30fc\u30e9\u30e0<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u304c\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981\u3067\u3059\u3002 \u6b21\u306b\u3001\u7ae0\u3054\u3068\u3001\u30bb\u30af\u30b7\u30e7\u30f3\u3054\u3068\u306b\u8a73\u7d30\u306a\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u8aac\u660e\u3092\u884c\u3044\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=\"User\"\/><\/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 \u72b6\u614b\u7ba1\u7406\u306e\u6982\u8981<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u72b6\u614b\u7ba1\u7406\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u306e\u683c\u7d0d\u3001\u53d6\u5f97\u3001\u64cd\u4f5c\u3001\u304a\u3088\u3073\u66f4\u65b0\u3092\u542b\u3080\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u304a\u3051\u308b\u91cd\u8981\u306a\u6982\u5ff5\u3067\u3059\u3002 \u8907\u96d1\u306a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u72b6\u614b\u7ba1\u7406\u306b\u3088\u308a\u3001\u958b\u767a\u8005\u306f\u30c7\u30fc\u30bf\u3092\u3088\u308a\u7c21\u5358\u306b\u8ffd\u8de1\u304a\u3088\u3073\u64cd\u4f5c\u3067\u304d\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4fdd\u5b88\u6027\u3068\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u72b6\u614b\u7ba1\u7406\u306f\u3001\u30c7\u30fc\u30bf\u30b9\u30c8\u30ec\u30fc\u30b8\u3060\u3051\u306b\u3068\u3069\u307e\u308a\u307e\u305b\u3093\u3002 \u307e\u305f\u3001\u30c7\u30fc\u30bf \u30d5\u30ed\u30fc\u3001\u30c7\u30fc\u30bf\u306e\u540c\u671f\u3001\u304a\u3088\u3073\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u9593\u3067\u30c7\u30fc\u30bf\u3092\u5171\u6709\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u3082\u8aac\u660e\u3057\u307e\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u3001\u512a\u308c\u305f\u72b6\u614b\u7ba1\u7406\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u3053\u308c\u3089\u306e\u554f\u984c\u306b\u5bfe\u51e6\u3059\u308b\u305f\u3081\u306e\u69cb\u9020\u5316\u3055\u308c\u305f\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u63d0\u4f9b\u3067\u304d\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>Angular \u3067\u306e\u72b6\u614b\u7ba1\u7406\u306e\u7c21\u5358\u306a\u4f8b\u306f\u3001 \u3068 \u3092\u4f7f\u7528\u3057\u3066\u72b6\u614b\u7ba1\u7406\u30b5\u30fc\u30d3\u30b9\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u3067\u3059\u3002<code>Service<\/code><code>RxJS<\/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 { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class StateManagementService { private state = new BehaviorSubject&lt;any&gt;({}); getState() { return this.state.asObservable(); } setState(newState: any) { this.state.next(newState); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30a2\u30d7\u30ea\u306e\u72b6\u614b\u3092\u683c\u7d0d\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002 \u30e1\u30bd\u30c3\u30c9\u306f\u72b6\u614b\u306e\u5909\u5316\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u3001\u30e1\u30bd\u30c3\u30c9\u306f\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u66f4\u65b0\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<code>BehaviorSubject<\/code><code>getState()<\/code><code>setState()<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306f\u72b6\u614b\u7ba1\u7406\u306e\u6c37\u5c71\u306e\u4e00\u89d2\u306b\u904e\u304e\u305a\u3001\u6b21\u306e\u7ae0\u3067\u306f\u3001\u3088\u308a\u9ad8\u5ea6\u306a\u72b6\u614b\u7ba1\u7406\u306e\u624b\u6cd5\u3068\u30c4\u30fc\u30eb\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c1\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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 \u306a\u305c\u72b6\u614b\u7ba1\u7406\u304c\u5fc5\u8981\u306a\u306e\u3067\u3059\u304b?<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u72b6\u614b\u7ba1\u7406\u306f\u3001\u8907\u96d1\u306a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9\u306b\u4e0d\u53ef\u6b20\u306a\u8981\u7d20\u306b\u306a\u308a\u307e\u3059\u3002 \u9069\u5207\u306a\u72b6\u614b\u7ba1\u7406\u3092\u884c\u308f\u306a\u3044\u3068\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4fdd\u5b88\u3068\u62e1\u5f35\u304c\u56f0\u96e3\u306b\u306a\u308a\u307e\u3059\u3002 \u3053\u3053\u3067\u306f\u3001\u72b6\u614b\u7ba1\u7406\u3092\u4f7f\u7528\u3059\u308b\u4e3b\u306a\u7406\u7531\u3092\u3044\u304f\u3064\u304b\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u901a\u4fe1<\/strong>: \u5927\u898f\u6a21\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u8907\u6570\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u540c\u3058\u30c7\u30fc\u30bf\u3092\u5171\u6709\u304a\u3088\u3073\u64cd\u4f5c\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u72b6\u614b\u7ba1\u7406\u306f\u3001\u3053\u308c\u3092\u884c\u3046\u305f\u3081\u306e\u4e00\u5143\u7684\u306a\u65b9\u6cd5\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u4fdd\u5b88\u5bb9\u6613\u6027<\/strong>: \u72b6\u614b\u7ba1\u7406\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30ed\u30b8\u30c3\u30af\u3068\u72b6\u614b\u3092\u4e00\u5143\u5316\u3057\u3001\u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u3068\u30c6\u30b9\u30c8\u3092\u5bb9\u6613\u306b\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u4e88\u6e2c\u53ef\u80fd\u6027<\/strong>: \u72b6\u614b\u7ba1\u7406\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u304c\u3088\u308a\u4e88\u6e2c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002 \u3053\u308c\u306f\u3001\u30c7\u30d0\u30c3\u30b0\u3068\u30c6\u30b9\u30c8\u3067\u7279\u306b\u91cd\u8981\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<\/strong>\u306e\u6700\u9069\u5316: \u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u72b6\u614b\u30ad\u30e3\u30c3\u30b7\u30e5\u3001\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u306a\u3069\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u30e1\u30ab\u30cb\u30ba\u30e0\u304c\u7d44\u307f\u8fbc\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u958b\u767a\u52b9\u7387<\/strong>: \u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u958b\u767a\u8005\u304c\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u3088\u308a\u52b9\u7387\u7684\u306b\u958b\u767a\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u8c4a\u5bcc\u306a\u30c4\u30fc\u30eb\u3068\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u306e\u30bb\u30c3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u8907\u6570\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 (\u30a2\u30a4\u30c6\u30e0 \u30ea\u30b9\u30c8\u3001\u30b7\u30e7\u30c3\u30d4\u30f3\u30b0 \u30ab\u30fc\u30c8\u3001\u30c1\u30a7\u30c3\u30af\u30a2\u30a6\u30c8 \u30da\u30fc\u30b8\u306a\u3069) \u3092\u6301\u3064\u30b7\u30e7\u30c3\u30d4\u30f3\u30b0 \u30ab\u30fc\u30c8 \u30a2\u30d7\u30ea\u304c\u3042\u308b\u3068\u3057\u307e\u3059\u3002 \u72b6\u614b\u7ba1\u7406\u3092\u884c\u308f\u306a\u3044\u3068\u3001\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30ab\u30fc\u30c8 \u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u64cd\u4f5c\u3059\u308b\u305f\u3081\u306e\u72ec\u81ea\u306e\u30ed\u30b8\u30c3\u30af\u3092\u6301\u3064\u5fc5\u8981\u304c\u3042\u308a\u3001\u30b3\u30fc\u30c9\u306e\u5197\u9577\u6027\u3068\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u306e\u56f0\u96e3\u306b\u3064\u306a\u304c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ Without state management @Component({ selector: 'app-product-list', \/\/ ... }) export class ProductListComponent { \/\/ Logic to manage cart state } @Component({ selector: 'app-cart', \/\/ ... }) export class CartComponent { \/\/ Duplicate logic to manage cart state }<\/code><\/p>\n\n\n\n<p>\u72b6\u614b\u7ba1\u7406\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b7\u30e7\u30c3\u30d4\u30f3\u30b0 \u30ab\u30fc\u30c8\u306e\u72b6\u614b\u3068\u30ed\u30b8\u30c3\u30af\u3092\u4e00\u5143\u5316\u3057\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b3\u30fc\u30c9\u3092\u7c21\u7565\u5316\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>\/\/ With state management @Injectable({ providedIn: 'root' }) export class CartStateService { \/\/ Centralized logic to manage cart state }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001\u30ab\u30fc\u30c8\u95a2\u9023\u306e\u3059\u3079\u3066\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u3053\u306e\u4e00\u5143\u5316\u3055\u308c\u305f\u72b6\u614b\u306b\u4f9d\u5b58\u3067\u304d\u308b\u305f\u3081\u3001\u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u6027\u3068\u62e1\u5f35\u6027\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002<code>CartStateService<\/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 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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 Angular \u72b6\u614b\u7ba1\u7406\u306e\u91cd\u8981\u6027<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular \u306f\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u6027\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316\u306a\u3069\u3001\u591a\u304f\u306e\u7d44\u307f\u8fbc\u307f\u6a5f\u80fd\u3092\u63d0\u4f9b\u3059\u308b\u5f37\u529b\u306a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9 \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002 \u305f\u3060\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u5927\u304d\u304f\u306a\u308b\u3068\u3001\u7279\u306b\u8907\u6570\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u305f\u306f\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u72b6\u614b\u3092\u5171\u6709\u3059\u308b\u5834\u5408\u3001Angular\u306e\u7d44\u307f\u8fbc\u307f\u6a5f\u80fd\u3067\u306f\u5341\u5206\u3067\u306f\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002 \u305d\u306e\u305f\u3081\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u72b6\u614b\u7ba1\u7406\u304c\u7279\u306b\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Angular&nbsp;<strong>\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3068\u306e\u7d71\u5408<\/strong>: Angular \u306b\u306f\u3001Angular \u7528\u306b\u7279\u5225\u306b\u8a2d\u8a08\u3055\u308c\u305f\u4e00\u9023\u306e\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea (NgRx\u3001NgX \u306a\u3069) \u304c\u3042\u308a\u3001Angular \u306e\u4ed6\u306e\u90e8\u5206 (RxJS\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165\u306a\u3069) \u3068\u7dca\u5bc6\u306b\u7d71\u5408\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30bf\u30a4\u30d7\u30bb\u30fc\u30d5<\/strong>: TypeScript \u3067\u8a18\u8ff0\u3055\u308c\u305f Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u304b\u3089\u3088\u308a\u512a\u308c\u305f\u30bf\u30a4\u30d7 \u30bb\u30fc\u30d5\u3092\u5f97\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0<\/strong>: Angular \u306f RxJS \u3068\u7dca\u5bc6\u306b\u7d71\u5408\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u72b6\u614b\u7ba1\u7406\u306b\u81ea\u7136\u306b\u9069\u5408\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30e2\u30b8\u30e5\u30fc\u30eb\u6027\u3068<\/strong>\u9045\u5ef6\u8aad\u307f\u8fbc\u307f: Angular \u306e\u30e2\u30b8\u30e5\u30e9\u30fc \u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u72b6\u614b\u7ba1\u7406\u30ed\u30b8\u30c3\u30af\u3092\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u5206\u5272\u3057\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u958b\u767a\u8005\u30c4\u30fc\u30eb\u3068\u30b3\u30df\u30e5\u30cb\u30c6\u30a3 \u30b5\u30dd\u30fc\u30c8: Angular \u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u5927\u898f\u6a21\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u3068\u4fdd\u5b88\u306b\u4e0d\u53ef\u6b20\u306a\u8c4a\u5bcc\u306a\u958b\u767a\u8005<strong>\u30c4\u30fc\u30eb\u3068\u5f37\u529b\u306a\u30b3\u30df\u30e5\u30cb\u30c6\u30a3 \u30b5\u30dd\u30fc\u30c8<\/strong>\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>Angular\u306e\u72b6\u614b\u7ba1\u7406\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3068\u3057\u3066NgRx\u3092\u4f7f\u7528\u3059\u308b\u7c21\u5358\u306a\u4f8b:<\/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 { StoreModule } from '@ngrx\/store'; import { counterReducer } from '.\/counter.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ count: counterReducer }) ], \/\/ ... }) export class AppModule { }<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ counter.reducer.ts export function counterReducer(state = 0, action: Action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u7c21\u5358\u306a\u4f8b\u3067\u306f\u3001NgRx\u3092\u4f7f\u7528\u3057\u3066\u30b0\u30ed\u30fc\u30d0\u30eb\u72b6\u614b\u3092\u4f5c\u6210\u3057\u3001\u5358\u7d14\u306a\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3092\u4f7f\u7528\u3057\u3066\u72b6\u614b\u3092\u7ba1\u7406\u3057\u307e\u3059\u3002<code>StoreModule<\/code><code>count<\/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 3 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u7ae0\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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 &#8211; \u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u6982\u8981<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.1 \u30ea\u30c0\u30c3\u30af\u30b9<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Redux \u306f\u4eba\u6c17\u306e\u3042\u308b JavaScript \u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3042\u308a\u3001\u5143\u3005\u306f React \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u7528\u306b\u8a2d\u8a08\u3055\u308c\u307e\u3057\u305f\u304c\u3001Angular \u3068\u7d71\u5408\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002 Redux \u306f Flux \u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u57fa\u3065\u3044\u3066\u304a\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3092\u7ba1\u7406\u3059\u308b\u305f\u3081\u306e\u5358\u4e00\u306e\u4e88\u6e2c\u53ef\u80fd\u306a\u72b6\u614b\u30c4\u30ea\u30fc\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>Redux\u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Store<\/strong>: \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u306e\u72b6\u614b\u3092\u683c\u7d0d\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3002<\/li>\n\n\n\n<li><strong>\u30a2\u30af\u30b7\u30e7\u30f3:<\/strong>&nbsp;\u4f55\u304c\u8d77\u3053\u3063\u305f\u304b\u3092\u8aac\u660e\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3002<\/li>\n\n\n\n<li><strong>\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc<\/strong>: \u73fe\u5728\u306e\u72b6\u614b\u3068\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u57fa\u3065\u3044\u3066\u65b0\u3057\u3044\u72b6\u614b\u3092\u8a08\u7b97\u3059\u308b\u95a2\u6570\u3002<\/li>\n<\/ol>\n\n\n\n<p>Redux\u306e\u5229\u70b9\u306b\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u3055\u3001\u4e88\u6e2c\u53ef\u80fd\u6027\u3001\u304a\u3088\u3073\u5f37\u529b\u306a\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30b5\u30dd\u30fc\u30c8\u304c\u542b\u307e\u308c\u307e\u3059\u3002 \u305f\u3060\u3057\u3001\u5927\u898f\u6a21\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u554f\u984c\u3068\u306a\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 \u30b3\u30fc\u30c9\u304c\u5c0e\u5165\u3055\u308c\u308b\u5834\u5408\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>Angular \u3067 Redux \u3092\u4f7f\u7528\u3059\u308b\u7c21\u5358\u306a\u4f8b:<\/p>\n\n\n\n<p>\u307e\u305a\u3001Redux\u3068Angular-Redux\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\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 redux @angular-redux\/store --save<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001Angular\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u30b9\u30c8\u30a2\u3092\u69cb\u6210\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>\/\/ app.module.ts import { NgReduxModule, NgRedux } from '@angular-redux\/store'; import { rootReducer } from '.\/reducers'; @NgModule({ imports: [NgReduxModule], \/\/ ... }) export class AppModule { constructor(ngRedux: NgRedux&lt;IAppState&gt;) { ngRedux.configureStore(rootReducer, {}); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001Redux \u30b9\u30c8\u30a2\u3092 \u3068 services \u3067\u69cb\u6210\u3057\u3001 \u3068\u3044\u3046\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002<code>NgReduxModule<\/code><code>NgRedux<\/code><code>rootReducer<\/code><\/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 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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 \u30e2\u30d6\u30a8\u30c3\u30af\u30b9<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>MobX \u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3092\u7ba1\u7406\u3059\u308b\u305f\u3081\u306e\u3088\u308a\u67d4\u8edf\u3067\u76f4\u611f\u7684\u306a\u65b9\u6cd5\u3092\u63d0\u4f9b\u3059\u308b\u3001\u3082\u3046 1 \u3064\u306e\u4e00\u822c\u7684\u306a\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002 Redux\u3068\u306f\u7570\u306a\u308a\u3001MobX\u306f\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u6982\u5ff5\u3092\u4f7f\u7528\u3057\u3066\u304a\u308a\u3001\u76e3\u8996\u53ef\u80fd\u306a\u72b6\u614b\u5909\u6570\u3092\u4f5c\u6210\u3057\u3001\u305d\u308c\u3089\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u81ea\u52d5\u7684\u306b\u8ffd\u8de1\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>MobX \u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Observable:&nbsp;<strong>\u76e3\u8996\u53ef\u80fd\u306a\u72b6\u614b\u5909\u6570<\/strong>\u3002<\/li>\n\n\n\n<li><strong>\u30a2\u30af\u30b7\u30e7\u30f3<\/strong>: \u72b6\u614b\u3092\u5909\u66f4\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u95a2\u6570\u3002<\/li>\n\n\n\n<li><strong>\u8a08\u7b97\u6e08\u307f<\/strong>: \u4ed6\u306e\u89b3\u6e2c\u53ef\u80fd\u306a\u5909\u6570\u304b\u3089\u8a08\u7b97\u3055\u308c\u305f\u5024\u3002<\/li>\n\n\n\n<li><strong>\u53cd\u5fdc:<\/strong>&nbsp;\u89b3\u5bdf\u53ef\u80fd\u306a\u5909\u6570\u304c\u5909\u5316\u3057\u305f\u3068\u304d\u306b\u81ea\u52d5\u7684\u306b\u5b9f\u884c\u3055\u308c\u308b\u526f\u4f5c\u7528\u3002<\/li>\n<\/ol>\n\n\n\n<p>MobX \u306e\u5229\u70b9\u306f\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 \u30b3\u30fc\u30c9\u3092\u6e1b\u3089\u3057\u3001\u67d4\u8edf\u6027\u3092\u9ad8\u3081\u3001\u8907\u96d1\u306a\u72b6\u614b\u30ed\u30b8\u30c3\u30af\u3092\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u308b\u3053\u3068\u3067\u3059\u3002 \u305f\u3060\u3057\u3001Redux\u307b\u3069\u69cb\u9020\u5316\u3055\u308c\u3066\u3044\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308b\u305f\u3081\u3001\u5927\u898f\u6a21\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u554f\u984c\u304c\u767a\u751f\u3059\u308b\u53ef\u80fd\u6027\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>Angular \u3067 MobX \u3092\u4f7f\u7528\u3059\u308b\u7c21\u5358\u306a\u4f8b:<\/p>\n\n\n\n<p>\u307e\u305a\u3001MobX \u3068 mobx-angular \u30e9\u30a4\u30d6\u30e9\u30ea\u3092\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 mobx mobx-angular --save<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001MobX\u30b9\u30c8\u30a2\u3092\u4f5c\u6210\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>\/\/ counter.store.ts import { observable, action } from 'mobx'; export class CounterStore { @observable count = 0; @action increment() { this.count++; } @action decrement() { this.count--; } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30c7\u30b3\u30ec\u30fc\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066\u76e3\u8996\u53ef\u80fd\u306a\u5909\u6570\u3092\u4f5c\u6210\u3057\u3001\u30c7\u30b3\u30ec\u30fc\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066\u72b6\u614b\u3092\u5909\u66f4\u3059\u308b\u305f\u3081\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<code>@observable<\/code><code>count<\/code><code>@action<\/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 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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.3 NGRx\u306e<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>NgRx\u306f\u3001Redux\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u57fa\u3065\u3044\u3066\u304a\u308a\u3001\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306bRxJS\u3092\u4f7f\u7528\u3059\u308b\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u7528\u306b\u7279\u5225\u306b\u8a2d\u8a08\u3055\u308c\u305f\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002 NgRx\u306fAngular\u7528\u306b\u30ab\u30b9\u30bf\u30e0\u30d3\u30eb\u30c9\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u6027\u306a\u3069\u306eAngular\u306e\u4ed6\u306e\u6a5f\u80fd\u3068\u975e\u5e38\u306b\u3088\u304f\u7d71\u5408\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>NgRx\u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Store<\/strong>: \u4e0d\u5909\u306e\u72b6\u614b\u30b3\u30f3\u30c6\u30ca\u30fc\u3002<\/li>\n\n\n\n<li><strong>\u30a2\u30af\u30b7\u30e7\u30f3<\/strong>: \u72b6\u614b\u304c\u3069\u306e\u3088\u3046\u306b\u5909\u5316\u3059\u308b\u304b\u3092\u8a18\u8ff0\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3002<\/li>\n\n\n\n<li><strong>\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc<\/strong>: \u73fe\u5728\u306e\u72b6\u614b\u3068\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u57fa\u3065\u3044\u3066\u65b0\u3057\u3044\u72b6\u614b\u3092\u8a08\u7b97\u3059\u308b\u7d14\u7c8b\u306a\u95a2\u6570\u3002<\/li>\n\n\n\n<li><strong>Effects<\/strong>: \u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3057\u3001\u5916\u90e8\u30ea\u30bd\u30fc\u30b9\u3068\u5bfe\u8a71\u3059\u308b\u305f\u3081\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3002<\/li>\n\n\n\n<li><strong>\u30bb\u30ec\u30af\u30bf<\/strong>: \u30b9\u30c6\u30fc\u30c8\u30c4\u30ea\u30fc\u304b\u3089\u30c7\u30fc\u30bf\u3092\u9078\u629e\u3057\u3066\u7d50\u5408\u3059\u308b\u305f\u3081\u306e\u7d14\u7c8b\u306a\u95a2\u6570\u3002<\/li>\n<\/ol>\n\n\n\n<p>NgRx\u306e\u5229\u70b9\u306f\u3001\u7279\u306b\u5927\u898f\u6a21\u3067\u8907\u96d1\u306aAngular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u304a\u3044\u3066\u3001\u72b6\u614b\u3092\u7ba1\u7406\u3059\u308b\u305f\u3081\u306e\u69cb\u9020\u5316\u3055\u308c\u305f\u4e88\u6e2c\u53ef\u80fd\u3067\u52b9\u7387\u7684\u306a\u65b9\u6cd5\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\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>Angular\u3067NgRx\u3092\u4f7f\u7528\u3059\u308b\u7c21\u5358\u306a\u4f8b:<\/p>\n\n\n\n<p>\u307e\u305a\u3001NgRx\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\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 @ngrx\/store --save<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001Angular\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<code>StoreModule<\/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 { StoreModule } from '@ngrx\/store'; import { counterReducer } from '.\/counter.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ count: counterReducer }) ], \/\/ ... }) export class AppModule { }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u3068\u3044\u3046\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066 NgRx \u30b9\u30c8\u30a2\u3092\u69cb\u6210\u3059\u308b\u65b9\u6cd5\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<code>StoreModule.forRoot()<\/code><code>counterReducer<\/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 3 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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.4 \u79cb\u7530\u770c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Akita\u306f\u3001\u6bd4\u8f03\u7684\u65b0\u3057\u3044\u3067\u3059\u304c\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5c02\u7528\u306b\u8a2d\u8a08\u3055\u308c\u305f\u4eba\u6c17\u304c\u9ad8\u307e\u3063\u3066\u3044\u308b\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002 NgRx\u3084Redux\u3068\u306f\u7570\u306a\u308a\u3001Akita\u306f\u4e0d\u5909\u306e\u72b6\u614b\u3084\u7d14\u7c8b\u306a\u95a2\u6570\u306e\u4f7f\u7528\u3092\u5f37\u5236\u3057\u306a\u3044\u305f\u3081\u3001\u3088\u308a\u67d4\u8edf\u3067\u4f7f\u3044\u3084\u3059\u3044\u3082\u306e\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u79cb\u7530\u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b9\u30c8\u30a2<\/strong>: \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3092\u683c\u7d0d\u3059\u308b\u30b3\u30f3\u30c6\u30ca\u30fc\u3002<\/li>\n\n\n\n<li><strong>\u30af\u30a8\u30ea<\/strong>: \u30b9\u30c8\u30a2\u304b\u3089\u72b6\u614b\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3002<\/li>\n\n\n\n<li><strong>Service<\/strong>: \u30b9\u30c8\u30a2\u3068\u306e\u5bfe\u8a71\u306b\u4f7f\u7528\u3055\u308c\u308b\u30ed\u30b8\u30c3\u30af\u3092\u542b\u3080\u30af\u30e9\u30b9\u3002<\/li>\n\n\n\n<li><strong>\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3<\/strong>: 1 \u3064\u4ee5\u4e0a\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30e2\u30c7\u30eb\u3067\u3001\u901a\u5e38\u306f\u30ea\u30b9\u30c8\u3068\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u79cb\u7530\u306e\u7d20\u6674\u3089\u3057\u3044\u3068\u3053\u308d\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u3067\u52b9\u7387\u7684\u3067\u3001Angular\u3068\u3046\u307e\u304f\u7d71\u5408\u3067\u304d\u308b\u3053\u3068\u3067\u3059\u3002 \u8fc5\u901f\u306a\u958b\u767a\u3068\u30d7\u30ed\u30c8\u30bf\u30a4\u30d4\u30f3\u30b0\u3092\u5fc5\u8981\u3068\u3059\u308b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u7279\u306b\u9069\u3057\u3066\u3044\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>Angular \u3067 Akita \u3092\u4f7f\u7528\u3059\u308b\u7c21\u5358\u306a\u4f8b:<\/p>\n\n\n\n<p>\u307e\u305a\u3001\u79cb\u7530\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\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 @datorama\/akita --save<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u79cb\u7530\u30b9\u30c8\u30a2\u3092\u4f5c\u6210\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>\/\/ counter.store.ts import { Store, StoreConfig } from '@datorama\/akita'; export interface CounterState { count: number; } @StoreConfig({ name: 'counter' }) export class CounterStore extends Store&lt;CounterState&gt; { constructor() { super({ count: 0 }); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30c7\u30b3\u30ec\u30fc\u30bf\u30fc\u3068\u30af\u30e9\u30b9\u3092\u4f7f\u7528\u3057\u3066\u79cb\u7530\u30b9\u30c8\u30a2\u3092\u4f5c\u6210\u3057\u3066\u3044\u307e\u3059\u3002 \u307e\u305f\u3001\u72b6\u614b\u306e\u5f62\u72b6\u3092\u8a18\u8ff0\u3059\u308b\u305f\u3081\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3082\u5b9a\u7fa9\u3057\u307e\u3057\u305f\u3002<code>@StoreConfig<\/code><code>Store<\/code><code>CounterState<\/code><\/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\u7b2c4\u9805\u3067\u3042\u308b\u3002 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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.5 NGX\u306e<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>NgXs(\u300cNg Excess\u300d\u3068\u767a\u97f3)\u306f\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u7528\u306b\u8a2d\u8a08\u3055\u308c\u305f\u5225\u306e\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002 \u3053\u308c\u306f\u3001\u72b6\u614b\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306e\u30b7\u30f3\u30d7\u30eb\u306a\u30e2\u30c7\u30eb\u99c6\u52d5\u578b\u306e\u65b9\u6cd5\u3092\u63d0\u4f9b\u3059\u308b\u3068\u540c\u6642\u306b\u3001\u72b6\u614b\u30b9\u30ca\u30c3\u30d7\u30b7\u30e7\u30c3\u30c8\u3084\u975e\u540c\u671f\u64cd\u4f5c\u306a\u3069\u306e\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3082\u63d0\u4f9b\u3059\u308b\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>NgX\u306e\u30b3\u30a2\u30b3\u30f3\u30bb\u30d7\u30c8\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u72b6\u614b<\/strong>: \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3092\u8a18\u8ff0\u3059\u308b\u30af\u30e9\u30b9\u307e\u305f\u306f\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3002<\/li>\n\n\n\n<li><strong>\u30a2\u30af\u30b7\u30e7\u30f3<\/strong>: \u72b6\u614b\u5909\u66f4\u3092\u30c8\u30ea\u30ac\u30fc\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u30af\u30e9\u30b9\u3002<\/li>\n\n\n\n<li><strong>\u30bb\u30ec\u30af\u30bf<\/strong>: \u72b6\u614b\u304b\u3089\u30c7\u30fc\u30bf\u3092\u9078\u629e\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u95a2\u6570\u3002<\/li>\n\n\n\n<li><strong>\u30d7\u30e9\u30b0\u30a4\u30f3<\/strong>:NgXs\u306e\u6a5f\u80fd\u3092\u62e1\u5f35\u3059\u308b\u305f\u3081\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3002<\/li>\n<\/ol>\n\n\n\n<p>NgXs\u306e\u7d20\u6674\u3089\u3057\u3044\u3068\u3053\u308d\u306f\u3001\u7279\u306bAngular\u3068\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6307\u5411\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306b\u3059\u3067\u306b\u7cbe\u901a\u3057\u3066\u3044\u308b\u958b\u767a\u8005\u306b\u3068\u3063\u3066\u3001\u975e\u5e38\u306b\u7c21\u5358\u306b\u59cb\u3081\u3089\u308c\u308b\u3053\u3068\u3067\u3059\u3002 \u307e\u305f\u3001\u30d5\u30a9\u30fc\u30e0\u7ba1\u7406\u3001\u30eb\u30fc\u30c8\u7ba1\u7406\u306a\u3069\u306e\u4e00\u822c\u7684\u306a\u30cb\u30fc\u30ba\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u305f\u3081\u306e\u3055\u307e\u3056\u307e\u306a\u30d7\u30e9\u30b0\u30a4\u30f3\u3082\u63d0\u4f9b\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>Angular\u3067NgX\u3092\u4f7f\u7528\u3059\u308b\u7c21\u5358\u306a\u4f8b:<\/p>\n\n\n\n<p>\u307e\u305a\u3001NgXs\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\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 @ngxs\/store --save<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001Angular\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<code>NgxsModule<\/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 { NgxsModule } from '@ngxs\/store'; import { CounterState } from '.\/counter.state'; @NgModule({ imports: [ NgxsModule.forRoot([ CounterState ]) ], \/\/ ... }) export class AppModule { }<\/code><\/p>\n\n\n\n<p>\u72b6\u614b\u30e2\u30c7\u30eb\u3092\u4f5c\u6210\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>\/\/ counter.state.ts import { State, Action, StateContext } from '@ngxs\/store'; export class Increment { static readonly type = '[Counter] Increment'; } @State&lt;number&gt;({ name: 'count', defaults: 0 }) export class CounterState { @Action(Increment) increment(ctx: StateContext&lt;number&gt;) { const state = ctx.getState(); ctx.setState(state + 1); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001and \u30c7\u30b3\u30ec\u30fc\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066\u72b6\u614b\u30e2\u30c7\u30eb\u3068\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u6b21\u306b\u3001\u3053\u306e\u72b6\u614b\u3092\u30e1\u30bd\u30c3\u30c9\u306b\u767b\u9332\u3057\u307e\u3059\u3002<code>@State<\/code><code>@Action<\/code><code>NgxsModule.forRoot()<\/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 5 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u7ae0\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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 &#8211; \u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u9078\u629e<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.1 \u8a55\u4fa1\u57fa\u6e96<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u9069\u5207\u306a\u72b6\u614b\u7ba1\u7406\u30c6\u30af\u30ce\u30ed\u30b8\u3092\u9078\u629e\u3059\u308b\u3053\u3068\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3068\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u305f\u3081\u3001\u91cd\u8981\u306a\u6c7a\u5b9a\u4e8b\u9805\u3067\u3059\u3002 \u9078\u629e\u3092\u884c\u3046\u524d\u306b\u3001\u3044\u304f\u3064\u304b\u306e\u57fa\u6e96\u306b\u57fa\u3065\u3044\u3066\u8a55\u4fa1\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u306e\u7d71\u5408\u306e\u7a0b\u5ea6: \u4e00\u90e8\u306e\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea (NgRx \u3084 NgX \u306a\u3069) \u306f Angular \u5c02\u7528\u306b\u8a2d\u8a08\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u6027\u306a\u3069\u3001Angular \u306e\u4ed6\u306e\u6a5f\u80fd<strong>\u3068\u306e\u7d71\u5408<\/strong>\u304c\u5411\u4e0a\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u5b66\u7fd2\u66f2\u7dda<\/strong>: \u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u7570\u306a\u308c\u3070\u3001\u8907\u96d1\u3055\u3068\u5b66\u7fd2\u66f2\u7dda\u3082\u7570\u306a\u308a\u307e\u3059\u3002 \u305f\u3068\u3048\u3070\u3001Redux\u3068NgRx\u306f\u4e00\u822c\u7684\u306b\u7fd2\u5f97\u306b\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u304c\u3001MobX\u3068Akita\u306f\u6bd4\u8f03\u7684\u7c21\u5358\u306b\u59cb\u3081\u3089\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306e\u30b5\u30dd\u30fc\u30c8\u3068\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8: \u6d3b\u767a\u306a\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u8c4a\u5bcc\u306a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u3088\u308a\u512a\u308c\u305f<strong>\u30b5\u30dd\u30fc\u30c8\u3068<\/strong>\u3088\u308a\u591a\u304f\u306e\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u610f\u5473\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u6700\u9069\u5316: \u4e00\u90e8\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u306f\u3001\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3001\u72b6\u614b\u306e\u6c38\u7d9a\u5316\u306a\u3069\u3001\u9ad8\u5ea6\u306a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<strong>\u306e\u6700\u9069\u5316<\/strong>\u304c\u63d0\u4f9b\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u67d4\u8edf\u6027\u3068\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3<\/strong>: \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30cb\u30fc\u30ba\u306b\u3088\u3063\u3066\u306f\u3001\u3088\u308a\u81ea\u7531\u5ea6\u3068\u62e1\u5f35\u6027\u3092\u5099\u3048\u305f\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u5fc5\u8981\u306b\u306a\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\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\u4e3b\u306b\u7406\u8ad6\u7684\u306a\u3082\u306e\u3067\u3042\u308b\u305f\u3081\u3001\u76f4\u63a5\u95a2\u9023\u3059\u308b\u30b3\u30fc\u30c9\u4f8b\u306f\u3042\u308a\u307e\u305b\u3093\u3002 \u305f\u3060\u3057\u3001\u5358\u7d14\u306a\u30b3\u30fc\u30c9\u307e\u305f\u306f\u64ec\u4f3c\u30b3\u30fc\u30c9\u3067\u3055\u307e\u3056\u307e\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u3069\u306e\u3088\u3046\u306b\u4f7f\u7528\u3055\u308c\u308b\u304b\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u3066\u3001\u305d\u308c\u3089\u306e\u9055\u3044\u3092\u3088\u308a\u3088\u304f\u7406\u89e3\u3059\u308b\u3053\u3068\u304c\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>\/\/ Redux-like pseudo-code const newState = reducer(oldState, action); \/\/ MobX-like pseudo-code observableState.property = newValue; \/\/ NgRx-like pseudo-code this.store.dispatch(new SomeAction()); \/\/ Akita-like pseudo-code this.someService.updateState({ key: newValue });<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u7c21\u5358\u306a\u4f8b\u3092\u4f7f\u7528\u3057\u3066\u3001\u3055\u307e\u3056\u307e\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4f7f\u7528\u65b9\u6cd5\u3068\u69cb\u6587\u306e\u6982\u8981\u3092\u628a\u63e1\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\u7b2c3\u7ae0\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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 \u6280\u8853\u306e\u6bd4\u8f03<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u72b6\u614b\u7ba1\u7406\u30c6\u30af\u30ce\u30ed\u30b8\u3092\u9078\u629e\u3059\u308b\u3068\u304d\u306f\u3001\u3055\u307e\u3056\u307e\u306a\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u9055\u3044\u3092\u7406\u89e3\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u3088\u308a\u591a\u304f\u306e\u60c5\u5831\u306b\u57fa\u3065\u3044\u305f\u610f\u601d\u6c7a\u5b9a\u3092\u884c\u3046\u306e\u306b\u5f79\u7acb\u3064\u3060\u3051\u3067\u306a\u304f\u3001\u9078\u629e\u3057\u305f\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u304c\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30cb\u30fc\u30ba\u306b\u6700\u3082\u9069\u3057\u3066\u3044\u308b\u3053\u3068\u304c\u4fdd\u8a3c\u3055\u308c\u307e\u3059\u3002 \u3053\u3053\u3067\u306f\u3001\u3044\u304f\u3064\u304b\u306e\u4e00\u822c\u7684\u306a\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u6bd4\u8f03\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Redux\u306e\/ NgRx<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\u9577\u6240<\/strong>:\u69cb\u9020\u5316\u3055\u308c\u3001\u4e88\u6e2c\u53ef\u80fd\u3067\u3001\u5f37\u529b\u306a\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30b5\u30dd\u30fc\u30c8\u3002<\/li>\n\n\n\n<li><strong>\u77ed\u6240<\/strong>: \u5b66\u7fd2\u66f2\u7dda\u304c\u9ad8\u304f\u3001\u3088\u308a\u591a\u304f\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8 \u30b3\u30fc\u30c9\u304c\u5fc5\u8981\u306b\u306a\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>MobX<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\u9577\u6240<\/strong>:\u67d4\u8edf\u3067\u3001\u7c21\u5358\u306b\u59cb\u3081\u3089\u308c\u308b\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u81ea\u52d5\u8ffd\u8de1\u3002<\/li>\n\n\n\n<li><strong>\u77ed\u6240<\/strong>: \u69cb\u9020\u304c\u4e0d\u8db3\u3057\u3066\u3044\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u3001\u5927\u898f\u6a21\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u7ba1\u7406\u304c\u56f0\u96e3\u306a\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u79cb\u7530:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>\u9577\u6240<\/strong>: \u30b7\u30f3\u30d7\u30eb\u3067\u52b9\u7387\u7684\u3067\u3001Angular \u3068\u3046\u307e\u304f\u7d71\u5408\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u77ed\u6240<\/strong>: \u6bd4\u8f03\u7684\u65b0\u3057\u3044\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30b5\u30dd\u30fc\u30c8\u306f\u3001\u4ed6\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u307b\u3069\u826f\u304f\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>NGXs<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>\u9577\u6240<\/strong>:\u7c21\u5358\u306b\u59cb\u3081\u3089\u308c\u3001\u30e2\u30c7\u30eb\u99c6\u52d5\u578b\u3067\u3001\u4fbf\u5229\u306a\u30d7\u30e9\u30b0\u30a4\u30f3\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3002<\/li>\n\n\n\n<li><strong>\u77ed\u6240<\/strong>: \u3059\u3079\u3066\u306e\u30bf\u30a4\u30d7\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3001\u7279\u306b\u9ad8\u5ea6\u306a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u304c\u5fc5\u8981\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u6a5f\u80fd\u3057\u306a\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\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\u4e3b\u306b\u7406\u8ad6\u7684\u306a\u3082\u306e\u3067\u3042\u308b\u305f\u3081\u3001\u76f4\u63a5\u95a2\u9023\u3059\u308b\u30b3\u30fc\u30c9\u4f8b\u306f\u3042\u308a\u307e\u305b\u3093\u3002 \u305f\u3060\u3057\u3001\u5358\u7d14\u306a\u30a2\u30d7\u30ea\u3084\u6a5f\u80fd\u3092\u4f5c\u6210\u3057\u3001\u3055\u307e\u3056\u307e\u306a\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u5b9f\u88c5\u3057\u3066\u307f\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002 \u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001\u5404\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u9577\u6240\u3068\u77ed\u6240\u3092\u3088\u308a\u76f4\u611f\u7684\u306b\u7406\u89e3\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u5358\u7d14\u306a\u30ab\u30a6\u30f3\u30bf\u30fc \u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u3001\u305d\u308c\u305e\u308c Redux\/NgRx\u3001MobX\u3001Akita\u3001NgXs \u3092\u4f7f\u7528\u3057\u3066\u5b9f\u88c5\u3092\u8a66\u307f\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306f\u3001\u3053\u308c\u3089\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u5b9f\u969b\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u3069\u306e\u3088\u3046\u306b\u6a5f\u80fd\u3059\u308b\u304b\u3092\u3088\u308a\u3088\u304f\u7406\u89e3\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\u7b2c3\u7ae0\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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 \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u9069\u3057\u305f\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3092\u9078\u629e\u3059\u308b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u3055\u307e\u3056\u307e\u306a\u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u9577\u6240\u3068\u77ed\u6240\u3092\u8a55\u4fa1\u3057\u305f\u5f8c\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30cb\u30fc\u30ba\u306b\u6700\u3082\u9069\u3057\u305f\u3082\u306e\u3092\u9078\u629e\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u6c7a\u5b9a\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u3044\u304f\u3064\u304b\u306e\u8981\u56e0\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30b5\u30a4\u30ba<\/strong>: \u5927\u898f\u6a21\u307e\u305f\u306f\u8907\u96d1\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u5834\u5408\u306f\u3001NgRx \u3084 Redux \u306a\u3069\u3001\u69cb\u9020\u3068\u4ed5\u69d8\u3092\u63d0\u4f9b\u3059\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u9078\u629e\u3059\u308b\u65b9\u304c\u6709\u5229\u306a\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30c1\u30fc\u30e0 \u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9<\/strong>: \u30c1\u30fc\u30e0\u304c\u65e2\u306b\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u7cbe\u901a\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u3001\u540c\u3058\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3059\u308b\u3068\u958b\u767a\u52b9\u7387\u304c\u5411\u4e0a\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u7279\u5b9a\u306e<\/strong>\u30cb\u30fc\u30ba: \u4e00\u90e8\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u306f\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306e\u30c7\u30fc\u30bf\u540c\u671f\u3001\u30aa\u30d5\u30e9\u30a4\u30f3 \u30b5\u30dd\u30fc\u30c8\u306a\u3069\u306e\u7279\u5225\u306a\u30cb\u30fc\u30ba\u304c\u3042\u308b\u5834\u5408\u304c\u3042\u308a\u3001\u9078\u629e\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u5c06\u6765\u306e\u4fdd\u5b88\u6027<\/strong>: \u9577\u671f\u7684\u306a\u4fdd\u5b88\u3092\u5ff5\u982d\u306b\u7f6e\u3044\u3066\u3001\u6d3b\u767a\u306a\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u512a\u308c\u305f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u5099\u3048\u305f\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u9078\u629e\u3059\u308b\u306e\u304c\u8ce2\u660e\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306b\u95a2\u3059\u308b\u8003\u616e\u4e8b\u9805<\/strong>: \u30a2\u30d7\u30ea\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8981\u4ef6\u304c\u53b3\u3057\u3044\u5834\u5408\u306f\u3001\u9ad8\u5ea6\u306a\u6700\u9069\u5316\u6a5f\u80fd\u3092\u63d0\u4f9b\u3059\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u9078\u629e\u3059\u308b\u65b9\u304c\u9069\u5207\u306a\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\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\u4e3b\u306b\u7406\u8ad6\u7684\u306a\u3082\u306e\u3067\u3042\u308b\u305f\u3081\u3001\u76f4\u63a5\u95a2\u9023\u3059\u308b\u30b3\u30fc\u30c9\u4f8b\u306f\u3042\u308a\u307e\u305b\u3093\u3002 \u305f\u3060\u3057\u3001\u6b21\u306e\u64ec\u4f3c\u30b3\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u3066\u610f\u601d\u6c7a\u5b9a\u30d7\u30ed\u30bb\u30b9\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>plaintext\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>if (projectScale === 'large') { choose('NgRx or Redux'); } else if (teamExperience.includes('MobX')) { choose('MobX'); } else if (specialRequirements.includes('real-time data')) { choose('any library with real-time support'); } else { choose('any library that fits the project'); }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u5358\u7d14\u306a\u30ed\u30b8\u30c3\u30af\u306f\u3001\u610f\u601d\u6c7a\u5b9a\u3092\u884c\u3046\u969b\u306e\u57fa\u6e96\u70b9\u3068\u3057\u3066\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\u7b2c3\u7ae0\u306e3\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u7ae0\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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\">\u7b2c4\u7ae0:NgRx\u306e\u6df1\u5800\u308a<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 NgRx\u306e\u57fa\u672c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>NgRx\u306fAngular\u5c02\u7528\u306b\u8a2d\u8a08\u3055\u308c\u3066\u304a\u308a\u3001\u72b6\u614b\u3092\u7ba1\u7406\u3059\u308b\u305f\u3081\u306e\u69cb\u9020\u5316\u3055\u308c\u305f\u4e88\u6e2c\u53ef\u80fd\u306a\u65b9\u6cd5\u3092\u63d0\u4f9b\u3059\u308b\u305f\u3081\u3001\u3053\u306e\u7ae0\u3067\u306fNgRx\u3092\u4f7f\u7528\u3057\u3066\u72b6\u614b\u3092\u7ba1\u7406\u3059\u308b\u65b9\u6cd5\u306b\u7126\u70b9\u3092\u5f53\u3066\u307e\u3059\u3002 \u307e\u305a\u3001NgRx\u306e\u57fa\u672c\u7684\u306a\u6982\u5ff5\u3092\u7406\u89e3\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b9\u30c8\u30a2<\/strong>:NgRx\u3067\u306f\u3001\u30b9\u30c8\u30a2\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u306e\u72b6\u614b\u3092\u683c\u7d0d\u3059\u308b\u4e0d\u5909\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30b3\u30f3\u30c6\u30ca\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u30a2\u30af\u30b7\u30e7\u30f3:&nbsp;<strong>\u30a2\u30af\u30b7\u30e7\u30f3<\/strong>\u306f\u3001\u72b6\u614b\u304c\u3069\u306e\u3088\u3046\u306b\u5909\u5316\u3059\u308b\u304b\u3092\u8a18\u8ff0\u3059\u308b\u5358\u7d14\u306a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002 \u901a\u5e38\u30011 \u3064\u306e\u30d5\u30a3\u30fc\u30eb\u30c9\u3068 1 \u3064\u306e\u7701\u7565\u53ef\u80fd\u306a\u30d5\u30a3\u30fc\u30eb\u30c9\u304c\u3042\u308a\u307e\u3059\u3002<code>type<\/code><code>payload<\/code><\/li>\n\n\n\n<li><strong>\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc<\/strong>: \u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306f\u3001\u73fe\u5728\u306e\u72b6\u614b\u3068\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u57fa\u3065\u3044\u3066\u65b0\u3057\u3044\u72b6\u614b\u3092\u8a08\u7b97\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u7d14\u7c8b\u306a\u95a2\u6570\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u52b9\u679c:&nbsp;<strong>\u52b9\u679c<\/strong>\u306f\u3001\u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3057\u3001API \u306a\u3069\u306e\u5916\u90e8\u30ea\u30bd\u30fc\u30b9\u3068\u5bfe\u8a71\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30bb\u30ec\u30af\u30bf\u30fc:&nbsp;<strong>\u30bb\u30ec\u30af\u30bf\u30fc<\/strong>\u306f\u3001\u30b9\u30c8\u30a2\u304b\u3089\u30c7\u30fc\u30bf\u3092\u9078\u629e\u3057\u3066\u7d50\u5408\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u7d14\u7c8b\u306a\u95a2\u6570\u3067\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p>\u307e\u305a\u3001NgRx\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\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 @ngrx\/store @ngrx\/effects --save<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u5358\u7d14\u306a\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\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>\/\/ counter.actions.ts import { createAction } from '@ngrx\/store'; export const increment = createAction('[Counter] Increment'); export const decrement = createAction('[Counter] Decrement');<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u3053\u308c\u3089\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u51e6\u7406\u3059\u308b Reducer \u3092\u4f5c\u6210\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>\/\/ counter.reducer.ts import { createReducer, on } from '@ngrx\/store'; import { increment, decrement } from '.\/counter.actions'; export const initialState = 0; const _counterReducer = createReducer( initialState, on(increment, state =&gt; state + 1), on(decrement, state =&gt; state - 1) ); export function counterReducer(state, action) { return _counterReducer(state, action); }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001NgRx\u304c\u63d0\u4f9b\u3059\u308band\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3068\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<code>createAction<\/code><code>createReducer<\/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 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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 \u975e\u540c\u671f\u64cd\u4f5c\u3067\u306e\u30a8\u30d5\u30a7\u30af\u30c8\u306e\u4f7f\u7528<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u8907\u96d1\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001API \u547c\u3073\u51fa\u3057\u3001\u30bf\u30a4\u30de\u30fc\u3001\u305d\u306e\u4ed6\u306e\u975e\u540c\u671f\u30a4\u30d9\u30f3\u30c8\u306a\u3069\u306e\u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002 NgRx\u306f\u3001\u3053\u308c\u3089\u306e\u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3057\u3001\u7d50\u679c\u3092\u65b0\u3057\u3044\u30a2\u30af\u30b7\u30e7\u30f3\u3068\u3057\u3066\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3059\u308bEffects\u3068\u3044\u3046\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30a8\u30d5\u30a7\u30af\u30c8\u306e\u4e2d\u5fc3\u7684\u306a\u6982\u5ff5\u306f\u3001RxJS Observables \u3092\u4f7f\u7528\u3057\u3066\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u30ea\u30c3\u30b9\u30f3\u3057\u3001\u305d\u308c\u3089\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u57fa\u3065\u3044\u3066\u975e\u540c\u671f\u64cd\u4f5c\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u975e\u540c\u671f\u30ed\u30b8\u30c3\u30af\u3092\u7d14\u7c8b\u306a\u72b6\u614b\u7ba1\u7406\u30ed\u30b8\u30c3\u30af (\u3064\u307e\u308a\u3001\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc) \u304b\u3089\u5206\u96e2\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>\u307e\u305a\u3001NgRxEffects\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\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 @ngrx\/effects --save<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3059\u308b Effect \u3092\u4f5c\u6210\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>\/\/ counter.effects.ts import { Injectable } from '@angular\/core'; import { Actions, ofType, createEffect } from '@ngrx\/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from 'rxjs\/operators'; import * as counterActions from '.\/counter.actions'; import { MyService } from '.\/my.service'; @Injectable() export class CounterEffects { loadData$ = createEffect(() =&gt; this.actions$.pipe( ofType(counterActions.increment), mergeMap(() =&gt; this.myService.getAll() .pipe( map(data =&gt; counterActions.loadDataSuccess({ data })), catchError(() =&gt; EMPTY) )) ) ); constructor( private actions$: Actions, private myService: MyService ) {} }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u30ea\u30c3\u30b9\u30f3\u3059\u308b \u3068\u3044\u3046 Effect \u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002 Action \u304c\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3055\u308c\u308b\u3068\u3001Effect \u306f\u975e\u540c\u671f\u64cd\u4f5c\u3092\u5b9f\u884c\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u3001\u64cd\u4f5c\u304c\u6210\u529f\u3059\u308b\u3068\u65b0\u3057\u3044 Action \u3092\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3057\u307e\u3059\u3002<code>loadData$<\/code><code>increment<\/code><code>MyService.getAll()<\/code><code>loadDataSuccess<\/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\u306e2\u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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 \u30bb\u30ec\u30af\u30bf\u3092\u4f7f\u3063\u3066\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u53d6\u5f97\u3059\u308b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>NgRx\u3067\u306f\u3001\u30bb\u30ec\u30af\u30bf\u306f\u30b9\u30c8\u30a2\u304b\u3089\u72b6\u614b\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u7d14\u7c8b\u306a\u95a2\u6570\u3067\u3059\u3002 \u30bb\u30ec\u30af\u30bf\u30fc\u306f\u3001\u30b9\u30c8\u30a2\u306b\u76f4\u63a5\u79fb\u52d5\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u72b6\u614b\u3092\u7167\u4f1a\u3059\u308b\u305f\u3081\u306e\u52b9\u7387\u7684\u3067\u69cb\u6210\u53ef\u80fd\u306a\u65b9\u6cd5\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u72b6\u614b\u30af\u30a8\u30ea \u30ed\u30b8\u30c3\u30af\u306e\u518d\u5229\u7528\u3068\u30c6\u30b9\u30c8\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30bb\u30ec\u30af\u30bf\u306f\u3001\u76ee\u7684\u306e\u72b6\u614b\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3084\u30a8\u30d5\u30a7\u30af\u30c8\u3067\u3088\u304f\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002 \u3068\u95a2\u6570\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u72b6\u614b\u304c\u5909\u5316\u3057\u305f\u5834\u5408\u306b\u306e\u307f\u518d\u8a08\u7b97\u3059\u308b\u9ad8\u5ea6\u306b\u6700\u9069\u5316\u3055\u308c\u305f\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<code>createFeatureSelector<\/code><code>createSelector<\/code><\/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\u7279\u5b9a\u306e\u6a5f\u80fd\u9818\u57df\u306e\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306e\u6a5f\u80fd\u30bb\u30ec\u30af\u30bf\u3092\u4f5c\u6210\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>\/\/ counter.selectors.ts import { createFeatureSelector, createSelector } from '@ngrx\/store'; export const selectCounterFeature = createFeatureSelector&lt;number&gt;('counter');<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u3088\u308a\u5177\u4f53\u7684\u306a\u30bb\u30ec\u30af\u30bf\u3092\u4f5c\u6210\u3057\u3066\u3001\u76ee\u7684\u306e\u72b6\u614b\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u3092\u53d6\u5f97\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>\/\/ counter.selectors.ts (\u7eed) export const selectCounterValue = createSelector( selectCounterFeature, (state: number) =&gt; state );<\/code><\/p>\n\n\n\n<p>\u6700\u5f8c\u306b\u3001\u3053\u308c\u3089\u306e\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u305f\u306f\u30a8\u30d5\u30a7\u30af\u30c8\u3067\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>\/\/ counter.component.ts import { Store } from '@ngrx\/store'; import * as fromCounter from '.\/counter.selectors'; @Component({ \/\/ ... }) export class CounterComponent { counter$ = this.store.select(fromCounter.selectCounterValue); constructor(private store: Store) {} }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u524d\u306b\u4f5c\u6210\u3057\u305f\u30e1\u30bd\u30c3\u30c9\u3068 Selector \u3092\u4f7f\u7528\u3057\u3066\u3001\u73fe\u5728\u306e\u30ab\u30a6\u30f3\u30c8\u5024\u3092\u53d6\u5f97\u3057\u3001\u305d\u308c\u3092\u30aa\u30d6\u30b6\u30fc\u30d0\u30d6\u30eb\u306b\u683c\u7d0d\u3057\u3066\u3044\u307e\u3059\u3002<code>store.select()<\/code><code>selectCounterValue<\/code><code>counter$<\/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 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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 \u72b6\u614b\u306e\u6c38\u7d9a\u5316\u3068\u9045\u5ef6\u8aad\u307f\u8fbc\u307f<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u8907\u96d1\u306a Angular \u30a2\u30d7\u30ea\u3067\u306f\u3001\u72b6\u614b\u306e\u6c38\u7d9a\u6027\u3068\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3092\u691c\u8a0e\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002 \u72b6\u614b\u306e\u6c38\u7d9a\u5316\u3068\u306f\u3001\u30a2\u30d7\u30ea\u306e\u72b6\u614b\u3092\u3042\u308b\u7a2e\u306e\u6c38\u7d9a\u30b9\u30c8\u30ec\u30fc\u30b8 (localStorage \u306a\u3069) \u306b\u4fdd\u5b58\u3057\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30a2\u30d7\u30ea\u3092\u9589\u3058\u3066\u518d\u5ea6\u958b\u3044\u305f\u5f8c\u306b\u4ee5\u524d\u306e\u72b6\u614b\u306b\u623b\u305b\u308b\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3092\u610f\u5473\u3057\u307e\u3059\u3002 \u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u306f\u3001\u30a2\u30d7\u30ea\u306e\u6a5f\u80fd\u306e\u4e00\u90e8\u3092\u30aa\u30f3\u30c7\u30de\u30f3\u30c9\u3067\u8aad\u307f\u8fbc\u307f\u3001\u30a2\u30d7\u30ea\u306e\u8d77\u52d5\u3092\u9ad8\u901f\u5316\u3059\u308b\u6700\u9069\u5316\u624b\u6cd5\u3067\u3059\u3002<\/p>\n\n\n\n<p>NgRx\u306f\u3001\u4e21\u65b9\u306e\u30cb\u30fc\u30ba\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u305f\u3081\u306e\u591a\u304f\u306e\u30c4\u30fc\u30eb\u3068\u30d1\u30bf\u30fc\u30f3\u3092\u63d0\u4f9b\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><strong>\u72b6\u614b\u306e\u6c38\u7d9a\u6027<\/strong><\/p>\n\n\n\n<p>\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u72b6\u614b\u306e\u6c38\u7d9a\u6027\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<code>ngrx-store-localstorage<\/code><\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm install ngrx-store-localstorage --save<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30fb\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u6b21\u306e\u3088\u3046\u306b\u69cb\u6210\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>\/\/ app.module.ts import { localStorageSync } from 'ngrx-store-localstorage'; const reducers = { counter: counterReducer }; function localStorageSyncReducer(reducer: ActionReducer&lt;any&gt;): ActionReducer&lt;any&gt; { return localStorageSync({ keys: ['counter'], rehydrate: true })(reducer); } @NgModule({ imports: [ StoreModule.forRoot(reducers, { metaReducers: [localStorageSyncReducer] }) ], \/\/ ... }) export class AppModule { }<\/code><\/p>\n\n\n\n<p><strong>\u9045\u5ef6\u8aad\u307f\u8fbc\u307f<\/strong><\/p>\n\n\n\n<p>Angular \u3067\u306f\u3001Angular Router \u306e\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u6a5f\u80fd\u3092\u4f7f\u7528\u3057\u3066\u3001\u7279\u5b9a\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3067\u304d\u307e\u3059\u3002 NgRx\u3067\u306f\u3001\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u7279\u5b9a\u306e\u6a5f\u80fd\u306e\u72b6\u614b\u3092\u9045\u5ef6\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002<code>forFeature<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ feature.module.ts @NgModule({ imports: [ StoreModule.forFeature('feature', featureReducer) ], \/\/ ... }) export class FeatureModule { }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u65b9\u6cd5\u3067\u306f\u3001\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3055\u308c\u305f\u5834\u5408\u306b\u306e\u307f\u3001\u72b6\u614b\u304c\u30b0\u30ed\u30fc\u30d0\u30eb\u72b6\u614b\u306b\u8ffd\u52a0\u3055\u308c\u307e\u3059\u3002<code>feature<\/code><code>FeatureModule<\/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 4 \u7ae0\u306e 4 \u756a\u76ee\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3059\u3002 \u3053\u306e\u65b9\u5411\u6027\u304c\u9069\u5207\u3060\u3068\u611f\u3058\u305f\u5834\u5408\u306f\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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.5 \u30c6\u30b9\u30c8\u3068\u30c7\u30d0\u30c3\u30b0<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30c6\u30b9\u30c8\u3068\u30c7\u30d0\u30c3\u30b0\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u306b\u4e0d\u53ef\u6b20\u306a\u8981\u7d20\u3067\u3059\u3002 \u72b6\u614b\u7ba1\u7406\u306b NgRx \u3092\u4f7f\u7528\u3059\u308b Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u306f\u3001\u3088\u308a\u52b9\u679c\u7684\u306b\u30c6\u30b9\u30c8\u3068\u30c7\u30d0\u30c3\u30b0\u3092\u884c\u3046\u306e\u306b\u5f79\u7acb\u3064\u7279\u5b9a\u306e\u30c4\u30fc\u30eb\u3068\u30a2\u30d7\u30ed\u30fc\u30c1\u304c\u3044\u304f\u3064\u304b\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5358\u4f53\u30c6\u30b9\u30c8<\/strong>:NgRx\u306e\u7d14\u7c8b\u306b\u6a5f\u80fd\u7684\u306a\u6027\u8cea\u306b\u3088\u308a\u3001\u5358\u4f53\u30c6\u30b9\u30c8\u306f\u6bd4\u8f03\u7684\u7c21\u5358\u306b\u306a\u308a\u307e\u3059\u3002 \u30a2\u30af\u30b7\u30e7\u30f3\u3001\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u306f\u500b\u5225\u306b\u30c6\u30b9\u30c8\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30a8\u30d5\u30a7\u30af\u30c8 \u30c6\u30b9\u30c8: \u30a8\u30d5\u30a7\u30af\u30c8\u306e\u5834\u5408\u3001Angular \u306e\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165\u3068 RxJS \u306e<strong>\u30c6\u30b9\u30c8<\/strong>&nbsp;\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>Redux DevTools<\/strong>: NgRx \u306f\u3001\u30b9\u30c8\u30a2\u306e\u72b6\u614b\u3092\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u8868\u793a\u3057\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3057\u3001\u72b6\u614b\u306e\u5909\u5316\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306e\u975e\u5e38\u306b\u5f37\u529b\u306a\u30d6\u30e9\u30a6\u30b6\u30fc\u62e1\u5f35\u6a5f\u80fd\u3067\u3042\u308b Redux DevTools \u3068\u4e92\u63db\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p><strong>\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3092\u30c6\u30b9\u30c8\u3059\u308b<\/strong><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ counter.reducer.spec.ts import { counterReducer } from '.\/counter.reducer'; import * as fromCounter from '.\/counter.actions'; describe('Counter Reducer', () =&gt; { it('should return the initial state', () =&gt; { const action = {} as any; const result = counterReducer(undefined, action); expect(result).toBe(0); }); it('should increment the state', () =&gt; { const action = fromCounter.increment(); const result = counterReducer(0, action); expect(result).toBe(1); }); });<\/code><\/p>\n\n\n\n<p><strong>Redux DevTools \u3092\u4f7f\u7528\u3059\u308b<\/strong><\/p>\n\n\n\n<p>Redux DevTools \u30d6\u30e9\u30a6\u30b6\u30fc\u62e1\u5f35\u6a5f\u80fd\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u5f8c\u3001\u30a2\u30d7\u30ea \u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u3001DevTools \u306e\u30b5\u30dd\u30fc\u30c8\u3092\u6709\u52b9\u306b\u3059\u308b\u3053\u3068\u304c\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>\/\/ app.module.ts import { StoreDevtoolsModule } from '@ngrx\/store-devtools'; @NgModule({ imports: [ \/\/ ... StoreDevtoolsModule.instrument({ maxAge: 25 \/\/ Retains last 25 states }) ], \/\/ ... }) export class AppModule { }<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001Redux DevTools \u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u306e\u72b6\u614b\u3092\u8868\u793a\u304a\u3088\u3073\u30c7\u30d0\u30c3\u30b0\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\u304c\u7b2c4\u7ae0\u7b2c5\u6b3e\u306e\u5185\u5bb9\u3067\u3042\u308b\u3002 \u3053\u308c\u306f\u3001\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6700\u5f8c\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3082\u3042\u308a\u307e\u3059\u3002 \u6b21\u306b\u3001\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u5168\u4f53\u3092\u8981\u7d04\u3057\u3001\u3055\u3089\u306a\u308b\u5b66\u7fd2\u306e\u305f\u3081\u306e\u53c2\u8003\u8cc7\u6599\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/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\">\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u6982\u8981<\/h2>\n\n\n\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306f\u3001Angular \u306e\u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u3092\u7406\u89e3\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u5305\u62ec\u7684\u306a\u30ac\u30a4\u30c9\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u3092\u76ee\u7684\u3068\u3057\u3066\u3044\u307e\u3059\u3002 \u307e\u305a\u3001\u72b6\u614b\u7ba1\u7406\u306e\u57fa\u672c\u6982\u5ff5\u3092\u7d39\u4ecb\u3057\u3001\u6b21\u306b\u3001\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308b\u3044\u304f\u3064\u304b\u306e\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30ea\u30b9\u30c8\u3057\u3066\u6bd4\u8f03\u3057\u307e\u3057\u305f\u3002 \u6700\u7d42\u7684\u306b\u3001\u79c1\u305f\u3061\u306f\u8a73\u7d30\u306a\u6559\u80b2\u306e\u305f\u3081\u306bNgRx\u3092\u9078\u3073\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u6b21\u306e\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u72b6\u614b\u7ba1\u7406\u306e\u91cd\u8981\u6027\u3068\u57fa\u672c\u6982\u5ff5\u3092\u7406\u89e3\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>Angular \u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u306e\u4e3b\u8981\u306a\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u3064\u3044\u3066\u5b66\u7fd2\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30cb\u30fc\u30ba\u306b\u57fa\u3065\u3044\u3066\u9069\u5207\u306a\u72b6\u614b\u7ba1\u7406\u30c6\u30af\u30ce\u30ed\u30b8\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30a2\u30af\u30b7\u30e7\u30f3\u3001\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3001\u30a8\u30d5\u30a7\u30af\u30c8\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u306a\u3069\u3001NgRx\u306e\u57fa\u672c\u3092\u30de\u30b9\u30bf\u30fc\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u72b6\u614b\u306e\u6c38\u7d9a\u5316\u3068\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3092\u884c\u3046\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>NgRx\u306e\u30c6\u30b9\u30c8\u304a\u3088\u3073\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb\u306b\u7cbe\u901a\u3057\u3066\u3044\u308b\u3053\u3068\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u3055\u3089\u306a\u308b\u7814\u7a76\u306e\u305f\u3081\u306e\u53c2\u8003\u6587\u732e<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/ngrx.io\/\">NgRx\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/angular.io\/guide\/state-management\">\u516c\u5f0f\u306eAngular\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u72b6\u614b\u7ba1\u7406\u30bb\u30af\u30b7\u30e7\u30f3<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/redux.js.org\/\">Redux\u306e\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/mobx.js.org\/README.html\">MobX\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/datorama.github.io\/akita\/\">\u79cb\u7530\u770c\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.ngxs.io\/\">NgXs\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rxjs.dev\/\">RxJS \u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/angular.io\/guide\/testing\">\u89d2\u5ea6\u30c6\u30b9\u30c8\u30ac\u30a4\u30c9<\/a><\/li>\n<\/ol>\n\n\n\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u304c\u3001Angular \u306e\u72b6\u614b\u7ba1\u7406\u3092\u3088\u308a\u3088\u304f\u7406\u89e3\u3057\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u5f79\u7acb\u3064\u30ac\u30a4\u30c0\u30f3\u30b9\u3092\u63d0\u4f9b\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u3053\u3068\u3092\u9858\u3063\u3066\u3044\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u3084\u3054\u4e0d\u660e\u306a\u70b9\u304c\u3054\u3056\u3044\u307e\u3057\u305f\u3089\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c4\u7ae0:NgRx\u306e\u57fa\u672c 1.&lt;&gt; NgRx\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3 ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 NgRx\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>NgRx\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306f\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u7528\u306b\u7279\u5225\u306b\u8a2d\u8a08\u3055\u308c\u305fRedux\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306b\u57fa\u3065\u304f\u72b6\u614b\u7ba1\u7406\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002 RxJS \u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3001\u975e\u540c\u671f\u64cd\u4f5c\u3068\u30c7\u30fc\u30bf \u30d5\u30ed\u30fc\u3092\u51e6\u7406\u3057\u307e\u3059\u3002 NgRx\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306f\u3001\u6b21\u306e\u30b3\u30a2\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u69cb\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b9\u30c8\u30a2<\/strong>: \u30b9\u30c8\u30a2\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u5168\u4f53\u3092\u683c\u7d0d\u3059\u308b\u4e0d\u5909\u306e\u30c7\u30fc\u30bf\u69cb\u9020\u3067\u3059\u3002 \u3053\u308c\u306f\u3001\u30b9\u30c6\u30fc\u30bf\u30b9\u306e\u66f4\u65b0\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3067\u304d\u308b\u30aa\u30d6\u30b6\u30fc\u30d0\u30d6\u30eb\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u30a2\u30af\u30b7\u30e7\u30f3:&nbsp;<strong>\u30a2\u30af\u30b7\u30e7\u30f3<\/strong>\u306f\u3001\u4f55\u304c\u8d77\u3053\u3063\u305f\u304b\u3092\u8aac\u660e\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002 \u3053\u308c\u3089\u306f\u3001\u72b6\u614b\u3092\u5909\u66f4\u3059\u308b\u552f\u4e00\u306e\u65b9\u6cd5\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc<\/strong>: \u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306f\u3001\u73fe\u5728\u306e\u72b6\u614b\u3068\u7279\u5b9a\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u57fa\u3065\u3044\u3066\u65b0\u3057\u3044\u72b6\u614b\u3092\u751f\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u7d14\u7c8b\u306a\u95a2\u6570\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u30a8\u30d5\u30a7\u30af\u30c8:&nbsp;<strong>\u30a8\u30d5\u30a7\u30af\u30c8<\/strong>\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u3084\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306a\u3069\u306e\u5916\u90e8\u30d1\u30fc\u30c4\u3068\u306e\u3084\u308a\u53d6\u308a\u3092\u51e6\u7406\u3059\u308b\u30b5\u30fc\u30d3\u30b9\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u30bb\u30ec\u30af\u30bf\u30fc:&nbsp;<strong>\u30bb\u30ec\u30af\u30bf\u30fc<\/strong>\u306f\u3001\u30b9\u30c8\u30a2\u304b\u3089\u7279\u5b9a\u306e\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u306e\u72b6\u614b\u3092\u62bd\u51fa\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u95a2\u6570\u3067\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p><strong>NgRx\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/strong><\/p>\n\n\n\n<p>\u307e\u305a\u3001NgRx\u306e\u30b3\u30a2\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm install @ngrx\/store --save<\/code><\/p>\n\n\n\n<p><strong>\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u5b9a\u7fa9<\/strong><\/p>\n\n\n\n<p>NgRx\u3067\u306f\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u306f\u95a2\u6570\u306b\u3088\u3063\u3066\u5b9a\u7fa9\u3055\u308c\u307e\u3059\u3002<code>createAction<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ actions\/counter.actions.ts import { createAction } from '@ngrx\/store'; export const increment = createAction('[Counter] Increment'); export const decrement = createAction('[Counter] Decrement');<\/code><\/p>\n\n\n\n<p><strong>\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306e\u4f5c\u6210<\/strong><\/p>\n\n\n\n<p>Reducer \u306f\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u51e6\u7406\u3057\u3001\u65b0\u3057\u3044\u72b6\u614b\u3092\u8fd4\u3059\u7d14\u7c8b\u306a\u95a2\u6570\u3067\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ reducers\/counter.reducer.ts import { createReducer, on } from '@ngrx\/store'; import { increment, decrement } from '..\/actions\/counter.actions'; export const initialState = 0; const _counterReducer = createReducer( initialState, on(increment, (state) =&gt; state + 1), on(decrement, (state) =&gt; state - 1) ); export function counterReducer(state, action) { return _counterReducer(state, action); }<\/code><\/p>\n\n\n\n<p><strong>\u30b9\u30c8\u30a2\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3059\u308b<\/strong><\/p>\n\n\n\n<p>Angular\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u306f\u3001\u30b9\u30c8\u30a2\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/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 { StoreModule } from '@ngrx\/store'; import { counterReducer } from '.\/reducers\/counter.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ count: counterReducer }), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3001\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3001\u30b9\u30c8\u30a2\u3092\u542b\u3080\u57fa\u672c\u7684\u306aNgRx\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u304c\u6b63\u5e38\u306b\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3055\u308c\u307e\u3057\u305f\u3002 \u3053\u308c\u306fNgRx\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u57fa\u76e4\u3067\u3042\u308a\u3001\u305d\u306e\u4e0a\u306b\u30a8\u30d5\u30a7\u30af\u30c8\u3084\u30bb\u30ec\u30af\u30bf\u30fc\u306a\u3069\u306e\u3088\u308a\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c4\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f31\u300cNgRx\u306e\u57fa\u672c\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c4\u7ae0:NgRx\u306e\u57fa\u790e 2.&lt;&gt; \u30a2\u30af\u30b7\u30e7\u30f3ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 \u30a2\u30af\u30b7\u30e7\u30f3<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>NgRx\u3067\u306f\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u306f\u30a2\u30d7\u30ea\u3067\u767a\u751f\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u307e\u305f\u306f\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u8a18\u8ff0\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002 \u3053\u308c\u3089\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3092\u5909\u66f4\u3059\u308b\u552f\u4e00\u306e\u65b9\u6cd5\u3067\u3059\u3002 \u901a\u5e38\u3001\u5404 Action \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u306f\u3001\u30d5\u30a3\u30fc\u30eb\u30c9\u3068\u7701\u7565\u53ef\u80fd\u306a\u30d5\u30a3\u30fc\u30eb\u30c9\u304c\u542b\u307e\u308c\u307e\u3059\u3002<code>type<\/code><code>payload<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30bf\u30a4\u30d7<\/strong>: \u300c\u30a2\u30af\u30b7\u30e7\u30f3\u300d\u30d5\u30a3\u30fc\u30eb\u30c9\u306f\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u6027\u8cea\u307e\u305f\u306f\u76ee\u7684\u3092\u8aac\u660e\u3059\u308b\u6587\u5b57\u5217\u3067\u3059\u3002 \u901a\u5e38\u3001\u8b58\u5225\u3068\u30c7\u30d0\u30c3\u30b0\u3092\u5bb9\u6613\u306b\u3059\u308b\u305f\u3081\u306b\u3001\u306e\u5f62\u5f0f\u306b\u5f93\u3044\u307e\u3059\u3002<code>type<\/code><code>[Source] Event<\/code><\/li>\n\n\n\n<li><strong>\u30da\u30a4\u30ed\u30fc\u30c9<\/strong>:\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u95a2\u9023\u3059\u308b\u8ffd\u52a0\u30c7\u30fc\u30bf\u3092\u6e21\u3059\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u30d5\u30a3\u30fc\u30eb\u30c9\u3067\u3059\u3002<code>payload<\/code><\/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><strong>\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u5b9a\u7fa9<\/strong><\/p>\n\n\n\n<p>NgRx\u3067\u306f\u3001\u3053\u306e\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002 \u4ee5\u4e0b\u306f\u3001\u30ab\u30a6\u30f3\u30bf\u30fc\u3092\u5897\u3084\u3057\u3001\u30ab\u30a6\u30f3\u30bf\u30fc\u3092\u6e1b\u3089\u3059\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3059\u308b\u65b9\u6cd5\u306e\u7c21\u5358\u306a\u4f8b\u3067\u3059\u3002<code>createAction<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ actions\/counter.actions.ts import { createAction, props } from '@ngrx\/store'; export const increment = createAction('[Counter] Increment'); export const decrement = createAction('[Counter] Decrement'); export const add = createAction( '[Counter] Add', props&lt;{ amount: number }&gt;() );<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001 \u3068 \u30a2\u30af\u30b7\u30e7\u30f3\u306f\u305d\u3046\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u306f \u3068\u3044\u3046\u540d\u524d\u304c\u4ed8\u3051\u3089\u308c\u3066\u3044\u307e\u3059\u3002<code>increment<\/code><code>decrement<\/code><code>payload<\/code><code>add<\/code><code>amount<\/code><code>payload<\/code><\/p>\n\n\n\n<p><strong>\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u914d\u5e03<\/strong><\/p>\n\n\n\n<p>\u30a2\u30d7\u30ea\u3067\u306f\u3001\u901a\u5e38\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u305f\u306f\u30a8\u30d5\u30a7\u30af\u30c8\u306b\u914d\u5e03\u3057\u307e\u3059\u3002 \u4ee5\u4e0b\u306f\u3001Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u914d\u5e03\u3059\u308b\u65b9\u6cd5\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>\/\/ components\/counter.component.ts import { Component } from '@angular\/core'; import { Store } from '@ngrx\/store'; import * as CounterActions from '..\/actions\/counter.actions'; @Component({ selector: 'app-counter', template: ` &lt;button (click)=\"increment()\"&gt;Increment&lt;\/button&gt; &lt;button (click)=\"decrement()\"&gt;Decrement&lt;\/button&gt; &lt;button (click)=\"add(5)\"&gt;Add 5&lt;\/button&gt; `, }) export class CounterComponent { constructor(private store: Store) {} increment() { this.store.dispatch(CounterActions.increment()); } decrement() { this.store.dispatch(CounterActions.decrement()); } add(amount: number) { this.store.dispatch(CounterActions.add({ amount })); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u3001NgRx\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u633f\u5165\u3057\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u524d\u306b\u5b9a\u7fa9\u3057\u305f\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u914d\u5e03\u3057\u307e\u3059\u3002<code>Store<\/code><code>dispatch<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c4\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f32\u300c\u30a2\u30af\u30b7\u30e7\u30f3\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c4\u7ae0:NgRx\u306e\u57fa\u672c 3.&lt;&gt; \u30ec\u30c7\u30e5\u30fc\u30b5\u30fcChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.3 \u30ec\u30c7\u30e5\u30fc\u30b5\u30fc<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>NgRx\u3067\u306f\u3001\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306f\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u51e6\u7406\u3057\u3001\u30a2\u30d7\u30ea\u306e\u72b6\u614b\u3092\u66f4\u65b0\u3059\u308b\u7d14\u7c8b\u306a\u95a2\u6570\u3067\u3059\u3002 \u30a2\u30af\u30b7\u30e7\u30f3\u304c\u30b9\u30c8\u30a2\u306b\u914d\u5e03\u3055\u308c\u308b\u305f\u3073\u306b\u3001\u5bfe\u5fdc\u3059\u308b\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u304c\u547c\u3073\u51fa\u3055\u308c\u3066\u65b0\u3057\u3044\u72b6\u614b\u304c\u8a08\u7b97\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>Reducer \u95a2\u6570\u306f\u3001\u6b21\u306e 2 \u3064\u306e\u5f15\u6570\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u73fe\u5728\u306e\u72b6\u614b<\/strong>: \u3053\u308c\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u73fe\u5728\u306e\u72b6\u614b\u3001\u307e\u305f\u306f\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306b\u3088\u3063\u3066\u7ba1\u7406\u3055\u308c\u308b\u72b6\u614b\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u30a2\u30af\u30b7\u30e7\u30f3: \u3053\u308c\u306f\u3001\u914d\u5e03\u3055\u308c\u308b<strong>\u30a2\u30af\u30b7\u30e7\u30f3<\/strong>&nbsp;\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p>Reducer \u306f\u7d14\u7c8b\u306a\u95a2\u6570\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u3001\u540c\u3058\u5165\u529b (\u73fe\u5728\u306e\u72b6\u614b\u3068\u30a2\u30af\u30b7\u30e7\u30f3) \u304c\u4e0e\u3048\u3089\u308c\u305f\u5834\u5408\u3001\u5e38\u306b\u540c\u3058\u51fa\u529b (\u65b0\u3057\u3044\u72b6\u614b) \u3092\u8fd4\u3059\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><strong>\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306e\u5b9a\u7fa9<\/strong><\/p>\n\n\n\n<p>NgRx\u3067\u306f\u3001Reducer\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066Reducer\u3092\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002 \u30ab\u30a6\u30f3\u30bf\u30fc\u72b6\u614b\u3092\u7ba1\u7406\u3059\u308b\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3092\u5b9a\u7fa9\u3059\u308b\u65b9\u6cd5\u306e\u7c21\u5358\u306a\u4f8b\u3092\u6b21\u306b\u793a\u3057\u307e\u3059\u3002<code>createReducer<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ reducers\/counter.reducer.ts import { createReducer, on } from '@ngrx\/store'; import { increment, decrement, add } from '..\/actions\/counter.actions'; export const initialState = 0; const _counterReducer = createReducer( initialState, on(increment, (state) =&gt; state + 1), on(decrement, (state) =&gt; state - 1), on(add, (state, { amount }) =&gt; state + amount) ); export function counterReducer(state, action) { return _counterReducer(state, action); }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u3001\u304a\u3088\u3073\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u51e6\u7406\u3059\u308b \u3068\u3044\u3046 Reducer \u95a2\u6570\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u30a2\u30af\u30b7\u30e7\u30f3\u30bf\u30a4\u30d7\u3054\u3068\u306b\u3001\u73fe\u5728\u306e\u72b6\u614b\u3068\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u30da\u30a4\u30ed\u30fc\u30c9(\u5b58\u5728\u3059\u308b\u5834\u5408)\u3092\u53d7\u3051\u53d6\u308a\u3001\u65b0\u3057\u3044\u72b6\u614b\u3092\u8fd4\u3059\u30cf\u30f3\u30c9\u30e9\u30fc\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<code>_counterReducer<\/code><code>increment<\/code><code>decrement<\/code><code>add<\/code><\/p>\n\n\n\n<p><strong>\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3092\u4f7f\u7528<\/strong><\/p>\n\n\n\n<p>Angular \u30a2\u30d7\u30ea\u3067\u306f\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u69cb\u6210\u306b Reducer \u3092\u767b\u9332\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/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 { StoreModule } from '@ngrx\/store'; import { counterReducer } from '.\/reducers\/counter.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ counter: counterReducer }), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p>\u3053\u3053\u3067\u306f\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u767b\u9332\u3057\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001Reducer \u306f\u30a2\u30d7\u30ea\u306e\u72b6\u614b\u306e\u4e00\u90e8\u306b\u306a\u308a\u3001 \u306b\u95a2\u9023\u4ed8\u3051\u3089\u308c\u3066\u3044\u308b\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<code>StoreModule.forRoot<\/code><code>counterReducer<\/code><code>counter<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c4\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f33\u300c\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c4\u7ae0:NgRx\u306e\u57fa\u672c 4.&lt;&gt; \u30a8\u30d5\u30a7\u30af\u30c8ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.4 \u52b9\u679c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>NgRx\u3067\u306f\u3001Effects\u306f\u30b5\u30fc\u30d0\u30fc\u3084\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306a\u3069\u306e\u5916\u90e8\u30b7\u30b9\u30c6\u30e0\u3068\u306e\u76f8\u4e92\u4f5c\u7528\u3092\u51e6\u7406\u3059\u308b\u30b5\u30fc\u30d3\u30b9\u3067\u3059\u3002 Effects \u306f\u3001\u30b9\u30c8\u30a2\u306b\u914d\u5e03\u3055\u308c\u305f\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u30ea\u30c3\u30b9\u30f3\u3057\u3001\u305d\u308c\u3089\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u57fa\u3065\u3044\u3066\u3001\u975e\u540c\u671f\u547c\u3073\u51fa\u3057\u3001\u6c38\u7d9a\u30c7\u30fc\u30bf\u3078\u306e\u30a2\u30af\u30bb\u30b9\u3001\u4ed6\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u30c8\u30ea\u30ac\u30fc\u306a\u3069\u3001\u4e00\u9023\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30a8\u30d5\u30a7\u30af\u30c8\u306f RxJS Observables \u306b\u57fa\u3065\u3044\u3066\u3044\u308b\u305f\u3081\u3001\u975e\u540c\u671f\u64cd\u4f5c\u3084\u8907\u96d1\u306a\u30c7\u30fc\u30bf \u30d5\u30ed\u30fc\u3092\u7c21\u5358\u306b\u51e6\u7406\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><strong>\u30a8\u30d5\u30a7\u30af\u30c8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<p>\u307e\u305a\u3001NgRxEffects\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm install @ngrx\/effects --save<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001Angular\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u3001\u4ee5\u4e0b\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<code>EffectsModule<\/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 { EffectsModule } from '@ngrx\/effects'; import { CounterEffects } from '.\/effects\/counter.effects'; @NgModule({ imports: [ EffectsModule.forRoot([CounterEffects]), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p><strong>\u52b9\u679c\u306e\u5b9a\u7fa9<\/strong><\/p>\n\n\n\n<p>\u4ee5\u4e0b\u306f\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u30ea\u30c3\u30b9\u30f3\u3057\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u304c\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3055\u308c\u308b\u305f\u3073\u306b\u30b5\u30fc\u30d3\u30b9\u3092\u547c\u3073\u51fa\u3059\u5358\u7d14\u306a\u30a8\u30d5\u30a7\u30af\u30c8\u306e\u4f8b\u3067\u3059\u3002<code>increment<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ effects\/counter.effects.ts import { Injectable } from '@angular\/core'; import { Actions, ofType, createEffect } from '@ngrx\/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from 'rxjs\/operators'; import * as CounterActions from '..\/actions\/counter.actions'; import { MyService } from '..\/services\/my.service'; @Injectable() export class CounterEffects { incrementEffect$ = createEffect(() =&gt; this.actions$.pipe( ofType(CounterActions.increment), mergeMap(() =&gt; this.myService.incrementCounter() .pipe( map(data =&gt; CounterActions.incrementSuccess({ payload: data })), catchError(() =&gt; EMPTY) )) ) ); constructor( private actions$: Actions, private myService: MyService ) {} }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001 \u3068\u3044\u3046 Effect \u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u30a8\u30d5\u30a7\u30af\u30c8\u306f\u3001\u6f14\u7b97\u5b50\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u30ea\u30c3\u30b9\u30f3\u3057\u307e\u3059\u3002 Action \u304c\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3055\u308c\u308b\u3068\u3001Effect \u306f\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u3066\u975e\u540c\u671f\u64cd\u4f5c\u3092\u5b9f\u884c\u3057\u3001\u64cd\u4f5c\u304c\u6210\u529f\u3057\u305f\u5834\u5408\u306f\u65b0\u3057\u3044 Action \u3092\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3057\u307e\u3059\u3002<code>incrementEffect$<\/code><code>ofType<\/code><code>increment<\/code><code>MyService.incrementCounter()<\/code><code>incrementSuccess<\/code><\/p>\n\n\n\n<p>\u7b2c4\u7ae0\u7b2c4\u6b3e\u300c\u52b9\u679c\u300d\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c4\u7ae0:NgRx\u306e\u57fa\u672c 5.&lt;&gt; StoreChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.5 \u30b9\u30c8\u30a2<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>NgRx\u3067\u306f\u3001\u30b9\u30c8\u30a2\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3092\u683c\u7d0d\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u308b\u4e0d\u5909\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002 \u3053\u308c\u306f RxJS Observable \u3067\u3042\u308a\u3001\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3057\u3066\u30a2\u30d7\u30ea\u306e\u72b6\u614b\u306b\u95a2\u3059\u308b\u66f4\u65b0\u3092\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002 \u30b9\u30c8\u30a2\u306b\u306f\u3001\u72b6\u614b\u5909\u66f4\u3092\u30c8\u30ea\u30ac\u30fc\u3059\u308b\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u914d\u5e03\u3059\u308b\u65b9\u6cd5\u3082\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<code>dispatch<\/code><\/p>\n\n\n\n<p>\u30b9\u30c8\u30a2\u306f\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3001\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3001\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u63a5\u7d9a\u3059\u308bNgRx\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u4e2d\u5fc3\u7684\u306a\u90e8\u5206\u3067\u3042\u308a\u3001\u3053\u308c\u3089\u304c\u9023\u643a\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3092\u7ba1\u7406\u3067\u304d\u308b\u3088\u3046\u306b\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><strong>\u30b9\u30c8\u30a2\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3059\u308b<\/strong><\/p>\n\n\n\n<p>Angular \u30a2\u30d7\u30ea\u3067\u306f\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u69cb\u6210\u3067\u30b9\u30c8\u30a2\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/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 { StoreModule } from '@ngrx\/store'; import { counterReducer } from '.\/reducers\/counter.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ counter: counterReducer }), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30b9\u30c8\u30a2\u3092\u8a2d\u5b9a\u3057\u3001\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3092 [\u7ba1\u7406] \u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3068\u3057\u3066\u767b\u9332\u3057\u307e\u3059\u3002<code>StoreModule.forRoot<\/code><code>counterReducer<\/code><code>counter<\/code><\/p>\n\n\n\n<p><strong>\u30b9\u30c8\u30a2\u3092\u8cfc\u8aad\u3059\u308b<\/strong><\/p>\n\n\n\n<p>Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u30b9\u30c8\u30a2\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3057\u3066\u3001\u30b9\u30c6\u30fc\u30bf\u30b9\u306e\u66f4\u65b0\u3092\u53d6\u5f97\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>\/\/ components\/counter.component.ts import { Component } from '@angular\/core'; import { Store } from '@ngrx\/store'; import { Observable } from 'rxjs'; @Component({ selector: 'app-counter', template: ` &lt;div&gt;{{ counter$ | async }}&lt;\/div&gt; `, }) export class CounterComponent { counter$: Observable&lt;number&gt;; constructor(private store: Store&lt;{ counter: number }&gt;) { this.counter$ = store.select('counter'); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u3001NgRx\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u633f\u5165\u3057\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u72b6\u614b\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3057\u307e\u3059\u3002 Angular \u306e\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3092\u4f7f\u7528\u3057\u3066\u3001\u30aa\u30d6\u30b6\u30fc\u30d0\u30d6\u30eb\u3092\u81ea\u52d5\u7684\u306b\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u304a\u3088\u3073\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u89e3\u9664\u3057\u307e\u3059\u3002<code>Store<\/code><code>select<\/code><code>counter<\/code><code>async<\/code><\/p>\n\n\n\n<p><strong>\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u914d\u5e03<\/strong><\/p>\n\n\n\n<p>\u307e\u305f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067 Store \u306e\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u914d\u5e03\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<code>dispatch<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ components\/counter.component.ts (\u7eed) import * as CounterActions from '..\/actions\/counter.actions'; \/\/ ... (\u5728\u7ec4\u4ef6\u7c7b\u4e2d) increment() { this.store.dispatch(CounterActions.increment()); }<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u30e1\u30bd\u30c3\u30c9\u304c\u547c\u3073\u51fa\u3055\u308c\u308b\u305f\u3073\u306b\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u304c\u30b9\u30c8\u30a2\u306b\u914d\u5e03\u3055\u308c\u3001\u72b6\u614b\u306e\u5909\u5316\u304c\u30c8\u30ea\u30ac\u30fc\u3055\u308c\u307e\u3059\u3002<code>increment<\/code><code>increment<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c4\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f35\u300c\u30b9\u30c8\u30a2\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c5\u7ae0:NgRx Advanced 1.&lt;&gt;\u975e\u540c\u671f\u64cd\u4f5cChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.1 \u975e\u540c\u671f\u64cd\u4f5c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u5b9f\u969b\u306b\u306f\u3001API \u547c\u3073\u51fa\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u53d6\u308a\u3068\u66f8\u304d\u8fbc\u307f\u306a\u3069\u3001\u975e\u540c\u671f\u64cd\u4f5c\u306f\u975e\u5e38\u306b\u4e00\u822c\u7684\u3067\u3059\u3002 NgRx\u306f\u3001Effects\u3092\u4f7f\u7528\u3057\u3066\u3001\u3053\u308c\u3089\u306e\u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3059\u308b\u30a8\u30ec\u30ac\u30f3\u30c8\u306a\u65b9\u6cd5\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u30ea\u30c3\u30b9\u30f3\u3057\u3001\u65b0\u3057\u3044\u30a2\u30af\u30b7\u30e7\u30f3\u304c\u30b9\u30c8\u30a2\u306b\u914d\u5e03\u3055\u308c\u305f\u3068\u304d\u306b\u526f\u4f5c\u7528(\u975e\u540c\u671f\u64cd\u4f5c\u306a\u3069)\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u30d3\u30b8\u30cd\u30b9 \u30ed\u30b8\u30c3\u30af\u3092\u72b6\u614b\u7ba1\u7406\u30ed\u30b8\u30c3\u30af\u304b\u3089\u5207\u308a\u96e2\u3059\u3053\u3068\u304c\u3067\u304d\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4fdd\u5b88\u3068\u30c6\u30b9\u30c8\u304c\u5bb9\u6613\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><strong>NgRx\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/strong><\/p>\n\n\n\n<p>NgRx Effects\u3092\u307e\u3060\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm install @ngrx\/effects --save<\/code><\/p>\n\n\n\n<p><strong>\u975e\u540c\u671f\u30a8\u30d5\u30a7\u30af\u30c8\u306e\u4f5c\u6210<\/strong><\/p>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001 \u306e\u975e\u540c\u671f\u64cd\u4f5c\u304c\u3042\u308b\u3068\u3059\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306b\u51e6\u7406\u3059\u308b\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<code>fetchData<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ effects\/data.effects.ts import { Injectable } from '@angular\/core'; import { Actions, ofType, createEffect } from '@ngrx\/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from 'rxjs\/operators'; import * as DataActions from '..\/actions\/data.actions'; import { DataService } from '..\/services\/data.service'; @Injectable() export class DataEffects { fetchDataEffect$ = createEffect(() =&gt; this.actions$.pipe( ofType(DataActions.fetchData), mergeMap(() =&gt; this.dataService.fetchData() .pipe( map(data =&gt; DataActions.fetchDataSuccess({ payload: data })), catchError(() =&gt; EMPTY) )) ) ); constructor( private actions$: Actions, private dataService: DataService ) {} }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001Effect \u306f Action \u3092\u30ea\u30c3\u30b9\u30f3\u3057\u307e\u3059\u3002 Action \u304c\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3055\u308c\u308b\u3068\u3001Effect \u306f\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u3066\u975e\u540c\u671f\u64cd\u4f5c\u3092\u5b9f\u884c\u3057\u3001\u64cd\u4f5c\u304c\u6210\u529f\u3057\u305f\u5834\u5408\u306f\u65b0\u3057\u3044 Action \u3092\u30c7\u30a3\u30b9\u30d1\u30c3\u30c1\u3057\u307e\u3059\u3002<code>fetchDataEffect$<\/code><code>fetchData<\/code><code>DataService.fetchData()<\/code><code>fetchDataSuccess<\/code><\/p>\n\n\n\n<p><strong>\u30ec\u30b8\u30b9\u30bf\u52b9\u679c<\/strong><\/p>\n\n\n\n<p>\u6700\u5f8c\u306b\u3001\u3053\u306e\u30a8\u30d5\u30a7\u30af\u30c8\u3092 Angular \u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u767b\u9332\u3059\u308b\u3053\u3068\u3092\u5fd8\u308c\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002<\/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 { EffectsModule } from '@ngrx\/effects'; import { DataEffects } from '.\/effects\/data.effects'; @NgModule({ imports: [ EffectsModule.forRoot([DataEffects]), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u3067\u3001\u975e\u540c\u671f\u64cd\u4f5c\u3092\u51e6\u7406\u3059\u308b\u30a8\u30d5\u30a7\u30af\u30c8\u306e\u4f5c\u6210\u306b\u6210\u529f\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c5\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f31\u300c\u975e\u540c\u671f\u64cd\u4f5c\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c5\u7ae0:NgRx Advanced 2.&lt;&gt; ChatGPT\u3068Angular\u30b5\u30fc\u30d3\u30b9\u306e\u7d71\u5408<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.2 Angular\u30b5\u30fc\u30d3\u30b9\u3068\u306e\u7d71\u5408<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30b5\u30fc\u30d3\u30b9\u306f\u8907\u96d1\u306a\u30ed\u30b8\u30c3\u30af\u3092\u30ab\u30d7\u30bb\u30eb\u5316\u3057\u3001\u5916\u90e8\u30b7\u30b9\u30c6\u30e0\u3068\u5bfe\u8a71\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002 NgRx\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3067\u306f\u3001Effects\u3092\u4ecb\u3057\u3066Angular\u30b5\u30fc\u30d3\u30b9\u3068\u7c21\u5358\u306b\u7d71\u5408\u3057\u3001\u3088\u308a\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3068\u30ed\u30b8\u30c3\u30af\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u7d71\u5408\u306b\u3088\u308a\u3001\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u3068\u30c7\u30fc\u30bf\u30a2\u30af\u30bb\u30b9\u30ed\u30b8\u30c3\u30af\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u5206\u96e2\u3057\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u3088\u308a\u8efd\u91cf\u3067\u30c6\u30b9\u30c8\u3057\u3084\u3059\u304f\u3059\u308b\u3068\u540c\u6642\u306b\u3001\u72b6\u614b\u7ba1\u7406\u3092\u3088\u308a\u52b9\u7387\u7684\u3067\u4fdd\u5b88\u3057\u3084\u3059\u304f\u3059\u308b\u3053\u3068\u304c\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><strong>Angular \u30b5\u30fc\u30d3\u30b9\u3092\u4f5c\u6210\u3059\u308b<\/strong><\/p>\n\n\n\n<p>\u307e\u305a\u3001API \u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u5358\u7d14\u306a 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>\/\/ services\/data.service.ts import { Injectable } from '@angular\/core'; import { HttpClient } from '@angular\/common\/http'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class DataService { constructor(private http: HttpClient) {} fetchData(): Observable&lt;any&gt; { return this.http.get('https:\/\/api.example.com\/data'); } }<\/code><\/p>\n\n\n\n<p><strong>Angular \u30b5\u30fc\u30d3\u30b9\u3092\u6709\u52b9\u306b\u4f7f\u7528\u3059\u308b<\/strong><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u3053\u306e Angular \u30b5\u30fc\u30d3\u30b9\u3092 Effect \u3067\u4f7f\u7528\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>\/\/ effects\/data.effects.ts import { Injectable } from '@angular\/core'; import { Actions, ofType, createEffect } from '@ngrx\/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from 'rxjs\/operators'; import * as DataActions from '..\/actions\/data.actions'; import { DataService } from '..\/services\/data.service'; @Injectable() export class DataEffects { fetchDataEffect$ = createEffect(() =&gt; this.actions$.pipe( ofType(DataActions.fetchData), mergeMap(() =&gt; this.dataService.fetchData() .pipe( map(data =&gt; DataActions.fetchDataSuccess({ payload: data })), catchError(() =&gt; EMPTY) )) ) ); constructor( private actions$: Actions, private dataService: DataService ) {} }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u4f8b\u3067\u306f\u3001Effect \u306f Action \u3092\u30ea\u30c3\u30b9\u30f3\u3057\u3001\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u3092\u30d5\u30a7\u30c3\u30c1\u3057\u307e\u3059\u3002 \u53d6\u5f97\u304c\u6210\u529f\u3059\u308b\u3068\u3001\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092\u30da\u30a4\u30ed\u30fc\u30c9\u3068\u3057\u3066\u65b0\u3057\u3044\u30a2\u30af\u30b7\u30e7\u30f3\u304c\u914d\u5e03\u3055\u308c\u307e\u3059\u3002<code>fetchDataEffect$<\/code><code>fetchData<\/code><code>DataService<\/code><code>fetchData<\/code><code>fetchDataSuccess<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001Angular \u30b5\u30fc\u30d3\u30b9\u3092 NgRx Effect \u3068\u6b63\u5e38\u306b\u7d71\u5408\u3057\u3066\u3001\u3088\u308a\u9ad8\u5ea6\u306a\u975e\u540c\u671f\u64cd\u4f5c\u3068\u72b6\u614b\u7ba1\u7406\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c5\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f32\u300cAngular\u30b5\u30fc\u30d3\u30b9\u3068\u306e\u7d71\u5408\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c5\u7ae0:NgRx Advanced 3.&lt;&gt;\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.3 \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u306f\u3001\u5927\u898f\u6a21\u307e\u305f\u306f\u8907\u96d1\u306a Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u304a\u3051\u308b\u91cd\u8981\u306a\u8003\u616e\u4e8b\u9805\u3067\u3059\u3002 NgRx\u306f\u3001\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3001\u72b6\u614b\u306e\u6c38\u7d9a\u5316\u3001\u30bb\u30ec\u30af\u30bf\u3092\u4f7f\u7528\u3057\u305f\u52b9\u7387\u7684\u306a\u72b6\u614b\u30af\u30a8\u30ea\u306a\u3069\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u6700\u9069\u5316\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u3055\u307e\u3056\u307e\u306a\u30c4\u30fc\u30eb\u3068\u624b\u6cd5\u3092\u63d0\u4f9b\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><strong>\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u306e\u4f7f\u7528<\/strong><\/p>\n\n\n\n<p>NgRx\u306f\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u56fa\u6709\u306e\u72b6\u614b\u3068\u30a8\u30d5\u30a7\u30af\u30c8\u306e\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002 \u3053\u308c\u306b\u3088\u308a\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u72b6\u614b\u3092\u52d5\u7684\u306b\u8aad\u307f\u8fbc\u3093\u3067\u521d\u671f\u5316\u3067\u304d\u308b\u305f\u3081\u3001\u30a2\u30d7\u30ea\u306e\u521d\u671f\u8aad\u307f\u8fbc\u307f\u6642\u9593\u304c\u77ed\u7e2e\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ feature.module.ts import { NgModule } from '@angular\/core'; import { StoreModule } from '@ngrx\/store'; import { EffectsModule } from '@ngrx\/effects'; import { featureReducer } from '.\/reducers\/feature.reducer'; import { FeatureEffects } from '.\/effects\/feature.effects'; @NgModule({ imports: [ StoreModule.forFeature('feature', featureReducer), EffectsModule.forFeature([FeatureEffects]), ], }) export class FeatureModule {}<\/code><\/p>\n\n\n\n<p><strong>\u30b9\u30c6\u30fc\u30bf\u30b9\u30af\u30a8\u30ea\u306b\u30bb\u30ec\u30af\u30bf\u3092\u4f7f\u7528\u3059\u308b<\/strong><\/p>\n\n\n\n<p>\u30bb\u30ec\u30af\u30bf\u30fc\u306f\u3001\u30b9\u30c8\u30a2\u304b\u3089\u306e\u72b6\u614b\u3092\u52b9\u7387\u7684\u306b\u7167\u4f1a\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002 \u95a2\u6570\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30e1\u30e2\u5316\u3055\u308c\u305f\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f5c\u6210\u3057\u3066\u3001\u72b6\u614b\u304c\u5909\u5316\u3057\u305f\u3068\u304d\u306b\u306e\u307f\u518d\u8a08\u7b97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<code>createSelector<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ selectors\/feature.selectors.ts import { createSelector } from '@ngrx\/store'; export const selectFeature = (state) =&gt; state.feature; export const selectFeatureProperty = createSelector( selectFeature, (feature) =&gt; feature.property );<\/code><\/p>\n\n\n\n<p><strong>\u72b6\u614b\u306e\u6c38\u7d9a\u6027<\/strong><\/p>\n\n\n\n<p>\u5834\u5408\u306b\u3088\u3063\u3066\u306f\u3001\u30a2\u30d7\u30ea\u306e\u72b6\u614b\u3092\u30ed\u30fc\u30ab\u30eb \u30b9\u30c8\u30ec\u30fc\u30b8 (localStorage \u306a\u3069) \u306b\u4fdd\u6301\u3057\u3066\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 \u3053\u308c\u306f\u3001NgRx\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u7c21\u5358\u306b\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<code>@ngrx\/store-localstorage<\/code><\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm install @ngrx\/store-localstorage --save<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u69cb\u6210\u306b\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>\/\/ app.module.ts import { localStorageSync } from '@ngrx\/store-localstorage'; import { StoreModule, ActionReducerMap } from '@ngrx\/store'; const reducers: ActionReducerMap&lt;any&gt; = { \/\/ your reducers }; export function localStorageSyncReducer(reducer: ActionReducer&lt;any&gt;): ActionReducer&lt;any&gt; { return localStorageSync({ keys: ['your-key'], rehydrate: true })(reducer); } @NgModule({ imports: [ StoreModule.forRoot(reducers, { metaReducers: [localStorageSyncReducer] }), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001\u6307\u5b9a\u3057\u305f\u72b6\u614b\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u3092\u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u306b\u6c38\u7d9a\u5316\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c5\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f33\u300c\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c5\u7ae0:NgRx Advanced 4.&lt;&gt;\u30c6\u30b9\u30c8\u6226\u7565ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5.4 \u30c6\u30b9\u30c8\u6226\u7565<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30c6\u30b9\u30c8\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u306e\u4e0d\u53ef\u6b20\u306a\u90e8\u5206\u3067\u3042\u308a\u3001NgRx\u3082\u4f8b\u5916\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002 NgRx\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306f\u3001\u72b6\u614b\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3001\u304a\u3088\u3073\u526f\u4f5c\u7528\u3092\u660e\u78ba\u306b\u5206\u96e2\u3059\u308b\u305f\u3081\u3001\u5358\u4f53\u30c6\u30b9\u30c8\u3068\u7d71\u5408\u30c6\u30b9\u30c8\u306e\u4e21\u65b9\u306b\u6700\u9069\u3067\u3059\u3002 \u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3001\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3001\u30a8\u30d5\u30a7\u30af\u30c8\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u306a\u3069\u3001NgRx\u306e\u3055\u307e\u3056\u307e\u306a\u90e8\u5206\u3092\u30c6\u30b9\u30c8\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><strong>\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u30c6\u30b9\u30c8\u3059\u308b<\/strong><\/p>\n\n\n\n<p>\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u30c6\u30b9\u30c8\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u5358\u7d14\u306a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3042\u308b\u305f\u3081\u3001\u6bd4\u8f03\u7684\u7c21\u5358\u3067\u3059\u3002 \u3053\u308c\u3092\u884c\u3046\u306b\u306f\u3001\u4efb\u610f\u306e JavaScript \u30c6\u30b9\u30c8 \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f7f\u7528\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>\/\/ actions\/counter.actions.spec.ts import * as CounterActions from '.\/counter.actions'; describe('Counter Actions', () =&gt; { it('should create an increment action', () =&gt; { const action = CounterActions.increment(); expect(action.type).toEqual('[Counter] Increment'); }); });<\/code><\/p>\n\n\n\n<p><strong>\u30c6\u30b9\u30c8\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc<\/strong><\/p>\n\n\n\n<p>\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306f\u7d14\u7c8b\u306a\u95a2\u6570\u3067\u3042\u308b\u305f\u3081\u3001\u30c6\u30b9\u30c8\u3082\u7c21\u5358\u3067\u3059\u3002 Reducer \u95a2\u6570\u306e\u521d\u671f\u72b6\u614b\u3068\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3057\u3001\u8fd4\u3055\u308c\u305f\u65b0\u3057\u3044\u72b6\u614b\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>\/\/ reducers\/counter.reducer.spec.ts import { counterReducer } from '.\/counter.reducer'; import * as CounterActions from '..\/actions\/counter.actions'; describe('Counter Reducer', () =&gt; { it('should increment the state by 1', () =&gt; { const initialState = 0; const action = CounterActions.increment(); const newState = counterReducer(initialState, action); expect(newState).toEqual(1); }); });<\/code><\/p>\n\n\n\n<p><strong>\u30c6\u30b9\u30c8\u52b9\u679c<\/strong><\/p>\n\n\n\n<p>\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u30c6\u30b9\u30c8\u3059\u308b\u306b\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u30b5\u30fc\u30d3\u30b9\u3084\u305d\u306e\u4ed6\u306e\u5916\u90e8\u30ea\u30bd\u30fc\u30b9\u306a\u3069\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30e2\u30c3\u30af\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u3092\u884c\u3046\u306b\u306f\u3001\u95a2\u6570\u3068 Angular \u306e\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<code>provideMockActions<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ effects\/counter.effects.spec.ts import { TestBed } from '@angular\/core\/testing'; import { provideMockActions } from '@ngrx\/effects\/testing'; import { Observable } from 'rxjs'; import { CounterEffects } from '.\/counter.effects'; import * as CounterActions from '..\/actions\/counter.actions'; describe('Counter Effects', () =&gt; { let actions$: Observable&lt;any&gt;; let effects: CounterEffects; beforeEach(() =&gt; { TestBed.configureTestingModule({ providers: [ CounterEffects, provideMockActions(() =&gt; actions$), \/\/ other providers ], }); effects = TestBed.inject(CounterEffects); }); it('should be created', () =&gt; { expect(effects).toBeTruthy(); }); });<\/code><\/p>\n\n\n\n<p><strong>\u30c6\u30b9\u30c8\u30bb\u30ec\u30af\u30bf<\/strong><\/p>\n\n\n\n<p>\u30bb\u30ec\u30af\u30bf\u306f\u7d14\u7c8b\u306a\u95a2\u6570\u3067\u3042\u308b\u305f\u3081\u3001\u30bb\u30ec\u30af\u30bf\u306e\u30c6\u30b9\u30c8\u306f\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306e\u30c6\u30b9\u30c8\u3068\u4f3c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ selectors\/counter.selectors.spec.ts import * as fromCounter from '.\/counter.selectors'; describe('Counter Selectors', () =&gt; { it('should select the counter value', () =&gt; { const initialState = { counter: 1 }; const result = fromCounter.selectCounter(initialState); expect(result).toEqual(1); }); });<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c5\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f34\u300c\u30c6\u30b9\u30c8\u6226\u7565\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c6\u7ae0:ChatGPT\u306e\u7c21\u5358\u306a\u30a2\u30d7\u30ea\u4f5c\u6210\u306e\u5b9f\u8df5\u4f8b<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c 6 \u7ae0: \u5b9f\u8df5\u7684\u306a\u4f8b \u2013 \u7c21\u5358\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u6210<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u3053\u306e\u7ae0\u3067\u306f\u3001\u7c21\u5358\u306aTo-Do\u30ea\u30b9\u30c8\u30a2\u30d7\u30ea\u3092\u4f7f\u7528\u3057\u3066NgRx\u306e\u52d5\u4f5c\u3092\u793a\u3057\u307e\u3059\u3002 \u3053\u306e\u30a2\u30d7\u30ea\u306b\u306f\u3001ToDo\u3092\u8ffd\u52a0\u3001\u524a\u9664\u3001\u5b8c\u4e86\u3068\u3057\u3066\u30de\u30fc\u30af\u3059\u308b\u6a5f\u80fd\u304c\u542b\u307e\u308c\u307e\u3059\u3002 NgRx \u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u306e\u72b6\u614b\u3092\u7ba1\u7406\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><strong>1.Angular\u30a2\u30d7\u30ea\u3092\u521d\u671f\u5316\u3057\u307e\u3059<\/strong><\/p>\n\n\n\n<p>\u307e\u305a\u3001Angular CLI \u3092\u4f7f\u7528\u3057\u3066\u65b0\u3057\u3044 Angular \u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>ng new todo-app<\/code><\/p>\n\n\n\n<p><strong>2.NgRx\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059<\/strong><\/p>\n\n\n\n<p>app\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3001NgRx\u3092\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>cd todo-app npm install @ngrx\/store @ngrx\/effects --save<\/code><\/p>\n\n\n\n<p><strong>3. \u30a2\u30af\u30b7\u30e7\u30f3\u306e\u5b9a\u7fa9<\/strong><\/p>\n\n\n\n<p>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u4f5c\u6210\u3057\u307e\u3059\u3002<code>src\/app\/actions<\/code><code>todo.actions.ts<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ src\/app\/actions\/todo.actions.ts import { createAction, props } from '@ngrx\/store'; export const addTodo = createAction( '[Todo] Add Todo', props&lt;{ text: string }&gt;() ); export const toggleTodo = createAction( '[Todo] Toggle Todo', props&lt;{ id: number }&gt;() ); export const removeTodo = createAction( '[Todo] Remove Todo', props&lt;{ id: number }&gt;() );<\/code><\/p>\n\n\n\n<p><strong>4. \u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306e\u5b9a\u7fa9<\/strong><\/p>\n\n\n\n<p>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u4f5c\u6210\u3057\u307e\u3059\u3002<code>src\/app\/reducers<\/code><code>todo.reducer.ts<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ src\/app\/reducers\/todo.reducer.ts import { createReducer, on } from '@ngrx\/store'; import * as TodoActions from '..\/actions\/todo.actions'; export const initialState = []; const _todoReducer = createReducer( initialState, on(TodoActions.addTodo, (state, { text }) =&gt; [...state, { id: state.length + 1, text, completed: false }]), on(TodoActions.toggleTodo, (state, { id }) =&gt; state.map(todo =&gt; todo.id === id ? { ...todo, completed: !todo.completed } : todo)), on(TodoActions.removeTodo, (state, { id }) =&gt; state.filter(todo =&gt; todo.id !== id)) ); export function todoReducer(state, action) { return _todoReducer(state, action); }<\/code><\/p>\n\n\n\n<p><strong>5.\u30b9\u30c8\u30a2\u3068\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306b\u30b5\u30a4\u30f3\u30a2\u30c3\u30d7\u3057\u307e\u3059<\/strong><\/p>\n\n\n\n<p>Store \u3068 Reducer \u3092 \u306b\u767b\u9332\u3057\u307e\u3059\u3002<code>src\/app\/app.module.ts<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ src\/app\/app.module.ts import { StoreModule } from '@ngrx\/store'; import { todoReducer } from '.\/reducers\/todo.reducer'; @NgModule({ imports: [ StoreModule.forRoot({ todos: todoReducer }), \/\/ other imports ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p><strong>6. UI \u3068\u30ed\u30b8\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b<\/strong><\/p>\n\n\n\n<p>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b UI \u3068\u30ed\u30b8\u30c3\u30af\u3092\u4f5c\u6210\u3057\u3066\u5b9f\u88c5\u3057\u307e\u3059\u3002<code>src\/app\/components<\/code><code>todo-list.component.ts<\/code><code>todo-list.component.html<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ src\/app\/components\/todo-list.component.ts import { Component } from '@angular\/core'; import { Store } from '@ngrx\/store'; import * as TodoActions from '..\/actions\/todo.actions'; @Component({ selector: 'app-todo-list', templateUrl: '.\/todo-list.component.html', }) export class TodoListComponent { constructor(private store: Store&lt;{ todos: any[] }&gt;) {} addTodo(text: string) { this.store.dispatch(TodoActions.addTodo({ text })); } toggleTodo(id: number) { this.store.dispatch(TodoActions.toggleTodo({ id })); } removeTodo(id: number) { this.store.dispatch(TodoActions.removeTodo({ id })); } }<\/code><\/p>\n\n\n\n<p>htmlCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>&lt;!-- src\/app\/components\/todo-list.component.html --&gt; &lt;!-- UI code here --&gt;<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u3067\u3001\u72b6\u614b\u7ba1\u7406\u306b NgRx \u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u3092\u793a\u3059\u7c21\u5358\u306a To Do \u30a2\u30d7\u30ea\u304c\u4f5c\u6210\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u7b2c6\u7ae0\u300c\u5b9f\u4f8b\u300d\u306e\u8a73\u3057\u3044\u89e3\u8aac\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c6\u7ae0:NgRx\u3092\u72b6\u614b\u7ba1\u7406ChatGPT\u306b\u9069\u7528\u3059\u308b\u5b9f\u4f8b<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c6\u7ae0:\u5b9f\u8df5\u7684\u306a\u4f8b\u2013\u72b6\u614b\u7ba1\u7406\u3078\u306eNgRx\u306e\u9069\u7528<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u524d\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u7c21\u5358\u306a To-Do \u30ea\u30b9\u30c8 \u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002 \u6b21\u306b\u3001\u3053\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u72b6\u614b\u7ba1\u7406\u306bNgRx\u3092\u9069\u7528\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u30b3\u30fc\u30c9 \u30b5\u30f3\u30d7\u30eb<\/h4>\n\n\n\n<p><strong>1. \u72b6\u614b\u30e2\u30c7\u30eb\u3092\u9069\u7528\u3059\u308b<\/strong><\/p>\n\n\n\n<p>\u307e\u305a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u72b6\u614b\u30e2\u30c7\u30eb\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002 \u3053\u308c\u306f\u901a\u5e38\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u306e\u69cb\u9020\u3092\u8a18\u8ff0\u3059\u308bTypeScript\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3067\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ src\/app\/models\/app-state.model.ts export interface Todo { id: number; text: string; completed: boolean; } export interface AppState { todos: Todo[]; }<\/code><\/p>\n\n\n\n<p><strong>2. \u30b9\u30c8\u30a2\u30b5\u30fc\u30d3\u30b9\u306e\u5229\u7528<\/strong><\/p>\n\n\n\n<p>Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306f\u3001NgRx \u306e\u30b5\u30fc\u30d3\u30b9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3068\u30b5\u30d6\u30b9\u30af\u30ea\u30d7\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3092\u914d\u5e03\u3057\u307e\u3059\u3002<code>Store<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ src\/app\/components\/todo-list.component.ts import { Component } from '@angular\/core'; import { Store } from '@ngrx\/store'; import { AppState } from '..\/models\/app-state.model'; import * as TodoActions from '..\/actions\/todo.actions'; @Component({ selector: 'app-todo-list', templateUrl: '.\/todo-list.component.html', }) export class TodoListComponent { todos$ = this.store.select(state =&gt; state.todos); constructor(private store: Store&lt;{ todos: AppState }&gt;) {} addTodo(text: string) { this.store.dispatch(TodoActions.addTodo({ text })); } toggleTodo(id: number) { this.store.dispatch(TodoActions.toggleTodo({ id })); } removeTodo(id: number) { this.store.dispatch(TodoActions.removeTodo({ id })); } }<\/code><\/p>\n\n\n\n<p><strong>3. \u30bb\u30ec\u30af\u30bf\u3092\u4f7f\u3046<\/strong><\/p>\n\n\n\n<p>\u30b9\u30c8\u30a2\u304b\u3089\u306e\u72b6\u614b\u3092\u3088\u308a\u52b9\u7387\u7684\u306b\u7167\u4f1a\u3059\u308b\u306b\u306f\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u4f7f\u7528\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>\/\/ src\/app\/selectors\/todo.selectors.ts import { createSelector } from '@ngrx\/store'; import { AppState } from '..\/models\/app-state.model'; export const selectTodos = (state: AppState) =&gt; state.todos; export const selectCompletedTodos = createSelector( selectTodos, todos =&gt; todos.filter(todo =&gt; todo.completed) );<\/code><\/p>\n\n\n\n<p>\u6b21\u306b\u3001\u3053\u308c\u3089\u306e\u30bb\u30ec\u30af\u30bf\u30fc\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\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>\/\/ src\/app\/components\/todo-list.component.ts import { selectTodos, selectCompletedTodos } from '..\/selectors\/todo.selectors'; \/\/ ... todos$ = this.store.select(selectTodos); completedTodos$ = this.store.select(selectCompletedTodos);<\/code><\/p>\n\n\n\n<p><strong>4. \u975e\u540c\u671f\u64cd\u4f5c\u306b Effects \u3092\u4f7f\u7528\u3059\u308b<\/strong><\/p>\n\n\n\n<p>\u30a2\u30d7\u30ea\u3067 API \u547c\u3073\u51fa\u3057\u306a\u3069\u306e\u975e\u540c\u671f\u64cd\u4f5c\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u30a8\u30d5\u30a7\u30af\u30c8\u3092\u4f7f\u7528\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>\/\/ src\/app\/effects\/todo.effects.ts import { Injectable } from '@angular\/core'; import { Actions, ofType, createEffect } from '@ngrx\/effects'; import { EMPTY } from 'rxjs'; import { map, mergeMap, catchError } from 'rxjs\/operators'; import * as TodoActions from '..\/actions\/todo.actions'; import { TodoService } from '..\/services\/todo.service'; @Injectable() export class TodoEffects { loadTodos$ = createEffect(() =&gt; this.actions$.pipe( ofType(TodoActions.loadTodos), mergeMap(() =&gt; this.todoService.getAll() .pipe( map(todos =&gt; TodoActions.loadTodosSuccess({ todos })), catchError(() =&gt; EMPTY) )) ) ); constructor( private actions$: Actions, private todoService: TodoService ) {} }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001\u72b6\u614b\u7ba1\u7406\u306e\u305f\u3081\u306bToDo\u30a2\u30d7\u30ea\u306bNgRx\u3092\u6b63\u5e38\u306b\u9069\u7528\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c6\u7ae0\u300cNgRx\u306b\u3088\u308b\u72b6\u614b\u7ba1\u7406\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c6\u7ae0 ChatGPT\u306e\u5206\u6790\u3068\u6700\u9069\u5316\u3092\u5b9f\u4f8b\u3092\u4ea4\u3048\u3066<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c6\u7ae0 \u5b9f\u8df5\u4f8b \u2013 \u5206\u6790\u3068\u6700\u9069\u5316<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u57fa\u672c\u7684\u306aToDo\u30a2\u30d7\u30ea\u3092\u5b9f\u88c5\u3057\u3001\u72b6\u614b\u7ba1\u7406\u306bNgRx\u3092\u9069\u7528\u3057\u305f\u3089\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5206\u6790\u3068\u6700\u9069\u5316\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u3059\u3002 \u3053\u308c\u306b\u306f\u3001\u30b3\u30fc\u30c9\u306e\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u3001\u3088\u308a\u9ad8\u5ea6\u306a\u6a5f\u80fd\u306e\u8ffd\u52a0\u304c\u542b\u307e\u308c\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><strong>1. \u30b3\u30fc\u30c9\u306e\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30e2\u30b8\u30e5\u30fc\u30eb\u6027<\/strong>: \u30a2\u30af\u30b7\u30e7\u30f3\u3001\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3001\u30a8\u30d5\u30a7\u30af\u30c8\u3001\u30bb\u30ec\u30af\u30bf\u30fc\u306a\u3069\u3001\u30d0\u30c3\u30af\u30ed\u30b0\u306b\u95a2\u9023\u3059\u308b\u3059\u3079\u3066\u306e\u30b3\u30fc\u30c9\u3092 1 \u3064\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u79fb\u52d5\u3057\u3066\u3001\u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u6027\u3092\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ src\/app\/todo\/todo.module.ts @NgModule({ imports: [ StoreModule.forFeature('todos', todoReducer), EffectsModule.forFeature([TodoEffects]), ], }) export class TodoModule {}<\/code><\/p>\n\n\n\n<p><strong>2. \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3092\u4f7f\u7528\u3059\u308b: \u30a2\u30d7\u30ea\u304c\u5927\u898f\u6a21\u3067\u8907\u96d1\u306b\u306a\u3063\u305f\u5834\u5408\u306f\u3001<strong>\u9045\u5ef6<\/strong>\u8aad\u307f\u8fbc\u307f\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u306e\u8d77\u52d5\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u3092\u691c\u8a0e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/li>\n\n\n\n<li><strong><code>OnPush<\/code>&nbsp;\u5909\u66f4\u691c\u51fa\u6226\u7565\u3092\u4f7f\u7528\u3059\u308b:<\/strong>&nbsp;Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u4f7f\u7528\u3057\u3066\u3001\u4e0d\u8981\u306a UI \u306e\u66f4\u65b0\u3092\u6e1b\u3089\u3057\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<code>ChangeDetectionStrategy.OnPush<\/code><\/li>\n<\/ul>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ src\/app\/components\/todo-list.component.ts @Component({ selector: 'app-todo-list', templateUrl: '.\/todo-list.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class TodoListComponent { \/\/ ... }<\/code><\/p>\n\n\n\n<p><strong>3.\u3088\u308a\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u307e\u3059<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u72b6\u614b\u306e\u6c38\u7d9a\u6027<\/strong>: \u30e9\u30a4\u30d6\u30e9\u30ea\u307e\u305f\u306f\u30ab\u30b9\u30bf\u30e0 \u30ed\u30b8\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3001\u72b6\u614b\u306e\u6c38\u7d9a\u6027\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<code>@ngrx\/store-localstorage<\/code><\/li>\n<\/ul>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ src\/app\/app.module.ts import { localStorageSync } from '@ngrx\/store-localstorage'; const reducers: ActionReducerMap&lt;AppState&gt; = { todos: todoReducer }; export function localStorageSyncReducer(reducer: ActionReducer&lt;any&gt;): ActionReducer&lt;any&gt; { return localStorageSync({ keys: ['todos'], rehydrate: true })(reducer); } @NgModule({ imports: [ StoreModule.forRoot(reducers, { metaReducers: [localStorageSyncReducer] }), \/\/ ... ], }) export class AppModule {}<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u30a8\u30e9\u30fc\u51e6\u7406\u3068\u30ed\u30b0\u8a18\u9332\u306e\u8ffd\u52a0<\/strong>: NgRx Effects \u306e\u6f14\u7b97\u5b50\u3092\u4f7f\u7528\u3057\u3066\u3001\u975e\u540c\u671f\u64cd\u4f5c\u306e\u30a8\u30e9\u30fc\u3092\u51e6\u7406\u3057\u3001\u72b6\u614b\u306e\u30c7\u30d0\u30c3\u30b0\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<code>catchError<\/code><code>@ngrx\/store-devtools<\/code><\/li>\n<\/ul>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ src\/app\/effects\/todo.effects.ts loadTodos$ = createEffect(() =&gt; this.actions$.pipe( ofType(TodoActions.loadTodos), mergeMap(() =&gt; this.todoService.getAll() .pipe( map(todos =&gt; TodoActions.loadTodosSuccess({ todos })), catchError(error =&gt; of(TodoActions.loadTodosFailure({ error }))) )) ));<\/code><\/p>\n\n\n\n<p>\u4ee5\u4e0a\u3001\u7b2c6\u7ae0\u300c\u89e3\u6790\u3068\u6700\u9069\u5316\u300d\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u624b\u9806\u306b\u5f93\u3046\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u4fdd\u5b88\u3068\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u3082\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>8.1 Redux \u3068 AngularChatGPT \u306e\u6bd4\u8f03\u306b\u3064\u3044\u3066\u306f\u3001\u7b2c &lt;&gt; \u7ae0 \u305d\u306e\u4ed6\u306e\u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u7d39\u4ecb\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c 8 \u7ae0 &#8211; \u305d\u306e\u4ed6\u306e\u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u7d39\u4ecb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">8.1 Redux \u3068 Angular<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Redux \u306f\u3001\u3082\u3068\u3082\u3068 React \u30a2\u30d7\u30ea\u7528\u306b\u8a2d\u8a08\u3055\u308c\u305f\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u4f9d\u5b58\u3057\u306a\u3044\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002 \u305f\u3060\u3057\u3001\u30b7\u30f3\u30d7\u30eb\u3067\u62e1\u5f35\u6027\u306e\u9ad8\u3044\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u305f\u3081\u3001Angular \u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u4f7f\u7528\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002 \u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u306e\u72b6\u614b\u7ba1\u7406\u306b\u30cd\u30a4\u30c6\u30a3\u30d6\u306e Redux \u30e9\u30a4\u30d6\u30e9\u30ea\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<p><strong>1. Redux\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/p>\n\n\n\n<p>\u307e\u305a\u3001Redux\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm install redux --save<\/code><\/p>\n\n\n\n<p><strong>2. \u30b9\u30c8\u30a2\u306e\u4f5c\u6210<\/strong><\/p>\n\n\n\n<p>Angular \u30a2\u30d7\u30ea\u3067\u306f\u3001\u30eb\u30fc\u30c8 \u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u914d\u5217\u306b Redux \u30b9\u30c8\u30a2\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<code>providers<\/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 { createStore } from 'redux'; import { rootReducer } from '.\/reducers\/root.reducer'; @NgModule({ providers: [ { provide: 'AppStore', useValue: createStore(rootReducer) }, ], \/\/ ... }) export class AppModule {}<\/code><\/p>\n\n\n\n<p><strong>3. \u30a2\u30af\u30b7\u30e7\u30f3\u3068\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u306e\u5b9a\u7fa9<\/strong><\/p>\n\n\n\n<p>NgRx\u3068\u540c\u69d8\u306b\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3068\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3092\u5b9a\u7fa9\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ actions\/todo.actions.ts export const ADD_TODO = 'ADD_TODO'; \/\/ reducers\/todo.reducer.ts export function todoReducer(state = [], action) { switch (action.type) { case ADD_TODO: return [...state, action.payload]; default: return state; } }<\/code><\/p>\n\n\n\n<p><strong>4. \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u30b9\u30c8\u30a2\u3092\u4f7f\u7528\u3059\u308b<\/strong><\/p>\n\n\n\n<p>Angular \u306e\u4f9d\u5b58\u95a2\u4fc2\u306e\u633f\u5165\u3092\u4f7f\u7528\u3057\u3066\u3001Redux Store \u306b\u30a2\u30af\u30bb\u30b9\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>\/\/ components\/todo-list.component.ts import { Component, Inject } from '@angular\/core'; @Component({ selector: 'app-todo-list', template: `...`, }) export class TodoListComponent { constructor(@Inject('AppStore') private store) { this.store.subscribe(() =&gt; this.readState()); this.readState(); } readState() { const state = this.store.getState(); \/\/ Do something with the state } addTodo(text: string) { this.store.dispatch({ type: ADD_TODO, payload: text }); } }<\/code><\/p>\n\n\n\n<p><strong>5. \u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u4f7f\u3046<\/strong><\/p>\n\n\n\n<p>Redux\u3067\u306f\u3001\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u4f7f\u7528\u3057\u3066\u975e\u540c\u671f\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u51e6\u7406\u3057\u305f\u308a\u3001\u4ed6\u306e\u526f\u4f5c\u7528\u3092\u8ffd\u52a0\u3057\u305f\u308a\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>\/\/ Configure store with middleware import thunk from 'redux-thunk'; const store = createStore( rootReducer, applyMiddleware(thunk) );<\/code><\/p>\n\n\n\n<p>\u3053\u308c\u306b\u3088\u308a\u3001Angular \u30a2\u30d7\u30ea\u306e\u72b6\u614b\u7ba1\u7406\u306b\u30cd\u30a4\u30c6\u30a3\u30d6\u306e Redux \u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002 NgRx\u306fAngular\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306b\u3068\u3063\u3066\u3088\u308a\u4eba\u6c17\u306e\u3042\u308b\u9078\u629e\u80a2\u3067\u3059\u304c\u3001Redux\u3082\u305d\u306e\u30b7\u30f3\u30d7\u30eb\u3055\u3068\u67d4\u8edf\u6027\u306e\u305f\u3081\u306b\u5b9f\u884c\u53ef\u80fd\u306a\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c8\u7ae0\u300cRedux\u3068Angular\u300d\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044 \u7b2c8\u7ae0:\u305d\u306e\u4ed6\u306e\u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u7d39\u4ecb 2.&lt;&gt; MobX\u3068AngularChatGPT\u306e\u6bd4\u8f03<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c 8 \u7ae0 &#8211; \u305d\u306e\u4ed6\u306e\u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u7d39\u4ecb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">8.2 MobX \u3068 Angular<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>MobX\u306f\u3001\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u539f\u5247\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3092\u7ba1\u7406\u3059\u308b\u3001\u3082\u30461\u3064\u306e\u4e00\u822c\u7684\u306a\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002 Redux\u3068\u306f\u7570\u306a\u308a\u3001MobX\u306f\u72b6\u614b\u5909\u66f4\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306e\u3088\u308a\u5ba3\u8a00\u7684\u3067\u81ea\u52d5\u5316\u3055\u308c\u305f\u65b9\u6cd5\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u30a2\u30d7\u30ea\u3067 MobX \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<p><strong>1. MobX \u3068 mobx-angular \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/p>\n\n\n\n<p>\u307e\u305a\u3001MobX\u3068mobx-angular\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm install mobx mobx-angular --save<\/code><\/p>\n\n\n\n<p><strong>2. MobX\u30b9\u30c8\u30a2\u3092\u4f5c\u6210\u3059\u308b<\/strong><\/p>\n\n\n\n<p>MobX \u3067\u306f\u30011 \u3064\u4ee5\u4e0a\u306e\u30b9\u30c8\u30a2\u3092\u4f5c\u6210\u3057\u3066\u30a2\u30d7\u30ea\u306e\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u7ba1\u7406\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>\/\/ stores\/todo.store.ts import { observable, action } from 'mobx'; export class TodoStore { @observable todos = []; @action addTodo(text: string) { this.todos.push({ text, completed: false }); } @action toggleTodo(index: number) { this.todos[index].completed = !this.todos[index].completed; } }<\/code><\/p>\n\n\n\n<p><strong>3. Angular \u3067 MobX \u30b9\u30c8\u30a2\u3092\u4f7f\u7528\u3059\u308b<\/strong><\/p>\n\n\n\n<p>MobX \u30b9\u30c8\u30a2\u3092 Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u633f\u5165\u3057\u3001\u63d0\u4f9b\u3055\u308c\u305f\u624b\u9806\u3092\u4f7f\u7528\u3057\u3066\u30d3\u30e5\u30fc\u3092\u81ea\u52d5\u7684\u306b\u66f4\u65b0\u3067\u304d\u307e\u3059\u3002<code>mobx-angular<\/code><code>MobxAutorunDirective<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ components\/todo-list.component.ts import { Component } from '@angular\/core'; import { TodoStore } from '..\/stores\/todo.store'; @Component({ selector: 'app-todo-list', template: ` &lt;ul *mobxAutorun&gt; &lt;li *ngFor=\"let todo of todoStore.todos\"&gt;{{ todo.text }}&lt;\/li&gt; &lt;\/ul&gt; `, }) export class TodoListComponent { constructor(public todoStore: TodoStore) {} addTodo(text: string) { this.todoStore.addTodo(text); } }<\/code><\/p>\n\n\n\n<p><strong>4. Angular \u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u69cb\u6210\u3059\u308b<\/strong><\/p>\n\n\n\n<p>Angular\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u306f\u3001\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<code>MobxAngularModule<\/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 { MobxAngularModule } from 'mobx-angular'; @NgModule({ imports: [ MobxAngularModule, \/\/ ... ], providers: [TodoStore], }) export class AppModule {}<\/code><\/p>\n\n\n\n<p><strong>5. \u8a08\u7b97\u3055\u308c\u305f\u7279\u6027\u3068\u53cd\u5fdc\u3092\u4f7f\u7528\u3059\u308b<\/strong><\/p>\n\n\n\n<p>MobX\u3067\u306f\u3001\u8a08\u7b97\u3055\u308c\u305f\u30d7\u30ed\u30d1\u30c6\u30a3()\u3068\u53cd\u5fdc()\u3092\u4f7f\u7528\u3057\u3066\u3001\u72b6\u614b\u306e\u5909\u5316\u3092\u3055\u3089\u306b\u6700\u9069\u5316\u3057\u3001\u5fdc\u7b54\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<code>computed<\/code><code>reaction<\/code><\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ stores\/todo.store.ts import { computed } from 'mobx'; export class TodoStore { \/\/ ... @computed get completedTodos() { return this.todos.filter(todo =&gt; todo.completed); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u7ba1\u7406\u306bMobX\u3092\u6b63\u5e38\u306b\u9069\u7528\u3057\u307e\u3057\u305f\u3002 MobX\u306f\u3001\u7279\u306b\u8907\u96d1\u3067\u5927\u898f\u6a21\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u5bfe\u3057\u3066\u3001\u3088\u308a\u67d4\u8edf\u3067\u81ea\u52d5\u5316\u3055\u308c\u305f\u72b6\u614b\u7ba1\u7406\u65b9\u6cd5\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c8\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f32\u300cMobX\u3068Angular\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>8.3 \u79cb\u7530\u3068AngularChatGPT\u306e\u6bd4\u8f03\u3092\u300c\u7b2c&lt;&gt;\u7ae0:\u305d\u306e\u4ed6\u306e\u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u7d39\u4ecb\u300d\u3067\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c 8 \u7ae0 &#8211; \u305d\u306e\u4ed6\u306e\u72b6\u614b\u7ba1\u7406\u624b\u6cd5\u306e\u7d39\u4ecb<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">8.3 \u79cb\u7530\u3068Angular<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>Akita \u306f\u3001Angular \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u7528\u306b\u7279\u5225\u306b\u8a2d\u8a08\u3055\u308c\u305f\u3001\u30b7\u30f3\u30d7\u30eb\u3067\u3042\u308a\u306a\u304c\u3089\u52b9\u679c\u7684\u306a\u72b6\u614b\u7ba1\u7406\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3002 Redux\u3001MobX\u3001\u307e\u305f\u306f\u305d\u306e\u4ed6\u306e\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u4f9d\u5b58\u305b\u305a\u3001\u4ee3\u308f\u308a\u306b\u500b\u5225\u306eAPI\u3068\u30c4\u30fc\u30eb\u306e\u30bb\u30c3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002 \u79cb\u7530\u306e\u4e3b\u306a\u5229\u70b9\u306f\u3001\u305d\u306e\u30b7\u30f3\u30d7\u30eb\u3055\u3068\u67d4\u8edf\u6027\u3067\u3042\u308a\u3001Angular\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8fc5\u901f\u306a\u958b\u767a\u3068\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u306b\u6700\u9069\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><strong>1. \u79cb\u7530\u5e02\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/p>\n\n\n\n<p>\u307e\u305a\u3001\u79cb\u7530\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>bashCopy \u30b3\u30fc\u30c9<\/p>\n\n\n\n<p><code>npm install @datorama\/akita --save<\/code><\/p>\n\n\n\n<p><strong>2. \u79cb\u7530\u30b9\u30c8\u30a2\u306e\u4f5c\u6210\u3068\u30af\u30a8\u30ea<\/strong><\/p>\n\n\n\n<p>\u79cb\u7530\u3067\u306f\u3001Store \u3092\u4f7f\u7528\u3057\u3066\u72b6\u614b\u3092\u4fdd\u6301\u3057\u3001Query \u3092\u4f7f\u7528\u3057\u3066\u72b6\u614b\u3092\u8aad\u307f\u53d6\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ stores\/todo.store.ts import { Store, StoreConfig } from '@datorama\/akita'; export interface TodoState { todos: string[]; } @StoreConfig({ name: 'todos' }) export class TodoStore extends Store&lt;TodoState&gt; { constructor() { super({ todos: [] }); } } \/\/ stores\/todo.query.ts import { Query } from '@datorama\/akita'; import { TodoStore, TodoState } from '.\/todo.store'; export class TodoQuery extends Query&lt;TodoState&gt; { constructor(protected store: TodoStore) { super(store); } }<\/code><\/p>\n\n\n\n<p><strong>3. Akita Store and Query \u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u4f7f\u7528\u3059\u308b<\/strong><\/p>\n\n\n\n<p>Akita Store \u3068 Query \u3092 Angular \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u633f\u5165\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>\/\/ components\/todo-list.component.ts import { Component } from '@angular\/core'; import { TodoStore } from '..\/stores\/todo.store'; import { TodoQuery } from '..\/stores\/todo.query'; @Component({ selector: 'app-todo-list', template: ` &lt;ul&gt; &lt;li *ngFor=\"let todo of todos$ | async\"&gt;{{ todo }}&lt;\/li&gt; &lt;\/ul&gt; `, }) export class TodoListComponent { todos$ = this.todoQuery.select(state =&gt; state.todos); constructor(private todoStore: TodoStore, private todoQuery: TodoQuery) {} addTodo(text: string) { const newTodos = [...this.todoQuery.getValue().todos, text]; this.todoStore.update({ todos: newTodos }); } }<\/code><\/p>\n\n\n\n<p><strong>4.\u79cb\u7530\u306e\u4ed6\u306e\u6a5f\u80fd\u3092\u4f7f\u7528\u3059\u308b<\/strong><\/p>\n\n\n\n<p>\u79cb\u7530\u306f\u3001\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u7ba1\u7406\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u306a\u3069\u3001\u4ed6\u306b\u3082\u3055\u307e\u3056\u307e\u306a\u6a5f\u80fd\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>typescript\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc<\/p>\n\n\n\n<p><code>\/\/ \u4f7f\u7528 Akita \u5b9e\u4f53\u7ba1\u7406 import { EntityStore, EntityState, EntityQuery } from '@datorama\/akita'; export interface Todo { id: number; text: string; } export interface TodoState extends EntityState&lt;Todo&gt; {} @StoreConfig({ name: 'todos' }) export class TodoEntityStore extends EntityStore&lt;TodoState&gt; { constructor() { super(); } } export class TodoEntityQuery extends EntityQuery&lt;TodoState&gt; { constructor(protected store: TodoEntityStore) { super(store); } }<\/code><\/p>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3057\u3066\u3001Angular\u30a2\u30d7\u30ea\u306e\u72b6\u614b\u7ba1\u7406\u306bAkita\u3092\u6b63\u5e38\u306b\u9069\u7528\u3057\u307e\u3057\u305f\u3002 \u79cb\u7530\u770c\u306f\u3001\u305d\u306e\u30b7\u30f3\u30d7\u30eb\u3055\u3068\u67d4\u8edf\u6027\u304b\u3089\u3001\u691c\u8a0e\u3059\u308b\u4fa1\u5024\u306e\u3042\u308b\u5dde\u7ba1\u7406\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u7b2c8\u7ae0\u7b2c3\u6b3e\u300c\u79cb\u7530\u3068\u89d2\u300d\u306e\u8a73\u3057\u3044\u89e3\u8aac\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u6559\u3048\u3066\u304f\u3060\u3055\u3044 \u7b2c9\u7ae0:1.&lt;&gt;\u30b3\u30fc\u30b9\u30ec\u30d3\u30e5\u30fcChatGPT\u306e\u307e\u3068\u3081<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c9\u7ae0:\u307e\u3068\u3081<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">9.1 \u30b3\u30fc\u30b9\u306e\u5fa9\u7fd2<\/h4>\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 \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u304a\u3051\u308b\u72b6\u614b\u7ba1\u7406\u306b\u3064\u3044\u3066\u6df1\u304f\u6398\u308a\u4e0b\u3052\u307e\u3057\u305f\u3002 \u57fa\u672c\u7684\u306a\u6982\u5ff5\u304b\u3089\u9ad8\u5ea6\u306a\u30c6\u30af\u30cb\u30c3\u30af\u307e\u3067\u3001\u30c8\u30d4\u30c3\u30af\u3092\u5b8c\u5168\u306b\u7406\u89e3\u3057\u3066\u628a\u63e1\u3067\u304d\u308b\u3088\u3046\u306b\u3001\u5e45\u5e83\u3044\u5074\u9762\u3092\u30ab\u30d0\u30fc\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4e3b\u306a\u5185\u5bb9\u306e\u898b\u76f4\u3057<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Angular \u72b6\u614b\u7ba1\u7406\u306e\u57fa\u672c: \u307e\u305a\u3001<strong>\u72b6\u614b\u7ba1\u7406<\/strong>\u3068\u306f\u4f55\u304b\u3092\u8aac\u660e\u3057\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067\u305d\u308c\u304c\u975e\u5e38\u306b\u91cd\u8981\u3067\u3042\u308b\u7406\u7531\u3092\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>UI \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8: Angular \u3067&nbsp;<strong>UI \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8<\/strong>\u3092\u4f5c\u6210\u3057\u3001\u305d\u308c\u3089\u3092\u72b6\u614b\u7ba1\u7406\u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>NgRx\u306e\u57fa\u672c:\u30a2\u30af\u30b7\u30e7\u30f3\u3001\u30ec\u30c7\u30e5\u30fc\u30b5\u30fc\u3001\u30a8\u30d5\u30a7\u30af\u30c8\u3001\u30b9\u30c8\u30a2\u306e\u6982\u5ff5\u306a\u3069\u3001<strong>NgRx<\/strong>\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>NgRx Advanced<\/strong>: \u57fa\u672c\u306b\u57fa\u3065\u3044\u3066\u3001\u975e\u540c\u671f\u64cd\u4f5c\u306e\u5b9f\u884c\u65b9\u6cd5\u3001Angular \u30b5\u30fc\u30d3\u30b9\u3068\u306e\u7d71\u5408\u65b9\u6cd5\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316\u65b9\u6cd5\u3001\u304a\u3088\u3073\u6226\u7565\u306e\u30c6\u30b9\u30c8\u65b9\u6cd5\u3092\u3055\u3089\u306b\u63a2\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u5b9f\u7528\u7684\u306a\u4f8b<\/strong>: \u30d0\u30c3\u30af\u30ed\u30b0 \u30a2\u30d7\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3001NgRx \u3092\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u9069\u7528\u3059\u308b\u65b9\u6cd5\u3092\u793a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u5206\u6790\u3068\u6700\u9069\u5316<\/strong>: \u65e2\u5b58\u306eNgRx\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5206\u6790\u304a\u3088\u3073\u6700\u9069\u5316\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3057\u305f\u3002<\/li>\n\n\n\n<li>\u305d\u306e\u4ed6\u306e\u72b6\u614b\u7ba1\u7406\u624b\u6cd5: \u6700\u5f8c\u306b\u3001Redux\u3001MobX\u3001Akita \u306a\u3069\u3001NgRx \u4ee5\u5916\u306e\u72b6\u614b<strong>\u7ba1\u7406<\/strong>\u30c6\u30af\u30ce\u30ed\u30b8\u306b\u3064\u3044\u3066\u3082\u7c21\u5358\u306b\u8aac\u660e\u3057\u307e\u3057\u305f\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u6982\u8981<\/h4>\n\n\n\n<p>\u72b6\u614b\u7ba1\u7406\u306f\u8907\u96d1\u3067\u3059\u304c\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u91cd\u8981\u306a\u90e8\u5206\u3067\u3059\u3002 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u72b6\u614b\u3092\u9069\u5207\u306b\u7ba1\u7406\u3059\u308b\u3068\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u5411\u4e0a\u3059\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u6027\u3068\u62e1\u5f35\u6027\u3082\u5927\u5e45\u306b\u5411\u4e0a\u3057\u307e\u3059\u3002 \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001NgRx\u306e\u4f7f\u7528\u3092\u542b\u3080\u304c\u3053\u308c\u306b\u9650\u5b9a\u3055\u308c\u306a\u3044\u3001Angular\u72b6\u614b\u7ba1\u7406\u306e\u3059\u3079\u3066\u306e\u5074\u9762\u3092\u7fd2\u5f97\u3057\u3066\u3044\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c9\u7ae0\u300c\u30b3\u30fc\u30b9\u30ec\u30d3\u30e5\u30fc\u300d\u306e\u6700\u521d\u306e\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f3\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c9\u7ae0:2.&lt;&gt;\u306e\u307e\u3068\u3081 ChatGPT\u306e\u6b21\u306e\u5b66\u7fd2\u65b9\u5411<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c9\u7ae0:\u307e\u3068\u3081<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">9.2 \u6b21\u306e\u65b9\u5411\u6027<\/h4>\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\u3092\u5b8c\u4e86\u3057\u305f\u5f8c\u3001\u6b21\u306b\u3069\u306e\u3088\u3046\u306b\u5b66\u7fd2\u3068\u6539\u5584\u3092\u7d9a\u3051\u308b\u3079\u304d\u304b\u7591\u554f\u306b\u601d\u3046\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002 \u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Angular \u3068\u72b6\u614b\u7ba1\u7406\u3092\u3088\u308a\u6df1\u304f\u7406\u89e3\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u3044\u304f\u3064\u304b\u306e\u65b9\u5411\u6027\u3068\u30ea\u30bd\u30fc\u30b9\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u5968\u3055\u308c\u308b\u6b21\u306e\u30b9\u30c6\u30c3\u30d7<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>NgRx<strong>\u306e\u8a73\u7d30<\/strong>:\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u4e3b\u306bNgRx\u306e\u57fa\u672c\u3068\u3044\u304f\u3064\u304b\u306e\u9ad8\u5ea6\u306a\u30c8\u30d4\u30c3\u30af\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002 \u3057\u304b\u3057\u3001NgRx\u306b\u306f\u3001\u5b66\u3076\u4fa1\u5024\u306e\u3042\u308b\u9ad8\u5ea6\u306a\u6a5f\u80fd\u3084\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u304c\u305f\u304f\u3055\u3093\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>Master<\/strong>&nbsp;Angular: \u72b6\u614b\u7ba1\u7406\u306f\u3001Angular \u306e\u8c4a\u5bcc\u306a\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u306e\u4e00\u90e8\u306b\u3059\u304e\u307e\u305b\u3093\u3002 \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3001\u30d5\u30a9\u30fc\u30e0\u3001HTTP\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306a\u3069\u3001Angular\u306e\u4ed6\u306e\u5074\u9762\u3082\u5b66\u7fd2\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u4ed6\u306e\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u3064\u3044\u3066\u5b66\u3076: NgRx \u4ee5\u5916\u306b\u3082\u3001\u3055\u307e\u3056\u307e\u306a<strong>\u72b6\u614b\u7ba1\u7406<\/strong>\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u77e5\u308a\u3001\u6bd4\u8f03\u3059\u308b\u3053\u3068\u3067\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u6700\u9069\u306a\u30c4\u30fc\u30eb\u3092\u9078\u629e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u5b9f\u8df5\u7684\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/strong>:\u7406\u8ad6\u7684\u306a\u77e5\u8b58\u3060\u3051\u3067\u306f\u4e0d\u5341\u5206\u3067\u3001\u5b66\u3076\u305f\u3081\u306e\u6700\u826f\u306e\u65b9\u6cd5\u306f\u5b9f\u8df5\u3067\u3059\u3002 \u5b66\u3093\u3060\u3053\u3068\u3092\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u5fdc\u7528\u3057\u3001\u5e38\u306b\u5fae\u8abf\u6574\u3068\u6700\u9069\u5316\u3092\u884c\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/li>\n\n\n\n<li><strong>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u306b\u76ee\u3092\u5149<\/strong>\u3089\u305b\u3066\u304f\u3060\u3055\u3044: Angular \u3068\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4e21\u65b9\u304c\u6d3b\u767a\u306b\u9032\u5316\u3057\u3066\u3044\u307e\u3059\u3002 \u95a2\u9023\u3059\u308b\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3084\u516c\u5f0f\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3092\u30d5\u30a9\u30ed\u30fc\u3057\u3066\u3001\u6700\u65b0\u306e\u5909\u66f4\u3084\u30c8\u30ec\u30f3\u30c9\u3092\u5e38\u306b\u628a\u63e1\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u5968\u30ea\u30bd\u30fc\u30b9:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/strong>: Angular \u3068 NgRx \u306e\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f\u3001\u6700\u3082\u6a29\u5a01\u306e\u3042\u308b\u5305\u62ec\u7684\u306a\u30ea\u30bd\u30fc\u30b9\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b9<\/strong>\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb:Udemy\u3001Pluralsight\u3001YouTube\u306a\u3069\u306eWeb\u30b5\u30a4\u30c8\u3067\u306f\u3001\u9ad8\u54c1\u8cea\u306e\u30d3\u30c7\u30aa\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u304c\u591a\u6570\u63d0\u4f9b\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30d5\u30a9\u30fc\u30e9\u30e0<\/strong>: Stack Overflow\u3001Reddit\u3001\u304a\u3088\u3073\u3055\u307e\u3056\u307e\u306a\u6280\u8853\u30d6\u30ed\u30b0\u306f\u3001\u60c5\u5831\u3092\u5165\u624b\u3057\u3066\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u306e\u306b\u6700\u9069\u306a\u5834\u6240\u3067\u3059\u3002<\/li>\n\n\n\n<li>\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8: GitHub \u306b\u306f Angular \u3068\u72b6\u614b\u7ba1\u7406\u306b\u95a2\u9023\u3059\u308b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9<strong>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/strong>\u304c\u591a\u6570\u3042\u308a\u3001\u30b3\u30fc\u30c9\u3092\u8aad\u3093\u3067\u8ca2\u732e\u3059\u308b\u3053\u3068\u3067\u8cb4\u91cd\u306a\u5b9f\u8df5\u7684\u306a\u7d4c\u9a13\u3092\u7a4d\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c9\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f32\u300c\u6b21\u306e\u65b9\u5411\u6027\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3046\u307e\u304f\u3044\u3051\u3070\u3001\u3053\u308c\u3089\u306e\u30d2\u30f3\u30c8\u3068\u30ea\u30bd\u30fc\u30b9\u304c\u3001Angular \u3068\u72b6\u614b\u7ba1\u7406\u3092\u3055\u3089\u306b\u9032\u3081\u308b\u306e\u306b\u5f79\u7acb\u3064\u3053\u3068\u3092\u9858\u3063\u3066\u3044\u307e\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c10\u7ae0:\u53c2\u8003\u6587\u732e\u3068\u3055\u3089\u306a\u308b\u5b66\u7fd2 1.&lt;&gt; \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c10\u7ae0:\u53c2\u8003\u6587\u732e\u3068\u3055\u3089\u306a\u308b\u5b66\u7fd2<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">10.1 \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u9ad8\u54c1\u8cea\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306f\u3001\u5b66\u7fd2\u306e\u65c5\u3092\u901a\u3057\u3066\u4e0d\u53ef\u6b20\u306a\u30ea\u30bd\u30fc\u30b9\u3067\u3059\u3002 \u3053\u308c\u3089\u306e\u6559\u6750\u306f\u3001\u8a73\u7d30\u306a\u30ac\u30a4\u30c0\u30f3\u30b9\u3092\u63d0\u4f9b\u3059\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u7279\u5b9a\u306e\u554f\u984c\u3092\u89e3\u6c7a\u3057\u305f\u308a\u3001\u9769\u65b0\u7684\u306a\u601d\u8003\u3092\u523a\u6fc0\u3057\u305f\u308a\u3059\u308b\u306e\u306b\u3082\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u5968\u3055\u308c\u308b\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u516c\u5f0f\u306e Angular \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/strong>: \u3053\u308c\u306f Angular \u3092\u5b66\u3076\u305f\u3081\u306e\u6700\u3082\u6a29\u5a01\u306e\u3042\u308b\u30ea\u30bd\u30fc\u30b9\u3067\u3042\u308a\u3001\u57fa\u672c\u7684\u306a\u3082\u306e\u304b\u3089\u9ad8\u5ea6\u306a\u3082\u306e\u307e\u3067\u3059\u3079\u3066\u306e\u30c8\u30d4\u30c3\u30af\u3092\u30ab\u30d0\u30fc\u3057\u3066\u3044\u307e\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>NgRx\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8:<strong>NgRx<\/strong>\u306b\u8208\u5473\u304c\u3042\u308b\u5834\u5408\u306f\u3001\u305d\u306e\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u304c\u6700\u9ad8\u306e\u5b66\u7fd2\u6559\u6750\u3067\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/ngrx.io\/guide\/store\">NgRx\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>MDN Web Documentation: MDN<\/strong>\u00a0\u306f\u3001HTML\u3001CSS\u3001JavaScript \u306a\u3069\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u57fa\u672c\u306b\u95a2\u3059\u308b\u975e\u5e38\u306b\u5305\u62ec\u7684\u3067\u4fe1\u983c\u3067\u304d\u308b\u30ea\u30bd\u30fc\u30b9\u3067\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/\">MDN Web Docs<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Udemy<\/strong>: \u3053\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u3001Angular \u3068\u72b6\u614b\u7ba1\u7406\u306b\u95a2\u9023\u3059\u308b\u591a\u6570\u306e\u30aa\u30f3\u30e9\u30a4\u30f3 \u30b3\u30fc\u30b9\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.udemy.com\/topic\/angular\/\">Udemy Angular\u30b3\u30fc\u30b9<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>YouTube<\/strong>: YouTube \u306b\u306f\u3001\u7121\u6599\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3084\u8b1b\u7fa9\u3092\u6295\u7a3f\u3059\u308b\u512a\u308c\u305f\u958b\u767a\u8005\u3084\u6559\u80b2\u8005\u304c\u305f\u304f\u3055\u3093\u3044\u307e\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.youtube.com\/c\/Academind\">\u30a2\u30ab\u30c7\u30de\u30a4\u30f3\u30c9<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/c\/TraversyMedia\">\u30c8\u30e9\u30d0\u30fc\u30b7\u30fc\u30e1\u30c7\u30a3\u30a2<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Stack Overflow<strong>: Stack Overflow<\/strong>\u00a0\u306f\u3001\u7279\u5b9a\u306e\u554f\u984c\u304c\u767a\u751f\u3057\u305f\u3068\u304d\u306b\u983c\u308b\u306e\u306b\u6700\u9069\u306a\u5834\u6240\u3067\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/angular\">Stack Overflow Angular \u30bf\u30b0<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u4e2d\u898f\u6a21\u3068 Dev.to<\/strong>:\u3069\u3061\u3089\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u3082\u3001\u3055\u307e\u3056\u307e\u306a\u30c8\u30d4\u30c3\u30af\u3084\u554f\u984c\u3092\u30ab\u30d0\u30fc\u3059\u308b\u6280\u8853\u8a18\u4e8b\u304c\u305f\u304f\u3055\u3093\u3042\u308a\u307e\u3059\u3002\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/medium.com\/\">\u4e2d\u7a0b\u5ea6<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dev.to\/\">Dev.to<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>GitHub<\/strong>: \u591a\u304f\u306e\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3068\u30b3\u30fc\u30c9\u30b5\u30f3\u30d7\u30eb\u304cGitHub\u3067\u30db\u30b9\u30c8\u3055\u308c\u3066\u304a\u308a\u3001\u5b9f\u969b\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3084\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306b\u3064\u3044\u3066\u5b66\u3076\u306e\u306b\u6700\u9069\u306a\u5834\u6240\u3067\u3059\u3002\n<ul class=\"wp-block-list\">\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\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306f\u3001Angular \u3068\u72b6\u614b\u7ba1\u7406\u3092\u3088\u308a\u52b9\u679c\u7684\u306b\u5b66\u7fd2\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u8cb4\u91cd\u306a\u77e5\u8b58\u3068\u5b9f\u8df5\u7684\u306a\u7d4c\u9a13\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c10\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f31\u300c\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c10\u7ae0:2.&lt;&gt;\u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b9ChatGPT\u306e\u53c2\u8003\u6587\u732e\u3068\u3055\u3089\u306a\u308b\u7814\u7a76<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c10\u7ae0:\u53c2\u8003\u6587\u732e\u3068\u3055\u3089\u306a\u308b\u5b66\u7fd2<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">10.2 \u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b9<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b9\u306f\u975e\u5e38\u306b\u52b9\u679c\u7684\u306a\u5b66\u7fd2\u65b9\u6cd5\u3067\u3042\u308a\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u30d7\u30ed\u306e\u6559\u80b2\u8005\u3084\u696d\u754c\u306e\u5c02\u9580\u5bb6\u306b\u3088\u3063\u3066\u8a2d\u8a08\u304a\u3088\u3073\u6559\u3048\u3089\u308c\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30b3\u30fc\u30b9\u306b\u306f\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u30c8\u30d4\u30c3\u30af\u3092\u5b8c\u5168\u306b\u628a\u63e1\u3059\u308b\u306e\u306b\u5f79\u7acb\u3064\u30d3\u30c7\u30aa\u8b1b\u7fa9\u3001\u30e9\u30dc\u3001\u8ab2\u984c\u3001\u304a\u3088\u3073\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u304a\u3059\u3059\u3081\u306e\u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b9<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Udemy(\u30a6\u30fc\u30c7\u30df\u30fc)<\/strong>\n<ul class=\"wp-block-list\">\n<li>Angular&nbsp;<strong>\u2013 \u5b8c\u5168\u30ac\u30a4\u30c9<\/strong>: \u3053\u308c\u306f\u3001Maximilian Schwarzm\u00fcller \u304c\u6559\u3048\u308b Udemy \u3067\u6700\u3082\u4eba\u6c17\u306e\u3042\u308b Angular \u30b3\u30fc\u30b9\u306e 1 \u3064\u3067\u3059\u3002<\/li>\n\n\n\n<li>NgRx<strong>(Angular)\u2013\u5b8c\u5168\u30ac\u30a4\u30c9<\/strong>:\u3053\u306e\u30b3\u30fc\u30b9\u306f\u3001NgRx\u3092\u7279\u306b\u6df1\u304f\u5b66\u3073\u305f\u3044\u5834\u5408\u306b\u6700\u9069\u3067\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Pluralsight\u306e<\/strong>\n<ul class=\"wp-block-list\">\n<li>Angular&nbsp;<strong>Fundamentals<\/strong>: \u3053\u306e\u30b3\u30fc\u30b9\u306f Angular \u521d\u5fc3\u8005\u5411\u3051\u3067\u3001\u57fa\u672c\u3092\u30ab\u30d0\u30fc\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u9ad8\u5ea6\u306a<\/strong>&nbsp;Angular: Angular \u306e\u57fa\u790e\u306b\u3059\u3067\u306b\u7cbe\u901a\u3057\u3066\u3044\u308b\u5834\u5408\u3001\u3053\u306e\u30b3\u30fc\u30b9\u306f\u3088\u308a\u9ad8\u5ea6\u306a\u30c8\u30d4\u30c3\u30af\u3092\u7fd2\u5f97\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30b3\u30fc\u30bb\u30e9<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Single Page Web Applications with AngularJS:<\/strong>&nbsp;\u3053\u308c\u306f\u3001\u30b8\u30e7\u30f3\u30ba\u30db\u30d7\u30ad\u30f3\u30b9\u5927\u5b66\u304c\u63d0\u4f9b\u3059\u308b\u7121\u6599\u306e\u30b3\u30fc\u30b9\u3067\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>edX(\u30a8\u30c9\u30a8\u30c3\u30af\u30b9)<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>\u521d\u5fc3\u8005\u5411\u3051 Angular<\/strong>: \u3053\u308c\u306f\u3001Microsoft \u304c\u521d\u5fc3\u8005\u5411\u3051\u306b\u63d0\u4f9b\u3057\u3066\u3044\u308b\u7121\u6599\u30b3\u30fc\u30b9\u3067\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30b3\u30c7\u30a3\u30b1\u30a4\u30c9\u30df\u30fc<\/strong>\n<ul class=\"wp-block-list\">\n<li>AngularJS\u3092\u5b66\u3076:\u3053\u308c\u306f\u3001<strong>AngularJS<\/strong>\u306e\u57fa\u672c\u3092\u30ab\u30d0\u30fc\u3059\u308b\u521d\u5fc3\u8005\u5411\u3051\u306e\u7121\u6599\u30b3\u30fc\u30b9\u3067\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30de\u30b9\u30bf\u30fc<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Angular \u306e\u5b8c\u5168\u306a\u5165\u9580<\/strong>: \u3053\u306e\u30b3\u30fc\u30b9\u306f\u3001Angular \u30c1\u30fc\u30e0\u306e\u30e1\u30f3\u30d0\u30fc\u304c\u4e3b\u5c0e\u3059\u308b\u5305\u62ec\u7684\u306a\u30b3\u30fc\u30b9\u3067\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>LinkedIn\u30e9\u30fc\u30cb\u30f3\u30b0<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Angular Essential Training<\/strong>: \u3053\u306e\u30b3\u30fc\u30b9\u306f\u3001\u3059\u3079\u3066\u306e\u30ec\u30d9\u30eb\u306e\u958b\u767a\u8005\u306b\u9069\u3057\u3066\u304a\u308a\u3001\u57fa\u672c\u304b\u3089\u4e0a\u7d1a\u307e\u3067\u5e45\u5e83\u3044\u30c8\u30d4\u30c3\u30af\u3092\u30ab\u30d0\u30fc\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>YouTube\u30c1\u30e3\u30f3\u30cd\u30eb<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u6709\u6599\u30b3\u30fc\u30b9\u306b\u52a0\u3048\u3066\u3001YouTube\u306b\u306fAcademind\u3084Traversy Media\u306a\u3069\u306e\u7121\u6599\u306eAngular\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u304c\u305f\u304f\u3055\u3093\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b9\u306f\u3001\u521d\u5fc3\u8005\u3068\u7d4c\u9a13\u8c4a\u5bcc\u306a\u958b\u767a\u8005\u306e\u4e21\u65b9\u304b\u3089\u6069\u6075\u3092\u53d7\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u8c4a\u5bcc\u306a\u5b66\u7fd2\u6559\u6750\u3068\u5b9f\u8df5\u7684\u306a\u6a5f\u4f1a\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c10\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f32\u300c\u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b9\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8a73\u3057\u304f\u8aac\u660e\u3057\u3066\u304f\u3060\u3055\u3044 \u7b2c10\u7ae0:\u53c2\u8003\u6587\u732e\u3068\u3055\u3089\u306a\u308b\u5b66\u7fd2 3.&lt;&gt; \u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30d5\u30a9\u30fc\u30e9\u30e0 ChatGPT<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7b2c10\u7ae0:\u53c2\u8003\u6587\u732e\u3068\u3055\u3089\u306a\u308b\u5b66\u7fd2<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">10.3 \u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30d5\u30a9\u30fc\u30e9\u30e0<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f62\u5bb9<\/h4>\n\n\n\n<p>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30d5\u30a9\u30fc\u30e9\u30e0\u306f\u3001\u5b66\u7fd2\u3068\u6210\u9577\u306e\u305f\u3081\u306e\u91cd\u8981\u306a\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u3059\u3002 \u3053\u308c\u3089\u306e\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u306b\u53c2\u52a0\u3059\u308b\u3053\u3068\u3067\u3001\u4ef2\u9593\u3068\u3064\u306a\u304c\u308a\u3001\u554f\u984c\u3092\u89e3\u6c7a\u3057\u3001\u696d\u754c\u306e\u5c02\u9580\u5bb6\u3068\u4ea4\u6d41\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u3001\u6700\u65b0\u306e\u60c5\u5831\u3084\u30c8\u30ec\u30f3\u30c9\u3092\u5165\u624b\u3059\u308b\u306e\u306b\u3082\u6700\u9069\u306a\u5834\u6240\u3067\u3059\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u5968\u3055\u308c\u308b\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30d5\u30a9\u30fc\u30e9\u30e0<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b9\u30bf\u30c3\u30af\u30aa\u30fc\u30d0\u30fc\u30d5\u30ed\u30fc<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u3053\u308c\u306f\u3001\u958b\u767a\u8005\u306b\u3068\u3063\u3066\u6700\u3082\u4e00\u822c\u7684\u306b\u4f7f\u7528\u3055\u308c\u308bQ&amp;A\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u3059\u3002 Angular \u3068\u72b6\u614b\u7ba1\u7406\u306b\u95a2\u3059\u308b\u8c4a\u5bcc\u306a\u8cea\u554f\u3068\u56de\u7b54\u306f\u3001\u3053\u3061\u3089\u306b\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/angular\">Stack Overflow Angular \u30bf\u30b0<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30ec\u30c7\u30a3\u30c3\u30c8<\/strong>\n<ul class=\"wp-block-list\">\n<li>r\/Angular2 \u3068 r\/javascript \u306f\u3001Angular \u3068 JavaScript \u95a2\u9023\u306e\u975e\u5e38\u306b\u6d3b\u767a\u306a\u30b5\u30d6\u30d5\u30a9\u30fc\u30e9\u30e0\u3067\u3059\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/www.reddit.com\/r\/Angular2\/\">r\/Angular2 (\u82f1\u8a9e)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.reddit.com\/r\/javascript\/\">r\/javascript<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30c6\u30a3\u30c3\u30ab\u30fc<\/strong>\n<ul class=\"wp-block-list\">\n<li>Angular \u3068\u72b6\u614b\u7ba1\u7406\u306b\u95a2\u9023\u3059\u308b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9 \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u591a\u304f\u306f GitHub \u306b\u3042\u308a\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u53c2\u52a0\u3059\u308b\u3053\u3068\u3067\u3001\u5b9f\u8df5\u7684\u306a\u7d4c\u9a13\u3092\u7a4d\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/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\n\n\n<li><strong>Discord \u3068 Slack \u306e\u30b3\u30df\u30e5\u30cb\u30c6\u30a3<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u3053\u308c\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u30f3\u30b0\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u306f\u3001Angular\u304a\u3088\u3073\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u5c02\u7528\u306e\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/discord.com\/invite\/angular\">\u89d2\u5ea6\u306e\u4e0d\u548c<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/angularbuddies.slack.com\/\">r\/Angular2 \u30b9\u30e9\u30c3\u30af<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30df\u30c7\u30a3\u30a2\u30e0\u3068 Dev.to<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u3069\u3061\u3089\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u3082\u305f\u304f\u3055\u3093\u306e\u6280\u8853\u8a18\u4e8b\u304c\u3042\u308a\u3001Angular \u3068\u72b6\u614b\u7ba1\u7406\u3092\u5c02\u9580\u3068\u3059\u308b\u8457\u8005\u306e\u4f55\u4eba\u304b\u3092\u30d5\u30a9\u30ed\u30fc\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/\">\u4e2d\u7a0b\u5ea6<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dev.to\/\">Dev.to<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u56c0\u308b<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u591a\u304f\u306e Angular \u958b\u767a\u8005\u3084\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u304c Twitter \u3067\u975e\u5e38\u306b\u6d3b\u767a\u306b\u6d3b\u52d5\u3057\u3066\u3044\u307e\u3059\u3002 \u305d\u308c\u3089\u306b\u5f93\u3046\u3053\u3068\u3067\u3001\u6700\u65b0\u306e\u60c5\u5831\u3068\u30ea\u30bd\u30fc\u30b9\u3092\u5165\u624b\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u63a8\u5968\u6ce8\u610f:<a href=\"https:\/\/twitter.com\/angular\">@angular<\/a>\u3001<a href=\"https:\/\/twitter.com\/ngrx_io\">@ngrx_io<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30ed\u30fc\u30ab\u30eb\u30df\u30fc\u30c8\u30a2\u30c3\u30d7\u3068\u30ab\u30f3\u30d5\u30a1\u30ec\u30f3\u30b9<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5730\u5143\u306e\u6280\u8853\u30df\u30fc\u30c8\u30a2\u30c3\u30d7\u3084\u30ab\u30f3\u30d5\u30a1\u30ec\u30f3\u30b9\u306b\u53c2\u52a0\u3059\u308b\u3053\u3068\u306f\u3001\u30cd\u30c3\u30c8\u30ef\u30fc\u30ad\u30f3\u30b0\u3068\u5b66\u7fd2\u306e\u7d76\u597d\u306e\u6a5f\u4f1a\u3067\u3059\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/www.meetup.com\/\">Meetup.com<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3084\u30d5\u30a9\u30fc\u30e9\u30e0\u306f\u3001\u554f\u984c\u89e3\u6c7a\u306b\u5f79\u7acb\u3064\u3060\u3051\u3067\u306a\u304f\u3001\u30ad\u30e3\u30ea\u30a2\u958b\u767a\u3068\u5b66\u7fd2\u306e\u6a5f\u4f1a\u3082\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u306f\u3001\u7b2c10\u7ae0\u3001\u30b5\u30d6\u30bb\u30af\u30b7\u30e7\u30f33\u300c\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3068\u30d5\u30a9\u30fc\u30e9\u30e0\u300d\u306e\u8a73\u7d30\u306a\u8aac\u660e\u3067\u3059\u3002 \u3054\u4e0d\u660e\u306a\u70b9\u304c\u3042\u308b\u5834\u5408\u3084\u3001\u3055\u3089\u306b\u8a73\u3057\u3044\u60c5\u5831\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002 \u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u72b6\u614b\u7ba1 &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-3025","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\/3025","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=3025"}],"version-history":[{"count":1,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3025\/revisions"}],"predecessor-version":[{"id":3026,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3025\/revisions\/3026"}],"wp:attachment":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}