{"id":21034,"date":"2025-12-08T15:00:23","date_gmt":"2025-12-08T06:00:23","guid":{"rendered":"https:\/\/blog.fujielab.com\/?p=21034"},"modified":"2025-12-08T15:00:23","modified_gmt":"2025-12-08T06:00:23","slug":"%ef%bd%88%ef%bd%94%ef%bd%8d%ef%bd%8c%e3%80%80%ef%bc%95","status":"publish","type":"post","link":"https:\/\/blog.fujielab.com\/?p=21034","title":{"rendered":"\uff28\uff34\uff2d\uff2c\u3000\uff15"},"content":{"rendered":"<p>\u65e5\u8a8c\u62c5\u5f53\uff1a\u9234\u6728\u7965\u8b77<br \/>\n<strong data-start=\"129\" data-end=\"147\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\uff1aMiraBa<\/strong><\/p>\n<h2 data-start=\"154\" data-end=\"171\"><strong data-start=\"157\" data-end=\"171\">[\u672c\u65e5\u306e\u76ee\u6a19]<\/strong><\/h2>\n<p data-start=\"173\" data-end=\"257\">React \u3092\u7528\u3044\u305f\u30a2\u30d7\u30ea\u69cb\u9020\u3078\u306e\u5168\u9762\u79fb\u884c\u306e\u6e96\u5099\u3068\u3057\u3066\u3001\u65e2\u5b58\u30b3\u30fc\u30c9\u306e\u554f\u984c\u70b9\u306e\u6d17\u3044\u51fa\u3057\u3068\u3001<br data-start=\"217\" data-end=\"220\" \/>React \u5316\u306b\u5411\u3051\u305f\u30d5\u30a9\u30eb\u30c0\u69cb\u6210\u30fb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316\u8a08\u753b\u3092\u660e\u78ba\u5316\u3059\u308b\u3053\u3068\u3002<\/p>\n<p data-start=\"173\" data-end=\"257\">\n<h2 data-start=\"264\" data-end=\"286\"><strong data-start=\"267\" data-end=\"286\">[\u6d3b\u52d5\u5185\u5bb9]\u3000[\u62c5\u5f53\u8005\u306e\u4f5c\u696d]<\/strong><\/h2>\n<h3 data-start=\"288\" data-end=\"318\"><strong data-start=\"292\" data-end=\"318\">\u73fe\u884c\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u9020\u306e\u8abf\u67fb\u3068\u554f\u984c\u70b9\u306e\u7279\u5b9a<\/strong><\/h3>\n<ul data-start=\"320\" data-end=\"523\">\n<li data-start=\"320\" data-end=\"383\">\n<p data-start=\"322\" data-end=\"383\">HTML \/ JS \/ CSS \u3092\u76f4\u63a5\u8aad\u307f\u8fbc\u3080\u65e7\u69cb\u9020\u3068<br data-start=\"349\" data-end=\"352\" \/>React \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u69cb\u9020\u304c\u6df7\u5728\u3057\u3066\u3044\u308b\u70b9\u3092\u78ba\u8a8d\u3002<\/p>\n<\/li>\n<li data-start=\"384\" data-end=\"440\">\n<p data-start=\"386\" data-end=\"440\">opp.js \u3092 React \u3067\u547c\u3073\u51fa\u305b\u306a\u3044\u554f\u984c\u3084\u3001\u9759\u7684 DOM \u3068 React DOM \u306e\u885d\u7a81\u3092\u6574\u7406\u3002<\/p>\n<\/li>\n<li data-start=\"441\" data-end=\"523\">\n<p data-start=\"443\" data-end=\"523\">public \u30d5\u30a9\u30eb\u30c0\u5185\u306e\u30d5\u30a1\u30a4\u30eb\u69cb\u6210\uff08IMG, CSS, JS, JSX\uff09\u304c React \u6a19\u6e96\u3068\u7570\u306a\u3063\u3066\u3044\u305f\u305f\u3081\u3001<br data-start=\"501\" data-end=\"504\" \/>\u4eca\u5f8c\u306e\u79fb\u884c\u306b\u5411\u3051\u305f\u518d\u69cb\u6210\u6848\u3092\u4f5c\u6210\u3002<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"749\" data-end=\"786\"><strong data-start=\"753\" data-end=\"786\">\u6295\u7a3f\u30d5\u30a3\u30fc\u30c9\uff08Voices\uff09\u51e6\u7406\u306e React \u5316\u6e96\u5099<\/strong><\/h3>\n<ul data-start=\"788\" data-end=\"960\">\n<li data-start=\"788\" data-end=\"867\">\n<p data-start=\"790\" data-end=\"867\">\u73fe\u884c opp.js \u306e DOM \u64cd\u4f5c\u3067\u306f React \u3067\u52d5\u4f5c\u3057\u306a\u3044\u305f\u3081\u3001<br data-start=\"826\" data-end=\"829\" \/>\u6295\u7a3f\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092 <code data-start=\"841\" data-end=\"853\">Voices.jsx<\/code> \u306b\u7d71\u5408\u3059\u308b\u65b9\u91dd\u3092\u6c7a\u5b9a\u3002<\/p>\n<\/li>\n<li data-start=\"868\" data-end=\"896\">\n<p data-start=\"870\" data-end=\"896\">\u6295\u7a3f\u753b\u50cf TK1\u301c4 \u306e\u8aad\u307f\u8fbc\u307f\u30d1\u30b9\u4ed5\u69d8\u3092\u7d71\u4e00\u3002<\/p>\n<\/li>\n<li data-start=\"897\" data-end=\"960\">\n<p data-start=\"899\" data-end=\"960\">public\/IMG \u5185\u306e\u753b\u50cf\u304c\u6b63\u5e38\u306b\u8a8d\u8b58\u3055\u308c\u306a\u3044\u554f\u984c\u3092\u78ba\u8a8d\u3057\u3001\u539f\u56e0\u304c &#8220;import \u65b9\u5f0f\u306e\u4e0d\u4e00\u81f4&#8221; \u3067\u3042\u308b\u3053\u3068\u3092\u7279\u5b9a\u3002<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"967\" data-end=\"1002\"><strong data-start=\"971\" data-end=\"1002\">React \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\uff08Vite\uff09\u306e\u69cb\u7bc9\u8a08\u753b\u7b56\u5b9a<\/strong><\/h3>\n<ul data-start=\"1004\" data-end=\"1171\">\n<li data-start=\"1004\" data-end=\"1061\">\n<p data-start=\"1006\" data-end=\"1061\">React \u3067\u30a2\u30d7\u30ea\u3092\u5b89\u5b9a\u7a3c\u50cd\u3055\u305b\u308b\u305f\u3081\u3001<br data-start=\"1027\" data-end=\"1030\" \/>Vite \u3092\u7528\u3044\u3066\u65b0\u898f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3002<\/p>\n<\/li>\n<li data-start=\"1062\" data-end=\"1125\">\n<p data-start=\"1064\" data-end=\"1125\">index.html \u304b\u3089 React \u3092\u547c\u3073\u51fa\u3059\u65b9\u5f0f\uff08root \u8981\u7d20\uff0b index.jsx\uff09\u3067\u518d\u69cb\u7bc9\u3059\u308b\u8a2d\u8a08\u3092\u4f5c\u6210\u3002<\/p>\n<\/li>\n<li data-start=\"1126\" data-end=\"1171\">\n<p data-start=\"1128\" data-end=\"1171\">App.jsx \u4ee5\u4e0b\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5206\u5272\u6848\u3082\u4f5c\u6210\u3057\u3001\u30d5\u30a1\u30a4\u30eb\u914d\u7f6e\u306e\u6a19\u6e96\u5316\u65b9\u91dd\u3092\u56fa\u3081\u305f\u3002<\/p>\n<\/li>\n<\/ul>\n<h2 data-start=\"1178\" data-end=\"1196\"><strong data-start=\"1181\" data-end=\"1196\">[\u8ab2\u984c\u3068\u89e3\u6c7a\u306e\u65b9\u5411\u6027]<\/strong><\/h2>\n<h3 data-start=\"1198\" data-end=\"1232\"><strong data-start=\"1202\" data-end=\"1232\">1\uff0e\u9759\u7684 JS\uff08opp.js\uff09\u3068 React \u306e\u7af6\u5408<\/strong><\/h3>\n<ul data-start=\"1234\" data-end=\"1315\">\n<li data-start=\"1234\" data-end=\"1272\">\n<p data-start=\"1236\" data-end=\"1272\">\u9759\u7684\u306b DOM \u3092\u751f\u6210\u3059\u308b\u65b9\u5f0f\u304c React \u3068\u885d\u7a81\u3057\u8868\u793a\u3055\u308c\u306a\u3044\u3002<\/p>\n<\/li>\n<li data-start=\"1273\" data-end=\"1315\">\n<p data-start=\"1275\" data-end=\"1315\"><strong data-start=\"1275\" data-end=\"1305\">React \u5185\u90e8\u306e state \u306b\u6295\u7a3f\u6a5f\u80fd\u3092\u5b8c\u5168\u79fb\u884c<\/strong>\u3059\u308b\u3053\u3068\u3067\u89e3\u6c7a\u4e88\u5b9a\u3002<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"1322\" data-end=\"1347\"><strong data-start=\"1326\" data-end=\"1347\">2\uff0e\u753b\u50cf\u30d1\u30b9\u30fb\u52d5\u753b\u30d1\u30b9\u306e\u8a8d\u8b58\u4e0d\u4e00\u81f4<\/strong><\/h3>\n<ul data-start=\"1349\" data-end=\"1449\">\n<li data-start=\"1349\" data-end=\"1449\">\n<p data-start=\"1351\" data-end=\"1449\">React \u74b0\u5883\u3067\u306f <code data-start=\"1362\" data-end=\"1372\">IMG\/xxxx<\/code> \u306e\u8aad\u307f\u8fbc\u307f\u65b9\u6cd5\u304c\u901a\u5e38\u306e HTML \u3068\u7570\u306a\u308b\u305f\u3081\u3001<br data-start=\"1397\" data-end=\"1400\" \/><code data-start=\"1402\" data-end=\"1418\">public\/IMG\/...<\/code> \u3078\u306e\u7d71\u4e00\u3068\u3001Vite \u306e\u53c2\u7167\u30eb\u30fc\u30eb\u3092\u63a1\u7528\u3059\u308b\u3053\u3068\u3067\u89e3\u6d88\u3059\u308b\u3002<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"1456\" data-end=\"1475\"><strong data-start=\"1460\" data-end=\"1475\">3\uff0e\u30d5\u30a9\u30eb\u30c0\u968e\u5c64\u306e\u6df7\u5728<\/strong><\/h3>\n<ul data-start=\"1477\" data-end=\"1557\">\n<li data-start=\"1477\" data-end=\"1516\">\n<p data-start=\"1479\" data-end=\"1516\">JSX \u3068 JS \u304c\u540c\u968e\u5c64\u306b\u6df7\u3056\u308a\u3001\u30a2\u30d7\u30ea\u306e\u4f9d\u5b58\u95a2\u4fc2\u304c\u8907\u96d1\u5316\u3057\u3066\u3044\u305f\u3002<\/p>\n<\/li>\n<li data-start=\"1517\" data-end=\"1557\">\n<p data-start=\"1519\" data-end=\"1557\"><strong data-start=\"1519\" data-end=\"1542\">src \/ public \u306b\u660e\u78ba\u306b\u5206\u96e2<\/strong>\u3057\u6574\u7406\u3059\u308b\u5de5\u7a0b\u3092\u660e\u65e5\u5b9f\u884c\u3059\u308b\u3002<\/p>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2 data-start=\"1564\" data-end=\"1578\"><strong data-start=\"1567\" data-end=\"1578\">[\u6b21\u56de\u306e\u4f5c\u696d]<\/strong><\/h2>\n<h3 data-start=\"1580\" data-end=\"1608\"><strong data-start=\"1584\" data-end=\"1608\">1\uff0eVite\uff08React\uff09\u74b0\u5883\u306e\u6b63\u5f0f\u69cb\u7bc9<\/strong><\/h3>\n<ul data-start=\"1609\" data-end=\"1707\">\n<li data-start=\"1609\" data-end=\"1679\">\n<p data-start=\"1611\" data-end=\"1679\">\u65b0\u898f React \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u3001<br data-start=\"1631\" data-end=\"1634\" \/>App.jsx \/ index.jsx \/ components \u30d5\u30a9\u30eb\u30c0\u3092\u8a2d\u7f6e\u3002<\/p>\n<\/li>\n<li data-start=\"1680\" data-end=\"1707\">\n<p data-start=\"1682\" data-end=\"1707\">\u65e2\u5b58\u30c7\u30b6\u30a4\u30f3\u3092 React \u3078\u79fb\u690d\u3059\u308b\u4f5c\u696d\u3092\u958b\u59cb\u3002<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"1714\" data-end=\"1740\"><strong data-start=\"1718\" data-end=\"1740\">2\uff0e\u6295\u7a3f\u6a5f\u80fd\u306e React \u5b8c\u5168\u79fb\u884c<\/strong><\/h3>\n<ul data-start=\"1741\" data-end=\"1810\">\n<li data-start=\"1741\" data-end=\"1777\">\n<p data-start=\"1743\" data-end=\"1777\">Voices.jsx \u5185\u3067 map \u51e6\u7406\u3092\u7528\u3044\u305f\u6295\u7a3f\u8868\u793a\u3092\u5b9f\u88c5\u3002<\/p>\n<\/li>\n<li data-start=\"1778\" data-end=\"1810\">\n<p data-start=\"1780\" data-end=\"1810\">\u5199\u771f\u4ed8\u304d\u6295\u7a3f\u306e\u753b\u50cf\u30d1\u30b9\u3092\u4fee\u6b63\u3057\u3001\u8868\u793a\u3055\u308c\u306a\u3044\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u3002<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"1817\" data-end=\"1846\"><strong data-start=\"1821\" data-end=\"1846\">3\uff0eUI \u30bb\u30af\u30b7\u30e7\u30f3\u306e React \u518d\u69cb\u6210<\/strong><\/h3>\n<ul data-start=\"1847\" data-end=\"1945\">\n<li data-start=\"1847\" data-end=\"1864\">\n<p data-start=\"1849\" data-end=\"1864\">HeroVideo\uff08\u52d5\u753b\uff09<\/p>\n<\/li>\n<li data-start=\"1865\" data-end=\"1892\">\n<p data-start=\"1867\" data-end=\"1892\">CatchCopy\uff08\u30ad\u30e3\u30c3\u30c1\u30b3\u30d4\u30fc1 &amp; 2\uff09<\/p>\n<\/li>\n<li data-start=\"1893\" data-end=\"1904\">\n<p data-start=\"1895\" data-end=\"1904\">Sidebar<\/p>\n<\/li>\n<li data-start=\"1905\" data-end=\"1945\">\n<p data-start=\"1907\" data-end=\"1945\">Header<br data-start=\"1913\" data-end=\"1916\" \/>\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3057\u3066\u518d\u69cb\u7bc9\u3057\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u5b89\u5b9a\u5316\u3092\u56f3\u308b\u3002<\/p>\n<\/li>\n<\/ul>\n<h3 data-start=\"1952\" data-end=\"1987\"><strong data-start=\"1956\" data-end=\"1987\">4\uff0eFirebase\uff08Firestore\uff09\u3068\u306e\u63a5\u7d9a\u6e96\u5099<\/strong><\/h3>\n<ul data-start=\"1988\" data-end=\"2053\">\n<li data-start=\"1988\" data-end=\"2053\">\n<p data-start=\"1990\" data-end=\"2053\">\u6295\u7a3f\u30c7\u30fc\u30bf\u3092 Firestore \u306b\u4fdd\u5b58\u3059\u308b\u305f\u3081\u3001<br data-start=\"2015\" data-end=\"2018\" \/>fire.js \u306e\u8a2d\u5b9a\u3092 React \u69cb\u9020\u3078\u79fb\u884c\u3059\u308b\u4e0b\u6e96\u5099\u3092\u884c\u3046\u3002<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u65e5\u8a8c\u62c5\u5f53\uff1a\u9234\u6728\u7965\u8b77 \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d\uff1aMiraBa [\u672c\u65e5\u306e\u76ee\u6a19] React \u3092\u7528\u3044\u305f\u30a2\u30d7\u30ea\u69cb\u9020\u3078\u306e\u5168\u9762\u79fb\u884c\u306e\u6e96\u5099\u3068\u3057\u3066\u3001\u65e2\u5b58\u30b3\u30fc\u30c9\u306e\u554f\u984c\u70b9\u306e\u6d17\u3044\u51fa\u3057\u3068\u3001React \u5316\u306b\u5411\u3051\u305f\u30d5\u30a9\u30eb\u30c0\u69cb\u6210\u30fb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316\u8a08\u753b\u3092\u660e\u78ba\u5316\u3059 &hellip; <a href=\"https:\/\/blog.fujielab.com\/?p=21034\" class=\"more-link\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"screen-reader-text\">\uff28\uff34\uff2d\uff2c\u3000\uff15<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":350,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-21034","post","type-post","status-publish","format-standard","hentry","category-html5"],"_links":{"self":[{"href":"https:\/\/blog.fujielab.com\/index.php?rest_route=\/wp\/v2\/posts\/21034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.fujielab.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.fujielab.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.fujielab.com\/index.php?rest_route=\/wp\/v2\/users\/350"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.fujielab.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21034"}],"version-history":[{"count":1,"href":"https:\/\/blog.fujielab.com\/index.php?rest_route=\/wp\/v2\/posts\/21034\/revisions"}],"predecessor-version":[{"id":21039,"href":"https:\/\/blog.fujielab.com\/index.php?rest_route=\/wp\/v2\/posts\/21034\/revisions\/21039"}],"wp:attachment":[{"href":"https:\/\/blog.fujielab.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.fujielab.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=21034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.fujielab.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=21034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}