{"id":2234,"date":"2021-08-17T23:20:06","date_gmt":"2021-08-17T14:20:06","guid":{"rendered":"https:\/\/nobunobu1717.site\/?p=2234"},"modified":"2022-10-02T09:04:42","modified_gmt":"2022-10-02T00:04:42","slug":"post-2234","status":"publish","type":"post","link":"https:\/\/nobunobu1717.site\/?p=2234","title":{"rendered":"\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011React\u30cf\u30f3\u30ba\u30aa\u30f3\u30e9\u30fc\u30cb\u30f3\u30b0 \u7b2c2\u7248 \u306fReact  Hooks\u3092\u5b66\u3076\u306e\u306b\u6700\u9069\u306a\u6280\u8853\u66f8"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#i\"><span class=\"toc_number toc_depth_1\">1<\/span> \u6982\u8981<\/a><\/li><li><a href=\"#i-2\"><span class=\"toc_number toc_depth_1\">2<\/span> \u66f8\u7c4d\u6982\u8981<\/a><\/li><li><a href=\"#i-3\"><span class=\"toc_number toc_depth_1\">3<\/span> \u5185\u5bb9\u306e\u307e\u3068\u3081\u3068\u611f\u60f3<\/a><\/li><li><a href=\"#i-4\"><span class=\"toc_number toc_depth_1\">4<\/span> \u305d\u306e\u4ed6\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3<\/a><\/li><li><a href=\"#i-5\"><span class=\"toc_number toc_depth_1\">5<\/span> \u8aad\u66f8\u30ce\u30fc\u30c8(\u500b\u4eba\u7684\u306a\u307e\u3068\u3081)<\/a><\/li><\/ul><\/div>\n<h2><span id=\"i\">\u6982\u8981<\/span><\/h2>\n<p>\u4eca\u56de\u306f\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u306e\u300cReact\u30cf\u30f3\u30ba\u30aa\u30f3\u30e9\u30fc\u30cb\u30f3\u30b0 \u7b2c2\u7248 \u300d\u306b\u95a2\u3057\u3066\u306e\u611f\u60f3\u3092\u66f8\u304d\u307e\u3059\u3002<br \/>\n2021\u5e74\u306e8\u6708\u306b\u51fa\u305f\u3070\u304b\u308a\u306e\u65b0\u520a\u3067\u3001\u304a\u76c6\u4f11\u307f\u306b\u8aad\u7834\u3057\u307e\u3057\u305f\u3002<\/p>\n<div class=\"kattene\">\n    <div class=\"kattene__imgpart\"><a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.amazon.co.jp\/gp\/offer-listing\/4873119383\/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4873119383&amp;linkCode=am2&amp;tag=nobu17171009-22&amp;linkId=99c7b78a3e761d4adc464af1e1ab4ff8\"><img width=\"160\" height=\"160\" loading=\"lazy\" src=\"https:\/\/ws-fe.amazon-adsystem.com\/widgets\/q?_encoding=UTF8&amp;MarketPlace=JP&amp;ASIN=4873119383&amp;ServiceVersion=20070822&amp;ID=AsinImage&amp;WS=1&amp;Format=_SL250_&amp;tag=nobu17171009-22\" class=\"kattene__shadow\" ><\/a><\/div>\n    <div class=\"kattene__infopart\">\n      <div class=\"kattene__title\"><a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.amazon.co.jp\/gp\/offer-listing\/4873119383\/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4873119383&amp;linkCode=am2&amp;tag=nobu17171009-22&amp;linkId=99c7b78a3e761d4adc464af1e1ab4ff8\">React\u30cf\u30f3\u30ba\u30aa\u30f3\u30e9\u30fc\u30cb\u30f3\u30b0 \u7b2c2\u7248 \u2015Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a><\/div>\n      <div class=\"kattene__description\">Facebook\u304c\u958b\u767a\u3057\u305fJavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u300cReact\u300d\u306e\u89e3\u8aac\u66f8\u30022013\u5e74\u306b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u5316\u3055\u308c\u305fReact\u3067\u3059\u304c\u3001\u3053\u3053\u6570\u5e74\u3067\u5927\u304d\u306a\u5909\u66f4\u304c\u52a0\u3048\u3089\u308c\u3001\u307e\u305fReact\u3092\u53d6\u308a\u5dfb\u304f\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3082\u5927\u304d\u304f\u5909\u5316\u3057\u307e\u3057\u305f\u3002\u672c\u66f8\u3067\u306f\u5b9f\u969b\u306b\u52d5\u304f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u308a\u306a\u304c\u3089\u3001\u6700\u65b0\u306eReact\u306e\u8a18\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u3064\u3064\u3001\u6700\u65b0\u306e\u30c4\u30fc\u30eb\u3084\u30e9\u30a4\u30d6\u30e9\u30ea\u3082\u7d39\u4ecb\u3057\u307e\u3059\u3002\u521d\u5fc3\u8005\u304b\u3089\u4e2d\u4e0a\u7d1a\u8005\u307e\u3067\u3001React\u306e\u4eca\u3092\u3059\u3070\u3084\u304f\u5b66\u7fd2\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/div>\n      <div class=\"kattene__btns __one\"><div><a class=\"kattene__btn __orange\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.amazon.co.jp\/gp\/offer-listing\/4873119383\/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4873119383&amp;linkCode=am2&amp;tag=nobu17171009-22&amp;linkId=99c7b78a3e761d4adc464af1e1ab4ff8\">Amazon<\/a><\/div><\/div><\/div><\/div>\n<p>&nbsp;<\/p>\n<p>\u6280\u8853\u66f8\u306e\u30bb\u30fc\u30eb\u3068\u304a\u3059\u3059\u3081\u66f8\u7c4d\u3092\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002\u5408\u308f\u305b\u3066\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"7LgDSVz6zq\"><p><a href=\"https:\/\/nobunobu1717.site\/?p=2713\">\u301010\/13\u307e\u3067\u3011Amazon Kindle\u3067\u6280\u8853\u66f8\u304c\u534a\u984d\u30bb\u30fc\u30eb\u4e2d\u3002\u73fe\u5f79\u30a8\u30f3\u30b8\u30cb\u30a2\u304b\u3089\u898b\u305f\u30aa\u30b9\u30b9\u30e1\u66f8\u7c4d\u3082\u7d39\u4ecb<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u301010\/13\u307e\u3067\u3011Amazon Kindle\u3067\u6280\u8853\u66f8\u304c\u534a\u984d\u30bb\u30fc\u30eb\u4e2d\u3002\u73fe\u5f79\u30a8\u30f3\u30b8\u30cb\u30a2\u304b\u3089\u898b\u305f\u30aa\u30b9\u30b9\u30e1\u66f8\u7c4d\u3082\u7d39\u4ecb&#8221; &#8212; nobu blog\" src=\"https:\/\/nobunobu1717.site\/?p=2713&#038;embed=true#?secret=yirpexP6uT#?secret=7LgDSVz6zq\" data-secret=\"7LgDSVz6zq\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h2><span id=\"i-2\">\u66f8\u7c4d\u6982\u8981<\/span><\/h2>\n<h3>\u3069\u3093\u306a\u672c\uff1f<\/h3>\n<blockquote><p>Facebook\u304c\u958b\u767a\u3057\u305fJavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u300cReact\u300d\u306e\u89e3\u8aac\u66f8\u3002<br \/>\n2013\u5e74\u306b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u5316\u3055\u308c\u305fReact\u3067\u3059\u304c\u3001\u3053\u3053\u6570\u5e74\u3067\u5927\u304d\u306a\u5909\u66f4\u304c\u52a0\u3048\u3089\u308c\u3001\u307e\u305fReact\u3092\u53d6\u308a\u5dfb\u304f\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3082\u5927\u304d\u304f\u5909\u5316\u3057\u307e\u3057\u305f\u3002<br \/>\n\u672c\u66f8\u3067\u306f\u5b9f\u969b\u306b\u52d5\u304f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u308a\u306a\u304c\u3089\u3001\u6700\u65b0\u306eReact\u306e\u8a18\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u3064\u3064\u3001\u6700\u65b0\u306e\u30c4\u30fc\u30eb\u3084\u30e9\u30a4\u30d6\u30e9\u30ea\u3082\u7d39\u4ecb\u3057\u307e\u3059\u3002\u521d\u5fc3\u8005\u304b\u3089\u4e2d\u4e0a\u7d1a\u8005\u307e\u3067\u3001React\u306e\u4eca\u3092\u3059\u3070\u3084\u304f\u5b66\u7fd2\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p><\/blockquote>\n<ul class=\"biblio\">\n<li>Alex Banks\u3001Eve Porcello\u3000\u8457\u3001\u5bae\u5d0e \u7a7a\u3000\u8a33<\/li>\n<li>2021\u5e7408\u6708 \u767a\u884c<\/li>\n<li>368\u30da\u30fc\u30b8<\/li>\n<li>\u5b9a\u4fa13,740\u5186(\u7a0e\u8fbc)<\/li>\n<\/ul>\n\n\t<p style=\"color:#666;margin-bottom:5px;\">\u30b9\u30dd\u30f3\u30b5\u30fc\u30ea\u30f3\u30af<\/p>\n\t<div class=\"middle-ad\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n<h2><span id=\"i-3\">\u5185\u5bb9\u306e\u307e\u3068\u3081\u3068\u611f\u60f3<\/span><\/h2>\n<p>SPA (Single Page Application) \u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u304a\u3044\u3066\u3001\uff11\u756a\u30e1\u30b8\u30e3\u30fc\u3067\u3042\u308bReact\u306b\u95a2\u3057\u3066\u307e\u3068\u3081\u305f\u5165\u9580\u66f8\u3067\u3059\u3002<br \/>\nJavascirpt\u306e\u8aac\u660e\u306a\u3069\u3082\u3042\u308a\u521d\u5b66\u8005\u306b\u3082\u914d\u616e\u3057\u305f\u69cb\u6210\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\n\u305f\u3060\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f7f\u3046\u306e\u3067\u306f\u306a\u304f\u3001\u6975\u529b\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306a\u3069\u3092\u4f7f\u7528\u305b\u305a\u3001\u4e00\u304b\u3089\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u3044\u304f\u306e\u3067\u4ed5\u7d44\u307f\u3092\u3057\u3063\u304b\u308a\u3068\u5b66\u3076\u3053\u3068\u304c\u3067\u304d\u308b\u672c\u3067\u3059\u3002<br \/>\n\u7d30\u304b\u3044\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u306a\u3069\u306f\u3053\u306e\u672c\u3067\u306f\u30ab\u30d0\u30fc\u3057\u304d\u308c\u306a\u3044\u306e\u3067\u3001\u5225\u9014\u5b66\u7fd2\u306f\u5fc5\u8981\u3067\u3059\u304cReact\u3092\u5b66\u3076\u306e\u306b\u826f\u3044\u672c\u3060\u3068\u601d\u3044\u307e\u3057\u305f\u3002<\/p>\n<h3>\u826f\u304b\u3063\u305f\u70b9<\/h3>\n<h4>\u8aad\u307f\u3084\u3059\u3044<\/h4>\n<p>\u30aa\u30e9\u30a4\u30ea\u30fc\u7ffb\u8a33\u66f8\u306b\u3042\u308a\u304c\u3061\u306a\u3001\u5909\u306a\u65e5\u672c\u8a9e\u3084\u307e\u308f\u308a\u304f\u3069\u3044\u8aac\u660e\u306b\u3088\u308b\u8aad\u307f\u3065\u3089\u3055\u3082\u7121\u304f\u3066\u3001\u8aad\u307f\u3084\u3059\u3063\u305f\u3067\u3059\u3002<br \/>\n\u30da\u30fc\u30b8\u6570\u3082300\u30da\u30fc\u30b8\u524d\u534a\u3068\u3001\u539a\u3059\u304e\u305a\u3001\u8584\u3059\u304e\u306a\u3044\u30dc\u30ea\u30e5\u30fc\u30e0\u306a\u306e\u3082\u826f\u3044\u3067\u3059\u3002<\/p>\n<h4>React Hooks\u3092\u4f7f\u7528<\/h4>\n<p>React\u81ea\u4f53\u306e\u30b3\u30fc\u30c9\u306e\u66f8\u304d\u65b9\u304cReact Hooks\u524d\u5f8c\u3067\u5927\u304d\u304f\u5909\u308f\u3063\u3066\u304a\u308a\u3001\u672c\u66f8\u306fHook\u306b\u3088\u308b\u66f8\u304d\u65b9\u3067\u8aac\u660e\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\uff08\u6570\u5e74\u524d\u306b\u5c11\u3057\u3060\u3051\u89e6\u3063\u305f\u6642\u306b\u899a\u3048\u305fClass\u306b\u3088\u308b\u5b9f\u88c5\u3068\u5927\u304d\u304f\u5909\u308f\u3063\u305f\u5b9f\u88c5\u3002\uff09<\/p>\n<p>Reac Hook\u81ea\u4f53\u304c\u6bd4\u8f03\u7684\u6700\u8fd1\u3067\u304d\u305f\u3082\u306e\u306a\u306e\u3067\u3001\u6050\u3089\u304f\u5c11\u3057\u53e4\u3044React\u306e\u672c\u3060\u3068class\u3092\u4f7f\u7528\u3057\u305f\u5b9f\u88c5(\u975e\u63a8\u5968\uff1f)\u3068\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u306e\u70b9\u306f\u5b89\u5fc3\u3057\u3066\u6700\u65b0\u306e\u5b9f\u88c5\u65b9\u6cd5\u3092\u672c\u66f8\u3067\u5b66\u3076\u4e8b\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u524d\u89e6\u3063\u305f\u6642\u306fRedux\u304c\u82e6\u624b\u3067\u5acc\u3060\u3063\u305f\u306e\u3067\u3059\u304c\u3001Hook\u306b\u306a\u3063\u3066\u30b9\u30c6\u30fc\u30c8\u306e\u7ba1\u7406\u65b9\u6cd5\u304c\u5909\u308f\u3063\u3066Redux\u3092\u4f7f\u7528\u3057\u306a\u304f\u306a\u3063\u305f\u306e\u304b\u3001\u672c\u66f8\u3067\u306f\u4f7f\u7528\u3055\u308c\u3066\u3044\u306a\u304b\u3063\u305f\u306e\u3082\u500b\u4eba\u7684\u306b\u306f\u826f\u304b\u3063\u305f\u3067\u3059\u3002<\/p>\n<h4>\u308f\u304b\u308a\u3084\u3059\u3044\u8aac\u660e\u69cb\u9020<\/h4>\n<p>\u3044\u304d\u306a\u308a\u6a5f\u80fd\u3092\u3066\u3093\u3053\u3082\u308a\u3067\u4f5c\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u5f90\u3005\u306b\u6a5f\u80fd\u3092\u4f5c\u3063\u3066\u8aac\u660e\u3057\u3066\u3044\u304f\u3068\u3044\u3063\u305f\u65b9\u6cd5\u304c\u7406\u89e3\u3057\u3084\u3059\u304b\u3063\u305f\u3067\u3059\u3002<\/p>\n<p>1.\u304b\u3093\u305f\u3093\u306a\u6a5f\u80fd\u3092\u4f5c\u308b \u2192 2.\u8aac\u660e \u2192 3.\u3053\u306e\u65b9\u6cd5\u306e\u554f\u984c\u70b9\u3084\u8db3\u308a\u306a\u3044\u6a5f\u80fd\u306b\u95a2\u3057\u3066\u306e\u8aac\u660e \u2192 4.\u6a5f\u80fd\u8ffd\u52a0\u3084\u65b0\u3057\u3044\u66f8\u304d\u65b9\u306e\u8aac\u660e \u2192 ...<\/p>\n<p>\u3068\u3044\u3063\u305f\u6d41\u308c\u3067\u8aac\u660e\u304c\u3055\u308c\u308b\u306e\u3067\u3001\u6bb5\u968e\u7684\u306b\u7406\u89e3\u3067\u304d\u3066\u3001\u305d\u306e\u6a5f\u80fd\u304c\u5fc5\u8981\u3068\u306a\u308b\u80cc\u666f\u306a\u3069\u3082\u308f\u304b\u308a\u3084\u3059\u3044\u3067\u3059\u3002<br \/>\n(\u9006\u306b\u9060\u56de\u308a\u3068\u611f\u3058\u308b\u4eba\u3082\u3044\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3002)<\/p>\n<h4>1\u304b\u3089\u8aac\u660e<\/h4>\n<p>CRA(Create React App)\u306b\u3088\u308b\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f7f\u7528\u305b\u305a\u306b\u30011\u304b\u3089\u8aac\u660e\u3057\u3066\u304f\u308c\u308b\u306e\u3067\u3001React\u304c\u3069\u3046\u3044\u3063\u305f\u69cb\u9020\u3084\u4ed5\u7d44\u307f\u306a\u306e\u304b\u3092\u542b\u3081\u3066\u7406\u89e3\u3067\u304d\u308b\u306e\u3067\u826f\u304b\u3063\u305f\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n(\u9006\u306b\u7d30\u304b\u3044\u90e8\u5206\u306f\u3044\u3044\u304b\u3089\u3068\u306b\u304b\u304f\u3001\u52d5\u3051\u3070\u826f\u3044\u3068\u3044\u3046\u4eba\u306b\u306f\u9060\u56de\u308a\u3068\u611f\u3058\u308b\u304b\u3082\u3002)<\/p>\n<h4>\u95a2\u9023\u6a5f\u80fd\u306b\u95a2\u3057\u3066\u3082\u8aac\u660e\u3042\u308a<\/h4>\n<p>npm\u3084yarn,Eslint,Prettier,Jest\u3068\u3044\u3063\u305fJS\u958b\u767a\u306b\u304a\u3051\u308b\u5404\u7a2e\u30c4\u30fc\u30eb\u306b\u95a2\u3057\u3066\u30821\u901a\u308a\u8aac\u660e\u304c\u3055\u308c\u3066\u3044\u3066\u3001\u958b\u767a\u3059\u308b\u4e0a\u3067\u5fc5\u8981\u3068\u306a\u308b\u30a8\u30c3\u30bb\u30f3\u30b9\u3082\u3057\u3063\u304b\u308a\u3067\u304d\u3066\u826f\u304b\u3063\u305f\u3067\u3059\u3002<\/p>\n<p>\u4ed8\u9332\u3067\u306f\u7ffb\u8a33\u8005\u306b\u3088\u308b\u3001\u3053\u308c\u3089\u306e\u30c4\u30fc\u30eb\u306b\u95a2\u3059\u308b\u3088\u308a\u8a73\u7d30\u306a\u8aac\u660e\u3084\u5c0e\u5165\u65b9\u6cd5\u306e\u8aac\u660e\u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u3066\u3001JS\u958b\u767a\u306b\u6163\u308c\u3066\u3044\u306a\u3044\u521d\u5b66\u8005\u5411\u3051\u306e\u30d5\u30a9\u30ed\u30fc\u304c\u3057\u3063\u304b\u308a\u3055\u308c\u3066\u3044\u308b\u3068\u611f\u3058\u307e\u3057\u305f\u3002<\/p>\n\n\t<p style=\"color:#666;margin-bottom:5px;\">\u30b9\u30dd\u30f3\u30b5\u30fc\u30ea\u30f3\u30af<\/p>\n\t<div class=\"middle-ad\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n<h3>\u6c17\u306b\u306a\u3063\u305f\u70b9<\/h3>\n<h4>\u3088\u308a\u5b9f\u8df5\u7684\u306a\u65b9\u6cd5\u306f\u5225\u9014\u5b66\u3076\u5fc5\u8981\u3042\u308a<\/h4>\n<p>\u57fa\u672c\u7684\u306b\u500b\u3005\u306e\u6a5f\u80fd\u3092\u8aac\u660e\u3059\u308b\u305f\u3081\u306e\u69cb\u9020\u3068\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3068\u3057\u3066\u5b9f\u969b\u306b\u4f5c\u308b\u969b\u306b\u5fc5\u8981\u306b\u306a\u308b\u6a5f\u80fd\u306f\u5225\u9014\u81ea\u5206\u3067\u8abf\u3079\u308b\u306a\u308a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n(\u4f8b\uff1a\u30ed\u30b0\u30a4\u30f3\u3084\u30ed\u30b0\u30a2\u30a6\u30c8\u3092\u542b\u3081\u305f\u8a8d\u8a3c,\u8a8d\u53ef\u3092\u7d44\u307f\u8fbc\u3080\u306b\u306f\uff1f)<\/p>\n<h4>Typescript\u3067\u306f\u306a\u304f\u3001Javascript<\/h4>\n<p>\u672c\u66f8\u306fJavascript\u3092\u4f7f\u7528\u3057\u305f\u8aac\u660e\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\n\u6628\u4eca\u306fTypescript(TS)\u306b\u3088\u308b\u5b9f\u88c5\u306e\u65b9\u304c\u304b\u306a\u308a\u5897\u3048\u3066\u304d\u307e\u3057\u305f\u3057\u3001React\u3067\u306f\u7279\u306bTS\u304c\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u30a4\u30e1\u30fc\u30b8\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u306a\u306e\u3067\u3001TS\u306b\u3088\u308bReact\u306e\u5b9f\u88c5\u3092\u5b66\u3073\u305f\u3044\u4eba\u306b\u306f\u5225\u9014\u4ed6\u306e\u65b9\u6cd5\u3067\u5b66\u7fd2\u304c\u5fc5\u8981\u3067\u3059\u3002<br \/>\n\uff08\u4e00\u5fdc\u5c11\u3057\u3060\u3051\u3001Typescript\u306b\u95a2\u3057\u3066\u3082\u89e6\u308c\u3089\u308c\u3066\u306f\u3044\u307e\u3059\u304c\uff09<\/p>\n<p>\u500b\u4eba\u7684\u306b\u306f\u3001\u6642\u9593\u306f\u304b\u304b\u3063\u3066\u3082\u826f\u3044\u306e\u306a\u3089\u3001\u4e00\u5ea6\u3053\u306e\u672c\u3067\u3057\u3063\u304b\u308a\u3068\u57fa\u672c\u7684\u306a\u4ed5\u7d44\u307f\u3092\u5b66\u3093\u3067\u304b\u3089TS\u306b\u3088\u308b\u5b9f\u88c5\u3092\u5b66\u3076\u306e\u3082\u826f\u3044\u306e\u3067\u306f\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h3>React\u3092\u5b9f\u969b\u306b\u89e6\u3063\u3066\u307f\u3066\u306e\u611f\u60f3<\/h3>\n<p>\u5b9f\u969b\u306b\u3053\u306e\u672c\u3067\u5b66\u7fd2\u3057\u306a\u304c\u3089\u3001\u4ee5\u524dVue.js\u3067\u4f5c\u3063\u3066\u3044\u305f\u30b5\u30a4\u30c8\u3092React\u3067\u4f5c\u308a\u76f4\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p><a href=\"https:\/\/fujimusicpj.web.app\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/fujimusicpj.web.app<\/a><\/p>\n<p>\u6700\u521d\u306fJSX\u306e\u8a18\u6cd5\u304c\u99b4\u67d3\u307e\u305a\u306b\u3001\u3046\u307e\u304f\u30b3\u30fc\u30c9\u304c\u52d5\u304b\u306a\u3044(\u30b3\u30f3\u30d1\u30a4\u30eb\u30a8\u30e9\u30fc\u306b\u306a\u308b)\u3068\u3044\u3046\u4e8b\u3067\u60a9\u307e\u3055\u308c\u307e\u3057\u305f\u304c\u3001\u6163\u308c\u3066\u304d\u307e\u3057\u305f\u3002<br \/>\nVue.js\u306b\u6bd4\u3079\u308b\u3068\u6577\u5c45\u306f\u9ad8\u3044\u3068\u611f\u3058\u308b\u3082\u306e\u306e\u3001\u6163\u308c\u3066\u304f\u308b\u3068\u3053\u308c\u306f\u3053\u308c\u3067\u30a2\u30ea\u3060\u306a\u3041\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\t<p style=\"color:#666;margin-bottom:5px;\">\u30b9\u30dd\u30f3\u30b5\u30fc\u30ea\u30f3\u30af<\/p>\n\t<div class=\"middle-ad\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n<h2><span id=\"i-4\">\u305d\u306e\u4ed6\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3<\/span><\/h2>\n<p>\u305d\u306e\u4ed6\u306e\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u306e\u7d39\u4ecb\u3092\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u5408\u308f\u305b\u3066\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"dmLgQSLWhA\"><p><a href=\"https:\/\/nobunobu1717.site\/?p=2620\">\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u8aad\u66f8\u611f\u60f3\u3011\u30d9\u30bf\u30fc\u30d7\u30ed\u30b0\u30e9\u30de \u512a\u308c\u305f\u30d7\u30ed\u30b0\u30e9\u30de\u306b\u306a\u308b\u305f\u3081\u306e38\u306e\u8003\u3048\u65b9\u3068\u30c6\u30af\u30cb\u30c3\u30af\u306f\u7db2\u7f85\u7684\u306a\u30ce\u30a6\u30cf\u30a6\u96c6<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u8aad\u66f8\u611f\u60f3\u3011\u30d9\u30bf\u30fc\u30d7\u30ed\u30b0\u30e9\u30de \u512a\u308c\u305f\u30d7\u30ed\u30b0\u30e9\u30de\u306b\u306a\u308b\u305f\u3081\u306e38\u306e\u8003\u3048\u65b9\u3068\u30c6\u30af\u30cb\u30c3\u30af\u306f\u7db2\u7f85\u7684\u306a\u30ce\u30a6\u30cf\u30a6\u96c6&#8221; &#8212; nobu blog\" src=\"https:\/\/nobunobu1717.site\/?p=2620&#038;embed=true#?secret=GtWoHYTFYL#?secret=dmLgQSLWhA\" data-secret=\"dmLgQSLWhA\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"NZQpqp24wG\"><p><a href=\"https:\/\/nobunobu1717.site\/?p=2460\">\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011Design IT! \u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u306e\u305f\u3081\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c6\u30a3\u30f3\u30b0\u5165\u9580\u306f\u4e0a\u7d1a\u8005\u5411\u3051\u306a\u62bd\u8c61\u5ea6\u9ad8\u3081\u306a\u672c<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011Design IT! \u30d7\u30ed\u30b0\u30e9\u30de\u30fc\u306e\u305f\u3081\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c6\u30a3\u30f3\u30b0\u5165\u9580\u306f\u4e0a\u7d1a\u8005\u5411\u3051\u306a\u62bd\u8c61\u5ea6\u9ad8\u3081\u306a\u672c&#8221; &#8212; nobu blog\" src=\"https:\/\/nobunobu1717.site\/?p=2460&#038;embed=true#?secret=5auo20JqfG#?secret=NZQpqp24wG\" data-secret=\"NZQpqp24wG\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"YIrlbQIHOh\"><p><a href=\"https:\/\/nobunobu1717.site\/?p=2371\">\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011\u30e6\u30cb\u30b3\u30fc\u30f3\u4f01\u696d\u306e\u3072\u307f\u3064 \u306fSpotify\u306b\u304a\u3051\u308b\u72ec\u81ea\u306e\u958b\u767a\u4f53\u5236\u3092\u308f\u304b\u308a\u3084\u3059\u304f\u307e\u3068\u3081\u305f\u672c<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011\u30e6\u30cb\u30b3\u30fc\u30f3\u4f01\u696d\u306e\u3072\u307f\u3064 \u306fSpotify\u306b\u304a\u3051\u308b\u72ec\u81ea\u306e\u958b\u767a\u4f53\u5236\u3092\u308f\u304b\u308a\u3084\u3059\u304f\u307e\u3068\u3081\u305f\u672c&#8221; &#8212; nobu blog\" src=\"https:\/\/nobunobu1717.site\/?p=2371&#038;embed=true#?secret=9GfIO2wgGU#?secret=YIrlbQIHOh\" data-secret=\"YIrlbQIHOh\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"1az5Ls6Lsl\"><p><a href=\"https:\/\/nobunobu1717.site\/?p=2207\">\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011Selenium\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3&#038;\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9 \u306fUI\u306e\u81ea\u52d5\u30c6\u30b9\u30c8\u306e\u30ac\u30a4\u30c9\u3068\u3057\u3066\u826f\u304f\u307e\u3068\u307e\u3063\u3066\u3044\u308b\u826f\u66f8<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011Selenium\u30c7\u30b6\u30a4\u30f3\u30d1\u30bf\u30fc\u30f3&#038;\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9 \u306fUI\u306e\u81ea\u52d5\u30c6\u30b9\u30c8\u306e\u30ac\u30a4\u30c9\u3068\u3057\u3066\u826f\u304f\u307e\u3068\u307e\u3063\u3066\u3044\u308b\u826f\u66f8&#8221; &#8212; nobu blog\" src=\"https:\/\/nobunobu1717.site\/?p=2207&#038;embed=true#?secret=yfnKHEAvy0#?secret=1az5Ls6Lsl\" data-secret=\"1az5Ls6Lsl\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"sIhIR0mJzD\"><p><a href=\"https:\/\/nobunobu1717.site\/?p=2350\">\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011\u5b9f\u8df5JUnit\u306f\u8aad\u307f\u3084\u3059\u304f\u3001\u4f53\u578b\u7684\u306bxUnit\u3092\u4f7f\u7528\u3057\u305f\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u65b9\u6cd5\u304c\u5b66\u3079\u308b\u826f\u66f8<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011\u5b9f\u8df5JUnit\u306f\u8aad\u307f\u3084\u3059\u304f\u3001\u4f53\u578b\u7684\u306bxUnit\u3092\u4f7f\u7528\u3057\u305f\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u65b9\u6cd5\u304c\u5b66\u3079\u308b\u826f\u66f8&#8221; &#8212; nobu blog\" src=\"https:\/\/nobunobu1717.site\/?p=2350&#038;embed=true#?secret=TjHmuirtmL#?secret=sIhIR0mJzD\" data-secret=\"sIhIR0mJzD\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"qiZKyFE9p5\"><p><a href=\"https:\/\/nobunobu1717.site\/?p=2181\">\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u30fb\u30a6\u30a7\u30c3\u30c8\u30a6\u30a7\u30a2 \u306f\u30a8\u30f3\u30b8\u30cb\u30a2\u304c\u6210\u9577\u3059\u308b\u305f\u3081\u306e\u52c9\u5f37\u65b9\u6cd5\u3084\u8003\u3048\u65b9\u306b\u95a2\u3057\u3066\u8aac\u660e\u3055\u308c\u305f\u672c<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u30fb\u30a6\u30a7\u30c3\u30c8\u30a6\u30a7\u30a2 \u306f\u30a8\u30f3\u30b8\u30cb\u30a2\u304c\u6210\u9577\u3059\u308b\u305f\u3081\u306e\u52c9\u5f37\u65b9\u6cd5\u3084\u8003\u3048\u65b9\u306b\u95a2\u3057\u3066\u8aac\u660e\u3055\u308c\u305f\u672c&#8221; &#8212; nobu blog\" src=\"https:\/\/nobunobu1717.site\/?p=2181&#038;embed=true#?secret=cZWDoLalf8#?secret=qiZKyFE9p5\" data-secret=\"qiZKyFE9p5\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"KYjUvAtKtM\"><p><a href=\"https:\/\/nobunobu1717.site\/?p=1953\">\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011\u5165\u9580bash \u7b2c3\u7248 \u306f\u57fa\u672c\u304b\u3089\u4e01\u5be7\u306b\u8aac\u660e\u3055\u308c\u3066\u3044\u308b\u672c<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u3010\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f3\u3011\u5165\u9580bash \u7b2c3\u7248 \u306f\u57fa\u672c\u304b\u3089\u4e01\u5be7\u306b\u8aac\u660e\u3055\u308c\u3066\u3044\u308b\u672c&#8221; &#8212; nobu blog\" src=\"https:\/\/nobunobu1717.site\/?p=1953&#038;embed=true#?secret=FIb3hN1SBk#?secret=KYjUvAtKtM\" data-secret=\"KYjUvAtKtM\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"8AO8OkKXhp\"><p><a href=\"https:\/\/nobunobu1717.site\/?p=1827\">\u3010\u611f\u60f3\u3011Python\u306b\u3088\u308bWeb\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0(\u7b2c2\u7248)\u306f\u5e45\u5e83\u304f\u30b9\u30af\u30ec\u30d4\u30f3\u30b0\u6280\u8853\u3092\u30ab\u30d0\u30fc\u3057\u305f\u6280\u8853\u66f8<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u3010\u611f\u60f3\u3011Python\u306b\u3088\u308bWeb\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0(\u7b2c2\u7248)\u306f\u5e45\u5e83\u304f\u30b9\u30af\u30ec\u30d4\u30f3\u30b0\u6280\u8853\u3092\u30ab\u30d0\u30fc\u3057\u305f\u6280\u8853\u66f8&#8221; &#8212; nobu blog\" src=\"https:\/\/nobunobu1717.site\/?p=1827&#038;embed=true#?secret=XuMt94fqF7#?secret=8AO8OkKXhp\" data-secret=\"8AO8OkKXhp\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"UvLegztll4\"><p><a href=\"https:\/\/nobunobu1717.site\/?p=1808\">\u30cf\u30f3\u30ba\u30aa\u30f3Node.js\u611f\u60f3\u3001\u5165\u9580\u8005\u3082\u4e2d\u7d1a\u8005\u3082\u8aad\u3080\u3079\u304d\u672c<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;\u30cf\u30f3\u30ba\u30aa\u30f3Node.js\u611f\u60f3\u3001\u5165\u9580\u8005\u3082\u4e2d\u7d1a\u8005\u3082\u8aad\u3080\u3079\u304d\u672c&#8221; &#8212; nobu blog\" src=\"https:\/\/nobunobu1717.site\/?p=1808&#038;embed=true#?secret=WVJoKhFKhX#?secret=UvLegztll4\" data-secret=\"UvLegztll4\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<h2><span id=\"i-5\">\u8aad\u66f8\u30ce\u30fc\u30c8(\u500b\u4eba\u7684\u306a\u307e\u3068\u3081)<\/span><\/h2>\n<h3>\u7b2c1\u7ae0 React\u306e\u4e16\u754c\u3078\u3088\u3046\u3053\u305d<\/h3>\n<p>\u672c\u66f8\u306e\u306d\u3089\u3044\u306a\u3069\u306e\u6982\u8981\u3001Node.js\u306a\u3069\u306e\u6700\u4f4e\u9650\u306e\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u306b\u95a2\u3057\u3066\u66f8\u304b\u308c\u3066\u3044\u308b\u7ae0\u3067\u3059\u3002<\/p>\n<h3>\u7b2c2\u7ae0 React\u5b66\u7fd2\u306b\u5fc5\u8981\u306aJavascript\u306e\u77e5\u8b58<\/h3>\n<p>React\u3092\u5b66\u7fd2\u3059\u308b\u4e0a\u3067\u5fc5\u8981\u3068\u306a\u308b\u3001Javascript\u306e\u6587\u6cd5\u306b\u95a2\u3059\u308b\u6700\u4f4e\u9650\u306e\u69cb\u6587\u3084\u77e5\u8b58\u3092\u307e\u3068\u3081\u3066\u3042\u308b\u7ae0\u3067\u3059\u3002<br \/>\n\u4e3b\u306bES2015\u4ee5\u964d\u306e\u4e3b\u8981\u306a\u6a5f\u80fd\u306b\u95a2\u3057\u3066\u8aac\u660e\u304c\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u6700\u8fd1\u306eJS\u306b\u6163\u308c\u3066\u3044\u308b\u4eba\u306a\u3089\u3070\u3055\u3063\u3068\u6d41\u3057\u8aad\u307f\u3067\u5341\u5206\u306a\u5185\u5bb9\u3067\u3059\u3002<br \/>\n\u9006\u306b\u672c\u5f53\u306b\u5fc5\u8981\u6700\u4f4e\u9650\u306a\u306e\u3067\u3001JS\u304c\u521d\u3081\u3066\u3068\u3044\u3046\u4eba\u306f\u3001\u5225\u9014JS\u306e\u5165\u9580\u66f8\u8aad\u3093\u3060\u65b9\u304c\u826f\u3044\u304b\u3082\u3002<\/p>\n<h3>\u7b2c3\u7ae0 Javascript\u306b\u304a\u3051\u308b\u95a2\u6570\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0<\/h3>\n<p>React\u306f\u95a2\u6570\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u5f71\u97ff\u3092\u53d7\u3051\u3066\u3044\u308b\u3068\u3044\u3046\u4e8b\u3067\u3001JS\u306b\u304a\u3051\u308b\u95a2\u6570\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u6982\u5ff5\u3084\u6587\u6cd5\u304c\u8aac\u660e\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306a\u3069\u3082\u8c4a\u5bcc\u3067\u308f\u304b\u308a\u3084\u3059\u3044\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u3053\u306e\u6642\u70b9\u3067\u306fReact\u3068\u306e\u95a2\u9023\u6027\u3082\u3042\u307e\u308a\u308f\u304b\u308a\u307e\u305b\u3093\u3057\u3001\u306a\u3093\u3068\u306a\u304f\u3053\u3046\u3044\u3046\u3082\u306e\u304b\u3001\u3068\u3044\u3046\u96f0\u56f2\u6c17\u3092\u63b4\u3080\u3060\u3051\u3067\u3082\u826f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u95a2\u6570\u578b\u3068\u306f\uff1f\n<ul>\n<li>\u95a2\u6570\u3092\u7b2c\u4e00\u7d1a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u3057\u3066\u6271\u3048\u308b\u3082\u306e\u3002(\u95a2\u6570\u3092\u5909\u6570\u3001\u5f15\u6570\u3084\u623b\u308a\u5024\u3068\u3057\u3066\u6271\u3048\u308b\u3002\u9ad8\u968e\u95a2\u6570\u3068\u3082\u8a00\u3046\u3002)<\/li>\n<li>JS\u306f\u3053\u308c\u3089\u3092\u6e80\u305f\u3059\u306e\u3067\u95a2\u6570\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u3068\u8a00\u3048\u308b<\/li>\n<\/ul>\n<\/li>\n<li>\u547d\u4ee4\u578b vs \u5ba3\u8a00\u578b\n<ul>\n<li>\u95a2\u6570\u578b\u306f\u5ba3\u8a00\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u4e00\u90e8<\/li>\n<li>\u547d\u4ee4\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306f\u624b\u7d9a\u304d(how)\u3092\u8a18\u8f09<\/li>\n<li>\u5ba3\u8a00\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306f\u4f55\u3092\u3059\u308b\u306e\u304b(what)\u3092\u8a18\u8f09<\/li>\n<li>\u62bd\u8c61\u5316\u3055\u308c\u305f\u300c\u4f55\u3092\u3059\u308b\u306e\u304b\u300d\u304c\u66f8\u304b\u308c\u305f\u95a2\u6570\u3092\u7e4b\u304e\u5408\u308f\u305b\u3066\u51e6\u7406\u3092\u4f5c\u3063\u3066\u3044\u304f\u306e\u3067\u3001\u4f55\u3092\u3057\u305f\u3044\u306e\u304b\u304c\u308f\u304b\u308a\u3084\u3059\u3044<\/li>\n<\/ul>\n<\/li>\n<li>\u95a2\u6570\u578b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u57fa\u672c\u6982\u5ff5\n<ul>\n<li>\u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\n<ul>\n<li>\u5168\u3066\u306e\u30c7\u30fc\u30bf\u306f\u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb(\u4e0d\u5909)\u3067\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3002(\u5f15\u6570\u306e\u5024\u3092\u5909\u3048\u305f\u308a\u3057\u3066\u306f\u3044\u3051\u306a\u3044)<\/li>\n<li>\u53c2\u7167\u578b\u3067\u3042\u308c\u3070\u3001\u30c7\u30fc\u30bf\u306e\u30b3\u30d4\u30fc\u3092\u4f5c\u3063\u305f\u4e0a\u3067\u5909\u66f4\u3092\u52a0\u3048\u308b<\/li>\n<\/ul>\n<\/li>\n<li>\u7d14\u7c8b\u95a2\u6570\n<ul>\n<li>\u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\u306a\u5f15\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u5024\u3092\u8fd4\u3059\u95a2\u6570<\/li>\n<li>\u95a2\u6570\u306e\u5916\u306e\u30b9\u30b3\u30fc\u30d7\u3068\u306f\u72ec\u7acb(\u95a2\u6570\u5916\u306e\u5024\u306e\u5f71\u97ff\u306f\u53d7\u3051\u306a\u3044\u3001\u4e0e\u3048\u306a\u3044\u3002)<\/li>\n<li>\u5916\u90e8\u304b\u3089\u306e\u5f71\u97ff\u304c\u7121\u3044\u306e\u3067\u30c6\u30b9\u30c8\u304c\u3057\u3084\u3059\u3044<\/li>\n<li>React\u306eUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u7d14\u7c8b\u95a2\u6570\u3067\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308b<\/li>\n<\/ul>\n<\/li>\n<li>\u95a2\u6570\u306e\u5408\u6210\n<ul>\n<li>\u72ec\u7acb\u3057\u305f\u95a2\u6570\u3092\u675f\u306d\u3066\u30a2\u30d7\u30ea\u3068\u3057\u3066\u306e\u6a5f\u80fd\u3092\u4f5c\u308a\u51fa\u3059\u3053\u3068<\/li>\n<li>\u9023\u9396\uff1a\u30e1\u30bd\u30c3\u30c9\u3092.\u3067\u7e4b\u3044\u3067\u6b21\u3005\u306b\u547c\u3073\u51fa\u3057\u3066\u3044\u304f<\/li>\n<li>\u9023\u9396\u306f\u547c\u3073\u51fa\u3057\u304c\u591a\u6570\u3042\u308b\u3068\u8aad\u307f\u306b\u304f\u3044\u3002\u305d\u306e\u5834\u5408\u3001\u9ad8\u968e\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u95a2\u6570\u540c\u58eb\u3092\u5408\u6210\u3059\u308b\u3068\u308f\u304b\u308a\u3084\u3059\u304f\u306a\u308b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\t<p style=\"color:#666;margin-bottom:5px;\">\u30b9\u30dd\u30f3\u30b5\u30fc\u30ea\u30f3\u30af<\/p>\n\t<div class=\"middle-ad\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n<h3>\u7b2c4\u7ae0 React\u306e\u57fa\u672c<\/h3>\n<p>\u9577\u3044\u524d\u7f6e\u304d\u3092\u7d4c\u3066\u3044\u3088\u3044\u3088React\u306e\u8aac\u660e\u306b\u5165\u308a\u307e\u3059\u3002<br \/>\nReact\u306eAPI\u3092\u4f7f\u3063\u3066HTML\u306eDOM\u8981\u7d20\u3092\u3069\u306e\u3088\u3046\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u306e\u304b\uff1f\u3068\u3044\u3063\u305f\u4e8b\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3057\u3066\u66f8\u304b\u304b\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u3053\u308c\u3089\u306eAPI\u3092\u4f7f\u3063\u3066\u3001\u5b9f\u969b\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u308b\u3068\u3044\u3063\u305f\u4e8b\u307e\u3067\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n<p>\u3044\u304d\u306a\u308aJSX\u306a\u3069\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u69cb\u6587\u304b\u3089\u5165\u3063\u3066\u3057\u307e\u3044\u304c\u3061\u306a\u6240\u3092\u3001\u5148\u306b\u3057\u3063\u304b\u308a\u3068\u30d9\u30fc\u30b9\u3068\u306a\u308b\u6982\u5ff5\u3092\u7406\u89e3\u3059\u308b\u4e8b\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u3042\u3066\u3066\u3044\u307e\u3059\u3002<\/p>\n<h3>\u7b2c5\u7ae0 React\u3068JSX<\/h3>\n<p>React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u88c5\u65b9\u6cd5\u3068\u3057\u3066\u5fc5\u8981\u3068\u306a\u308bJSX(JS\u3068HTML\u3092\u30df\u30c3\u30af\u30b9\u3057\u305f\u8a18\u6cd5)\u306b\u95a2\u3057\u3066\u306e\u8aac\u660e\u304c\u3055\u308c\u3066\u3044\u308b\u7ae0\u3067\u3059\u3002<br \/>\nVue.js\u3084Angular\u3060\u3068\u753b\u9762\u306f\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u3057\u3066\u57fa\u672c\u7684\u306bHTML\u3068JS\u306f\u5206\u96e2\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001React\u306fJS\u306e\u4e2d\u306b\u8a18\u8f09\u3057\u3066\u3044\u304f\u65b9\u6cd5\u3068\u306a\u308b\u306e\u3067\u3061\u3087\u3063\u3068\u7656\u304c\u3042\u308b\u90e8\u5206\u3067\u3059\u3002<\/p>\n<p>JSX\u3092\u307e\u3068\u3081\u305f\u308a\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u3068\u3057\u3066\u3001Babel\u3084webpack\u3068\u3044\u3063\u305f\u30c4\u30fc\u30eb\u306e\u8aac\u660e\u3068\u5b9f\u969b\u306e\u64cd\u4f5c\u3082\u8aac\u660e\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\nCRA\u3067\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u304b\u3089\u4f5c\u308b\u3068\u3053\u306e\u3042\u305f\u308a\u306e\u8a2d\u5b9a\u304c\u4f5c\u3089\u308c\u3066\u610f\u8b58\u3057\u306a\u304f\u3066\u3082\u3044\u3044\u611f\u3058\u3067\u52d5\u3044\u3067\u304f\u308c\u308b\u306e\u3067\u3059\u304c\u3001\u6562\u3048\u3066\u4f7f\u308f\u305a\u306b\u81ea\u5206\u3067\u8a2d\u5b9a\u3092\u884c\u306a\u3063\u3066\u4ed5\u7d44\u307f\u3092\u8aac\u660e\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u52c9\u5f37\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li>4\u7ae0\u3067\u4f7f\u7528\u3057\u305fcreateElement\u306b\u3088\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4f5c\u6210\u306f\u5b9f\u969b\u306b\u306f\u6b86\u3069\u884c\u308f\u306a\u3044\u3002JSX\u306b\u3088\u308b\u8a18\u8f09\u304c\u4e00\u822c\u7684<\/li>\n<li>JSX\u3068\u306f\n<ul>\n<li>JS\u3068XML(HTML)\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u8a00\u8a9e\u62e1\u5f35(React\u306e\u305f\u3081\u306b\u4f5c\u3089\u308c\u305f)<\/li>\n<li>\u72ec\u81ea\u5b9a\u7fa9\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092HTML\u30bf\u30b0\u306e\u3088\u3046\u306b\u4f7f\u7528\u3067\u304d\u308b<\/li>\n<li>\u30bf\u30b0\u5185\u306e\u5c5e\u6027\u306e\u8a18\u8f09\u306f\u6ce8\u610f\u304c\u5fc5\u8981(class\u306fJS\u4e88\u7d04\u8a9e\u306a\u306e\u3067\u3001className\u3068\u66f8\u304f\u3002)<\/li>\n<li>{}\u3067\u56f2\u3080\u4e8b\u3067JS\u306e\u30b3\u30fc\u30c9\u304c\u8a18\u8f09\u53ef\u80fd<\/li>\n<li>\u30d6\u30e9\u30a6\u30b6\u3067\u76f4\u63a5\u5b9f\u884c\u306f\u3067\u304d\u306a\u3044\u3002JS\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u308b\u5fc5\u8981\u304c\u3042\u308b(=&gt; Babel\u306b\u3088\u308b\u30b3\u30f3\u30d1\u30a4\u30eb)<\/li>\n<\/ul>\n<\/li>\n<li>Babel\n<ul>\n<li>JS\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u3002<\/li>\n<li>\u5143\u3005\u306fJS\u306e\u65b0\u6a5f\u80fd\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u306a\u3044\u30d6\u30e9\u30a6\u30b6\u3067\u3082\u52d5\u304f\u3088\u3046\u306b\u3001\u65b0\u3057\u3044JS\u69cb\u6587\u3092\u53e4\u3044JS\u69cb\u6587\u306b\u5909\u63db\u3059\u308b\u305f\u3081\u306e\u30c4\u30fc\u30eb\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210\u65b9\u6cd5\n<ul>\n<li>function \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d () {}\u3068\u3044\u3063\u305f\u5f62\u3067\u95a2\u6570\u3068\u3057\u3066\u5b9a\u7fa9\u3059\u308b\u3002(\u3053\u308c\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308c\u3070\u305d\u306e\u307e\u307e\u30bf\u30b0\u3068\u3057\u3066\u4f7f\u3048\u308b)<\/li>\n<li>function XXX(props) { props.aaa }\u3082\u3057\u304f\u306f\u3067fuction XXX({aaa,bbb,ccc})\u3068\u3044\u3063\u305f\u5f62\u3067\u8a18\u8f09\u3059\u308b\u4e8b\u3067\u30bf\u30b0\u3067\u8a18\u8f09\u3055\u308c\u305f\u60c5\u5831\u3092\u53d6\u5f97\u3067\u304d\u308b\u3002<\/li>\n<li>\u30eb\u30fc\u30c8\u306e\u30bf\u30b0\u306f1\u3064\u306b\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u3002\u56de\u907f\u3059\u308b\u305f\u3081\u306b&lt;&gt;&lt;\/&gt;\u3068\u3044\u3063\u305f\u7c21\u7565\u8a18\u6cd5\u3067\u30c0\u30df\u30fc\u3092\u8a18\u8f09\u53ef\u80fd\u3002<\/li>\n<\/ul>\n<\/li>\n<li>webpack\n<ul>\n<li>\u30e2\u30b8\u30e5\u30fc\u30eb\u30d0\u30f3\u30c9\u30e9\u3002(JS\u3084CSS\u306a\u3069\u4e00\u5f0f\u3092\u5168\u3066\u5358\u4e00\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u7d50\u5408\u3059\u308b)<\/li>\n<li>React\u3067\u3082\u500b\u3005\u306eJSX\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u7d50\u5408\u3057\u3066\uff11\u3064\u306eJS\u306b\u307e\u3068\u3081\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u3066\u3044\u308b\uff08CRA\u3067\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u304b\u3089\u4f5c\u308b\u3068\u81ea\u52d5\u3067\u8a2d\u5b9a\u304c\u884c\u308f\u308c\u3066\u3044\u308b\uff09<\/li>\n<li>\u30b3\u30fc\u30c9\u5206\u5272\uff1b\u30b3\u30fc\u30c9\u3092\u6a5f\u80fd\u3054\u3068\u306b\u5206\u5272\u3057\u3066\u7ba1\u7406\u3067\u304d\u308b\u306e\u3001\u30c1\u30fc\u30e0\u3067\u306e\u958b\u767a\u3084\u7ba1\u7406\u3092\u5bb9\u6613\u306b\u3059\u308b<\/li>\n<li>\u30df\u30cb\u30d5\u30a1\u30a4\uff1a\u4f59\u767d\u524a\u9664\u3084\u5909\u6570\u306e\u7c21\u6613\u5316\u306a\u3069\u3067\u30b3\u30fc\u30c9\u30b5\u30a4\u30ba\u3092\u5c0f\u3055\u304f\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\t<p style=\"color:#666;margin-bottom:5px;\">\u30b9\u30dd\u30f3\u30b5\u30fc\u30ea\u30f3\u30af<\/p>\n\t<div class=\"middle-ad\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n<h3>\u7b2c6\u7ae0 \u30b9\u30c6\u30fc\u30c8\u7ba1\u7406<\/h3>\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u52d5\u7684\u306b\u5909\u66f4\u3059\u308b\u3053\u3068\u3067\u3001\u63cf\u753b\u5f8c\u306b\u3082\u8868\u793a\u3092\u5909\u66f4\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u65b9\u6cd5\u3092\u8aac\u660e\u3057\u3066\u3044\u308b\u7ae0\u3067\u3059\u3002<br \/>\n\uff08\u4e3b\u306a\u7528\u9014\u3068\u3057\u3066\u306f\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3084\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u5165\u529b\u306a\u3069\u306b\u3088\u308b\u30e6\u30fc\u30b6\u3068\u306e\u5bfe\u8a71\u7684\u306a\u64cd\u4f5c\u3078\u306e\u5bfe\u5fdc\u3002\uff09<br \/>\n\u3053\u306e\u8fba\u306e\u8003\u3048\u65b9\u304cVue\u3084Angular\u3068\u5c11\u3057\u9055\u3046\u306e\u3067\u6700\u521d\u306f\u6238\u60d1\u3044\u307e\u3057\u305f\u304c\u3001\u6163\u308c\u308b\u3068\u5f71\u97ff\u306e\u7bc4\u56f2\u304c\u6975\u5c0f\u5316\u3055\u308c\u308b\u65b9\u6cd5\u3068\u306a\u308b\u306e\u3067\u8151\u306b\u843d\u3061\u307e\u3057\u305f\u3002<br \/>\n\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u3084\u3001\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3068\u3044\u3063\u305f\u65b0\u3057\u3044\u6982\u5ff5\u304c\u51fa\u3066\u304f\u308b\u4e0a\u306b\u3001\u305d\u308c\u3089\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u308a\u3082\u3059\u308b\u305f\u3081\u3001\u521d\u898b\u3060\u3068\u308f\u304b\u308a\u306b\u304f\u3044\u306e\u3067\u3001\u5b9f\u969b\u306b\u30b3\u30fc\u30c9\u3092\u66f8\u3044\u305f\u308a\u3057\u3066\u307f\u308b\u3053\u3068\u3092\u30aa\u30b9\u30b9\u30e1\u3057\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u30b9\u30c6\u30fc\u30c8\u3068\u306f\uff1f\n<ul>\n<li>\u63cf\u753b\u5f8c\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8868\u793a\u3092\u518d\u5ea6\u5909\u66f4\u3059\u308b\u305f\u3081\u306e\u5024<\/li>\n<li>useState\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u5024\u3068Setter\u3092\u5b9a\u7fa9\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n<li>\u89aa\u5b50\u95a2\u4fc2\u306e\u3042\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u304a\u3051\u308b\u30b9\u30c6\u30fc\u30c8\n<ul>\n<li>\u89aa\u304c\u30b9\u30c6\u30fc\u30c8\u3092\u6301\u3061\u3001\u5b50\u306b\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u3057\u3066\u30b9\u30c6\u30fc\u30c8\u5024\u3092\u6e21\u3059\u3002<\/li>\n<li>\u5b50\u306b\u306f\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u3057\u3066\u95a2\u6570(\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u7684\u306a\u3082\u306e)\u3092\u4f5c\u3063\u3066\u304a\u304d\u3001\u66f4\u65b0\u304c\u5fc5\u8981\u306a\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u89aa\u306b\u901a\u77e5\u3092\u3042\u3052\u308b<\/li>\n<li>\u89aa\u306f\u901a\u77e5\u306b\u5fdc\u3058\u3066\u30b9\u30c6\u30fc\u30c8\u3092\u5909\u66f4\u3059\u308b\u3002\u2192\u5b50\u306b\u3082\u901a\u77e5\u3055\u308c\u3066\u8868\u793a\u304c\u5909\u66f4\u3055\u308c\u308b\u3002<\/li>\n<\/ul>\n<\/li>\n<li>\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\n<ul>\n<li>useState\u306a\u3069\u306e\u30d5\u30c3\u30af\u3092\u30e9\u30c3\u30d7\u3057\u3066\u5171\u901a\u5316\u3084\u62bd\u8c61\u5316\u3057\u305f\u3082\u306e<\/li>\n<\/ul>\n<\/li>\n<li>React\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\n<ul>\n<li>\u30b9\u30c6\u30fc\u30c8\u306f\u4fbf\u5229\u3060\u304c\u3001\u89aa\u5b50\u95a2\u4fc2\u304c\u6df1\u304f\u306a\u308b\u3068\u5197\u9577\u306b\u306a\u308b(\u89aa\u304b\u3089\u5b50\u3078\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u30a4\u30d9\u30f3\u30c8\u3067\u6570\u73e0\u7e4b\u304e\u306b\u306a\u308b)<\/li>\n<li>\u89aa\u5b50\u3067\u306e\u4f1d\u64ad\u3092\u306a\u304f\u3057\u3066\u3001\u30b9\u30c6\u30fc\u30c8\u30921\u7b87\u6240\u3067\u7ba1\u7406\u3059\u308b\u65b9\u6cd5\u3092\u63d0\u4f9b\u3059\u308b\u306e\u304cReact\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8<\/li>\n<li>createContext\u3067\u4f5c\u3063\u305f\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092Provider\u3068\u3057\u3066\u5024\u3092\u516c\u958b\u3002Provider\u3067\u56f2\u307e\u308c\u305f\u30b9\u30b3\u30fc\u30d7\u306e\u307f\u30a2\u30af\u30bb\u30b9\u53ef\u80fd\u306b\u306a\u308b<\/li>\n<li>\u30c7\u30fc\u30bf\u306e\u5909\u66f4\u306e\u4ed5\u7d44\u307f\u306f\u30b9\u30c6\u30fc\u30c8\u3068\u306e\u4f75\u7528\u304c\u5fc5\u8981(\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u5185\u306buseState\u3067\u30b9\u30c6\u30fc\u30c8\u3092\u516c\u958b\u3057\u3001settter\u3092\u516c\u958b\u3059\u308b\u3002)<\/li>\n<li>setter\u3092\u516c\u958b\u3059\u308b\u3068\u4f55\u3067\u3082\u3067\u304d\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u30e9\u30c3\u30d7\u3057\u305f\u95a2\u6570(add\u3084remove\u306a\u3069)\u3092\u4f5c\u6210\u3057\u3066\u516c\u958b\u3059\u308b\u65b9\u6cd5\u3082\u3042\u308b<\/li>\n<li>\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u96a0\u853d\u3059\u308b\u3053\u3068\u3067\u3001\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u610f\u8b58\u305b\u305a\u306b\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>\u7b2c7\u7ae0 \u30d5\u30c3\u30af<\/h3>\n<p>\u7ae0\u3067\u4f55\u7a2e\u985e\u304b\u306e\u30d5\u30c3\u30af\u3092\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u672c\u6027\u3067\u306f\u305d\u308c\u4ee5\u5916\u306e\u65b0\u3057\u3044\u30d5\u30c3\u30af\u306b\u95a2\u3057\u3066\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\nuseMemo\u3084useCallback\u306e\u3042\u305f\u308a\u306e\u8a71\u306f\u3001\u672c\u66f8\u3060\u3051\u3060\u3068\u6b63\u76f4\u308f\u304b\u308a\u3065\u3089\u304b\u3063\u305f\u3067\u3059\u3002<br \/>\n\u4e0b\u8a18\u306e\u8aac\u660e\u3092\u8aad\u3080\u3068\u308f\u304b\u308a\u3084\u3059\u304f\u3066\u826f\u3044\u304b\u3082\u3002<br \/>\nhttps:\/\/www.to-r.net\/media\/react-tutorial-hooks-usememo-usecallback\/<\/p>\n<ul>\n<li>useEffect\u30d5\u30c3\u30af\n<ul>\n<li>\u63cf\u753b\u5b8c\u4e86\u5f8c\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u3002\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30e1\u30bd\u30c3\u30c9\u7684\u306b\u4f7f\u7528\u53ef\u80fd\u3002(\u63cf\u753b\u5b8c\u4e86\u5f8c\u306b\u91cd\u305f\u3044\u51e6\u7406\u3084\u540c\u671f\u30c0\u30a4\u30a2\u30ed\u30b0(alert)\u306e\u547c\u3073\u51fa\u3057\u3092\u884c\u3044\u305f\u3044\u6642\u3002)<\/li>\n<li>\u63cf\u753b\u51e6\u7406\u3068\u76f4\u63a5\u95a2\u4fc2\u306a\u3044\u51e6\u7406(\u526f\u4f5c\u7528)\u3092\u8a18\u8ff0\u3059\u308b\u3002<\/li>\n<li>\u5f15\u6570\u306e\u4f9d\u5b58\u914d\u5217\u306b\u76e3\u8996\u3057\u305f\u3044\u30b9\u30c6\u30fc\u30c8\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u7279\u5b9a\u306e\u5024\u304c\u5909\u308f\u3063\u305f\u6642\u306e\u307f\u547c\u3073\u51fa\u3059\u3068\u3044\u3063\u305f\u4f7f\u7528\u65b9\u6cd5\u304c\u53ef\u80fd\u3002<\/li>\n<li>\u623b\u308a\u5024\u306b\u95a2\u6570\u3092\u8fd4\u3059\u3068\u3001\u305d\u306e\u51e6\u7406\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30a2\u30f3\u30de\u30a6\u30f3\u30c8\u6642\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u3002(\u30a2\u30f3\u30ed\u30fc\u30c9\u51e6\u7406\u3068\u3057\u3066\u4f7f\u7528\u3067\u304d\u308b\u3002)<\/li>\n<\/ul>\n<\/li>\n<li>useMemo\u30d5\u30c3\u30af\n<ul>\n<li>useEffect\u306b\u6e21\u3059\u9023\u60f3\u914d\u5217\u306b\u30d7\u30ea\u30df\u30c6\u30a3\u30d6\u578b\u4ee5\u5916\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u63cf\u753b\u5b9f\u884c\u6642\u306b\u6bce\u56de\u5b9f\u884c\u3055\u308c\u3066\u3057\u307e\u3046\u3002(\u540c\u4e00\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304b\u3069\u3046\u304b\u306e\u30c1\u30a7\u30c3\u30af\u304c\u5224\u65ad\u57fa\u6e96\u306e\u305f\u3081)<\/li>\n<li>\u5024\u3068\u3057\u3066\u306f\u540c\u3058\u306a\u306e\u306b\u6bce\u56de\u51e6\u7406\u304c\u5b9f\u884c\u3055\u308c\u3066\u3057\u307e\u3044\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u52a3\u5316\u3057\u3066\u3057\u307e\u3046\u306e\u3092\u9632\u6b62\u3059\u308b\u305f\u3081\u306b\u30e1\u30e2\u5316\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n<li>useCallback\u30d5\u30c3\u30af\n<ul>\n<li>useMemo\u306e\u95a2\u6570\u7248\u3002onChange\u306a\u3069\u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306a\u3069\u3092\u3053\u308c\u3067\u6307\u5b9a\u3059\u308b\u3068\u547c\u3073\u51fa\u3057\u3092\u6291\u5236\u3067\u304d\u308b\u3002<\/li>\n<\/ul>\n<\/li>\n<li>useReducer\u30d5\u30c3\u30af\n<ul>\n<li>useState\u306b\u4f3c\u305f\u3082\u306e\u3002setter\u306e\u4ee3\u308f\u308a\u306b\u73fe\u5728\u5024\u3092\u4f7f\u7528\u3057\u305f\u4efb\u610f\u306e\u51e6\u7406\u3092\u7d44\u307f\u8fbc\u3081\u308b\u3002(\u73fe\u5728\u5024\u304c\u5f15\u6570\u3067\u623b\u308a\u5024\u306b\u8a2d\u5b9a\u3057\u305f\u3044\u5024\u3002)<\/li>\n<\/ul>\n<\/li>\n<li>\u30e1\u30e2\u5316\u306e\u4f7f\u3044\u6642\n<ul>\n<li>\u30e1\u30e2\u5316\u3092\u4f7f\u7528\u3057\u306a\u304f\u3066\u3082\u3001 \u57fa\u672c\u7684\u306bReact\u5074\u3067\u6700\u9069\u5316\u3057\u3066\u305d\u3053\u307e\u3067\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u306f\u843d\u3061\u306a\u3044<\/li>\n<li>\u30e1\u30e2\u5316\u306e\u4e71\u7528\u306f\u5b9f\u88c5\u30b3\u30b9\u30c8\u306b\u898b\u5408\u308f\u306a\u3044\u306e\u3067\u3001\u5b9f\u969b\u306b\u5b9f\u884c\u3057\u3066\u307f\u3066\u9045\u3044\u3068\u611f\u3058\u305f\u6642\u306b\u4f7f\u7528\u3059\u308b\u306e\u304c\u826f\u3044\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\t<p style=\"color:#666;margin-bottom:5px;\">\u30b9\u30dd\u30f3\u30b5\u30fc\u30ea\u30f3\u30af<\/p>\n\t<div class=\"middle-ad\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n<h3>\u7b2c8\u7ae0 \u30c7\u30fc\u30bf<\/h3>\n<p>SPA\u30a2\u30d7\u30ea\u3067\u306fREST API\u306a\u3069\u3092\u4f7f\u7528\u3057\u3066\u8868\u793a\u306e\u305f\u3081\u306e\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3084\u6c38\u7d9a\u5316\u3092\u884c\u306a\u3063\u305f\u308a\u3057\u307e\u3059\u3002<br \/>\n\u305d\u3046\u3044\u3063\u305f\u5916\u90e8\u306eAPI\u3068\u306eReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u9023\u643a\u65b9\u6cd5\u306b\u95a2\u3057\u3066\u66f8\u304b\u308c\u3066\u3044\u308b\u7ae0\u3067\u3059\u3002<br \/>\nREST API\u3092\u30b3\u30fc\u30eb\u3059\u308b\u305f\u3081\u306eJS\u306e\u6a19\u6e96API\u3067\u3042\u308bfetch\u3092\u4f7f\u7528\u3057\u3066GitHub API\u3092\u547c\u3073\u51fa\u3057\u3001\u305d\u306e\u60c5\u5831\u3092\u8868\u793a\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u88c5\u4f8b\u304c\u7d39\u4ecb\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\nFetchAPI\u3092\u7d44\u307f\u8fbc\u3093\u3060\u3001\u53d6\u5f97\u30c7\u30fc\u30bf\u3001\u30ed\u30fc\u30c9\u72b6\u614b\u3001\u30a8\u30e9\u30fc\u306a\u3069\u3092\u7ba1\u7406\u3059\u308b\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306e\u5b9f\u88c5\u4f8b\u304c\u7d39\u4ecb\u3055\u308c\u3066\u304a\u308a\u3001\u5b9f\u969b\u306b\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u5916\u90e8API\u3068\u306e\u9023\u643a\u3059\u308b\u969b\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u30ec\u30f3\u30c0\u30fc\u30d7\u30ed\u30c3\u30d7\n<ul>\n<li>\u76f4\u63a5\u3001\u63cf\u753b\u8981\u7d20\u3092\u53d7\u3051\u53d6\u308b\u30d7\u30ed\u30d1\u30c6\u30a3(\u30d7\u30ed\u30d1\u30c6\u30a3\u5185\u306b\u76f4\u63a5\u30bf\u30b0\u3092\u66f8\u304f)<\/li>\n<li>\u547c\u3073\u51fa\u3057\u5143\u304c\u4efb\u610f\u306e\u63cf\u753b\u8981\u7d20\u3092\u6307\u5b9a\u3067\u304d\u308b\u306e\u3067\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u518d\u5229\u7528\u6027\u304c\u9ad8\u307e\u308b\u3002<\/li>\n<li>\u4f7f\u7528\u4f8b\uff1a\u30ea\u30b9\u30c8\u8981\u7d20\u3092\u8868\u793a\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u8981\u7d20\u304c\u306a\u3044\u6642\u306e\u8868\u793a\u3092\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u3057\u3066\u4f7f\u7528\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n<li>\u4eee\u60f3\u30ea\u30b9\u30c8\n<ul>\n<li>\u5927\u91cf\u306e\u914d\u5217\u8981\u7d20\u3092\u6301\u3064\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3001\u8868\u793a\u306b\u5fc5\u8981\u306a\u90e8\u5206\u306e\u307f\u63cf\u753b\u3057\u4f7f\u7528\u3059\u308b\u6a5f\u80fd(\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u305f\u3081)<\/li>\n<li>react\u304c\u63d0\u4f9b\u3059\u308b\u3001FizedSizeList\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3002<\/li>\n<li>\u4f7f\u7528\u4f8b\uff1a\u30ea\u30b9\u30c8\u8981\u7d20\u3092\u8868\u793a\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u8981\u7d20\u304c\u306a\u3044\u6642\u306e\u8868\u793a\u3092\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u3057\u3066\u4f7f\u7528\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n<li>useFetch\u30d5\u30c3\u30af\n<ul>\n<li>FetchAPI\u306e\u547c\u3073\u51fa\u3057\u3068\u3001\u5404\u30b9\u30c6\u30fc\u30c8\u3092\u62bd\u8c61\u5316\u3057\u305f\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306e\u5b9f\u88c5\u4f8b<\/li>\n<li>\u30ed\u30fc\u30c9\u72b6\u614b\u3001\u30a8\u30e9\u30fc\u3001\u8aad\u307f\u51fa\u3057\u30c7\u30fc\u30bf\u3092\u63d0\u4f9b\u3057\u3001\u4f7f\u7528\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306fURL\u3068\u3001\u8aad\u307f\u8fbc\u3093\u3060\u30c7\u30fc\u30bf\u306e\u8868\u793a\u3001\u30ed\u30fc\u30c9\u4e2d\u306e\u8868\u793a\u3001\u30a8\u30e9\u30fc\u6642\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u307f\u3092\u8a55\u3059\u308c\u3070\u826f\u304f\u306a\u308b\u3002<\/li>\n<li>\u30ed\u30fc\u30c9\u4e2d\u306e\u30b9\u30d4\u30ca\u30fc\u3084\u6587\u8a00\u306a\u3069\u3092\u5171\u901a\u5316\uff0b\u30ec\u30f3\u30c0\u30fc\u30d7\u30ed\u30c3\u30d7\u306b\u3088\u308b\u518d\u5229\u7528\u5316\u3092\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316\u3082\u53ef\u80fd<\/li>\n<\/ul>\n<\/li>\n<li>\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30ad\u30e3\u30f3\u30bb\u30eb\n<ul>\n<li>API\u30ea\u30af\u30a8\u30b9\u30c8\u4e2d\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30a2\u30f3\u30de\u30a6\u30f3\u30c8\u3055\u308c\u308b\u30b1\u30fc\u30b9\u3067\u306f\u3001\u5fdc\u7b54\u304c\u304d\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b<\/li>\n<li>useEffect\u30d5\u30c3\u30af\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30de\u30a6\u30f3\u30c8\u72b6\u614b\u3092\u4fdd\u6301\u3055\u305b\u308b\u3053\u3068\u3067\u3001\u5fdc\u7b54\u51e6\u7406\u3067\u3053\u306e\u72b6\u614b\u3092\u4f7f\u7528\u3057\u3066\u51e6\u7406\u3092\u30ad\u30e3\u30f3\u30bb\u30eb\u3055\u305b\u308b\u3053\u3068\u304c\u53ef\u80fd<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>\u7b2c9\u7ae0 \u30b5\u30b9\u30da\u30f3\u30b9<\/h3>\n<p>\u672c\u7ae0\u3067\u306f\u3001\u307e\u3060\u5b9f\u9a13\u7684\u306a\u3082\u306e\u3067\u5c06\u6765\u7684\u306b\u5909\u66f4\u304c\u3055\u308c\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u6a5f\u80fd\u306b\u95a2\u3057\u3066\u306e\u8aac\u660e\u304c\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u30bf\u30a4\u30c8\u30eb\u306b\u3082\u3042\u308b\u30b5\u30b9\u30da\u30f3\u30b9\u4ee5\u5916\u306b\u3082\u3001\u30a8\u30e9\u30fc\u30d0\u30a6\u30f3\u30c0\u30ea\u30fc\u3001\u30b3\u30fc\u30c9\u30b9\u30d7\u30ea\u30c3\u30c6\u30a3\u30f3\u30b0\u7b49\u3001\u307e\u3060\u307e\u3060\u5909\u66f4\u306e\u53ef\u80fd\u6027\u304c\u3042\u308b\u3082\u306e\u306e\u30e6\u30fc\u30b6\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306e\u6a5f\u80fd\u304c\u30b3\u30fc\u30c9\u3068\u5171\u306b\u7d39\u4ecb\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u500b\u4eba\u7684\u306b\u306f\u30a8\u30e9\u30fc\u30d0\u30a6\u30f3\u30c0\u30ea\u30fc\u306f\u4f7f\u7528\u3082\u96e3\u3057\u304f\u306a\u304f\u3001\u4fbf\u5229\u3060\u306a\u3041\u3068\u611f\u3058\u307e\u3057\u305f\u3002<\/p>\n<ul>\n<li>\u30a8\u30e9\u30fc\u30d0\u30a6\u30f3\u30c0\u30ea\u30fc\n<ul>\n<li>\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u3066\u3082\u30a2\u30d7\u30ea\u5168\u4f53\u306b\u5f71\u97ff\u304c\u53ca\u3070\u306a\u3044\u3088\u3046\u306b\u3059\u308b\u6a5f\u69cb(\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8)<\/li>\n<li>\u30a8\u30e9\u30fc\u30d0\u30a6\u30f3\u30c0\u30ea\u30fc\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u89aa\u30bf\u30b0\u3068\u3057\u3066\u4f7f\u7528\u3057\u3001\u914d\u4e0b\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u305f\u3089\u30a8\u30e9\u30fc\u30d0\u30a6\u30f3\u30c0\u30ea\u304c\u4ee3\u308f\u308a\u306b\u30a8\u30e9\u30fc\u6587\u8a00\u3092\u8868\u793a\u3059\u308b\u3002<\/li>\n<li>\u73fe\u6642\u70b9\u3067\u306f\u30d5\u30c3\u30af\u306f\u4f7f\u7528\u3067\u304d\u306a\u3044\u3001\u30af\u30e9\u30b9\u6a5f\u69cb\u3092\u4f7f\u3063\u305f\u5b9f\u88c5\u304c\u5fc5\u8981<\/li>\n<\/ul>\n<\/li>\n<li>\u30b3\u30fc\u30c9\u30b9\u30d7\u30ea\u30c3\u30c6\u30a3\u30f3\u30b0\n<ul>\n<li>\u30b3\u30fc\u30c9\u306e\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3092\u5b9f\u73fe\u3059\u308b\u6a5f\u80fd<\/li>\n<li>\u4e00\u5ea6\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8aad\u307f\u8fbc\u307e\u305a\u306b\u3001\u5fc5\u8981\u306a\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u8aad\u307f\u8fbc\u3080\u3053\u3068\u3067UX\u306e\u5411\u4e0a\u3092\u56f3\u308b<\/li>\n<li>React.lazy\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3067\u304d\u308b<\/li>\n<\/ul>\n<\/li>\n<li>Suspense\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n<ul>\n<li>\u30b3\u30fc\u30c9\u30b9\u30d7\u30ea\u30c3\u30c6\u30a3\u30f3\u30b0\u306e\u72b6\u614b\u3092\u7ba1\u7406\u3059\u308b\u6a5f\u80fd<\/li>\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8aad\u307f\u8fbc\u307f\u4e2d\u306e\u63cf\u753b(\u30b9\u30d4\u30ca\u30fc)\u3092\u30ec\u30f3\u30c0\u30fc\u30d7\u30ed\u30c3\u30d7\u3068\u3057\u3066\u4f7f\u7528\u53ef\u80fd<\/li>\n<li>\u30a8\u30e9\u30fc\u30d0\u30a6\u30f3\u30c0\u30ea\u30fc\u3068\u7d44\u307f\u5408\u308f\u305b\u308c\u3070\u8aad\u307f\u8fbc\u307f\u306e\u5931\u6557\u6642\u306e\u5bfe\u5fdc\u3082\u53ef\u80fd\u306b\u306a\u308b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\t<p style=\"color:#666;margin-bottom:5px;\">\u30b9\u30dd\u30f3\u30b5\u30fc\u30ea\u30f3\u30af<\/p>\n\t<div class=\"middle-ad\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n<h3>\u7b2c10\u7ae0 \u30c6\u30b9\u30c8<\/h3>\n<p>\u30bf\u30a4\u30c8\u30eb\u306f\u30c6\u30b9\u30c8\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u3060\u3051\u3067\u306f\u306a\u304f\u30b3\u30fc\u30c9\u89e3\u6790\u3084\u6574\u5f62\u306a\u3069\u54c1\u8cea\u5411\u4e0a\u306b\u3064\u306a\u304c\u308b\u30c4\u30fc\u30eb\u306b\u95a2\u3057\u3066\u8aac\u660e\u3092\u884c\u3063\u3066\u3044\u308b\u7ae0\u3067\u3059\u3002<br \/>\nJest\u3001ESLint\u3084Prettier\u3068\u3044\u3063\u305fJS\u3067\u958b\u767a\u3057\u3066\u3044\u308b\u3068\u6700\u8fd1\u306f\u30c7\u30d5\u30a1\u30af\u30c8\u306a\u30c4\u30fc\u30eb\u7fa4\u3067\u3059\u304c\u3001React\u7528\u306e\u8a2d\u5b9a\u306e\u8a71\u3082\u542b\u307e\u308c\u3066\u3044\u308b\u306e\u3067\u53c2\u8003\u306b\u306a\u308a\u307e\u3057\u305f\u3002<br \/>\nJest\u306b\u3088\u308bUnitTest\u3067\u306fReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8\u65b9\u6cd5\u306b\u95a2\u3057\u3066\u30b3\u30fc\u30c9\u3068\u8aac\u660e\u304c\u3042\u308b\u306e\u3067\u3001\u3069\u3046\u3084\u3063\u3066\u30c6\u30b9\u30c8\u3057\u305f\u3089\u3044\u3044\u306e\u304b\u304c\u30a4\u30e1\u30fc\u30b8\u304c\u6e67\u304d\u307e\u3059\u3002<\/p>\n<ul>\n<li>ESLint\n<ul>\n<li>\u30b3\u30fc\u30c9\u306e\u69cb\u6587\u30c1\u30a7\u30c3\u30af\u30c4\u30fc\u30eb<\/li>\n<li>React Hook\u7528\u306e\u69cb\u6587\u30c1\u30a7\u30c3\u30af\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3082\u3042\u308a<\/li>\n<\/ul>\n<\/li>\n<li>Prettier\n<ul>\n<li>\u30b3\u30fc\u30c9\u306e\u6210\u5f62\u30c4\u30fc\u30eb<\/li>\n<li>ESLint\u3068\u306e\u4f75\u7528\u53ef\u80fd(\u8a2d\u5b9a\u306e\u30b3\u30f3\u30d5\u30ea\u30af\u30c8\u3092\u89e3\u6d88\u3059\u308b\u305f\u3081\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u5fc5\u8981)<\/li>\n<\/ul>\n<\/li>\n<li>ProsTypes\n<ul>\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u578b\u306e\u4f7f\u7528\u65b9\u6cd5\u304c\u6b63\u3057\u3044\u304b\u30c1\u30a7\u30c3\u30af\u3059\u308b(\u8981\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u578b\u5ba3\u8a00)<\/li>\n<li>\u6614\u306fReact\u306f\u6a19\u6e96\u306e\u63a8\u5968\u30c4\u30fc\u30eb\u3060\u3063\u305f\u304c\u4eca\u306f\u72ec\u7acb\u3057\u3066\u30aa\u30d7\u30b7\u30e7\u30f3(\u5f8c\u8ff0\u306e\u65b9\u6cd5\u3084\u30c4\u30fc\u30eb\u304c\u51fa\u3066\u304d\u305f\u305f\u3081)<\/li>\n<\/ul>\n<\/li>\n<li>Flow\n<ul>\n<li>ProsTypes\u3068\u540c\u3058\u304f\u578b\u30c1\u30a7\u30c3\u30af\u3092\u884c\u3046\u30c4\u30fc\u30eb<\/li>\n<li>ProsTypes\u3088\u308a\u53b3\u5bc6\u3067\u73fe\u5728\u306f\u3053\u3061\u3089\u306e\u65b9\u304c\u4e3b\u6d41\u3089\u3057\u3044<\/li>\n<\/ul>\n<\/li>\n<li>Typescript\n<ul>\n<li>JS\u306e\u30b9\u30fc\u30d1\u30fc\u30bb\u30c3\u30c8\u3002\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u3066JS\u306b\u306a\u308b\u3002<\/li>\n<\/ul>\n<\/li>\n<li>Typescript\n<ul>\n<li>JS\u306e\u30b9\u30fc\u30d1\u30fc\u30bb\u30c3\u30c8\u3002\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u3066JS\u306b\u306a\u308b\u3002<\/li>\n<\/ul>\n<\/li>\n<li>Jest\n<ul>\n<li>JS\u306eUnitTest\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af<\/li>\n<li>Reat Testing Library\u3092\u4f7f\u7528\u3059\u308b\u3068\u30a2\u30b5\u30fc\u30b7\u30e7\u30f3\u5931\u6557\u6642\u306e\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u308f\u304b\u308a\u3084\u3059\u304f\u3066\u539f\u56e0\u3092\u898b\u3064\u3051\u3084\u3059\u3044<\/li>\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8\u3068\u3057\u3066\u306f\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u63cf\u753b\u3057\u3066\u60f3\u5b9a\u3055\u308c\u308b\u30bf\u30b0\u8981\u7d20\u3092\u542b\u3080\u304b\u306a\u3069\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b<\/li>\n<li>\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306e\u5b9f\u884c\u306b\u3088\u308b\u30c6\u30b9\u30c8\u3082\u53ef\u80fd<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\t<p style=\"color:#666;margin-bottom:5px;\">\u30b9\u30dd\u30f3\u30b5\u30fc\u30ea\u30f3\u30af<\/p>\n\t<div class=\"middle-ad\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n<h3>\u7b2c11\u7ae0 \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0<\/h3>\n<p>SPA\u306b\u304a\u3044\u3066\u5fc5\u9808\u3068\u306a\u308b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u6a5f\u80fd\u306e\u8aac\u660e\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u30d1\u30ef\u30e1\u30fc\u30bf\u3084\u30cd\u30b9\u30c8\u3057\u305fURL\u306a\u3069\u3001\u5b9a\u756a\u306e\u6a5f\u80fd\u3092\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u3053\u3053\u306f\u3001\u5fc5\u8981\u6700\u4f4e\u9650\u3068\u3044\u3063\u305f\u611f\u3058\u3067\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30ac\u30fc\u30c9\u306a\u3069\u306e\u5b9f\u969b\u306e\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u3067\u5fc5\u8981\u306a\u6a5f\u80fd\u306a\u3069\u304c\u3042\u307e\u308a\u8aac\u660e\u3055\u308c\u3066\u3044\u306a\u3044\u306e\u3067\u5225\u9014\u81ea\u5206\u3067\u8abf\u67fb\u304c\u5fc5\u8981\u3067\u3059\u3002\u3082\u3046\u5c11\u3057\u3053\u3053\u306f\u8aac\u660e\u3092\u539a\u304f\u3057\u3066\u3082\u826f\u304b\u3063\u305f\u306e\u3067\u306f\u30fb\u30fb\u30fb\uff1f<\/p>\n<h3>\u7b2c12\u7ae0 \u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9React<\/h3>\n<p>SPA\u306b\u306f\u3064\u304d\u3082\u306e\u306eSSR(\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0)\u306b\u95a2\u3057\u3066\u8aac\u660e\u3057\u3066\u3044\u308b\u7ae0\u3067\u3059\u3002<br \/>\nSSR\u3092\u5b9f\u73fe\u3059\u308b\u305f\u3081\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u3057\u3066Next.js\u3084Gatsby\u3068\u3044\u3063\u305f\u6709\u540d\u3069\u3053\u308d\u306b\u95a2\u3057\u3066\u3082\u7c21\u5358\u306b\u3067\u3059\u304c\u8aac\u660e\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<div class=\"kattene\">\n    <div class=\"kattene__imgpart\"><a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.amazon.co.jp\/gp\/offer-listing\/4873119383\/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4873119383&amp;linkCode=am2&amp;tag=nobu17171009-22&amp;linkId=99c7b78a3e761d4adc464af1e1ab4ff8\"><img width=\"160\" height=\"160\" loading=\"lazy\" src=\"https:\/\/ws-fe.amazon-adsystem.com\/widgets\/q?_encoding=UTF8&amp;MarketPlace=JP&amp;ASIN=4873119383&amp;ServiceVersion=20070822&amp;ID=AsinImage&amp;WS=1&amp;Format=_SL250_&amp;tag=nobu17171009-22\" class=\"kattene__shadow\" ><\/a><\/div>\n    <div class=\"kattene__infopart\">\n      <div class=\"kattene__title\"><a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.amazon.co.jp\/gp\/offer-listing\/4873119383\/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4873119383&amp;linkCode=am2&amp;tag=nobu17171009-22&amp;linkId=99c7b78a3e761d4adc464af1e1ab4ff8\">React\u30cf\u30f3\u30ba\u30aa\u30f3\u30e9\u30fc\u30cb\u30f3\u30b0 \u7b2c2\u7248 \u2015Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a><\/div>\n      <div class=\"kattene__description\">Facebook\u304c\u958b\u767a\u3057\u305fJavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u300cReact\u300d\u306e\u89e3\u8aac\u66f8\u30022013\u5e74\u306b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u5316\u3055\u308c\u305fReact\u3067\u3059\u304c\u3001\u3053\u3053\u6570\u5e74\u3067\u5927\u304d\u306a\u5909\u66f4\u304c\u52a0\u3048\u3089\u308c\u3001\u307e\u305fReact\u3092\u53d6\u308a\u5dfb\u304f\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3082\u5927\u304d\u304f\u5909\u5316\u3057\u307e\u3057\u305f\u3002\u672c\u66f8\u3067\u306f\u5b9f\u969b\u306b\u52d5\u304f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u308a\u306a\u304c\u3089\u3001\u6700\u65b0\u306eReact\u306e\u8a18\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u3064\u3064\u3001\u6700\u65b0\u306e\u30c4\u30fc\u30eb\u3084\u30e9\u30a4\u30d6\u30e9\u30ea\u3082\u7d39\u4ecb\u3057\u307e\u3059\u3002\u521d\u5fc3\u8005\u304b\u3089\u4e2d\u4e0a\u7d1a\u8005\u307e\u3067\u3001React\u306e\u4eca\u3092\u3059\u3070\u3084\u304f\u5b66\u7fd2\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/div>\n      <div class=\"kattene__btns __one\"><div><a class=\"kattene__btn __orange\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.amazon.co.jp\/gp\/offer-listing\/4873119383\/ref=as_li_tl?ie=UTF8&amp;camp=247&amp;creative=1211&amp;creativeASIN=4873119383&amp;linkCode=am2&amp;tag=nobu17171009-22&amp;linkId=99c7b78a3e761d4adc464af1e1ab4ff8\">Amazon<\/a><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Contents1 \u6982\u89812 \u66f8\u7c4d\u6982\u89813 \u5185\u5bb9\u306e\u307e\u3068\u3081\u3068\u611f\u60f34 \u305d\u306e\u4ed6\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u611f\u60f35 \u8aad\u66f8\u30ce\u30fc\u30c8(\u500b\u4eba\u7684\u306a\u307e\u3068\u3081) \u6982\u8981 \u4eca\u56de\u306f\u30aa\u30e9\u30a4\u30ea\u30fc\u672c\u306e\u300cReact\u30cf\u30f3\u30ba\u30aa\u30f3\u30e9\u30fc\u30cb\u30f3\u30b0 \u7b2c2\u7248 \u300d\u306b\u95a2\u3057\u3066\u306e\u611f &#8230; <\/p>\n","protected":false},"author":1,"featured_media":2260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[13,12],"tags":[],"_links":{"self":[{"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/posts\/2234"}],"collection":[{"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2234"}],"version-history":[{"count":24,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/posts\/2234\/revisions"}],"predecessor-version":[{"id":3080,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/posts\/2234\/revisions\/3080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=\/wp\/v2\/media\/2260"}],"wp:attachment":[{"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nobunobu1717.site\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}