{"id":422,"date":"2025-03-24T08:54:48","date_gmt":"2025-03-23T23:54:48","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=422"},"modified":"2025-03-24T08:54:48","modified_gmt":"2025-03-23T23:54:48","slug":"%e3%80%902024%e5%b9%b4%e6%9c%80%e6%96%b0%e3%80%91spring-bootxreact%e7%b5%b1%e5%90%88%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9a7%e3%81%a4%e3%81%ae%e5%ae%9f%e8%b7%b5","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=422","title":{"rendered":"\u30102024\u5e74\u6700\u65b0\u3011Spring Boot\u00d7React\u7d71\u5408\u30de\u30b9\u30bf\u30fc\u30ac\u30a4\u30c9\uff1a7\u3064\u306e\u5b9f\u8df5\u7684\u30b9\u30c6\u30c3\u30d7\u3067\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005\u3078\u306e\u9053\u3092\u62d3\u304f"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" id=\"i-0\">1. Spring Boot\u3068React\u306e\u7d71\u5408\uff1a2024\u5e74\u306e\u6700\u65b0\u30c8\u30ec\u30f3\u30c9\u3068\u91cd\u8981\u6027<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">2024\u5e74\u306eWeb\u958b\u767a\u754c\u9688\u3067\u3001Spring Boot\u3068React\u306e\u7d71\u5408\u304c\u6ce8\u76ee\u3092\u96c6\u3081\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u3001\u306a\u305c\u4eca\u91cd\u8981\u8996\u3055\u308c\u3066\u3044\u308b\u306e\u304b\u3001\u305d\u3057\u3066\u3069\u306e\u3088\u3046\u306a\u5229\u70b9\u3092\u3082\u305f\u3089\u3059\u306e\u304b\u3001\u6700\u65b0\u306e\u30c8\u30ec\u30f3\u30c9\u3068\u5171\u306b\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">1. Spring Boot\u3068React\u306e\u7d71\u5408\uff1a2024\u5e74\u306e\u6700\u65b0\u30c8\u30ec\u30f3\u30c9\u3068\u91cd\u8981\u6027<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">\u306a\u305c\u4eca\u3001Spring Boot\u3068React\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u6ce8\u76ee\u3055\u308c\u3066\u3044\u308b\u306e\u304b<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-2\">\u3053\u306e\u7d71\u5408\u304c\u3082\u305f\u3089\u3059\u958b\u767a\u52b9\u7387\u3068\u5e02\u5834\u4fa1\u5024\u306e\u5411\u4e0a<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-3\">2. \u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\uff1a\u52b9\u7387\u7684\u306a\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u306e\u69cb\u7bc9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-4\">Spring Initializr\u3092\u4f7f\u7528\u3057\u305fSpring Boot\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210<\/a>      <\/li>      <li>        <a href=\"#i-5\">Create React App\u3067\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u74b0\u5883\u3092\u6574\u3048\u308b<\/a>      <\/li>      <li>        <a href=\"#i-6\">IDE\u306e\u9078\u629e\u3068\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/a>      <\/li>      <li>        <a href=\"#i-10\">\u958b\u767a\u52b9\u7387\u3092\u5411\u4e0a\u3055\u305b\u308bTips<\/a>      <\/li>      <li>        <a href=\"#i-11\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-12\">\u57fa\u672c\u7684\u306a\u52d5\u4f5c\u78ba\u8a8d<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-13\">3. \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u958b\u767a\uff1aSpring Boot\u3067\u5805\u7262\u306aAPI\u3092\u69cb\u7bc9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-14\">RESTful API\u306e\u8a2d\u8a08\u3068\u5b9f\u88c5\uff1a\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>      <li>        <a href=\"#i-17\">\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u9023\u643a\uff1aJPA\/Hibernate\u306e\u6d3b\u7528<\/a>      <\/li>      <li>        <a href=\"#i-21\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\uff1aSpring Security\u306e\u5c0e\u5165<\/a>      <\/li>      <li>        <a href=\"#i-24\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u306e\u6700\u9069\u5316<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-25\">API\u6587\u66f8\u5316<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-26\">4. \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\uff1aReact\u3067\u76f4\u611f\u7684\u306aUI\u3092\u4f5c\u6210<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-27\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8a2d\u8a08\uff1a\u518d\u5229\u7528\u6027\u3068\u4fdd\u5b88\u6027\u306e\u5411\u4e0a<\/a>      <\/li>      <li>        <a href=\"#i-31\">\u72b6\u614b\u7ba1\u7406\uff1aRedux vs. Context API\u306e\u6bd4\u8f03\u3068\u4f7f\u3044\u5206\u3051<\/a>      <\/li>      <li>        <a href=\"#i-35\">API\u3068\u306e\u901a\u4fe1\uff1aAxios\u3092\u4f7f\u7528\u3057\u305f\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-38\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-39\">5. \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u7d71\u5408\uff1a\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u9023\u643a\u3092\u5b9f\u73fe<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-40\">CORS\u306e\u8a2d\u5b9a\uff1a\u30bb\u30ad\u30e5\u30a2\u306a\u901a\u4fe1\u306e\u78ba\u7acb<\/a>      <\/li>      <li>        <a href=\"#i-43\">\u8a8d\u8a3c\u3068\u8a8d\u53ef\uff1aJWT\u3092\u4f7f\u7528\u3057\u305f\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406<\/a>      <\/li>      <li>        <a href=\"#i-46\">\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\uff1a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30a8\u30e9\u30fc\u306e\u9069\u5207\u306a\u51e6\u7406<\/a>      <\/li>      <li>        <a href=\"#i-50\">\u7d71\u5408\u30c6\u30b9\u30c8\uff1a\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u9023\u643a\u3092\u78ba\u8a8d<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-51\">\u307e\u3068\u3081<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-52\">6. \u30c6\u30b9\u30c8\u3068\u54c1\u8cea\u4fdd\u8a3c\uff1a\u4fe1\u983c\u6027\u306e\u9ad8\u3044\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-53\">\u30c6\u30b9\u30c8\u306e\u91cd\u8981\u6027<\/a>      <\/li>      <li>        <a href=\"#i-54\">\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u3068\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30c6\u30b9\u30c8<\/a>      <\/li>      <li>        <a href=\"#i-57\">React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8\uff1aJest\u3068React Testing Library\u306e\u6d3b\u7528<\/a>      <\/li>      <li>        <a href=\"#i-58\">E2E\u30c6\u30b9\u30c8\uff1aSelenium\u3092\u4f7f\u7528\u3057\u305f\u81ea\u52d5\u5316\u30c6\u30b9\u30c8<\/a>      <\/li>      <li>        <a href=\"#i-59\">CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3078\u306e\u30c6\u30b9\u30c8\u7d71\u5408<\/a>      <\/li>      <li>        <a href=\"#i-60\">\u30b3\u30fc\u30c9\u54c1\u8cea\u306e\u6e2c\u5b9a<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-61\">\u307e\u3068\u3081<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-62\">7. \u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u3068CI\/CD\uff1a\u7d99\u7d9a\u7684\u306a\u958b\u767a\u3068\u904b\u7528\u306e\u81ea\u52d5\u5316<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-63\">Docker\u5316\uff1a\u30b3\u30f3\u30c6\u30ca\u3092\u4f7f\u7528\u3057\u305f\u74b0\u5883\u306e\u4e00\u8cab\u6027\u78ba\u4fdd<\/a>      <\/li>      <li>        <a href=\"#i-67\">CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u69cb\u7bc9\uff1aJenkins\/GitLab CI\u306e\u6d3b\u7528<\/a>      <\/li>      <li>        <a href=\"#i-70\">\u30af\u30e9\u30a6\u30c9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3078\u306e\u30c7\u30d7\u30ed\u30a4\uff1aAWS\/Heroku\u306e\u9078\u629e\u3068\u8a2d\u5b9a<\/a>      <\/li>      <li>        <a href=\"#i-73\">\u76e3\u8996\u3068\u30ed\u30ae\u30f3\u30b0<\/a>      <\/li>      <li>        <a href=\"#i-74\">\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u3068\u9ad8\u53ef\u7528\u6027<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-75\">\u307e\u3068\u3081<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-76\">8. \u307e\u3068\u3081\u3068\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\uff1a\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005\u3068\u3057\u3066\u306e\u6210\u9577<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-77\">Spring Boot\u3068React\u7d71\u5408\u306e\u5229\u70b9\u3068\u8ab2\u984c\u306e\u518d\u78ba\u8a8d<\/a>      <\/li>      <li>        <a href=\"#i-78\">\u7d99\u7d9a\u7684\u306a\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9\u3068\u6700\u65b0\u52d5\u5411\u306e\u30d5\u30a9\u30ed\u30fc\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-81\">\u5b9f\u8df5\u7684\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30a2\u30a4\u30c7\u30a2\u3068\u53c2\u8003\u30ea\u30dd\u30b8\u30c8\u30ea\u306e\u7d39\u4ecb<\/a>      <\/li>      <li>        <a href=\"#i-82\">\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005\u3068\u3057\u3066\u306e\u6210\u9577<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-83\">\u6700\u5f8c\u306b<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-1\">\u306a\u305c\u4eca\u3001Spring Boot\u3068React\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u6ce8\u76ee\u3055\u308c\u3066\u3044\u308b\u306e\u304b<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u53f0\u982d<\/strong>\n<ul class=\"wp-block-list\">\n<li>Spring Boot\u306e\u8efd\u91cf\u6027\u3068\u9ad8\u3044\u62e1\u5f35\u6027\u304c\u3001\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u306e\u5b9f\u88c5\u306b\u6700\u9069<\/li>\n\n\n\n<li>React\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d9\u30fc\u30b9\u8a2d\u8a08\u304c\u3001UI\u306e\u5206\u5272\u3068\u518d\u5229\u7528\u6027\u3092\u4fc3\u9032<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30af\u30e9\u30a6\u30c9\u30cd\u30a4\u30c6\u30a3\u30d6\u958b\u767a\u306e\u666e\u53ca<\/strong>\n<ul class=\"wp-block-list\">\n<li>Spring Boot\u306e\u30af\u30e9\u30a6\u30c9\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u306a\u7279\u6027\u304c\u3001\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u69cb\u7bc9\u3092\u53ef\u80fd\u306b<\/li>\n\n\n\n<li>React\u306e\u52b9\u7387\u7684\u306a\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u304c\u3001\u30af\u30e9\u30a6\u30c9\u74b0\u5883\u3067\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306b\u8ca2\u732e<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>DevOps\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3068\u306e\u89aa\u548c\u6027<\/strong>\n<ul class=\"wp-block-list\">\n<li>Spring Boot\u3068React\u306e\u4e21\u65b9\u304c\u3001CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3068\u306e\u7d71\u5408\u304c\u5bb9\u6613<\/li>\n\n\n\n<li>\u8fc5\u901f\u306a\u958b\u767a\u3068\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u30b5\u30a4\u30af\u30eb\u306e\u5b9f\u73fe<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u660e\u78ba\u306a\u5206\u96e2<\/strong>\n<ul class=\"wp-block-list\">\n<li>Spring Boot\u306eRESTful API\u304c\u3001\u30af\u30ea\u30fc\u30f3\u306a\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u8a2d\u8a08\u3092\u4fc3\u9032<\/li>\n\n\n\n<li>React\u306e\u72b6\u614b\u7ba1\u7406\u6a5f\u80fd\u304c\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30ed\u30b8\u30c3\u30af\u306e\u52b9\u7387\u7684\u306a\u51e6\u7406\u3092\u5b9f\u73fe<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u8c4a\u5bcc\u306a\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3068\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30b5\u30dd\u30fc\u30c8<\/strong>\n<ul class=\"wp-block-list\">\n<li>Spring Boot\u306e\u5e45\u5e83\u3044\u7d71\u5408\u6a5f\u80fd\u3068\u3001React\u306e\u8c4a\u5bcc\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u958b\u767a\u3092\u52a0\u901f<\/li>\n\n\n\n<li>\u4e21\u6280\u8853\u306e\u5927\u898f\u6a21\u306a\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u304c\u3001\u554f\u984c\u89e3\u6c7a\u3068\u7d99\u7d9a\u7684\u306a\u5b66\u7fd2\u3092\u30b5\u30dd\u30fc\u30c8<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-2\">\u3053\u306e\u7d71\u5408\u304c\u3082\u305f\u3089\u3059\u958b\u767a\u52b9\u7387\u3068\u5e02\u5834\u4fa1\u5024\u306e\u5411\u4e0a<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u52b9\u7387\u306e\u98db\u8e8d\u7684\u306a\u5411\u4e0a<\/strong>\n<ul class=\"wp-block-list\">\n<li>Spring Initializr\u3068Create React App\u306b\u3088\u308a\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u8a2d\u5b9a\u6642\u9593\u3092\u5927\u5e45\u306b\u524a\u6e1b<\/li>\n\n\n\n<li>Spring Boot\u306e\u81ea\u52d5\u8a2d\u5b9a\u6a5f\u80fd\u3068React\u306e\u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c9\u304c\u3001\u958b\u767a\u30b5\u30a4\u30af\u30eb\u3092\u77ed\u7e2e<\/li>\n\n\n\n<li>\u5b9f\u969b\u306e\u4f8b\uff1aSpring Boot\u3092\u63a1\u7528\u3057\u305f\u4f01\u696d\u306e\u958b\u767a\u901f\u5ea6\u304c\u5e73\u574730%\u5411\u4e0a\uff08Spring\u793e\u5185\u8abf\u67fb\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u9ad8\u3044\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u3068\u4fdd\u5b88\u6027<\/strong>\n<ul class=\"wp-block-list\">\n<li>Spring Boot\u306e\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u5bfe\u5fdc\u3068React\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8a2d\u8a08\u306b\u3088\u308a\u3001\u5927\u898f\u6a21\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u7ba1\u7406\u304c\u5bb9\u6613\u306b<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u306e\u518d\u5229\u7528\u6027\u304c\u9ad8\u307e\u308a\u3001\u9577\u671f\u7684\u306a\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u30b3\u30b9\u30c8\u3092\u524a\u6e1b<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u512a\u308c\u305f\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9<\/strong>\n<ul class=\"wp-block-list\">\n<li>Spring Boot\u306e\u9ad8\u901f\u306a\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u51e6\u7406\u3068React\u306e\u52b9\u7387\u7684\u306aUI\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306b\u3088\u308a\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u73fe<\/li>\n\n\n\n<li>\u5c0e\u5165\u4e8b\u4f8b\uff1aReact\u3092\u63a1\u7528\u3057\u305f\u4f01\u696d\u306e\u30e6\u30fc\u30b6\u30fc\u6e80\u8db3\u5ea6\u304c20%\u4e0a\u6607\uff08ReactJS.org\u8abf\u67fb\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5e02\u5834\u4fa1\u5024\u306e\u5411\u4e0a<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005\u3068\u3057\u3066\u306e\u30b9\u30ad\u30eb\u30bb\u30c3\u30c8\u304c\u3001\u52b4\u50cd\u5e02\u5834\u3067\u9ad8\u304f\u8a55\u4fa1<\/li>\n\n\n\n<li>Spring Boot\u3068React\u306e\u7d4c\u9a13\u3092\u6301\u3064\u958b\u767a\u8005\u306e\u9700\u8981\u304c\u5897\u52a0<\/li>\n\n\n\n<li>\u7d71\u8a08\uff1a\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005\u306e\u5e73\u5747\u5e74\u53ce\u304c15%\u4e0a\u6607\uff08Stack Overflow Developer Survey 2023\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5e45\u5e83\u3044\u696d\u754c\u3067\u306e\u63a1\u7528<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u30b9\u30bf\u30fc\u30c8\u30a2\u30c3\u30d7\u304b\u3089\u5927\u4f01\u696d\u307e\u3067\u3001\u69d8\u3005\u306a\u898f\u6a21\u306e\u4f01\u696d\u304cSpring Boot\u3068React\u3092\u63a1\u7528<\/li>\n\n\n\n<li>\u91d1\u878d\u3001E\u30b3\u30de\u30fc\u30b9\u3001\u30d8\u30eb\u30b9\u30b1\u30a2\u306a\u3069\u3001\u591a\u5c90\u306b\u308f\u305f\u308b\u696d\u754c\u3067\u6d3b\u7528\u3055\u308c\u308b\u67d4\u8edf\u6027<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Boot\u3068React\u306e\u7d71\u5408\u306f\u3001\u73fe\u4ee3\u306eWeb\u958b\u767a\u306b\u304a\u3051\u308b\u5f37\u529b\u306a\u9078\u629e\u80a2\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u7d44\u307f\u5408\u308f\u305b\u306f\u3001\u958b\u767a\u52b9\u7387\u306e\u5411\u4e0a\u3060\u3051\u3067\u306a\u304f\u3001\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u3067\u4fdd\u5b88\u6027\u306e\u9ad8\u3044\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9\u3092\u53ef\u80fd\u306b\u3057\u3001\u7d50\u679c\u3068\u3057\u3066\u958b\u767a\u8005\u306e\u5e02\u5834\u4fa1\u5024\u3092\u9ad8\u3081\u3066\u3044\u307e\u3059\u30022024\u5e74\u4ee5\u964d\u3082\u3001\u3053\u306e\u7d71\u5408\u306f\u3055\u3089\u306a\u308b\u9032\u5316\u3092\u9042\u3052\u3001Web\u958b\u767a\u306e\u4e3b\u8981\u306a\u30c8\u30ec\u30f3\u30c9\u3068\u3057\u3066\u4f4d\u7f6e\u3065\u3051\u3089\u308c\u308b\u3053\u3068\u304c\u4e88\u60f3\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u5b9f\u969b\u306bSpring Boot\u3068React\u306e\u958b\u767a\u74b0\u5883\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3059\u308b\u624b\u9806\u3092\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-3\">2. \u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\uff1a\u52b9\u7387\u7684\u306a\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u306e\u69cb\u7bc9<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u52b9\u7387\u7684\u306a\u958b\u767a\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u9069\u5207\u306a\u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002\u3053\u3053\u3067\u306f\u3001Spring Boot\u3068React\u306e\u958b\u767a\u74b0\u5883\u3092\u6574\u3048\u308b\u624b\u9806\u3092\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-4\">Spring Initializr\u3092\u4f7f\u7528\u3057\u305fSpring Boot\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d6\u30e9\u30a6\u30b6\u3067<a href=\"https:\/\/start.spring.io\/\">Spring Initializr<\/a>\u306b\u30a2\u30af\u30bb\u30b9\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u4ee5\u4e0b\u306e\u8a2d\u5b9a\u3092\u884c\u3044\u307e\u3059\uff1a\n<ul class=\"wp-block-list\">\n<li>Project: Maven Project<\/li>\n\n\n\n<li>Language: Java<\/li>\n\n\n\n<li>Spring Boot: 3.2.1 (2024\u5e741\u6708\u6642\u70b9\u306e\u6700\u65b0\u7248)<\/li>\n\n\n\n<li>Project Metadata:\n<ul class=\"wp-block-list\">\n<li>Group: com.example<\/li>\n\n\n\n<li>Artifact: demo<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Packaging: Jar<\/li>\n\n\n\n<li>Java: 17<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Dependencies \u306b\u4ee5\u4e0b\u3092\u8ffd\u52a0\u3057\u307e\u3059\uff1a\n<ul class=\"wp-block-list\">\n<li>Spring Web<\/li>\n\n\n\n<li>Spring Data JPA<\/li>\n\n\n\n<li>Spring Security<\/li>\n\n\n\n<li>H2 Database<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u201cGENERATE\u201d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305fZIP\u30d5\u30a1\u30a4\u30eb\u3092\u89e3\u51cd\u3057\u3001IDE\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u958b\u304d\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-5\">Create React App\u3067\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u74b0\u5883\u3092\u6574\u3048\u308b<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u307e\u305f\u306f\u30bf\u30fc\u30df\u30ca\u30eb\u3092\u958b\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   npx create-react-app my-app<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">TypeScript\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   npx create-react-app my-app --template typescript<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u307e\u3059\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   cd my-app<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u3066React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u78ba\u8a8d\u3057\u307e\u3059\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   npm start<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d6\u30e9\u30a6\u30b6\u3067 <code>http:\/\/localhost:3000<\/code> \u3092\u958b\u304f\u3068\u3001React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-6\">IDE\u306e\u9078\u629e\u3068\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u52b9\u7387\u7684\u306a\u958b\u767a\u306e\u305f\u3081\u306b\u3001\u9069\u5207\u306aIDE\u3068\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u9078\u629e\u304c\u91cd\u8981\u3067\u3059\u3002\u4ee5\u4e0b\u306b\u3001\u4eba\u6c17\u306e\u3042\u308bIDE\u3068\u305d\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-7\">1. IntelliJ IDEA<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Boot\u958b\u767a\u306b\u6700\u9069\u5316\u3055\u308c\u3066\u304a\u308a\u3001\u5f37\u529b\u306a\u30b3\u30fc\u30c9\u88dc\u5b8c\u6a5f\u80fd\u3092\u6301\u3064IDE\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-block-simple sgb-box-simple sgb-box-simple--title-normal sgb-box-simple--with-border\"><div style=\"background-color:var(--wp--preset--color--sango-main);color:#FFF\" class=\"sgb-box-simple__title\">\u30d7\u30e9\u30b0\u30a4\u30f3<\/div><div class=\"sgb-box-simple__body\" style=\"border-color:var(--wp--preset--color--sango-main);background-color:#FFF\">\n<ul class=\"wp-block-list\">\n<li>Spring Boot Assistant: Spring Boot\u958b\u767a\u3092\u652f\u63f4<\/li>\n\n\n\n<li>React Plugin: JSX\u69cb\u6587\u306e\u30b5\u30dd\u30fc\u30c8\u3084\u30b3\u30fc\u30c9\u88dc\u5b8c\u3092\u63d0\u4f9b<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-sgb-block-simple sgb-box-simple sgb-box-simple--title-normal sgb-box-simple--with-border\"><div style=\"background-color:var(--wp--preset--color--sango-main);color:#FFF\" class=\"sgb-box-simple__title\">\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/div><div class=\"sgb-box-simple__body\" style=\"border-color:var(--wp--preset--color--sango-main);background-color:#FFF\">\n<ul class=\"wp-block-list\">\n<li>IntelliJ IDEA\u3092\u8d77\u52d5\u3057\u3001\u201dFile\u201d &gt; \u201cSettings\u201d (Windows) \u307e\u305f\u306f \u201cIntelliJ IDEA\u201d &gt; \u201cPreferences\u201d (Mac) \u3092\u958b\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u201cPlugins\u201d\u30bb\u30af\u30b7\u30e7\u30f3\u306b\u79fb\u52d5\u3057\u3001\u4e0a\u8a18\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u691c\u7d22\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">2. Visual Studio Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u8efd\u91cf\u3067\u9ad8\u5ea6\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd\u306aIDE\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-block-simple sgb-box-simple sgb-box-simple--title-normal sgb-box-simple--with-border\"><div style=\"background-color:var(--wp--preset--color--sango-main);color:#FFF\" class=\"sgb-box-simple__title\">\u30d7\u30e9\u30b0\u30a4\u30f3<\/div><div class=\"sgb-box-simple__body\" style=\"border-color:var(--wp--preset--color--sango-main);background-color:#FFF\">\n<ul class=\"wp-block-list\">\n<li>Spring Boot Tools: Spring Boot\u958b\u767a\u306e\u30b5\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li>React Snippets: React\u30b3\u30fc\u30c9\u30b9\u30cb\u30da\u30c3\u30c8\u3068\u69cb\u6587\u30cf\u30a4\u30e9\u30a4\u30c8<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-sgb-block-simple sgb-box-simple sgb-box-simple--title-normal sgb-box-simple--with-border\"><div style=\"background-color:var(--wp--preset--color--sango-main);color:#FFF\" class=\"sgb-box-simple__title\">\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/div><div class=\"sgb-box-simple__body\" style=\"border-color:var(--wp--preset--color--sango-main);background-color:#FFF\">\n<ol class=\"wp-block-list\">\n<li>VS Code\u3092\u8d77\u52d5\u3057\u3001\u5de6\u5074\u306eExtensions\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u691c\u7d22\u30d0\u30fc\u3067\u4e0a\u8a18\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u691c\u7d22\u3057\u3001\u201dInstall\u201d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">3. Eclipse<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u7121\u6599\u3067\u5229\u7528\u3067\u304d\u3001\u5e83\u7bc4\u306a\u30d7\u30e9\u30b0\u30a4\u30f3\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3092\u6301\u3064IDE\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-block-simple sgb-box-simple sgb-box-simple--title-normal sgb-box-simple--with-border\"><div style=\"background-color:var(--wp--preset--color--sango-main);color:#FFF\" class=\"sgb-box-simple__title\">\u30d7\u30e9\u30b0\u30a4\u30f3<\/div><div class=\"sgb-box-simple__body\" style=\"border-color:var(--wp--preset--color--sango-main);background-color:#FFF\">\n<ul class=\"wp-block-list\">\n<li>Spring Tools 4: Spring\u958b\u767a\u306e\u305f\u3081\u306e\u7d71\u5408\u30c4\u30fc\u30eb\u30bb\u30c3\u30c8<\/li>\n\n\n\n<li>ReactJS Code Snippets: React\u30b3\u30fc\u30c9\u30b9\u30cb\u30da\u30c3\u30c8\u3092\u63d0\u4f9b<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-sgb-block-simple sgb-box-simple sgb-box-simple--title-normal sgb-box-simple--with-border\"><div style=\"background-color:var(--wp--preset--color--sango-main);color:#FFF\" class=\"sgb-box-simple__title\">\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/div><div class=\"sgb-box-simple__body\" style=\"border-color:var(--wp--preset--color--sango-main);background-color:#FFF\">\n<ol class=\"wp-block-list\">\n<li>Eclipse\u3092\u8d77\u52d5\u3057\u3001\u201dHelp\u201d &gt; \u201cEclipse Marketplace\u201d \u3092\u958b\u304d\u307e\u3059\u3002<\/li>\n\n\n\n<li>\u691c\u7d22\u30d0\u30fc\u3067\u4e0a\u8a18\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u691c\u7d22\u3057\u3001\u201dInstall\u201d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-10\">\u958b\u767a\u52b9\u7387\u3092\u5411\u4e0a\u3055\u305b\u308bTips<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c9\u306e\u6d3b\u7528\uff1a\n<ul class=\"wp-block-list\">\n<li>Spring Boot DevTools\u3068React\u306e\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b3\u30fc\u30c9\u5909\u66f4\u3092\u5373\u5ea7\u306b\u53cd\u6620\u3055\u305b\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb\u306e\u4f7f\u7528\uff1a\n<ul class=\"wp-block-list\">\n<li>\u30d6\u30e9\u30a6\u30b6\u306e\u958b\u767a\u8005\u30c4\u30fc\u30eb\u3068IDE\u306e\u30c7\u30d0\u30c3\u30ac\u3092\u4f75\u7528\u3057\u3066\u3001\u52b9\u7387\u7684\u306b\u30d0\u30b0\u3092\u7279\u5b9a\u30fb\u4fee\u6b63\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u751f\u6210\u30c4\u30fc\u30eb\u306e\u5229\u7528\uff1a\n<ul class=\"wp-block-list\">\n<li>Lombok\u306a\u3069\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u3001\u30dc\u30a4\u30e9\u30fc\u30d7\u30ec\u30fc\u30c8\u30b3\u30fc\u30c9\u3092\u524a\u6e1b\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-11\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u4f9d\u5b58\u95a2\u4fc2\u306e\u7af6\u5408\u89e3\u6c7a\uff1a\n<ul class=\"wp-block-list\">\n<li><code>mvn dependency:tree<\/code> \u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u4f9d\u5b58\u95a2\u4fc2\u3092\u78ba\u8a8d\u3057\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u6392\u9664\u8a2d\u5b9a\u3092\u884c\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30dd\u30fc\u30c8\u7af6\u5408\u306e\u89e3\u6c7a\uff1a\n<ul class=\"wp-block-list\">\n<li><code>application.properties<\/code> \u30d5\u30a1\u30a4\u30eb\u3067 <code>server.port<\/code> \u3092\u5909\u66f4\u3057\u3001\u4f7f\u7528\u53ef\u80fd\u306a\u30dd\u30fc\u30c8\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>CORS\u8a2d\u5b9a\u306e\u8abf\u6574\uff1a\n<ul class=\"wp-block-list\">\n<li>Spring Security\u3067CORS\u8a2d\u5b9a\u3092\u884c\u3044\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089\u306eAPI\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u8a31\u53ef\u3057\u307e\u3059\u3002\u4ee5\u4e0b\u306f\u57fa\u672c\u7684\u306aCORS\u8a2d\u5b9a\u306e\u4f8b\u3067\u3059\uff1a<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   @Configuration\n   public class WebSecurityConfig {\n       @Bean\n       public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {\n           http.cors().and().csrf().disable()\n               \/\/ \u305d\u306e\u4ed6\u306e\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u8a2d\u5b9a\n               ;\n           return http.build();\n       }\n\n       @Bean\n       public CorsConfigurationSource corsConfigurationSource() {\n           CorsConfiguration configuration = new CorsConfiguration();\n           configuration.setAllowedOrigins(Arrays.asList(\"http:\/\/localhost:3000\"));\n           configuration.setAllowedMethods(Arrays.asList(\"GET\", \"POST\", \"PUT\", \"DELETE\", \"OPTIONS\"));\n           configuration.setAllowedHeaders(Arrays.asList(\"*\"));\n           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();\n           source.registerCorsConfiguration(\"\/**\", configuration);\n           return source;\n       }\n   }<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-12\">\u57fa\u672c\u7684\u306a\u52d5\u4f5c\u78ba\u8a8d<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u74b0\u5883\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u5f8c\u3001\u4ee5\u4e0b\u306e\u624b\u9806\u3067\u57fa\u672c\u7684\u306a\u52d5\u4f5c\u78ba\u8a8d\u3092\u884c\u3044\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Spring Boot\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8d77\u52d5\uff1a\n<ul class=\"wp-block-list\">\n<li>IDE\u304b\u3089\u30e1\u30a4\u30f3\u30af\u30e9\u30b9\u3092\u5b9f\u884c\u3059\u308b\u304b\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\uff1a<br><code>.\/mvnw spring-boot:run<\/code><\/li>\n\n\n\n<li><code>http:\/\/localhost:8080<\/code> \u306b\u30a2\u30af\u30bb\u30b9\u3057\u3001Spring Boot\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8d77\u52d5\uff1a\n<ul class=\"wp-block-list\">\n<li>\u30bf\u30fc\u30df\u30ca\u30eb\u3067React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\uff1a<br><code>npm start<\/code><\/li>\n\n\n\n<li><code>http:\/\/localhost:3000<\/code> \u306b\u30a2\u30af\u30bb\u30b9\u3057\u3001React\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u9023\u643a\u30c6\u30b9\u30c8\uff1a<\/li>\n\n\n\n<li>Spring Boot\u306b\u30b7\u30f3\u30d7\u30eb\u306aREST\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3059\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@RestController\n@RequestMapping(\"\/api\")\npublic class TestController {\n    @GetMapping(\"\/hello\")\n    public String hello() {\n        return \"Hello from Spring Boot!\";\n    }\n}<\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304b\u3089\u3001\u3053\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3057\u307e\u3059\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import React, { useEffect, useState } from 'react';\n\nfunction App() {\n  const [message, setMessage] = useState('');\n\n  useEffect(() =&gt; {\n    fetch('http:\/\/localhost:8080\/api\/hello')\n      .then(response =&gt; response.text())\n      .then(data =&gt; setMessage(data));\n  }, []);\n\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;Message from backend: {message}&lt;\/h1&gt;\n    &lt;\/div&gt;\n  );\n}<\/pre>\n\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li>React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u66f4\u65b0\u3057\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0a\u306e\u624b\u9806\u3067\u3001Spring Boot\u3068React\u306e\u57fa\u672c\u7684\u306a\u958b\u767a\u74b0\u5883\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u3001\u52d5\u4f5c\u78ba\u8a8d\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u74b0\u5883\u3092\u30d9\u30fc\u30b9\u306b\u3001\u3088\u308a\u8907\u96d1\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306b\u9032\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Spring Boot\u3092\u4f7f\u7528\u3057\u305f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u958b\u767a\u306e\u8a73\u7d30\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-13\">3. \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u958b\u767a\uff1aSpring Boot\u3067\u5805\u7262\u306aAPI\u3092\u69cb\u7bc9<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Boot\u3092\u4f7f\u7528\u3057\u3066\u5805\u7262\u306a\u30d0\u30c3\u30af\u30a8\u30f3\u30c9API\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\u3092\u3001\u30b9\u30c6\u30c3\u30d7\u30d0\u30a4\u30b9\u30c6\u30c3\u30d7\u3067\u89e3\u8aac\u3057\u307e\u3059\u3002RESTful API\u306e\u8a2d\u8a08\u304b\u3089\u5b9f\u88c5\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u9023\u643a\u3001\u305d\u3057\u3066\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u307e\u3067\u3001\u5305\u62ec\u7684\u306b\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-14\">RESTful API\u306e\u8a2d\u8a08\u3068\u5b9f\u88c5\uff1a\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-15\">\u8a2d\u8a08\u539f\u5247<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30ea\u30bd\u30fc\u30b9\u6307\u5411\u306e\u8a2d\u8a08\n<ul class=\"wp-block-list\">\n<li>URI\u306f\u540d\u8a5e\u3092\u4f7f\u7528\u3057\u3001\u30ea\u30bd\u30fc\u30b9\u3092\u8868\u73fe\u3059\u308b<\/li>\n\n\n\n<li>\u4f8b\uff1a<code>\/users<\/code>, <code>\/products<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u9069\u5207\u306aHTTP\u30e1\u30bd\u30c3\u30c9\u306e\u4f7f\u7528\n<ul class=\"wp-block-list\">\n<li>GET: \u30ea\u30bd\u30fc\u30b9\u306e\u53d6\u5f97<\/li>\n\n\n\n<li>POST: \u65b0\u898f\u30ea\u30bd\u30fc\u30b9\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>PUT: \u30ea\u30bd\u30fc\u30b9\u306e\u66f4\u65b0\uff08\u5168\u4f53\uff09<\/li>\n\n\n\n<li>PATCH: \u30ea\u30bd\u30fc\u30b9\u306e\u90e8\u5206\u66f4\u65b0<\/li>\n\n\n\n<li>DELETE: \u30ea\u30bd\u30fc\u30b9\u306e\u524a\u9664<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u660e\u78ba\u306a\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u547d\u540d\u898f\u5247\n<ul class=\"wp-block-list\">\n<li>\u4e00\u8cab\u6027\u306e\u3042\u308b\u8907\u6570\u5f62\u540d\u8a5e\u3092\u4f7f\u7528<\/li>\n\n\n\n<li>\u4f8b\uff1a<code>\/api\/v1\/users<\/code>, <code>\/api\/v1\/products<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30d0\u30fc\u30b8\u30e7\u30cb\u30f3\u30b0\u6226\u7565\n<ul class=\"wp-block-list\">\n<li>URI\u306b\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u542b\u3081\u308b<\/li>\n\n\n\n<li>\u4f8b\uff1a<code>\/api\/v1\/users<\/code>, <code>\/api\/v2\/users<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3068\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0\u306e\u5b9f\u88c5\n<ul class=\"wp-block-list\">\n<li>\u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u4f7f\u7528<\/li>\n\n\n\n<li>\u4f8b\uff1a<code>\/api\/v1\/products?page=1&amp;size=20&amp;category=electronics<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">Spring Boot\u3067\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@RestController\n@RequestMapping(\"\/api\/v1\/users\")\npublic class UserController {\n\n    @Autowired\n    private UserService userService;\n\n    @GetMapping\n    public ResponseEntity&lt;List&lt;User&gt;&gt; getAllUsers(\n            @RequestParam(defaultValue = \"0\") int page,\n            @RequestParam(defaultValue = \"10\") int size) {\n        List&lt;User&gt; users = userService.getAllUsers(page, size);\n        return ResponseEntity.ok(users);\n    }\n\n    @GetMapping(\"\/{id}\")\n    public ResponseEntity&lt;User&gt; getUserById(@PathVariable Long id) {\n        return userService.getUserById(id)\n                .map(ResponseEntity::ok)\n                .orElse(ResponseEntity.notFound().build());\n    }\n\n    @PostMapping\n    public ResponseEntity&lt;User&gt; createUser(@Valid @RequestBody User user) {\n        User createdUser = userService.createUser(user);\n        return ResponseEntity.created(URI.create(\"\/api\/v1\/users\/\" + createdUser.getId()))\n                .body(createdUser);\n    }\n\n    @PutMapping(\"\/{id}\")\n    public ResponseEntity&lt;User&gt; updateUser(@PathVariable Long id, @Valid @RequestBody User user) {\n        return userService.updateUser(id, user)\n                .map(ResponseEntity::ok)\n                .orElse(ResponseEntity.notFound().build());\n    }\n\n    @DeleteMapping(\"\/{id}\")\n    public ResponseEntity&lt;Void&gt; deleteUser(@PathVariable Long id) {\n        if (userService.deleteUser(id)) {\n            return ResponseEntity.noContent().build();\n        }\n        return ResponseEntity.notFound().build();\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-17\">\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u9023\u643a\uff1aJPA\/Hibernate\u306e\u6d3b\u7528<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Data JPA\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u64cd\u4f5c\u3092\u7c21\u7d20\u5316\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u306e\u5b9a\u7fa9<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@Entity\n@Table(name = \"users\")\npublic class User {\n    @Id\n    @GeneratedValue(strategy = GenerationType.IDENTITY)\n    private Long id;\n\n    @Column(nullable = false)\n    private String username;\n\n    @Column(nullable = false)\n    private String email;\n\n    \/\/ getters, setters, etc.\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-19\">\u30ea\u30dd\u30b8\u30c8\u30ea\u306e\u4f5c\u6210<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public interface UserRepository extends JpaRepository&lt;User, Long&gt; {\n    Optional&lt;User&gt; findByUsername(String username);\n\n    @Query(\"SELECT u FROM User u WHERE u.email LIKE %:email%\")\n    List&lt;User&gt; findByEmailContaining(@Param(\"email\") String email);\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-20\">\u30b5\u30fc\u30d3\u30b9\u30ec\u30a4\u30e4\u30fc\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@Service\npublic class UserService {\n    @Autowired\n    private UserRepository userRepository;\n\n    @Transactional(readOnly = true)\n    public List&lt;User&gt; getAllUsers(int page, int size) {\n        Pageable pageable = PageRequest.of(page, size);\n        return userRepository.findAll(pageable).getContent();\n    }\n\n    @Transactional\n    public User createUser(User user) {\n        return userRepository.save(user);\n    }\n\n    \/\/ \u305d\u306e\u4ed6\u306e\u30e1\u30bd\u30c3\u30c9\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-21\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\uff1aSpring Security\u306e\u5c0e\u5165<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Security\u3092\u4f7f\u7528\u3057\u3066\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3092\u5f37\u5316\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-22\">\u57fa\u672c\u8a2d\u5b9a<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@Configuration\n@EnableWebSecurity\npublic class SecurityConfig extends WebSecurityConfigurerAdapter {\n\n    @Autowired\n    private UserDetailsService userDetailsService;\n\n    @Override\n    protected void configure(HttpSecurity http) throws Exception {\n        http\n            .csrf().disable()\n            .authorizeRequests()\n                .antMatchers(\"\/api\/v1\/public\/**\").permitAll()\n                .antMatchers(\"\/api\/v1\/admin\/**\").hasRole(\"ADMIN\")\n                .anyRequest().authenticated()\n            .and()\n            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)\n            .and()\n            .addFilter(new JwtAuthenticationFilter(authenticationManager()))\n            .addFilter(new JwtAuthorizationFilter(authenticationManager()));\n    }\n\n    @Override\n    public void configure(AuthenticationManagerBuilder auth) throws Exception {\n        auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());\n    }\n\n    @Bean\n    public PasswordEncoder passwordEncoder() {\n        return new BCryptPasswordEncoder();\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-23\">JWT\u8a8d\u8a3c\u306e\u5b9f\u88c5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JWT\uff08JSON Web Token\uff09\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b9\u30c6\u30fc\u30c8\u30ec\u30b9\u306a\u8a8d\u8a3c\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public class JwtAuthenticationFilter extends UsernamePasswordAuthenticationFilter {\n\n    private final AuthenticationManager authenticationManager;\n\n    public JwtAuthenticationFilter(AuthenticationManager authenticationManager) {\n        this.authenticationManager = authenticationManager;\n        setFilterProcessesUrl(\"\/api\/v1\/login\"); \/\/ \u30ab\u30b9\u30bf\u30e0\u30ed\u30b0\u30a4\u30f3\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\n    }\n\n    @Override\n    public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException {\n        try {\n            User user = new ObjectMapper().readValue(request.getInputStream(), User.class);\n            return authenticationManager.authenticate(\n                new UsernamePasswordAuthenticationToken(user.getUsername(), user.getPassword(), new ArrayList&lt;&gt;())\n            );\n        } catch (IOException e) {\n            throw new RuntimeException(e);\n        }\n    }\n\n    @Override\n    protected void successfulAuthentication(HttpServletRequest request, HttpServletResponse response, FilterChain chain, Authentication authResult) throws IOException, ServletException {\n        String token = JWT.create()\n                .withSubject(((org.springframework.security.core.userdetails.User) authResult.getPrincipal()).getUsername())\n                .withExpiresAt(new Date(System.currentTimeMillis() + 864000000)) \/\/ 10 days\n                .sign(Algorithm.HMAC512(\"secret\".getBytes()));\n        response.addHeader(\"Authorization\", \"Bearer \" + token);\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-24\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u306e\u6700\u9069\u5316<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30ad\u30e3\u30c3\u30b7\u30f3\u30b0<br>Spring Boot\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u6a5f\u80fd\u3092\u6d3b\u7528\u3057\u3066\u3001\u983b\u7e41\u306b\u30a2\u30af\u30bb\u30b9\u3055\u308c\u308b\u30c7\u30fc\u30bf\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   @Configuration\n   @EnableCaching\n   public class CacheConfig {\n       @Bean\n       public CacheManager cacheManager() {\n           return new ConcurrentMapCacheManager(\"users\");\n       }\n   }\n\n   @Service\n   public class UserService {\n       @Cacheable(\"users\")\n       public User getUserById(Long id) {\n           \/\/ \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304b\u3089\u30e6\u30fc\u30b6\u30fc\u3092\u53d6\u5f97\n       }\n   }<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u975e\u540c\u671f\u51e6\u7406<br>@Async\u30a2\u30ce\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u3066\u3001\u9577\u6642\u9593\u5b9f\u884c\u3055\u308c\u308b\u51e6\u7406\u3092\u975e\u540c\u671f\u3067\u5b9f\u884c\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   @Configuration\n   @EnableAsync\n   public class AsyncConfig {}\n\n   @Service\n   public class EmailService {\n       @Async\n       public CompletableFuture&lt;Void&gt; sendEmail(String to, String subject, String content) {\n           \/\/ \u30e1\u30fc\u30eb\u9001\u4fe1\u30ed\u30b8\u30c3\u30af\n           return CompletableFuture.completedFuture(null);\n       }\n   }<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u6700\u9069\u5316\n<ul class=\"wp-block-list\">\n<li>\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u306e\u9069\u5207\u306a\u4f7f\u7528<\/li>\n\n\n\n<li>N+1\u554f\u984c\u306e\u56de\u907f\uff08Eager Loading\u3084JPQL Join\u306e\u6d3b\u7528\uff09<\/li>\n\n\n\n<li>\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u88c5<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-25\">API\u6587\u66f8\u5316<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Swagger\/OpenAPI\u3092\u4f7f\u7528\u3057\u3066\u3001API\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u81ea\u52d5\u751f\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@Configuration\n@EnableSwagger2\npublic class SwaggerConfig {\n    @Bean\n    public Docket api() {\n        return new Docket(DocumentationType.SWAGGER_2)\n                .select()\n                .apis(RequestHandlerSelectors.basePackage(\"com.example.controller\"))\n                .paths(PathSelectors.any())\n                .build()\n                .apiInfo(apiInfo());\n    }\n\n    private ApiInfo apiInfo() {\n        return new ApiInfoBuilder()\n                .title(\"My API\")\n                .description(\"API description\")\n                .version(\"1.0.0\")\n                .build();\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306bSwagger\u30a2\u30ce\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u8ffd\u52a0\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@RestController\n@RequestMapping(\"\/api\/v1\/users\")\n@Api(tags = \"User Management\")\npublic class UserController {\n    @GetMapping\n    @ApiOperation(\"Get all users\")\n    public ResponseEntity&lt;List&lt;User&gt;&gt; getAllUsers() {\n        \/\/ \u5b9f\u88c5\n    }\n\n    \/\/ \u4ed6\u306e\u30e1\u30bd\u30c3\u30c9\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Boot\u3092\u4f7f\u7528\u3057\u3066\u5805\u7262\u306a\u30d0\u30c3\u30af\u30a8\u30f3\u30c9API\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\u3092\u5b66\u3073\u307e\u3057\u305f\u3002RESTful API\u306e\u8a2d\u8a08\u539f\u5247\u3001JPA\/Hibernate\u3092\u4f7f\u7528\u3057\u305f\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u9023\u643a\u3001Spring Security\u306b\u3088\u308b\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3001\u305d\u3057\u3066API\u6587\u66f8\u5316\u307e\u3067\u3001\u5305\u62ec\u7684\u306b\u89e3\u8aac\u3057\u307e\u3057\u305f\u3002\u3053\u308c\u3089\u306e\u77e5\u8b58\u3068\u30c6\u30af\u30cb\u30c3\u30af\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u3067\u5b89\u5168\u306a\u3001\u305d\u3057\u3066\u958b\u767a\u8005\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u306a\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30b7\u30b9\u30c6\u30e0\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001React\u3092\u4f7f\u7528\u3057\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-26\">4. \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\uff1aReact\u3067\u76f4\u611f\u7684\u306aUI\u3092\u4f5c\u6210<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">React\u3092\u4f7f\u7528\u3057\u3066\u76f4\u611f\u7684\u306a\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5\u3092\u3001\u4e3b\u8981\u306a\u5074\u9762\u306b\u7126\u70b9\u3092\u5f53\u3066\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8a2d\u8a08\u3001\u72b6\u614b\u7ba1\u7406\u3001\u305d\u3057\u3066API\u3068\u306e\u901a\u4fe1\u306b\u3064\u3044\u3066\u3001\u5b9f\u8df5\u7684\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u3068\u5177\u4f53\u7684\u306a\u5b9f\u88c5\u4f8b\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-27\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8a2d\u8a08\uff1a\u518d\u5229\u7528\u6027\u3068\u4fdd\u5b88\u6027\u306e\u5411\u4e0a<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React\u306e\u5f37\u307f\u306e\u4e00\u3064\u306f\u3001\u518d\u5229\u7528\u53ef\u80fd\u3067\u4fdd\u5b88\u6027\u306e\u9ad8\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3067\u304d\u308b\u3053\u3068\u3067\u3059\u3002\u4ee5\u4e0b\u306e\u539f\u5247\u306b\u5f93\u3063\u3066\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8a2d\u8a08\u3059\u308b\u3053\u3068\u3067\u3001\u52b9\u7387\u7684\u3067\u62e1\u5f35\u6027\u306e\u9ad8\u3044UI\u3092\u69cb\u7bc9\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-28\">1. \u5358\u4e00\u8cac\u4efb\u306e\u539f\u5247<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u4e00\u3064\u306e\u8cac\u4efb\u306e\u307f\u3092\u6301\u3064\u3088\u3046\u306b\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30b3\u30fc\u30c9\u306e\u7406\u89e3\u3001\u30c6\u30b9\u30c8\u3001\u4fdd\u5b88\u304c\u5bb9\u6613\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u60aa\u3044\u4f8b\uff1a\u8907\u6570\u306e\u8cac\u4efb\u3092\u6301\u3064\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst UserProfile = ({ user }) =&gt; (\n  &lt;div&gt;\n    &lt;h2&gt;{user.name}&lt;\/h2&gt;\n    &lt;p&gt;{user.email}&lt;\/p&gt;\n    &lt;ul&gt;\n      {user.posts.map(post =&gt; &lt;li key={post.id}&gt;{post.title}&lt;\/li&gt;)}\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n);\n\n\/\/ \u826f\u3044\u4f8b\uff1a\u8cac\u4efb\u3092\u5206\u5272\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst UserInfo = ({ name, email }) =&gt; (\n  &lt;div&gt;\n    &lt;h2&gt;{name}&lt;\/h2&gt;\n    &lt;p&gt;{email}&lt;\/p&gt;\n  &lt;\/div&gt;\n);\n\nconst UserPosts = ({ posts }) =&gt; (\n  &lt;ul&gt;\n    {posts.map(post =&gt; &lt;li key={post.id}&gt;{post.title}&lt;\/li&gt;)}\n  &lt;\/ul&gt;\n);\nconst UserProfile = ({ user }) =&gt; (\n  &lt;div&gt;\n    &lt;UserInfo name={user.name} email={user.email} \/&gt;\n    &lt;UserPosts posts={user.posts} \/&gt;\n  &lt;\/div&gt;\n);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-29\">2. \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u518d\u5229\u7528\u6027<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u6c4e\u7528\u7684\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u3067\u518d\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const Button = ({ onClick, children, variant = 'primary' }) =&gt; (\n  &lt;button \n    onClick={onClick} \n    className={`btn btn-${variant}`}\n  &gt;\n    {children}\n  &lt;\/button&gt;\n);\n\n\/\/ \u4f7f\u7528\u4f8b\n&lt;Button onClick={handleSubmit}&gt;\u9001\u4fe1&lt;\/Button&gt;\n&lt;Button variant=\"secondary\" onClick={handleCancel}&gt;\u30ad\u30e3\u30f3\u30bb\u30eb&lt;\/Button&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-30\">3. Props \u3068\u72b6\u614b\u306e\u9069\u5207\u306a\u4f7f\u7528<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Props\u306f\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u53d6\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u3001\u72b6\u614b\uff08state\uff09\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067\u5909\u66f4\u3055\u308c\u308b\u30c7\u30fc\u30bf\u3092\u7ba1\u7406\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const Counter = ({ initialCount }) =&gt; {\n  const [count, setCount] = useState(initialCount);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;Count: {count}&lt;\/p&gt;\n      &lt;Button onClick={() =&gt; setCount(count + 1)}&gt;\u5897\u52a0&lt;\/Button&gt;\n    &lt;\/div&gt;\n  );\n};<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-31\">\u72b6\u614b\u7ba1\u7406\uff1aRedux vs. Context API\u306e\u6bd4\u8f03\u3068\u4f7f\u3044\u5206\u3051<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u72b6\u614b\u7ba1\u7406\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8907\u96d1\u3055\u304c\u5897\u3059\u306b\u3064\u308c\u3066\u91cd\u8981\u306b\u306a\u308a\u307e\u3059\u3002Redux\u3068Context API\u306f\u3001\u4e21\u65b9\u3068\u3082\u72b6\u614b\u7ba1\u7406\u306e\u305f\u3081\u306e\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u3067\u3059\u304c\u3001\u305d\u308c\u305e\u308c\u7570\u306a\u308b\u7279\u5fb4\u3068\u4f7f\u7528\u30b7\u30ca\u30ea\u30aa\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-32\">Redux<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Redux \u306f\u4e2d\u592e\u96c6\u4e2d\u578b\u306e\u72b6\u614b\u7ba1\u7406\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3067\u3001\u5927\u898f\u6a21\u3067\u8907\u96d1\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7279\u5fb4\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e88\u6e2c\u53ef\u80fd\u306a\u72b6\u614b\u66f4\u65b0<\/li>\n\n\n\n<li>\u5f37\u529b\u306a\u958b\u767a\u8005\u30c4\u30fc\u30eb\u3068\u30c7\u30d0\u30c3\u30b0\u30b5\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li>\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u306b\u3088\u308b\u62e1\u5f35\u6027<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30a2\u30af\u30b7\u30e7\u30f3\nconst increment = () =&gt; ({ type: 'INCREMENT' });\n\n\/\/ \u30ea\u30c7\u30e5\u30fc\u30b5\u30fc\nconst counterReducer = (state = 0, action) =&gt; {\n  switch (action.type) {\n    case 'INCREMENT':\n      return state + 1;\n    default:\n      return state;\n  }\n};\n\n\/\/ \u30b9\u30c8\u30a2\nconst store = createStore(counterReducer);\n\n\/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst Counter = () =&gt; {\n  const count = useSelector(state =&gt; state);\n  const dispatch = useDispatch();\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;Count: {count}&lt;\/p&gt;\n      &lt;Button onClick={() =&gt; dispatch(increment())}&gt;\u5897\u52a0&lt;\/Button&gt;\n    &lt;\/div&gt;\n  );\n};<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-33\">Context API<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Context API\u306f\u3001React\u7d44\u307f\u8fbc\u307f\u306e\u8efd\u91cf\u306a\u72b6\u614b\u7ba1\u7406\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3067\u3001\u4e2d\u5c0f\u898f\u6a21\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3084\u3001\u9650\u5b9a\u7684\u306a\u7bc4\u56f2\u3067\u306e\u72b6\u614b\u5171\u6709\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u7279\u5fb4\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React\u306e\u30cd\u30a4\u30c6\u30a3\u30d6\u6a5f\u80fd<\/li>\n\n\n\n<li>\u30d7\u30ed\u30c3\u30d7\u30c9\u30ea\u30ea\u30f3\u30b0\u306e\u56de\u907f<\/li>\n\n\n\n<li>Hooks\u3068\u306e\u76f8\u6027\u306e\u826f\u3055<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528\u4f8b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Context\u306e\u4f5c\u6210\nconst CounterContext = createContext();\n\n\/\/ Provider\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst CounterProvider = ({ children }) =&gt; {\n  const [count, setCount] = useState(0);\n  const increment = () =&gt; setCount(count + 1);\n\n  return (\n    &lt;CounterContext.Provider value={{ count, increment }}&gt;\n      {children}\n    &lt;\/CounterContext.Provider&gt;\n  );\n};\n\n\/\/ \u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst Counter = () =&gt; {\n  const { count, increment } = useContext(CounterContext);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;Count: {count}&lt;\/p&gt;\n      &lt;Button onClick={increment}&gt;\u5897\u52a0&lt;\/Button&gt;\n    &lt;\/div&gt;\n  );\n};<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-34\">\u4f7f\u3044\u5206\u3051<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u898f\u6a21\u3068\u8907\u96d1\u3055\uff1a\u5927\u898f\u6a21\u3067\u8907\u96d1\u306a\u5834\u5408\u306fRedux\u3001\u4e2d\u5c0f\u898f\u6a21\u3067\u306fContext API<\/li>\n\n\n\n<li>\u30c1\u30fc\u30e0\u306e\u7d4c\u9a13\uff1aRedux\u306b\u6163\u308c\u3066\u3044\u308b\u30c1\u30fc\u30e0\u306fRedux\u3001React\u65b0\u3057\u3044\u30c1\u30fc\u30e0\u306fContext API\u304b\u3089\u59cb\u3081\u308b<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8981\u4ef6\uff1a\u983b\u7e41\u306a\u66f4\u65b0\u304c\u5fc5\u8981\u306a\u5834\u5408\u306fRedux<\/li>\n\n\n\n<li>\u5c06\u6765\u306e\u62e1\u5f35\u6027\uff1a\u5927\u304d\u306a\u6210\u9577\u304c\u898b\u8fbc\u307e\u308c\u308b\u5834\u5408\u306fRedux<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-35\">API\u3068\u306e\u901a\u4fe1\uff1aAxios\u3092\u4f7f\u7528\u3057\u305f\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Axios\u306f\u3001\u30d7\u30ed\u30df\u30b9\u30d9\u30fc\u30b9\u306eHTTP\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3067\u3001React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306e\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1\u306b\u5e83\u304f\u4f7f\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-36\">\u57fa\u672c\u7684\u306a\u4f7f\u7528\u65b9\u6cd5<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import axios from 'axios';\n\nconst fetchUsers = async () =&gt; {\n  try {\n    const response = await axios.get('https:\/\/api.example.com\/users');\n    return response.data;\n  } catch (error) {\n    console.error('Error fetching users:', error);\n    throw error;\n  }\n};<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-37\">\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u305f\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u3067\u3001\u30c7\u30fc\u30bf\u30d5\u30a7\u30c3\u30c1\u306e\u30ed\u30b8\u30c3\u30af\u3092\u518d\u5229\u7528\u53ef\u80fd\u306b\u3057\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30b7\u30f3\u30d7\u30eb\u306b\u4fdd\u3064\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const useDataFetching = (url) =&gt; {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() =&gt; {\n    const fetchData = async () =&gt; {\n      try {\n        const response = await axios.get(url);\n        setData(response.data);\n      } catch (error) {\n        setError(error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchData();\n  }, [url]);\n\n  return { data, loading, error };\n};\n\n\/\/ \u4f7f\u7528\u4f8b\nconst UserList = () =&gt; {\n  const { data: users, loading, error } = useDataFetching('https:\/\/api.example.com\/users');\n\n  if (loading) return &lt;p&gt;Loading...&lt;\/p&gt;;\n  if (error) return &lt;p&gt;Error: {error.message}&lt;\/p&gt;;\n\n  return (\n    &lt;ul&gt;\n      {users.map(user =&gt; &lt;li key={user.id}&gt;{user.name}&lt;\/li&gt;)}\n    &lt;\/ul&gt;\n  );\n};<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-38\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u6700\u9069\u5316\u3059\u308b\u305f\u3081\u306e\u3044\u304f\u3064\u304b\u306e\u30c6\u30af\u30cb\u30c3\u30af\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>React.memo()<\/code> \u306e\u4f7f\u7528 \u7d14\u7c8b\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30e1\u30e2\u5316\u3057\u3066\u3001\u4e0d\u5fc5\u8981\u306a\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u9632\u304e\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const MemoizedComponent = React.memo(({ value }) =&gt; {\n  return &lt;div&gt;{value}&lt;\/div&gt;;\n});<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><code>useMemo<\/code> \u3068 <code>useCallback<\/code> \u30d5\u30c3\u30af\u306e\u6d3b\u7528 \u8a08\u7b97\u30b3\u30b9\u30c8\u306e\u9ad8\u3044\u51e6\u7406\u3084\u3001\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6e21\u3059\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u30e1\u30e2\u5316\u3057\u307e\u3059\u3002 <\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const memoizedValue = useMemo(() =&gt; computeExpensiveValue(a, b), [a, b]);\nconst memoizedCallback = useCallback(() =&gt; doSomething(a, b), [a, b]);<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u4eee\u60f3\u5316\u30ea\u30b9\u30c8\u306e\u5b9f\u88c5<br>\u5927\u91cf\u306e\u30c7\u30fc\u30bf\u3092\u6271\u3046\u5834\u5408\u3001\u4eee\u60f3\u5316\u30ea\u30b9\u30c8\u3092\u4f7f\u7528\u3057\u3066\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { FixedSizeList } from 'react-window';\n\nconst VirtualList = ({ items }) =&gt; (\n  &lt;FixedSizeList\n    height={400}\n    width={300}\n    itemSize={50}\n    itemCount={items.length}\n  &gt;\n    {({ index, style }) =&gt; (\n      &lt;div style={style}&gt;{items[index]}&lt;\/div&gt;\n    )}\n  &lt;\/FixedSizeList&gt;\n);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u30c6\u30af\u30cb\u30c3\u30af\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u9ad8\u3044\u3001\u76f4\u611f\u7684\u306aReact\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Spring Boot\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068React\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u7d71\u5408\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-39\">5. \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u7d71\u5408\uff1a\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u9023\u643a\u3092\u5b9f\u73fe<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Boot\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068React\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092\u7d71\u5408\u3059\u308b\u969b\u306e\u4e3b\u8981\u306a\u8ab2\u984c\u3068\u3001\u305d\u308c\u3089\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306e\u5b9f\u8df5\u7684\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002CORS\u306e\u8a2d\u5b9a\u3001JWT\u8a8d\u8a3c\u306e\u5b9f\u88c5\u3001\u305d\u3057\u3066\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-40\">CORS\u306e\u8a2d\u5b9a\uff1a\u30bb\u30ad\u30e5\u30a2\u306a\u901a\u4fe1\u306e\u78ba\u7acb<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cross-Origin Resource Sharing\uff08CORS\uff09\u306f\u3001\u7570\u306a\u308b\u30aa\u30ea\u30b8\u30f3\u9593\u3067\u306e\u30ea\u30bd\u30fc\u30b9\u5171\u6709\u3092\u5236\u5fa1\u3059\u308b\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30e1\u30ab\u30cb\u30ba\u30e0\u3067\u3059\u3002Spring Boot\u3068React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u7570\u306a\u308b\u30c9\u30e1\u30a4\u30f3\u307e\u305f\u306f\u30dd\u30fc\u30c8\u3067\u30db\u30b9\u30c8\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u3001CORS\u3092\u9069\u5207\u306b\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-41\">Spring Boot\u3067\u306eCORS\u8a2d\u5b9a<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b0\u30ed\u30fc\u30d0\u30eb\u8a2d\u5b9a\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@Configuration\npublic class CorsConfig implements WebMvcConfigurer {\n    @Override\n    public void addCorsMappings(CorsRegistry registry) {\n        registry.addMapping(\"\/api\/**\")\n            .allowedOrigins(\"http:\/\/localhost:3000\")\n            .allowedMethods(\"GET\", \"POST\", \"PUT\", \"DELETE\")\n            .allowedHeaders(\"*\")\n            .allowCredentials(true);\n    }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u7279\u5b9a\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3084\u30e1\u30bd\u30c3\u30c9\u306b\u5bfe\u3059\u308b\u8a2d\u5b9a\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@RestController\n@RequestMapping(\"\/api\/users\")\npublic class UserController {\n    @CrossOrigin(origins = \"http:\/\/localhost:3000\")\n    @GetMapping\n    public List&lt;User&gt; getAllUsers() {\n        \/\/ \u5b9f\u88c5\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-42\">React\u3067\u306eCORS\u5bfe\u5fdc<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u958b\u767a\u74b0\u5883\u3067\u306f\u3001<code>package.json<\/code>\u306b\u30d7\u30ed\u30ad\u30b7\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3067\u3001CORS\u306e\u554f\u984c\u3092\u56de\u907f\u3067\u304d\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n  \"name\": \"my-app\",\n  \"version\": \"0.1.0\",\n  \"proxy\": \"http:\/\/localhost:8080\"\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u8a2d\u5b9a\u306b\u3088\u308a\u3001React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304b\u3089\u306e API \u30ea\u30af\u30a8\u30b9\u30c8\u306f\u81ea\u52d5\u7684\u306b\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30b5\u30fc\u30d0\u30fc\u306b\u8ee2\u9001\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-43\">\u8a8d\u8a3c\u3068\u8a8d\u53ef\uff1aJWT\u3092\u4f7f\u7528\u3057\u305f\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JSON Web Token\uff08JWT\uff09\u3092\u4f7f\u7528\u3057\u305f\u8a8d\u8a3c\u30b7\u30b9\u30c6\u30e0\u306f\u3001\u30b9\u30c6\u30fc\u30c8\u30ec\u30b9\u3067\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a\u65b9\u6cd5\u3067\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-44\">Spring Security\u3067\u306eJWT\u5b9f\u88c5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>JWT\u751f\u6210\u3068\u691c\u8a3c\u7528\u306e\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u30af\u30e9\u30b9\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@Component\npublic class JwtTokenUtil {\n    @Value(\"${jwt.secret}\")\n    private String secret;\n\n    @Value(\"${jwt.expiration}\")\n    private Long expiration;\n\n    public String generateToken(UserDetails userDetails) {\n        Map&lt;String, Object&gt; claims = new HashMap&lt;&gt;();\n        return Jwts.builder()\n            .setClaims(claims)\n            .setSubject(userDetails.getUsername())\n            .setIssuedAt(new Date(System.currentTimeMillis()))\n            .setExpiration(new Date(System.currentTimeMillis() + expiration * 1000))\n            .signWith(SignatureAlgorithm.HS512, secret)\n            .compact();\n    }\n\n    public Boolean validateToken(String token, UserDetails userDetails) {\n        final String username = getUsernameFromToken(token);\n        return (username.equals(userDetails.getUsername()) &amp;&amp; !isTokenExpired(token));\n    }\n\n    \/\/ \u305d\u306e\u4ed6\u306e\u5fc5\u8981\u306a\u30e1\u30bd\u30c3\u30c9\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>JWT\u30ea\u30af\u30a8\u30b9\u30c8\u30d5\u30a3\u30eb\u30bf\u30fc\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@Component\npublic class JwtRequestFilter extends OncePerRequestFilter {\n    @Autowired\n    private JwtTokenUtil jwtTokenUtil;\n\n    @Autowired\n    private UserDetailsService userDetailsService;\n\n    @Override\n    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain)\n            throws ServletException, IOException {\n        final String requestTokenHeader = request.getHeader(\"Authorization\");\n\n        String username = null;\n        String jwtToken = null;\n\n        if (requestTokenHeader != null &amp;&amp; requestTokenHeader.startsWith(\"Bearer \")) {\n            jwtToken = requestTokenHeader.substring(7);\n            try {\n                username = jwtTokenUtil.getUsernameFromToken(jwtToken);\n            } catch (IllegalArgumentException e) {\n                logger.error(\"Unable to get JWT Token\");\n            } catch (ExpiredJwtException e) {\n                logger.error(\"JWT Token has expired\");\n            }\n        }\n\n        if (username != null &amp;&amp; SecurityContextHolder.getContext().getAuthentication() == null) {\n            UserDetails userDetails = this.userDetailsService.loadUserByUsername(username);\n\n            if (jwtTokenUtil.validateToken(jwtToken, userDetails)) {\n                UsernamePasswordAuthenticationToken usernamePasswordAuthenticationToken = new UsernamePasswordAuthenticationToken(\n                        userDetails, null, userDetails.getAuthorities());\n                usernamePasswordAuthenticationToken\n                        .setDetails(new WebAuthenticationDetailsSource().buildDetails(request));\n                SecurityContextHolder.getContext().setAuthentication(usernamePasswordAuthenticationToken);\n            }\n        }\n        chain.doFilter(request, response);\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-45\">React\u3067\u306eJWT\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30ed\u30b0\u30a4\u30f3\u6642\u306eJWT\u53d6\u5f97\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const login = async (username, password) =&gt; {\n  try {\n    const response = await axios.post('\/api\/auth\/login', { username, password });\n    const { token } = response.data;\n    localStorage.setItem('token', token);\n    setAuthHeader(token);\n    return true;\n  } catch (error) {\n    console.error('Login failed:', error);\n    return false;\n  }\n};<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Axios\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u305f\u81ea\u52d5\u30c8\u30fc\u30af\u30f3\u6dfb\u4ed8\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import axios from 'axios';\n\nconst setAuthHeader = (token) =&gt; {\n  if (token) {\n    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;\n  } else {\n    delete axios.defaults.headers.common['Authorization'];\n  }\n};\n\n\/\/ \u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u306e\u8a2d\u5b9a\naxios.interceptors.response.use(\n  (response) =&gt; response,\n  async (error) =&gt; {\n    if (error.response.status === 401) {\n      \/\/ \u30c8\u30fc\u30af\u30f3\u306e\u6709\u52b9\u671f\u9650\u5207\u308c\u306a\u3069\u306e\u51e6\u7406\n      localStorage.removeItem('token');\n      setAuthHeader(null);\n      \/\/ \u30ed\u30b0\u30a4\u30f3\u753b\u9762\u3078\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\n    }\n    return Promise.reject(error);\n  }\n);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-46\">\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\uff1a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30a8\u30e9\u30fc\u306e\u9069\u5207\u306a\u51e6\u7406<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u52b9\u679c\u7684\u306a\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u3001\u30c7\u30d0\u30c3\u30b0\u3092\u5bb9\u6613\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-47\">\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3067\u306e\u4e00\u8cab\u3057\u305f\u30a8\u30e9\u30fc\u30ec\u30b9\u30dd\u30f3\u30b9<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@ControllerAdvice\npublic class GlobalExceptionHandler {\n    @ExceptionHandler(Exception.class)\n    public ResponseEntity&lt;ErrorResponse&gt; handleGlobalException(Exception ex, WebRequest request) {\n        ErrorResponse errorResponse = new ErrorResponse(\n            HttpStatus.INTERNAL_SERVER_ERROR.value(),\n            ex.getMessage(),\n            request.getDescription(false)\n        );\n        return new ResponseEntity&lt;&gt;(errorResponse, HttpStatus.INTERNAL_SERVER_ERROR);\n    }\n\n    @ExceptionHandler(ResourceNotFoundException.class)\n    public ResponseEntity&lt;ErrorResponse&gt; handleResourceNotFoundException(ResourceNotFoundException ex, WebRequest request) {\n        ErrorResponse errorResponse = new ErrorResponse(\n            HttpStatus.NOT_FOUND.value(),\n            ex.getMessage(),\n            request.getDescription(false)\n        );\n        return new ResponseEntity&lt;&gt;(errorResponse, HttpStatus.NOT_FOUND);\n    }\n\n    \/\/ \u305d\u306e\u4ed6\u306e\u7279\u5b9a\u306e\u4f8b\u5916\u306b\u5bfe\u3059\u308b\u30cf\u30f3\u30c9\u30e9\u30fc\n}\n\npublic class ErrorResponse {\n    private int status;\n    private String message;\n    private String details;\n\n    \/\/ \u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u3001\u30b2\u30c3\u30bf\u30fc\u3001\u30bb\u30c3\u30bf\u30fc\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-48\">\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u306e\u30b0\u30ed\u30fc\u30d0\u30eb\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Axios\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u3092\u4f7f\u7528\u3057\u3066\u3001\u3059\u3079\u3066\u306eAPI\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u5bfe\u3059\u308b\u30b0\u30ed\u30fc\u30d0\u30eb\u306a\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3092\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import axios from 'axios';\nimport { toast } from 'react-toastify';\n\n\/\/ \u30a8\u30e9\u30fc\u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u51e6\u7406\u3059\u308b\u95a2\u6570\nconst handleErrorResponse = (error) =&gt; {\n  if (error.response) {\n    \/\/ \u30b5\u30fc\u30d0\u30fc\u304b\u3089\u306e\u30ec\u30b9\u30dd\u30f3\u30b9\u304c\u3042\u308b\u5834\u5408\n    const { status, data } = error.response;\n    switch (status) {\n      case 400:\n        toast.error(`\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30a8\u30e9\u30fc: ${data.message}`);\n        break;\n      case 401:\n        toast.error('\u8a8d\u8a3c\u30a8\u30e9\u30fc: \u30bb\u30c3\u30b7\u30e7\u30f3\u304c\u5207\u308c\u307e\u3057\u305f\u3002\u518d\u5ea6\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n        \/\/ \u30ed\u30b0\u30a2\u30a6\u30c8\u51e6\u7406\u3084\u30ed\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\n        break;\n      case 403:\n        toast.error('\u30a2\u30af\u30bb\u30b9\u6a29\u9650\u304c\u3042\u308a\u307e\u305b\u3093\u3002');\n        break;\n      case 404:\n        toast.error(`\u30ea\u30bd\u30fc\u30b9\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093: ${data.message}`);\n        break;\n      case 500:\n        toast.error('\u30b5\u30fc\u30d0\u30fc\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002\u3057\u3070\u3089\u304f\u7d4c\u3063\u3066\u304b\u3089\u518d\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002');\n        break;\n      default:\n        toast.error('\u4e88\u671f\u305b\u306c\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002');\n    }\n  } else if (error.request) {\n    \/\/ \u30ea\u30af\u30a8\u30b9\u30c8\u306f\u9001\u4fe1\u3055\u308c\u305f\u304c\u30ec\u30b9\u30dd\u30f3\u30b9\u304c\u306a\u3044\u5834\u5408\n    toast.error('\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u306e\u5fdc\u7b54\u304c\u3042\u308a\u307e\u305b\u3093\u3002\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u63a5\u7d9a\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n  } else {\n    \/\/ \u30ea\u30af\u30a8\u30b9\u30c8\u306e\u8a2d\u5b9a\u6642\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u305f\u5834\u5408\n    toast.error('\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u9001\u4fe1\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002');\n  }\n  return Promise.reject(error);\n};\n\n\/\/ Axios\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\u306e\u8a2d\u5b9a\naxios.interceptors.response.use(\n  (response) =&gt; response,\n  (error) =&gt; handleErrorResponse(error)\n);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u306b\u3088\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u3067\u4e00\u8cab\u3057\u305f\u30a8\u30e9\u30fc\u51e6\u7406\u304c\u53ef\u80fd\u306b\u306a\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u9069\u5207\u306a\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u3092\u63d0\u4f9b\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-49\">\u30e6\u30fc\u30b6\u30fc\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u306a\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u8868\u793a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u8868\u793a\u3059\u308b\u969b\u306f\u3001\u6280\u8853\u7684\u306a\u8a73\u7d30\u3092\u907f\u3051\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u7406\u89e3\u3057\u3084\u3059\u3044\u8a00\u8449\u3067\u8aac\u660e\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002\u307e\u305f\u3001\u53ef\u80fd\u306a\u5834\u5408\u306f\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306e\u5177\u4f53\u7684\u306a\u624b\u9806\u3092\u63d0\u4f9b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import React from 'react';\nimport { Alert, AlertTitle } from '@material-ui\/lab';\n\nconst ErrorMessage = ({ error }) =&gt; {\n  let message = '\u4e88\u671f\u305b\u306c\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002';\n  let action = '\u30da\u30fc\u30b8\u3092\u66f4\u65b0\u3059\u308b\u304b\u3001\u3057\u3070\u3089\u304f\u7d4c\u3063\u3066\u304b\u3089\u518d\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002';\n\n  if (error.response) {\n    switch (error.response.status) {\n      case 400:\n        message = '\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u554f\u984c\u304c\u3042\u308a\u307e\u3059\u3002';\n        action = '\u5165\u529b\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u3001\u518d\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002';\n        break;\n      case 401:\n        message = '\u30a2\u30af\u30bb\u30b9\u6a29\u9650\u304c\u3042\u308a\u307e\u305b\u3093\u3002';\n        action = '\u30ed\u30b0\u30a2\u30a6\u30c8\u3057\u3066\u518d\u5ea6\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u304f\u3060\u3055\u3044\u3002';\n        break;\n      case 404:\n        message = '\u304a\u63a2\u3057\u306e\u60c5\u5831\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002';\n        action = 'URL\u3092\u78ba\u8a8d\u3059\u308b\u304b\u3001\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u304b\u3089\u3084\u308a\u76f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002';\n        break;\n      \/\/ \u4ed6\u306e\u30b1\u30fc\u30b9\n    }\n  }\n\n  return (\n    &lt;Alert severity=\"error\"&gt;\n      &lt;AlertTitle&gt;\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f&lt;\/AlertTitle&gt;\n      {message}&lt;br \/&gt;\n      {action}\n    &lt;\/Alert&gt;\n  );\n};\n\nexport default ErrorMessage;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-50\">\u7d71\u5408\u30c6\u30b9\u30c8\uff1a\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u9023\u643a\u3092\u78ba\u8a8d<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7d71\u5408\u30c6\u30b9\u30c8\u306f\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304c\u6b63\u3057\u304f\u9023\u643a\u3057\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306b\u4e0d\u53ef\u6b20\u3067\u3059\u3002\u4ee5\u4e0b\u306f\u3001Cypress\u3092\u4f7f\u7528\u3057\u305fE2E\u30c6\u30b9\u30c8\u306e\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ cypress\/integration\/login_spec.js\ndescribe('\u30ed\u30b0\u30a4\u30f3\u6a5f\u80fd', () =&gt; {\n  it('\u6b63\u5e38\u306b\u30ed\u30b0\u30a4\u30f3\u3067\u304d\u308b\u3053\u3068', () =&gt; {\n    cy.visit('\/login');\n    cy.get('input[name=username]').type('testuser');\n    cy.get('input[name=password]').type('password123');\n    cy.get('button[type=submit]').click();\n\n    \/\/ \u30ed\u30b0\u30a4\u30f3\u5f8c\u306e\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3092\u78ba\u8a8d\n    cy.url().should('include', '\/dashboard');\n\n    \/\/ \u30ed\u30b0\u30a4\u30f3\u5f8c\u306e\u8868\u793a\u3092\u78ba\u8a8d\n    cy.contains('\u3088\u3046\u3053\u305d\u3001testuser\u69d8').should('be.visible');\n  });\n\n  it('\u7121\u52b9\u306a\u8a8d\u8a3c\u60c5\u5831\u3067\u30ed\u30b0\u30a4\u30f3\u3067\u304d\u306a\u3044\u3053\u3068', () =&gt; {\n    cy.visit('\/login');\n    cy.get('input[name=username]').type('invaliduser');\n    cy.get('input[name=password]').type('invalidpassword');\n    cy.get('button[type=submit]').click();\n\n    \/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u78ba\u8a8d\n    cy.contains('\u30e6\u30fc\u30b6\u30fc\u540d\u307e\u305f\u306f\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u6b63\u3057\u304f\u3042\u308a\u307e\u305b\u3093').should('be.visible');\n\n    \/\/ \u30ed\u30b0\u30a4\u30f3\u30da\u30fc\u30b8\u306b\u7559\u307e\u3063\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\n    cy.url().should('include', '\/login');\n  });\n});<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u30c6\u30b9\u30c8\u30b9\u30a4\u30fc\u30c8\u306f\u3001\u30ed\u30b0\u30a4\u30f3\u6a5f\u80fd\u306e\u6b63\u5e38\u7cfb\u3068\u7570\u5e38\u7cfb\u306e\u4e21\u65b9\u3092\u30ab\u30d0\u30fc\u3057\u3066\u3044\u307e\u3059\u3002CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u3053\u306e\u3088\u3046\u306a\u30c6\u30b9\u30c8\u3092\u7d44\u307f\u8fbc\u3080\u3053\u3068\u3067\u3001\u7d99\u7d9a\u7684\u306b\u7d71\u5408\u306e\u54c1\u8cea\u3092\u78ba\u4fdd\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-51\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u7d71\u5408\u306f\u3001\u30bb\u30ad\u30e5\u30a2\u3067\u52b9\u7387\u7684\u306aWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306e\u9375\u3068\u306a\u308a\u307e\u3059\u3002CORS\u306e\u9069\u5207\u306a\u8a2d\u5b9a\u3001JWT\u3092\u4f7f\u7528\u3057\u305f\u5805\u7262\u306a\u8a8d\u8a3c\u30b7\u30b9\u30c6\u30e0\u306e\u5b9f\u88c5\u3001\u305d\u3057\u3066\u52b9\u679c\u7684\u306a\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306b\u3088\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u3001\u958b\u767a\u8005\u306e\u751f\u7523\u6027\u3092\u9ad8\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u307e\u305f\u3001\u5305\u62ec\u7684\u306a\u7d71\u5408\u30c6\u30b9\u30c8\u3092\u5b9f\u65bd\u3059\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4fe1\u983c\u6027\u3092\u78ba\u4fdd\u3057\u3001\u7d99\u7d9a\u7684\u306a\u6539\u5584\u3092\u652f\u63f4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u5b9f\u8df5\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001Spring Boot\u3068React\u3092\u4f7f\u7528\u3057\u305f\u5805\u7262\u3067\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-52\">6. \u30c6\u30b9\u30c8\u3068\u54c1\u8cea\u4fdd\u8a3c\uff1a\u4fe1\u983c\u6027\u306e\u9ad8\u3044\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u4fe1\u983c\u6027\u306e\u9ad8\u3044\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u5305\u62ec\u7684\u306a\u30c6\u30b9\u30c8\u6226\u7565\u3068\u54c1\u8cea\u4fdd\u8a3c\u30d7\u30ed\u30bb\u30b9\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Spring Boot\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068React\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u4e21\u65b9\u306b\u5bfe\u3059\u308b\u52b9\u679c\u7684\u306a\u30c6\u30b9\u30c8\u624b\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-53\">\u30c6\u30b9\u30c8\u306e\u91cd\u8981\u6027<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c6\u30b9\u30c8\u306f\u4ee5\u4e0b\u306e\u7406\u7531\u304b\u3089\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u306b\u304a\u3044\u3066\u6975\u3081\u3066\u91cd\u8981\u3067\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d0\u30b0\u306e\u65e9\u671f\u767a\u898b\u3068\u4fee\u6b63<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u306e\u54c1\u8cea\u3068\u4fe1\u983c\u6027\u306e\u5411\u4e0a<\/li>\n\n\n\n<li>\u30ea\u30d5\u30a1\u30af\u30bf\u30ea\u30f3\u30b0\u306e\u5b89\u5168\u6027\u78ba\u4fdd<\/li>\n\n\n\n<li>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u3057\u3066\u306e\u5f79\u5272<\/li>\n\n\n\n<li>\u9577\u671f\u7684\u306a\u958b\u767a\u901f\u5ea6\u306e\u5411\u4e0a<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-54\">\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u3068\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-55\">\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Boot\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u306b\u306f\u3001JUnit\u3068Mockito\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import org.junit.jupiter.api.Test;\nimport org.mockito.Mockito;\nimport static org.junit.jupiter.api.Assertions.*;\nimport static org.mockito.Mockito.*;\n\nclass UserServiceTest {\n\n    @Test\n    void testCreateUser() {\n        \/\/ Arrange\n        UserRepository mockRepository = mock(UserRepository.class);\n        User user = new User(\"testuser\", \"test@example.com\");\n        when(mockRepository.save(any(User.class))).thenReturn(user);\n\n        UserService userService = new UserService(mockRepository);\n\n        \/\/ Act\n        User createdUser = userService.createUser(\"testuser\", \"test@example.com\");\n\n        \/\/ Assert\n        assertNotNull(createdUser);\n        assertEquals(\"testuser\", createdUser.getUsername());\n        assertEquals(\"test@example.com\", createdUser.getEmail());\n        verify(mockRepository, times(1)).save(any(User.class));\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-56\">\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30c6\u30b9\u30c8<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Boot\u306e\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30c6\u30b9\u30c8\u3067\u306f\u3001<code>@SpringBootTest<\/code>\u30a2\u30ce\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u3066\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u5168\u4f53\u3092\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import org.junit.jupiter.api.Test;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.boot.test.context.SpringBootTest;\nimport org.springframework.boot.test.web.client.TestRestTemplate;\nimport org.springframework.http.HttpStatus;\nimport org.springframework.http.ResponseEntity;\n\n@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)\nclass UserControllerIntegrationTest {\n\n    @Autowired\n    private TestRestTemplate restTemplate;\n\n    @Test\n    void testCreateUser() {\n        \/\/ Arrange\n        UserDto userDto = new UserDto(\"testuser\", \"test@example.com\");\n\n        \/\/ Act\n        ResponseEntity&lt;User&gt; response = restTemplate.postForEntity(\"\/api\/users\", userDto, User.class);\n\n        \/\/ Assert\n        assertEquals(HttpStatus.CREATED, response.getStatusCode());\n        assertNotNull(response.getBody());\n        assertEquals(\"testuser\", response.getBody().getUsername());\n        assertEquals(\"test@example.com\", response.getBody().getEmail());\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-57\">React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8\uff1aJest\u3068React Testing Library\u306e\u6d3b\u7528<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8\u306b\u306f\u3001Jest\u3068React Testing Library\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import React from 'react';\nimport { render, screen, fireEvent } from '@testing-library\/react';\nimport UserForm from '.\/UserForm';\n\ndescribe('UserForm', () =&gt; {\n  test('renders form elements', () =&gt; {\n    render(&lt;UserForm \/&gt;);\n\n    expect(screen.getByLabelText(\/username\/i)).toBeInTheDocument();\n    expect(screen.getByLabelText(\/email\/i)).toBeInTheDocument();\n    expect(screen.getByRole('button', { name: \/submit\/i })).toBeInTheDocument();\n  });\n\n  test('submits form with user data', () =&gt; {\n    const mockOnSubmit = jest.fn();\n    render(&lt;UserForm onSubmit={mockOnSubmit} \/&gt;);\n\n    fireEvent.change(screen.getByLabelText(\/username\/i), { target: { value: 'testuser' } });\n    fireEvent.change(screen.getByLabelText(\/email\/i), { target: { value: 'test@example.com' } });\n    fireEvent.click(screen.getByRole('button', { name: \/submit\/i }));\n\n    expect(mockOnSubmit).toHaveBeenCalledWith({\n      username: 'testuser',\n      email: 'test@example.com'\n    });\n  });\n});<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-58\">E2E\u30c6\u30b9\u30c8\uff1aSelenium\u3092\u4f7f\u7528\u3057\u305f\u81ea\u52d5\u5316\u30c6\u30b9\u30c8<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Selenium\u3092\u4f7f\u7528\u3057\u305fE2E\u30c6\u30b9\u30c8\u306b\u3088\u308a\u3001\u5b9f\u969b\u306e\u30e6\u30fc\u30b6\u30fc\u306e\u884c\u52d5\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u306e\u52d5\u4f5c\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import org.junit.jupiter.api.AfterEach;\nimport org.junit.jupiter.api.BeforeEach;\nimport org.junit.jupiter.api.Test;\nimport org.openqa.selenium.By;\nimport org.openqa.selenium.WebDriver;\nimport org.openqa.selenium.WebElement;\nimport org.openqa.selenium.chrome.ChromeDriver;\nimport org.openqa.selenium.support.ui.ExpectedConditions;\nimport org.openqa.selenium.support.ui.WebDriverWait;\n\nimport static org.junit.jupiter.api.Assertions.assertEquals;\n\nclass UserRegistrationE2ETest {\n\n    private WebDriver driver;\n\n    @BeforeEach\n    void setUp() {\n        System.setProperty(\"webdriver.chrome.driver\", \"\/path\/to\/chromedriver\");\n        driver = new ChromeDriver();\n    }\n\n    @AfterEach\n    void tearDown() {\n        if (driver != null) {\n            driver.quit();\n        }\n    }\n\n    @Test\n    void testUserRegistration() {\n        driver.get(\"http:\/\/localhost:3000\/register\");\n\n        WebElement usernameInput = driver.findElement(By.id(\"username\"));\n        WebElement emailInput = driver.findElement(By.id(\"email\"));\n        WebElement passwordInput = driver.findElement(By.id(\"password\"));\n        WebElement submitButton = driver.findElement(By.cssSelector(\"button[type='submit']\"));\n\n        usernameInput.sendKeys(\"testuser\");\n        emailInput.sendKeys(\"test@example.com\");\n        passwordInput.sendKeys(\"password123\");\n        submitButton.click();\n\n        WebDriverWait wait = new WebDriverWait(driver, 10);\n        WebElement successMessage = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector(\".success-message\")));\n\n        assertEquals(\"Registration successful!\", successMessage.getText());\n    }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-59\">CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3078\u306e\u30c6\u30b9\u30c8\u7d71\u5408<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c6\u30b9\u30c8\u3092CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u7d71\u5408\u3059\u308b\u3053\u3068\u3067\u3001\u7d99\u7d9a\u7684\u306b\u54c1\u8cea\u3092\u78ba\u4fdd\u3067\u304d\u307e\u3059\u3002\u4ee5\u4e0b\u306f\u3001GitHub Actions\u3092\u4f7f\u7528\u3057\u305f\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">name: CI\/CD Pipeline\n\non: [push, pull_request]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n\n    steps:\n    - uses: actions\/checkout@v2\n\n    - name: Set up JDK 11\n      uses: actions\/setup-java@v2\n      with:\n        java-version: '11'\n        distribution: 'adopt'\n\n    - name: Build and test backend\n      run: |\n        cd backend\n        .\/mvnw clean test\n\n    - name: Set up Node.js\n      uses: actions\/setup-node@v2\n      with:\n        node-version: '14'\n\n    - name: Install frontend dependencies\n      run: |\n        cd frontend\n        npm ci\n\n    - name: Test frontend\n      run: |\n        cd frontend\n        npm test\n\n    - name: Run E2E tests\n      run: |\n        cd e2e\n        npm ci\n        npm run test:e2e<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-60\">\u30b3\u30fc\u30c9\u54c1\u8cea\u306e\u6e2c\u5b9a<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">SonarQube\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b3\u30fc\u30c9\u306e\u54c1\u8cea\u3092\u7d99\u7d9a\u7684\u306b\u6e2c\u5b9a\u3057\u6539\u5584\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">- name: SonarQube analysis\n  run: |\n    cd backend\n    .\/mvnw sonar:sonar \\\n      -Dsonar.projectKey=my-project \\\n      -Dsonar.host.url=http:\/\/sonarqube-server:9000 \\\n      -Dsonar.login=${{ secrets.SONAR_TOKEN }}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-61\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5305\u62ec\u7684\u306a\u30c6\u30b9\u30c8\u6226\u7565\u3092\u5b9f\u88c5\u3057\u3001\u54c1\u8cea\u4fdd\u8a3c\u30d7\u30ed\u30bb\u30b9\u3092\u78ba\u7acb\u3059\u308b\u3053\u3068\u3067\u3001\u4fe1\u983c\u6027\u306e\u9ad8\u3044Spring Boot\u3068React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3067\u304d\u307e\u3059\u3002\u30e6\u30cb\u30c3\u30c8\u30c6\u30b9\u30c8\u3001\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u30c6\u30b9\u30c8\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c6\u30b9\u30c8\u3001E2E\u30c6\u30b9\u30c8\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5404\u5c64\u3092\u7db2\u7f85\u7684\u306b\u30c6\u30b9\u30c8\u3057\u3001\u6f5c\u5728\u7684\u306a\u554f\u984c\u3092\u65e9\u671f\u306b\u767a\u898b\u30fb\u4fee\u6b63\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3055\u3089\u306b\u3001\u3053\u308c\u3089\u306e\u30c6\u30b9\u30c8\u3092CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306b\u7d71\u5408\u3057\u3001\u30b3\u30fc\u30c9\u54c1\u8cea\u3092\u7d99\u7d9a\u7684\u306b\u6e2c\u5b9a\u3059\u308b\u3053\u3068\u3067\u3001\u9577\u671f\u7684\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u6210\u529f\u3068\u4fdd\u5b88\u6027\u306e\u5411\u4e0a\u306b\u3064\u306a\u304c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-62\">7. \u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u3068CI\/CD\uff1a\u7d99\u7d9a\u7684\u306a\u958b\u767a\u3068\u904b\u7528\u306e\u81ea\u52d5\u5316<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">\u30e2\u30c0\u30f3\u306a\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u958b\u767a\u3067\u306f\u3001\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u306e\u81ea\u52d5\u5316\u3068CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u69cb\u7bc9\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001Spring Boot\u3068React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306eDocker\u5316\u3001CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u69cb\u7bc9\u3001\u305d\u3057\u3066\u30af\u30e9\u30a6\u30c9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3078\u306e\u30c7\u30d7\u30ed\u30a4\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-63\">Docker\u5316\uff1a\u30b3\u30f3\u30c6\u30ca\u3092\u4f7f\u7528\u3057\u305f\u74b0\u5883\u306e\u4e00\u8cab\u6027\u78ba\u4fdd<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Docker\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3068\u305d\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u8efd\u91cf\u306a\u30b3\u30f3\u30c6\u30ca\u306b\u30d1\u30c3\u30b1\u30fc\u30b8\u5316\u3057\u3001\u74b0\u5883\u306e\u4e00\u8cab\u6027\u3092\u78ba\u4fdd\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-64\">Spring Boot\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306eDockerfile<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u30d3\u30eb\u30c9\u30b9\u30c6\u30fc\u30b8\nFROM openjdk:11-jdk-slim as build\nWORKDIR \/app\nCOPY mvnw .\nCOPY .mvn .mvn\nCOPY pom.xml .\nCOPY src src\nRUN .\/mvnw package -DskipTests\n\n# \u5b9f\u884c\u30b9\u30c6\u30fc\u30b8\nFROM openjdk:11-jre-slim\nWORKDIR \/app\nCOPY --from=build \/app\/target\/*.jar app.jar\nEXPOSE 8080\nENTRYPOINT [\"java\",\"-jar\",\"app.jar\"]<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-65\">React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306eDockerfile<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u30d3\u30eb\u30c9\u30b9\u30c6\u30fc\u30b8\nFROM node:14 as build\nWORKDIR \/app\nCOPY package*.json .\/\nRUN npm ci\nCOPY . .\nRUN npm run build\n\n# \u5b9f\u884c\u30b9\u30c6\u30fc\u30b8\nFROM nginx:alpine\nCOPY --from=build \/app\/build \/usr\/share\/nginx\/html\nEXPOSE 80\nCMD [\"nginx\", \"-g\", \"daemon off;\"]<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-66\">Docker Compose\u3092\u4f7f\u7528\u3057\u305f\u958b\u767a\u74b0\u5883\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">version: '3'\nservices:\n  backend:\n    build: .\/backend\n    ports:\n      - \"8080:8080\"\n    environment:\n      - SPRING_PROFILES_ACTIVE=dev\n    depends_on:\n      - db\n  frontend:\n    build: .\/frontend\n    ports:\n      - \"3000:80\"\n  db:\n    image: postgres:13\n    environment:\n      - POSTGRES_DB=myapp\n      - POSTGRES_USER=user\n      - POSTGRES_PASSWORD=password\n    volumes:\n      - postgres_data:\/var\/lib\/postgresql\/data\n\nvolumes:\n  postgres_data:<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-67\">CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u69cb\u7bc9\uff1aJenkins\/GitLab CI\u306e\u6d3b\u7528<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CI\/CD\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u3067\u3001\u30b3\u30fc\u30c9\u306e\u5909\u66f4\u3092\u81ea\u52d5\u7684\u306b\u30c6\u30b9\u30c8\u3001\u30d3\u30eb\u30c9\u3001\u30c7\u30d7\u30ed\u30a4\u3067\u304d\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001Jenkins\u3068GitLab CI\u306e\u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u3092\u6bd4\u8f03\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-68\">Jenkinsfile\u4f8b<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">pipeline {\n    agent any\n    stages {\n        stage('Build') {\n            steps {\n                sh '.\/mvnw clean package'\n            }\n        }\n        stage('Test') {\n            steps {\n                sh '.\/mvnw test'\n            }\n        }\n        stage('Docker Build') {\n            steps {\n                sh 'docker build -t myapp:${BUILD_NUMBER} .'\n            }\n        }\n        stage('Deploy') {\n            steps {\n                sh 'docker push myapp:${BUILD_NUMBER}'\n                sh 'kubectl set image deployment\/myapp myapp=myapp:${BUILD_NUMBER}'\n            }\n        }\n    }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-69\">GitLab CI\u8a2d\u5b9a\u4f8b (.gitlab-ci.yml)<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">stages:\n  - build\n  - test\n  - docker_build\n  - deploy\n\nbuild:\n  stage: build\n  script:\n    - .\/mvnw clean package\n  artifacts:\n    paths:\n      - target\/*.jar\n\ntest:\n  stage: test\n  script:\n    - .\/mvnw test\n\ndocker_build:\n  stage: docker_build\n  script:\n    - docker build -t myapp:$CI_COMMIT_SHA .\n    - docker push myapp:$CI_COMMIT_SHA\n\ndeploy:\n  stage: deploy\n  script:\n    - kubectl set image deployment\/myapp myapp=myapp:$CI_COMMIT_SHA<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-70\">\u30af\u30e9\u30a6\u30c9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3078\u306e\u30c7\u30d7\u30ed\u30a4\uff1aAWS\/Heroku\u306e\u9078\u629e\u3068\u8a2d\u5b9a<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-71\">AWS\u3078\u306eSpring Boot\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30c7\u30d7\u30ed\u30a4<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">AWS Elastic Beanstalk\u3092\u4f7f\u7528\u3057\u305f\u7c21\u5358\u306a\u30c7\u30d7\u30ed\u30a4\u624b\u9806\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Elastic Beanstalk\u74b0\u5883\u3092\u4f5c\u6210<\/li>\n\n\n\n<li>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092JAR\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u30d3\u30eb\u30c9<\/li>\n\n\n\n<li>Elastic Beanstalk\u30b3\u30f3\u30bd\u30fc\u30eb\u304b\u3089\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/li>\n\n\n\n<li>\u74b0\u5883\u5909\u6570\u3092\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u30c7\u30d7\u30ed\u30a4\u3092\u958b\u59cb<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u3088\u308a\u9ad8\u5ea6\u306a\u8a2d\u5b9a\u3067\u306f\u3001ECS (Elastic Container Service) \u3084EKS (Elastic Kubernetes Service) \u3092\u4f7f\u7528\u3057\u3066\u30b3\u30f3\u30c6\u30ca\u5316\u3055\u308c\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30c7\u30d7\u30ed\u30a4\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-72\">Heroku\u3078\u306eReact\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30c7\u30d7\u30ed\u30a4<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Heroku CLI\u3092\u4f7f\u7528\u3057\u305f\u30c7\u30d7\u30ed\u30a4\u624b\u9806\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Heroku\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3001Heroku CLI\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/li>\n\n\n\n<li>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   heroku create my-react-app<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Git\u30ea\u30dd\u30b8\u30c8\u30ea\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u3001Heroku\u30ea\u30e2\u30fc\u30c8\u3092\u8ffd\u52a0\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   git init\n   heroku git:remote -a my-react-app<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30c7\u30d7\u30ed\u30a4\uff1a<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   git add .\n   git commit -m \"Initial commit\"\n   git push heroku main<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Heroku\u306f\u81ea\u52d5\u7684\u306b\u30d3\u30eb\u30c9\u30d7\u30ed\u30bb\u30b9\u3092\u691c\u51fa\u3057\u3001React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30c7\u30d7\u30ed\u30a4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-73\">\u76e3\u8996\u3068\u30ed\u30ae\u30f3\u30b0<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u672c\u756a\u74b0\u5883\u3067\u306e\u52b9\u679c\u7684\u306a\u904b\u7528\u306e\u305f\u3081\u306b\u3001\u9069\u5207\u306a\u76e3\u8996\u3068\u30ed\u30ae\u30f3\u30b0\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Prometheus\u3092\u4f7f\u7528\u3057\u305f\u30e1\u30c8\u30ea\u30af\u30b9\u53ce\u96c6<\/li>\n\n\n\n<li>Grafana\u3067\u306e\u30c0\u30c3\u30b7\u30dc\u30fc\u30c9\u4f5c\u6210<\/li>\n\n\n\n<li>ELK Stack (Elasticsearch, Logstash, Kibana) \u3092\u4f7f\u7528\u3057\u305f\u30ed\u30b0\u7ba1\u7406<\/li>\n\n\n\n<li>CloudWatch (AWS) \u3067\u306e\u30a2\u30e9\u30fc\u30c8\u8a2d\u5b9a<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f8b\uff1aPrometheus\u306espring-boot-actuator\u8a2d\u5b9a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">management:\n  endpoints:\n    web:\n      exposure:\n        include: prometheus\n  metrics:\n    export:\n      prometheus:\n        enabled: true<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-74\">\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u3068\u9ad8\u53ef\u7528\u6027<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u6210\u9577\u306b\u5099\u3048\u3066\u3001\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u3068\u9ad8\u53ef\u7528\u6027\u3092\u8003\u616e\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6c34\u5e73\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\uff1a\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u6570\u3092\u5897\u3084\u3059<\/li>\n\n\n\n<li>\u5782\u76f4\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\uff1a\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u5897\u3084\u3059<\/li>\n\n\n\n<li>\u30ed\u30fc\u30c9\u30d0\u30e9\u30f3\u30b5\u30fc\u306e\u4f7f\u7528\uff1a\u30c8\u30e9\u30d5\u30a3\u30c3\u30af\u3092\u5206\u6563<\/li>\n\n\n\n<li>\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u30ec\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\uff1a\u8aad\u307f\u53d6\u308a\u6027\u80fd\u306e\u5411\u4e0a\u3068\u5197\u9577\u6027\u306e\u78ba\u4fdd<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u5c64\u306e\u5c0e\u5165\uff1aRedis \u3084 Memcached \u3092\u4f7f\u7528<\/li>\n\n\n\n<li>\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306e\u63a1\u7528\uff1a\u30b5\u30fc\u30d3\u30b9\u3054\u3068\u306e\u72ec\u7acb\u3057\u305f\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f8b\uff1aAWS Auto Scaling \u30b0\u30eb\u30fc\u30d7\u306e\u8a2d\u5b9a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Resources:\n  MyAutoScalingGroup:\n    Type: AWS::AutoScaling::AutoScalingGroup\n    Properties:\n      VPCZoneIdentifier:\n        - subnet-12345678\n        - subnet-87654321\n      LaunchConfigurationName: !Ref MyLaunchConfig\n      MinSize: '1'\n      MaxSize: '3'\n      DesiredCapacity: '2'\n      TargetGroupARNs:\n        - !Ref MyTargetGroup<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-75\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u3068CI\/CD\u30d7\u30ed\u30bb\u30b9\u3092\u81ea\u52d5\u5316\u3059\u308b\u3053\u3068\u3067\u3001\u958b\u767a\u30c1\u30fc\u30e0\u306f\u8fc5\u901f\u304b\u3064\u4fe1\u983c\u6027\u306e\u9ad8\u3044\u30ea\u30ea\u30fc\u30b9\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002Docker\u3001CI\/CD\u30c4\u30fc\u30eb\u3001\u30af\u30e9\u30a6\u30c9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u52b9\u7387\u7684\u306a\u958b\u767a\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u69cb\u7bc9\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u54c1\u8cea\u3068\u5b89\u5b9a\u6027\u3092\u5411\u4e0a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3055\u3089\u306b\u3001\u9069\u5207\u306a\u76e3\u8996\u3068\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u6226\u7565\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u6210\u9577\u306b\u5099\u3048\u305f\u67d4\u8edf\u306a\u904b\u7528\u304c\u53ef\u80fd\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-76\">8. \u307e\u3068\u3081\u3068\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\uff1a\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005\u3068\u3057\u3066\u306e\u6210\u9577<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Boot\u3068React\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u306e\u65c5\u3092\u901a\u3058\u3066\u3001\u73fe\u4ee3\u306eWeb\u958b\u767a\u306e\u5f37\u529b\u306a\u57fa\u76e4\u3092\u5b66\u3093\u3067\u304d\u307e\u3057\u305f\u3002\u3053\u3053\u3067\u306f\u3001\u3053\u308c\u307e\u3067\u306e\u5b66\u3073\u3092\u632f\u308a\u8fd4\u308a\u3001\u3055\u3089\u306a\u308b\u6210\u9577\u306e\u305f\u3081\u306e\u9053\u7b4b\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-77\">Spring Boot\u3068React\u7d71\u5408\u306e\u5229\u70b9\u3068\u8ab2\u984c\u306e\u518d\u78ba\u8a8d<\/h2>\n\n\n\n<div class=\"wp-block-sgb-message\"><div class=\"memo sng-shadow-0\" style=\"border-radius:0px;background-color:#b4e0fa;color:#009EF3\"><div class=\"memo_ttl dfont\"><span class=\"sng-box-msg__icon\" style=\"background:#009EF3\"><i class=\"far fa-lightbulb\"><\/i><\/span><div class=\"sng-box-msg__title\">\u4e3b\u306a\u5229\u70b9:<\/div><\/div><div class=\"sng-box-msg__contents\">\n<ol class=\"wp-block-list\">\n<li>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u660e\u78ba\u306a\u5206\u96e2<\/li>\n\n\n\n<li>\u958b\u767a\u306e\u4e26\u884c\u6027\u3068\u52b9\u7387\u5316<\/li>\n\n\n\n<li>\u512a\u308c\u305f\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3<\/li>\n\n\n\n<li>\u8c4a\u5bcc\u306a\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u3068\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u518d\u5229\u7528\u53ef\u80fd\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u30de\u30a4\u30af\u30ed\u30b5\u30fc\u30d3\u30b9\u306e\u69cb\u7bc9<\/li>\n<\/ol>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u5229\u70b9\u306b\u3088\u308a\u3001\u9ad8\u54c1\u8cea\u3067\u4fdd\u5b88\u6027\u306e\u9ad8\u3044\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u52b9\u7387\u7684\u306b\u958b\u767a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-message\"><div class=\"memo sng-shadow-0\" style=\"border-radius:0px;background-color:#ffebeb;color:#f88080\"><div class=\"memo_ttl dfont\"><span class=\"sng-box-msg__icon\" style=\"background:#f88080\"><i class=\"fas fa-exclamation\"><\/i><\/span><div class=\"sng-box-msg__title\">\u76f4\u9762\u3059\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u8ab2\u984c:<\/div><\/div><div class=\"sng-box-msg__contents\">\n<ol class=\"wp-block-list\">\n<li>\u7570\u306a\u308b\u6280\u8853\u30b9\u30bf\u30c3\u30af\u306e\u5b66\u7fd2\u66f2\u7dda<\/li>\n\n\n\n<li>CORS\uff08Cross-Origin Resource Sharing\uff09\u306e\u9069\u5207\u306a\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u72b6\u614b\u7ba1\u7406\u306e\u8907\u96d1\u3055<\/li>\n\n\n\n<li>\u52b9\u679c\u7684\u306aAPI\u8a2d\u8a08\u306e\u91cd\u8981\u6027<\/li>\n\n\n\n<li>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u8003\u616e\u4e8b\u9805\u306e\u5897\u52a0<\/li>\n<\/ol>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u8ab2\u984c\u306b\u5bfe\u3057\u3066\u306f\u3001\u7d99\u7d9a\u7684\u306a\u5b66\u7fd2\u3068\u5b9f\u8df5\u3001\u305d\u3057\u3066\u9069\u5207\u306a\u30c4\u30fc\u30eb\u3084\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306e\u63a1\u7528\u3067\u5bfe\u51e6\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-78\">\u7d99\u7d9a\u7684\u306a\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9\u3068\u6700\u65b0\u52d5\u5411\u306e\u30d5\u30a9\u30ed\u30fc\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-79\">\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/spring.io\/guides\">Spring\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\">React\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a><\/li>\n\n\n\n<li>Udemy, Coursera, edX\u306e\u30aa\u30f3\u30e9\u30a4\u30f3\u30b3\u30fc\u30b9<\/li>\n\n\n\n<li><a href=\"https:\/\/www.baeldung.com\/\">Baeldung<\/a>\u306eSpring Boot\u8a18\u4e8b<\/li>\n\n\n\n<li><a href=\"https:\/\/www.freecodecamp.org\/\">freeCodeCamp<\/a>\u306eReact\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-80\">\u6700\u65b0\u52d5\u5411\u306e\u30d5\u30a9\u30ed\u30fc:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Medium\uff08\u7279\u306bJavaScript\u3084Spring\u95a2\u9023\u306e\u51fa\u7248\u7269\uff09<\/li>\n\n\n\n<li><a href=\"https:\/\/dev.to\/\">Dev.to<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/spring.io\/blog\">Spring\u516c\u5f0f\u30d6\u30ed\u30b0<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/reactjs.org\/blog\">React\u516c\u5f0f\u30d6\u30ed\u30b0<\/a><\/li>\n\n\n\n<li>Twitter\uff08#SpringBoot, #ReactJS \u30cf\u30c3\u30b7\u30e5\u30bf\u30b0\u306e\u30d5\u30a9\u30ed\u30fc\uff09<\/li>\n\n\n\n<li>GitHub Trending repositories<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b9a\u671f\u7684\u306b\u3053\u308c\u3089\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b\u3053\u3068\u3067\u3001\u6700\u65b0\u306e\u958b\u767a\u624b\u6cd5\u3084\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u5b66\u3073\u7d9a\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-81\">\u5b9f\u8df5\u7684\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30a2\u30a4\u30c7\u30a2\u3068\u53c2\u8003\u30ea\u30dd\u30b8\u30c8\u30ea\u306e\u7d39\u4ecb<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b9\u30ad\u30eb\u3092\u78e8\u304f\u305f\u3081\u306e\u5b9f\u8df5\u7684\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30a2\u30a4\u30c7\u30a2:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u500b\u4eba\u30d6\u30ed\u30b0\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0<\/li>\n\n\n\n<li>\u30bf\u30b9\u30af\u7ba1\u7406\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3<\/li>\n\n\n\n<li>e\u30b3\u30de\u30fc\u30b9\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8<\/li>\n\n\n\n<li>\u5929\u6c17\u4e88\u5831\u30a2\u30d7\u30ea\uff08\u5916\u90e8API\u306e\u7d71\u5408\uff09<\/li>\n\n\n\n<li>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30c1\u30e3\u30c3\u30c8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3<\/li>\n\n\n\n<li>\u30bd\u30fc\u30b7\u30e3\u30eb\u30e1\u30c7\u30a3\u30a2\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u53c2\u8003\u306b\u306a\u308bGitHub\u30ea\u30dd\u30b8\u30c8\u30ea:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/spring-petclinic\/spring-petclinic-react\">spring-petclinic\/spring-petclinic-react<\/a>: Spring Boot \u3068 React \u306e\u7d71\u5408\u4f8b<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/gothinkster\/spring-boot-realworld-example-app\">gothinkster\/spring-boot-realworld-example-app<\/a>: RealWorld \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e Spring Boot \u5b9f\u88c5<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/facebook\/create-react-app\">facebook\/create-react-app<\/a>: React \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30dc\u30a4\u30e9\u30fc\u30d7\u30ec\u30fc\u30c8<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/react-boilerplate\/react-boilerplate\">react-boilerplate\/react-boilerplate<\/a>: React \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u5805\u7262\u306a\u30dc\u30a4\u30e9\u30fc\u30d7\u30ec\u30fc\u30c8<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/eugenp\/tutorials\">eugenp\/tutorials<\/a>: Baeldung \u306e Spring \u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u96c6<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3068\u30ea\u30dd\u30b8\u30c8\u30ea\u3092\u53c2\u8003\u306b\u3001\u81ea\u5206\u81ea\u8eab\u306e\u30a2\u30a4\u30c7\u30a2\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u3067\u3001\u5b9f\u8df5\u7684\u306a\u30b9\u30ad\u30eb\u3092\u78e8\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-82\">\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005\u3068\u3057\u3066\u306e\u6210\u9577<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005\u3068\u3057\u3066\u306e\u30ad\u30e3\u30ea\u30a2\u30d1\u30b9\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u9032\u5316\u3057\u3066\u3044\u304f\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b8\u30e5\u30cb\u30a2\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005<\/li>\n\n\n\n<li>\u30df\u30c9\u30eb\u30ec\u30d9\u30eb\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005<\/li>\n\n\n\n<li>\u30b7\u30cb\u30a2\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005<\/li>\n\n\n\n<li>\u30c6\u30c3\u30af\u30ea\u30fc\u30c9<\/li>\n\n\n\n<li>\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u30a2\u30fc\u30ad\u30c6\u30af\u30c8<\/li>\n\n\n\n<li>CTO\uff08\u6700\u9ad8\u6280\u8853\u8cac\u4efb\u8005\uff09<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u30ad\u30e3\u30ea\u30a2\u3092\u901a\u3058\u3066\u6210\u9577\u3092\u7d9a\u3051\u308b\u305f\u3081\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u70b9\u304c\u91cd\u8981\u3067\u3059:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6280\u8853\u306e\u6025\u901f\u306a\u9032\u5316\u306b\u5bfe\u5fdc\u3059\u308b\u305f\u3081\u306e\u7d99\u7d9a\u7684\u306a\u5b66\u7fd2<\/li>\n\n\n\n<li>\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u7d4c\u9a13\u84c4\u7a4d<\/li>\n\n\n\n<li>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3078\u306e\u53c2\u52a0\u3068\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u3078\u306e\u8ca2\u732e<\/li>\n\n\n\n<li>\u30bd\u30d5\u30c8\u30b9\u30ad\u30eb\uff08\u30b3\u30df\u30e5\u30cb\u30b1\u30fc\u30b7\u30e7\u30f3\u3001\u30ea\u30fc\u30c0\u30fc\u30b7\u30c3\u30d7\uff09\u306e\u5411\u4e0a<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-83\">\u6700\u5f8c\u306b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Spring Boot\u3068React\u306e\u7d71\u5408\u306f\u3001\u73fe\u4ee3\u306eWeb\u958b\u767a\u306b\u304a\u3051\u308b\u5f37\u529b\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u3067\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u5b66\u3093\u3060\u57fa\u790e\u3092\u571f\u53f0\u306b\u3001\u5b9f\u8df5\u3092\u91cd\u306d\u3001\u7d99\u7d9a\u7684\u306b\u5b66\u7fd2\u3059\u308b\u3053\u3068\u3067\u3001\u512a\u308c\u305f\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005\u3068\u3057\u3066\u6210\u9577\u3057\u3066\u3044\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u6280\u8853\u306e\u4e16\u754c\u306f\u5e38\u306b\u9032\u5316\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u305d\u3053\u306b\u3053\u305d\u79c1\u305f\u3061\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u4fa1\u5024\u304c\u3042\u308a\u307e\u3059\u3002\u65b0\u3057\u3044\u6311\u6226\u3092\u6050\u308c\u305a\u3001\u5e38\u306b\u5b66\u3073\u7d9a\u3051\u308b\u59ff\u52e2\u3092\u5927\u5207\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u3042\u306a\u305f\u306e\u958b\u767a\u8005\u3068\u3057\u3066\u306e\u65c5\u306e\u6210\u529f\u3092\u5fc3\u304b\u3089\u9858\u3063\u3066\u3044\u307e\u3059\u3002Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Spring Boot\u3068React\u306e\u7d71\u5408\uff1a2024\u5e74\u306e\u6700\u65b0\u30c8\u30ec\u30f3\u30c9\u3068\u91cd\u8981\u6027 2024\u5e74\u306eWeb\u958b\u767a\u754c\u9688\u3067\u3001Spring Boot\u3068React\u306e\u7d71\u5408\u304c\u6ce8\u76ee\u3092\u96c6\u3081\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u3001\u306a\u305c\u4eca\u91cd\u8981\u8996\u3055\u308c\u3066\u3044\u308b\u306e\u304b\u3001 &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-422","post","type-post","status-publish","format-standard","category-java","nothumb"],"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=422"}],"version-history":[{"count":2,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/422\/revisions"}],"predecessor-version":[{"id":431,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/422\/revisions\/431"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}