{"id":11081,"date":"2020-04-10T18:39:39","date_gmt":"2020-04-10T09:39:39","guid":{"rendered":"https:\/\/itport.cloud\/?p=11081"},"modified":"2020-06-29T16:59:38","modified_gmt":"2020-06-29T07:59:38","slug":"post-11081","status":"publish","type":"post","link":"https:\/\/itport.cloud\/?p=11081","title":{"rendered":"\uff08\u7b2c4\u56de\uff09\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u3059\u3059\u3081\u3010React\u7de8 \u305d\u306e2\u3011"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"e79baee6aca1-1\">\u76ee\u6b21<\/h2>\n\n\n\n<p><a href=\"#front4_1\">\u4eca\u56de\u306e\u76ee\u6a19<\/a><br><a href=\"#front4_2\">[\u5c0f\u30cd\u30bf]\u9805\u76ee\u540d\u306e\u8868\u793a<\/a><br><a href=\"#front4_3\">\u9805\u76ee\u8ffd\u52a0\u6a5f\u80fd <\/a><br><a href=\"#front4_4\">\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u8ffd\u52a0 <\/a><br><a href=\"#front4_5\">\u30ea\u30bb\u30c3\u30c8\u6a5f\u80fd<\/a><br><a href=\"#front4_6\">\u6b21\u56de\u4e88\u544a<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"front4_1\">\u4eca\u56de\u306e\u76ee\u6a19<\/h2>\n\n\n\n<p class=\"&lt;div class=&quot;linkcard&quot;&gt;&lt;div class=&quot;lkc-internal-wrap&quot;&gt;&lt;a class=&quot;lkc-link no_icon&quot; href=&quot;https:\/\/itport.cloud\/?p=3941&quot;&quot; data-lkc-id=&quot;80&quot;&gt;&lt;div class=&quot;lkc-card&quot;&gt;&lt;div class=&quot;lkc-content&quot;&gt;&lt;figure class=&quot;lkc-thumbnail&quot;&gt;&lt;img class=&quot;lkc-thumbnail-img&quot; src=&quot;\/\/itport.cloud\/wp-content\/uploads\/2019\/03\/alex-block-592982-unsplash-1024x1024.jpg&quot; width=&quot;100px&quot; height=&quot;108px&quot; alt=&quot;&quot; \/&gt;&lt;\/figure&gt;&lt;div class=&quot;lkc-title&quot;&gt;\uff08\u7b2c3\u56de\uff09\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u3059\u3059\u3081\u3010React\u7de8 \u305d\u306e1\u3011&lt;\/div&gt;&lt;div class=&quot;lkc-url&quot; title=&quot;https:\/\/itport.cloud\/?p=3941&quot;&quot;&gt;https:\/\/itport.cloud\/?p=3941&amp;quot;&lt;\/div&gt;&lt;div class=&quot;lkc-excerpt&quot;&gt;\u76ee\u6b21\u306f\u3058\u3081\u306b\u4eca\u56de\u306e\u76ee\u6a19\u30d5\u30a1\u30a4\u30eb\u306e\u524a\u9664\u3068\u8ffd\u52a0\u5b9f\u88c5 \u3000- index\u30d5\u30a1\u30a4\u30eb\u306e\u5909\u66f4\u3000- \u753b\u9762\u3068\u4f5c\u696d\u5185\u5bb9\u306e\u4f5c\u6210 \u3000- \u524a\u9664\u6a5f\u80fd\u306e\u8ffd\u52a0\u6b21\u56de\u4e88\u544a\u306f\u3058\u3081\u306b\u524d\u56de\u306f\u3001\u5b9f\u88c5\u306e\u524d\u6e96\u5099\u3068\u3057\u3066\u958b\u767a\u3092\u30b9\u30e0\u30fc\u30ba\u306b\u884c\u3046\u305f\u3081\u306e\u5404\u7a2e\u8a2d\u5b9a\u3092\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002\u4eca\u56de\u304b\u3089\u306f\u3001\u7b2c1\u56de\u3067\u4f5c\u6210\u3057\u305f\u5404\u96db\u5f62\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u5143\u306b\u5b9f\u969b\u306b\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u9032\u3081\u3066\u3044\u304d\u307e\u3059\u3002\u4eca\u56de\u306e\u76ee\u6a19\u4eca\u56de\u306fReact\u7de8\u3067\u3059\u3002 2\u56de\u306b\u5206\u3051\u3066\u7c21\u5358\u306a\u65e5\u5831\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u307e\u305a\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210\u30fb\u524a\u9664\u3092\u5b9f\u88c5\u3057\u3066\u304d\u307e\u3059\u3002\u4eca\u56de\u306e\u5b8c\u6210\u30a4\u30e1\u30fc\u30b8\u3002\u3068\u3066\u3082\u30b7\u30f3\u30d7\u30eb\u306a\u753b\u9762\u69cb\u6210\u3067\u3059\u3002 \u6700\u521d\u306b\u3001\u7b2c1\u56de\u3067\u6e96\u5099\u3057\u305fReact\u306e\u96db...&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;lkc-info&quot;&gt;&lt;div class=&quot;lkc-favicon&quot;&gt;&lt;img src=&quot;https:\/\/www.google.com\/s2\/favicons?domain=itport.cloud&quot; alt=&quot;&quot; width=&quot;16&quot; height=&quot;16&quot; \/&gt;&lt;\/div&gt;&lt;div class=&quot;lkc-domain&quot;&gt;IT PORT&lt;\/div&gt;&lt;\/div&gt;&lt;div class=&quot;clear&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/a&gt;&lt;\/div&gt;&lt;\/div&gt;\">\u524d\u56de\u306f\u3001\u65e5\u5831\u30a2\u30d7\u30ea\u3092React\u3067\u5b9f\u88c5\u3057\u3001\u9805\u76ee\u306e\u5909\u66f4\u3084\u524a\u9664\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<br>\u4eca\u56de\u306f\u3001\u7b2c3\u56de\u306b\u5f15\u304d\u7d9a\u304d\u9805\u76ee\u306e\u8ffd\u52a0\u306a\u3069\u6a5f\u80fd\u3092\u5897\u3084\u3057\u3066\u7d39\u4ecb\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 <br><br>\u524d\u56de\u306e\u8a18\u4e8b\u306f\u3053\u3061\u3089 \u2193<br><div class=\"linkcard\"><div class=\"lkc-internal-wrap\"><a class=\"lkc-link no_icon\" href=\"https:\/\/itport.cloud\/?p=3941\" data-lkc-id=\"65\"><div class=\"lkc-card\"><div class=\"lkc-content\"><figure class=\"lkc-thumbnail\"><img decoding=\"async\" class=\"lkc-thumbnail-img\" src=\"\/\/itport.cloud\/wp-content\/uploads\/2019\/03\/alex-block-592982-unsplash-1024x1024.jpg\" width=\"100px\" height=\"108px\" alt=\"\" \/><\/figure><div class=\"lkc-title\">\uff08\u7b2c3\u56de\uff09\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u3059\u3059\u3081\u3010React\u7de8 \u305d\u306e1\u3011<\/div><div class=\"lkc-url\" title=\"https:\/\/itport.cloud\/?p=3941\">https:\/\/itport.cloud\/?p=3941<\/div><div class=\"lkc-excerpt\">\u76ee\u6b21\u306f\u3058\u3081\u306b\u4eca\u56de\u306e\u76ee\u6a19\u30d5\u30a1\u30a4\u30eb\u306e\u524a\u9664\u3068\u8ffd\u52a0\u5b9f\u88c5 \u3000- index\u30d5\u30a1\u30a4\u30eb\u306e\u5909\u66f4\u3000- \u753b\u9762\u3068\u4f5c\u696d\u5185\u5bb9\u306e\u4f5c\u6210 \u3000- \u524a\u9664\u6a5f\u80fd\u306e\u8ffd\u52a0\u6b21\u56de\u4e88\u544a\u306f\u3058\u3081\u306b\u524d\u56de\u306f\u3001\u5b9f\u88c5\u306e\u524d\u6e96\u5099\u3068\u3057\u3066\u958b\u767a\u3092\u30b9\u30e0\u30fc\u30ba\u306b\u884c\u3046\u305f\u3081\u306e\u5404\u7a2e\u8a2d\u5b9a\u3092\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002\u4eca\u56de\u304b\u3089\u306f\u3001\u7b2c1\u56de\u3067\u4f5c\u6210\u3057\u305f\u5404\u96db\u5f62\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u5143\u306b\u5b9f\u969b\u306b\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u9032\u3081\u3066\u3044\u304d\u307e\u3059\u3002\u4eca\u56de\u306e\u76ee\u6a19\u4eca\u56de\u306fReact\u7de8\u3067\u3059\u3002 2\u56de\u306b\u5206\u3051\u3066\u7c21\u5358\u306a\u65e5\u5831\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u307e\u305a\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210\u30fb\u524a\u9664\u3092\u5b9f\u88c5\u3057\u3066\u304d\u307e\u3059\u3002\u4eca\u56de\u306e\u5b8c\u6210\u30a4\u30e1\u30fc\u30b8\u3002\u3068\u3066\u3082\u30b7\u30f3\u30d7\u30eb\u306a\u753b\u9762\u69cb\u6210\u3067\u3059\u3002 \u6700\u521d\u306b\u3001\u7b2c1\u56de\u3067\u6e96\u5099\u3057\u305fReact\u306e\u96db...<\/div><\/div><div class=\"lkc-info\"><div class=\"lkc-favicon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.google.com\/s2\/favicons?domain=itport.cloud\" alt=\"\" width=\"16\" height=\"16\" \/><\/div><div class=\"lkc-domain\">IT PORT<\/div><\/div><div class=\"clear\"><\/div><\/div><\/a><\/div><\/div><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"783\" height=\"455\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c4-1.png\" alt=\"\" class=\"wp-image-11133\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c4-1.png 783w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c4-1-300x174.png 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c4-1-768x446.png 768w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c4-1-450x261.png 450w\" sizes=\"auto, (max-width: 783px) 100vw, 783px\" \/><figcaption> \u4eca\u56de\u306e\u5b8c\u6210\u30a4\u30e1\u30fc\u30b8\u3002<br>\u524d\u56de\u3088\u308a\u6a5f\u80fd\u3092\u5897\u3084\u3057\u3066\u3044\u304d\u307e\u3059\u3002 <\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"front4_2\">[\u5c0f\u30cd\u30bf]\u9805\u76ee\u540d\u306e\u8868\u793a <\/h3>\n\n\n\n<p>\u524d\u56de\u307e\u3067\u306e\u5b9f\u88c5\u3067\u304a\u6c17\u3065\u304d\u306e\u65b9\u3082\u3044\u3089\u3063\u3057\u3083\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002 <br>\u300c\u3069\u3053\u306b\u4f55\u3092\u5165\u529b\u3059\u308c\u3070\u3044\u3044\u306e\u304b\u300d\u3068\u3002\u305d\u3046\u3001\u9805\u76ee\u540d\u304c\u306a\u304b\u3063\u305f\u3067\u3059\u3088\u306d\u3002 <br> <br>\u4eca\u56de\u306f\u672a\u5165\u529b\u306e\u5834\u5408\u306b\u3001\u9805\u76ee\u6b04\u306b\u8584\u304f\u8868\u793a\u3059\u308b\u5f62\u306b\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"655\" height=\"354\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/05\/23.\u753b\u9762\u5e45\u8abf\u6574.png\" alt=\"\" class=\"wp-image-5965\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2019\/05\/23.\u753b\u9762\u5e45\u8abf\u6574.png 655w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/05\/23.\u753b\u9762\u5e45\u8abf\u6574-300x162.png 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2019\/05\/23.\u753b\u9762\u5e45\u8abf\u6574-450x243.png 450w\" sizes=\"auto, (max-width: 655px) 100vw, 655px\" \/><figcaption>\u524d\u56de\u307e\u3067\u306e\u8868\u793a\u3002\u3069\u3053\u306b\u4f55\u3092\u5165\u529b\u3059\u308b\u306e\u304b\u5206\u304b\u3089\u306a\u3044\u2026<br><br><\/figcaption><\/figure>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; first-line: 14; highlight: [27,31,34]; title: ; notranslate\" title=\"\">\n    render() {\n        \/\/\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u306e\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30ea\u30b9\u30c8\u7528\n        var projects = this.props.projects.map((elem, i) => {\n            return <option key={i}>{elem}<\/option>\n        });\n        \/\/\u30bf\u30b9\u30af\u306e\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30ea\u30b9\u30c8\u7528\n        var tasks = this.props.tasks.map((elem, i) => {\n            return <option key={i}>{elem}<\/option>\n        });\n        var item = this.props.rows.map((elem, i) => {\n            return (\n                <div key={i} index={i}>\n                    <select>\n                        <option value='' disabled selected>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/option>\n                        {projects}\n                    <\/select>\n                    <select>\n                        <option value='' disabled selected>\u30bf\u30b9\u30af<\/option>\n                        {tasks}\n                    <\/select>\n                    <input type=\"text\" name=\"detail\" placeholder=\"\u5099\u8003\" className=\"adjust_margin\"\/>\n                    <button onClick={this.remove}>\u524a\u9664<\/button>\n                <\/div>)\n        });\n        return (\n            <div>\n                {item}\n            <\/div>\n        );\n    }\n<\/pre><\/div>\n\n\n<p><strong>src\/components\/inputTask.js <\/strong><br><br>\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u306f\u3001placeholder\u5c5e\u6027\u3092\u8ffd\u52a0\u3059\u308b\u3060\u3051\u3067\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059(34\u884c\u76ee)\u3002 <br>\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306e\u6700\u521d\u306e\u4e00\u884c\u76ee\u306b\u8868\u793a\u3059\u308b\u306b\u306f\u5c11\u3057\u5de5\u592b\u304c\u5fc5\u8981\u3067\u3001\u4e0a\u8a18\u306e\u3088\u3046\u306b\u8a18\u8f09\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059(27,31\u884c\u76ee)\u3002 <br><br>\u307e\u305f\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u4e0a\u8a18\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3067\u3001\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u7528\u306e\u9805\u76ee\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3059\u306e\u3067\u3001\u521d\u671f\u9805\u76ee\u306e\u5148\u982d\u306e\u7a7a\u767d\u3092\u306a\u304f\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; first-line: 0; highlight: [7,8]; title: ; notranslate\" title=\"\">\n\/\/ src\/index.js\ufeff\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/App.css';\nimport {DairyReport} from '.\/components\/main';\nimport * as serviceWorker from '.\/serviceWorker';\n\nvar projectList = &#x5B;\"\", \"\u5de5\u7a0b\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\", \"\u52e4\u6020\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\", \"\u4f1a\u8b70\u5171\u6709\u30b7\u30b9\u30c6\u30e0\", \"\u793e\u5185\u30b7\u30b9\u30c6\u30e0\"];\nvar taskList = &#x5B;\"\", \"\u4ed5\u69d8\u66f8\u4f5c\u6210\", \"\u88fd\u9020\", \"\u30c6\u30b9\u30c8\", \"\u6253\u3061\u5408\u308f\u305b\"];\nvar rowList = &#x5B;{index:1},{index:2},{index:3}];\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; first-line: 7; title: ; notranslate\" title=\"\">\nvar projectList = &#x5B;\"\u5de5\u7a0b\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\", \"\u52e4\u6020\u7ba1\u7406\u30b7\u30b9\u30c6\u30e0\", \"\u4f1a\u8b70\u5171\u6709\u30b7\u30b9\u30c6\u30e0\", \"\u793e\u5185\u30b7\u30b9\u30c6\u30e0\"];\nvar taskList = &#x5B;\"\u4ed5\u69d8\u66f8\u4f5c\u6210\", \"\u88fd\u9020\", \"\u30c6\u30b9\u30c8\", \"\u6253\u3061\u5408\u308f\u305b\"];\n<\/pre><\/div>\n\n\n<p><strong>src\/index.js<\/strong><br><br>\u8868\u793a\u304c\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002 <br>inputTask.js\u3067\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u306eoption\u306bdisabled\u5c5e\u6027\u3092\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u4e00\u5ea6\u9805\u76ee\u3092\u9078\u629e\u3059\u308b\u3068\u3001\u201d\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u201d\u3084\u201d\u30bf\u30b9\u30af\u201d\u306f\u9078\u629e\u3067\u304d\u306a\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"709\" height=\"383\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30b3\u30e1\u30f3\u30c8-2020-04-05-130839.jpg\" alt=\"\" class=\"wp-image-11103\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30b3\u30e1\u30f3\u30c8-2020-04-05-130839.jpg 709w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30b3\u30e1\u30f3\u30c8-2020-04-05-130839-300x162.jpg 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30b3\u30e1\u30f3\u30c8-2020-04-05-130839-450x243.jpg 450w\" sizes=\"auto, (max-width: 709px) 100vw, 709px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"front4_3\">\u9805\u76ee\u8ffd\u52a0\u6a5f\u80fd<\/h3>\n\n\n\n<p>\u6b21\u306f\u9805\u76ee\u884c\u306e\u8ffd\u52a0\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3059\u3002 <br><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; first-line: 0; highlight: [8,12,13,14,15,16,34]; title: ; notranslate\" title=\"\">\n\/\/ src\/components\/main.js\nimport React from 'react';\nimport {Task} from '.\/inputTask';\n\nexport class DairyReport extends React.Component {\n    constructor(props) {\n        super();\n        this.state = {rows: props.rows};\n        this.addTask = this.addTask.bind(this);\n        this.removeTask = this.removeTask.bind(this);\n    }\n\n    addTask(){\n        var updatedTasks = this.state.rows;\n        updatedTasks.push({index:\"\"});\n        this.setState({rows: updatedTasks});\n    }\n\n    removeTask(index) {\n        var updatedTasks = this.state.rows;\n        delete updatedTasks&#x5B;index];\n        this.setState({rows: updatedTasks});\n    }\n\n    justSubmitted(event) {\n        \/\/\u30da\u30fc\u30b8\u304c\u30ed\u30fc\u30c9\u3055\u308c\u308b\u306e\u3092\u9632\u3050\n        event.preventDefault();\n    }\n\n    render() {\n        return (\n            <div>\n                <h1 id=\"react-dairyreport-2\">React DairyReport<\/h1>\n                <h2 id=\"e69cace697a5e381aee4bd9ce6a5ad-3\">\u672c\u65e5\u306e\u4f5c\u696d<\/h2>\n                <button onClick={this.addTask} className=\"addButton_margin\">\u884c\u8ffd\u52a0<\/button>\n                <form onSubmit={this.justSubmitted}>\n                    <Task projects={this.props.projects} tasks={this.props.tasks} rows={this.state.rows}\n                    remove={this.removeTask} \/>\n                <\/form>\n            <\/div>\n            );\n    }\n}\n<\/pre><\/div>\n\n\n<p><strong>src\/components\/main.js <\/strong><br><br>main.js\u3078\u306e\u8ffd\u52a0\u306f\u7b2c3\u56de\u306e\u524a\u9664\u6a5f\u80fd\u306e\u8ffd\u52a0\u3068\u540c\u3058\u3088\u3046\u306a\u611f\u3058\u306b\u306a\u308a\u307e\u3059\u3002 <br>34\u884c\u76ee\u3067\u884c\u8ffd\u52a0\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u3001onClick\u30a4\u30d9\u30f3\u30c8\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002 <br>addTask\u30e1\u30bd\u30c3\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304a\u308a\u3001\u884c\u306e\u6700\u5f8c\u306b1\u884c\u8ffd\u52a0\u3059\u308b\u51e6\u7406\u5f8c\u3001\u8ffd\u52a0\u3055\u308c\u305f\u72b6\u614b\u304c\u65b0\u305f\u306a\u4f5c\u696d\u5185\u5bb9\u306estate\u3068\u3057\u3066\u30bb\u30c3\u30c8\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002 <br>\u307e\u305f\u8ffd\u52a0\u30dc\u30bf\u30f3\u306e\u30de\u30fc\u30b8\u30f3\u304c\u6c17\u306b\u306a\u3063\u305f\u306e\u3067\u3001\u30af\u30e9\u30b9\u3092\u8ffd\u52a0\u3057\u3066\u5c11\u3057\u8abf\u6574\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; first-line: 1; highlight: [8,9,10]; title: ; notranslate\" title=\"\">\n\/* \u8981\u7d20\u9593\u306e\u30de\u30fc\u30b8\u30f3\u8abf\u6574 *\/\nselect,\nbutton,\n.adjust_margin {\n  margin-right: 5px;\n  margin-left: 5px; \n}\n.addButton_margin {\n  margin-bottom: 10px;\n}\n<\/pre><\/div>\n\n\n<p><strong>src\/App.css <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"653\" height=\"385\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u8ffd\u52a0\u30dc\u30bf\u30f3\u5f8c-1.png\" alt=\"\" class=\"wp-image-11112\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u8ffd\u52a0\u30dc\u30bf\u30f3\u5f8c-1.png 653w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u8ffd\u52a0\u30dc\u30bf\u30f3\u5f8c-1-300x177.png 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u8ffd\u52a0\u30dc\u30bf\u30f3\u5f8c-1-450x265.png 450w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><figcaption>\u884c\u3092\u8ffd\u52a0\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"front4_4\">\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u8ffd\u52a0<\/h3>\n\n\n\n<p>\u300c\u672c\u65e5\u306e\u4f5c\u696d\u300d\u306e\u90e8\u5206\u3092\u672c\u65e5\u306e\u65e5\u4ed8\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u5909\u66f4\u3057\u307e\u3059\u3002 <br>\u6298\u89d2\u306a\u306e\u3067\u3001\u30ab\u30ec\u30f3\u30c0\u30fc\u3067\u65e5\u4ed8\u3092\u9078\u629e\u3067\u304d\u308b\u3088\u3046\u306b\u3082\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 <br>\u4eca\u56de\u306fReact\u3067Datepicker\u3092\u5b9f\u88c5\u3067\u304d\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u300creact-datepicker\u300d\u3092\u4f7f\u3063\u3066\u307f\u307e\u3059\u3002 <br><br>\u307e\u305a\u306f\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3057\u3087\u3046\u3002\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5165\u529b\u3057\u307e\u3059\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm install react-datepicker --save\n<\/pre><\/div>\n\n\n<p>\u6b21\u306b\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u4f7f\u7528\u3057\u307e\u3057\u3087\u3046\u3002 <br> <br>Datepicker\u7528\u306b\u65b0\u3057\u304f\u4ee5\u4e0b\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<br><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; first-line: 0; highlight: [2,3,4,6,11,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]; title: ; notranslate\" title=\"\">\n\/\/ src\/components\/inputCalendar.js\nimport React from 'react';\nimport DatePicker, { registerLocale }  from 'react-datepicker';\nimport 'react-datepicker\/dist\/react-datepicker.css';\nimport ja from \"date-fns\/locale\/ja\";\n\nregisterLocale(\"ja\", ja);\n\nexport class Calendar extends React.Component {\n\tconstructor(){\n    \tsuper();\n\t\tthis.state = {day: new Date()};\n  \t}\n\n  \trender() {\n    \tconst CustomInput = ({ value, onClick }) => (\n    \t\t<button onClick={onClick}>\n    \t\t\t{value}\n    \t\t<\/button>\n\t\t);\n\t\tconst handleChange = (date) => {\n\t\t\tthis.setState({day: date});\n\t\t}\n    \treturn (\n\t\t\t<DatePicker\n\t\t\t\tlocale=\"ja\"\n\t\t\t\tdateFormat=\"yyyy\u5e74MM\u6708dd\u65e5\"\n\t\t\t\tselected={this.state.day}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tcustomInput={<CustomInput \/>}\n\t\t\t\/>\n        )\n    }\n}\n<\/pre><\/div>\n\n\n<p><strong>src\/components\/inputCalendar.js<\/strong> <br><br>2~4\u884c\u76ee\u3067Datepicker\u95a2\u9023\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059 \u3002<br><br>4, 6, 25\u884c\u76ee\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u65e5\u672c\u8a9e\u5bfe\u5fdc\u306b\u5909\u66f4\u3057\u3066\u3044\u307e\u3059\u3002 <br>\u307e\u305f15\uff5e19\u884c\u76ee\u306829\u884c\u76ee\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u304b\u3089\u30dc\u30bf\u30f3\u306b\u5909\u66f4\u3057\u3066\u3044\u307e\u3059\u3002 <br><br>\u305d\u306e\u4ed6\u3001\u7d30\u304b\u3044\u8a2d\u5b9a\u3082\u3067\u304d\u308b\u3088\u3046\u3067\u3059\u3002\u8a73\u7d30\u306f\u4ee5\u4e0b\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<br><br>[\u53c2\u8003]\u516c\u5f0f\u30da\u30fc\u30b8<br> <br><div class=\"linkcard\"><div class=\"lkc-external-wrap\"><a class=\"lkc-link no_icon\" href=\"https:\/\/reactdatepicker.com\" data-lkc-id=\"66\" target=\"_blank\" rel=\"external noopener\"><div class=\"lkc-card\"><div class=\"lkc-content\"><figure class=\"lkc-thumbnail\"><img decoding=\"async\" class=\"lkc-thumbnail-img\" src=\"https:\/\/s.wordpress.com\/mshots\/v1\/https%3A%2F%2Freactdatepicker.com?w=100\" width=\"100px\" height=\"108px\" alt=\"\" \/><\/figure><div class=\"lkc-title\">React Datepicker crafted by HackerOne<\/div><div class=\"lkc-url\" title=\"https:\/\/reactdatepicker.com\">https:\/\/reactdatepicker.com<\/div><div class=\"lkc-excerpt\">A simple and reusable datepicker component for React.<\/div><div class=\"lkc-more\">more<\/div><\/div><div class=\"lkc-info\"><div class=\"lkc-favicon\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.google.com\/s2\/favicons?domain=reactdatepicker.com\" alt=\"\" width=\"16\" height=\"16\" \/><\/div><div class=\"lkc-domain\">reactdatepicker.com<\/div><div class=\"lkc-share\"> <div class=\"lkc-sns-hb\">9 Users<\/div><\/div><\/div><div class=\"clear\"><\/div><\/div><\/a><\/div><\/div><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; first-line: 0; highlight: [3,34,35,36,37]; title: ; notranslate\" title=\"\">\n\/\/ src\/components\/main.js\nimport React from 'react';\nimport {Task} from '.\/inputTask';\nimport {Calendar} from '.\/inputCalendar';\n\nexport class DairyReport extends React.Component {\n    constructor(props) {\n        super();\n        this.state = {rows: props.rows, data:props.data};\n        this.addTask = this.addTask.bind(this);\n        this.removeTask = this.removeTask.bind(this);\n    }\n\n    addTask(){\n        var updatedTasks = this.state.rows;\n        updatedTasks.push({index:\"\"});\n        this.setState({rows: updatedTasks});\n    }\n\n    removeTask(index) {\n        var updatedTasks = this.state.rows;\n        delete updatedTasks&#x5B;index];\n        this.setState({rows: updatedTasks});\n    }\n\n    justSubmitted(event) {\n        \/\/\u30da\u30fc\u30b8\u304c\u30ed\u30fc\u30c9\u3055\u308c\u308b\u306e\u3092\u9632\u3050\n        event.preventDefault();\n    }\n\n    render() {\n        return (\n            <div>\n                <h1 id=\"react-dairyreport-4\">React DairyReport<\/h1>\n                <div className=\"float_left\">\n                    <Calendar \/>\n                <\/div>\n                <h3 id=\"e381aee4bd9ce6a5ad-5\">\u306e\u4f5c\u696d<\/h3>\n                <button onClick={this.addTask} className=\"addButton_margin\">\u884c\u8ffd\u52a0<\/button>\n                <form onSubmit={this.justSubmitted}>\n                    <Task projects={this.props.projects} tasks={this.props.tasks} rows={this.state.rows}\n                    remove={this.removeTask} \/>\n                <\/form>\n            <\/div>\n        );\n    }\n}\n<\/pre><\/div>\n\n\n<p><strong>src\/components\/main.js<\/strong> <br><br>\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092main.js\u3067\u8a2d\u5b9a\u3057\u307e\u3059 <br>3\u884c\u76ee\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\u3092\u5fd8\u308c\u306a\u3044\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002 <br><br>\u3053\u308c\u3067\u300c\u672c\u65e5\u306e\u4f5c\u696d\u300d\u304b\u3089\u300cyyyy\u5e74mm\u6708dd\u65e5\u306e\u4f5c\u696d\u300d\u3068\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002 <br>\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3053\u3068\u3067\u5225\u306e\u65e5\u4ed8\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002 <br><br>\u307e\u305f\u30dc\u30bf\u30f3\u5468\u308a\u306eCSS\u3092\u8abf\u6574\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; highlight: [11,12,13]; title: ; notranslate\" title=\"\">\n\/* \u8981\u7d20\u9593\u306e\u30de\u30fc\u30b8\u30f3\u8abf\u6574 *\/\nselect,\nbutton,\n.adjust_margin {\n  margin-right: 5px;\n  margin-left: 5px; \n}\n.addButton_margin {\n  margin-bottom: 10px;\n}\n.float_left {\n  float: left;\n}\n<\/pre><\/div>\n\n\n<p><strong>src\/App.css \ufeff<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"285\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c1.png\" alt=\"\" class=\"wp-image-11124\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c1.png 644w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c1-300x133.png 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c1-450x199.png 450w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"637\" height=\"392\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c2.png\" alt=\"\" class=\"wp-image-11125\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c2.png 637w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c2-300x185.png 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c2-250x154.png 250w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c2-500x308.png 500w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c2-450x277.png 450w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><figcaption>\u65e5\u4ed8\u90e8\u5206\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30ab\u30ec\u30f3\u30c0\u30fc\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059<br><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"front4_5\">\u30ea\u30bb\u30c3\u30c8\u6a5f\u80fd<\/h3>\n\n\n\n<p>\u30ab\u30ec\u30f3\u30c0\u30fc\u30dc\u30bf\u30f3\u3067\u65e5\u4ed8\u304c\u5909\u308f\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u306e\u306f\u3044\u3044\u306e\u3067\u3059\u304c\u3001\u4eca\u306e\u307e\u307e\u3067\u306f\u65e5\u4ed8\u304c\u5909\u66f4\u3055\u308c\u3066\u3082\u30ea\u30b9\u30c8\u306f\u305d\u306e\u307e\u307e\u3067\u3059\u3002 <br>\u65e5\u4ed8\u304c\u5909\u66f4\u3055\u308c\u305f\u969b\u306b\u3001\u30ea\u30b9\u30c8\u304c\u521d\u671f\u5316\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; first-line: 0; highlight: [12,15,16,17,27]; title: ; notranslate\" title=\"\">\n\/\/ src\/components\/inputCalendar.js\nimport React from 'react';\nimport DatePicker, { registerLocale }  from 'react-datepicker';\nimport 'react-datepicker\/dist\/react-datepicker.css';\nimport ja from \"date-fns\/locale\/ja\";\n\nregisterLocale(\"ja\", ja);\n\nexport class Calendar extends React.Component {\n\tconstructor(){\n    \tsuper();\n\t\tthis.state = {day: new Date()};\n\t\tthis.reset = this.reset.bind(this);\n  \t}\n\n\treset() {\n\t\tthis.props.reset();\n  \t}\n\n  \trender() {\n    \tconst CustomInput = ({ value, onClick }) => (\n    \t\t<button onClick={onClick}>\n    \t\t\t{value}\n    \t\t<\/button>\n\t\t);\n\t\tconst handleChange = (date) => {\n\t\t\tthis.setState({day: date});\n\t\t\tthis.reset();\n\t\t}\n    \treturn (\n\t\t\t<DatePicker\n\t\t\t\tlocale=\"ja\"\n\t\t\t\tdateFormat=\"yyyy\u5e74MM\u6708dd\u65e5\"\n\t\t\t\tselected={this.state.day}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tcustomInput={<CustomInput \/>}\n\t\t\t\/>\n        )\n    }\n}\n<\/pre><\/div>\n\n\n<p><strong>src\/components\/inputCalendar.js<\/strong> <br><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; first-line: 0; highlight: [12,27,28,29,41]; title: ; notranslate\" title=\"\">\n\/\/ src\/components\/main.js\nimport React from 'react';\nimport {Task} from '.\/inputTask';\nimport {Calendar} from '.\/inputCalendar';\nimport {Report} from '.\/keepReport';\n\nexport class DairyReport extends React.Component {\n    constructor(props) {\n        super();\n        this.state = {rows: props.rows, data:props.data};\n        this.addTask = this.addTask.bind(this);\n        this.removeTask = this.removeTask.bind(this);\n        this.resetTask = this.resetTask.bind(this);\n    }\n\n    addTask(){\n        var updatedTasks = this.state.rows;\n        updatedTasks.push({index:\"\"});\n        this.setState({rows: updatedTasks});\n    }\n\n    removeTask(index) {\n        var updatedTasks = this.state.rows;\n        delete updatedTasks&#x5B;index];\n        this.setState({rows: updatedTasks});\n    }\n\n    resetTask() {\n        this.setState({rows:&#x5B;{index:1},{index:2},{index:3}]});\n    }\n\n    justSubmitted(event) {\n        \/\/\u30da\u30fc\u30b8\u304c\u30ed\u30fc\u30c9\u3055\u308c\u308b\u306e\u3092\u9632\u3050\n        event.preventDefault();\n    }\n\n    render() {\n        return (\n            <div>\n                <h1 id=\"react-dairyreport-6\">React DairyReport<\/h1>\n                <div className=\"float_left\">\n                    <Calendar reset={this.resetTask} \/>\n                <\/div>\n                <h3 id=\"e381aee4bd9ce6a5ad-7\">\u306e\u4f5c\u696d<\/h3>\n                <button onClick={this.addTask} className=\"addButton_margin\">\u884c\u8ffd\u52a0<\/button>\n                <form onSubmit={this.justSubmitted}>\n                    <Task projects={this.props.projects} tasks={this.props.tasks} rows={this.state.rows}\n                    remove={this.removeTask} \/>\n                <\/form>\n            <\/div>\n        );\n    }\n}\n<\/pre><\/div>\n\n\n<p><strong>src\/components\/main.js<\/strong> <br><br>\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u65e5\u4ed8\u304c\u5909\u66f4\u3055\u308c\u305f\u969b\u306b\u3001\u30ea\u30b9\u30c8\u304c\u521d\u671f\u5316\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002 <br>(\u3061\u3087\u3063\u3068\u4e0d\u683c\u597d\u3067\u3059\u304c\u3001\u3082\u3046\u5c11\u3057\u7dba\u9e97\u306a\u66f8\u304d\u65b9\u304c\u3042\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u2026)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"344\" src=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c3-1-1024x344.png\" alt=\"\" class=\"wp-image-11130\" srcset=\"https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c3-1-1024x344.png 1024w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c3-1-300x101.png 300w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c3-1-768x258.png 768w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c3-1-450x151.png 450w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c3-1-900x302.png 900w, https:\/\/itport.cloud\/wp-content\/uploads\/2020\/04\/\u30ab\u30ec\u30f3\u30c0\u30fc\u5f8c3-1.png 1292w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>\u65e5\u4ed8\u304c\u5909\u66f4\u3055\u308c\u308b\u3068\u3001\u30ea\u30b9\u30c8\u304c\u521d\u671f\u5316\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"front4_6\">\u6b21\u56de\u4e88\u544a<\/h2>\n\n\n\n<p>2\u56de\u306b\u6e21\u3063\u3066\u65e5\u5831\u30a2\u30d7\u30ea\u3092React\u3067\u5b9f\u88c5\u3057\u305f\u5834\u5408\u306e\u5b9f\u88c5\u3092\u884c\u3044\u307e\u3057\u305f\u3002 <br>(\u4fdd\u5b58\u306b\u95a2\u3057\u3066\u306f\u3001DB\u306e\u51e6\u7406\u304c\u5165\u3063\u3066\u304f\u308b\u305f\u3081\u4eca\u56de\u306f\u5272\u611b\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3059) <br><br>\u6b21\u56de\u306fVue.js\u3067\u5b9f\u88c5\u3057\u305f\u5834\u5408\u306e\u7d39\u4ecb\u3092\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"\u76ee\u6b21 \u4eca\u56de\u306e\u76ee\u6a19\u9805\u76ee\u540d\u306e\u8868\u793a\u9805\u76ee\u8ffd\u52a0\u6a5f\u80fd \u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u8ffd\u52a0 \u30ea\u30bb\u30c3\u30c8\u6a5f\u80fd\u6b21\u56de\u4e88\u544a \u4eca\u56de\u306e\u76ee\u6a19 \u524d\u56de\u306f\u3001\u65e5\u5831\u30a2\u30d7\u30ea\u3092React\u3067\u5b9f\u88c5\u3057\u3001\u9805\u76ee\u306e\u5909\u66f4\u3084\u524a\u9664\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u4eca\u56de\u306f\u3001\u7b2c3\u56de\u306b\u5f15\u304d\u7d9a\u304d\u9805\u76ee\u306e\u8ffd\u52a0\u306a\u3069\u6a5f\u80fd\u3092\u5897\u3084\u3057\u3066\u7d39\u4ecb\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 \u524d\u56de\u306e\u8a18\u4e8b\u306f\u3053\u3061\u3089 \u2193 \u4eca\u56de\u306e\u5b8c\u6210\u30a4\u30e1\u30fc\u30b8\u3002\u524d\u56de\u3088\u308a\u6a5f\u80fd\u3092\u5897\u3084\u3057\u3066\u3044\u304d\u307e\u3059\u3002 \u9805\u76ee\u540d\u306e\u8868\u793a \u524d\u56de\u307e\u3067\u306e\u5b9f\u88c5\u3067\u304a\u6c17\u3065\u304d\u306e\u65b9\u3082\u3044\u3089\u3063\u3057\u3083\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002 \u300c\u3069\u3053\u306b\u4f55\u3092\u5165\u529b\u3059\u308c\u3070\u3044\u3044\u306e\u304b\u300d\u3068\u3002\u305d\u3046\u3001\u9805\u76ee\u540d\u304c\u306a\u304b\u3063\u305f\u3067\u3059\u3088\u306d\u3002 \u4eca\u56de\u306f\u672a\u5165\u529b\u306e\u5834\u5408\u306b\u3001\u9805\u76ee\u6b04\u306b\u8584\u304f\u8868\u793a\u3059\u308b\u5f62\u306b\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 \u524d\u56de\u307e\u3067\u306e\u8868\u793a\u3002\u3069\u3053\u306b\u4f55\u3092\u5165\u529b\u3059\u308b\u306e\u304b\u5206\u304b\u3089\u306a\u3044\u2026 render() { \/\/\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\u306e\u30c9\u30ed\u30c3&hellip;","protected":false},"author":9,"featured_media":11086,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[29],"class_list":{"0":"post-11081","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-82","8":"tag-season7"},"_links":{"self":[{"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/posts\/11081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/itport.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11081"}],"version-history":[{"count":60,"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/posts\/11081\/revisions"}],"predecessor-version":[{"id":11293,"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/posts\/11081\/revisions\/11293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itport.cloud\/index.php?rest_route=\/wp\/v2\/media\/11086"}],"wp:attachment":[{"href":"https:\/\/itport.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itport.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itport.cloud\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}