{"id":1412,"date":"2025-03-24T08:50:39","date_gmt":"2025-03-23T23:50:39","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=1412"},"modified":"2025-03-24T08:50:39","modified_gmt":"2025-03-23T23:50:39","slug":"%e3%80%902024%e5%b9%b4%e4%bf%9d%e5%ad%98%e7%89%88%e3%80%91railsxreact%e3%81%a7%e4%bd%9c%e3%82%8b%e6%9c%80%e6%96%b0web%e9%96%8b%e7%99%ba%e5%85%a5%e9%96%80-%e3%80%9c7%e3%81%a4%e3%81%ae%e5%ae%9f","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=1412","title":{"rendered":"\u30102024\u5e74\u4fdd\u5b58\u7248\u3011Rails\u00d7React\u3067\u4f5c\u308b\u6700\u65b0Web\u958b\u767a\u5165\u9580 \u301c7\u3064\u306e\u5b9f\u88c5\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u5fb9\u5e95\u6bd4\u8f03"},"content":{"rendered":"\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\">    <span><\/span>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-0\">Rails\u00d7React\u306e\u57fa\u790e\u77e5\u8b58<\/a>      <\/li>      <li>        <a href=\"#i-1\">\u305d\u308c\u305e\u308c\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u7279\u5fb4\u3068\u76f8\u6027\u306e\u826f\u3055<\/a>      <\/li>      <li>        <a href=\"#i-5\">Rails\u3067\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u73fe\u3059\u308b\u30e1\u30ea\u30c3\u30c8<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-9\">\u958b\u767a\u52b9\u7387\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u4e21\u7acb\u3078\u306e\u5f71\u97ff<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-13\">Rails\u00d7React\u7d71\u5408\u306e7\u3064\u306e\u5b9f\u88c5\u30a2\u30d7\u30ed\u30fc\u30c1<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-14\">\u5f93\u6765\u306eWebpacker\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u306e\u30e1\u30ea\u30c3\u30c8\u3068\u30c7\u30e1\u30ea\u30c3\u30c8<\/a>      <\/li>      <li>        <a href=\"#i-18\">\u65b0\u3057\u3044import maps\u306b\u3088\u308b\u30a2\u30d7\u30ed\u30fc\u30c1\u306e\u7279\u5fb4<\/a>      <\/li>      <li>        <a href=\"#i-21\">API \u30e2\u30fc\u30c9\u3067\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5206\u96e2\u30d1\u30bf\u30fc\u30f3<\/a>      <\/li>      <li>        <a href=\"#i-23\">\u30e2\u30ce\u30ea\u30b9\u69cb\u6210\u3067\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u7d71\u5408\u30d1\u30bf\u30fc\u30f3<\/a>      <\/li>      <li>        <a href=\"#i-25\">Hotwire\u3068\u306e\u4f75\u7528\u30d1\u30bf\u30fc\u30f3<\/a>      <\/li>      <li>        <a href=\"#i-27\">esbuild\u3092\u6d3b\u7528\u3057\u305f\u6700\u65b0\u30a2\u30d7\u30ed\u30fc\u30c1<\/a>      <\/li>      <li>        <a href=\"#i-29\">Vite\u3092\u4f7f\u7528\u3057\u305f\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9<\/a>      <\/li>      <li>        <a href=\"#i-31\">\u5b9f\u8df5\u7684\u306a\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u30ac\u30a4\u30c9<\/a>      <\/li>      <li>        <a href=\"#i-32\">\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9\u624b\u9806\u3068\u6ce8\u610f\u70b9<\/a>      <\/li>      <li>        <a href=\"#i-36\">\u5fc5\u8981\u306agem\u3068npm\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u9078\u5b9a<\/a>      <\/li>      <li>        <a href=\"#i-39\">\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u89e3\u8aac\u3068\u8abf\u6574\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-44\">\u5b9f\u88c5\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>      <li>        <a href=\"#i-45\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8a2d\u8a08\u3068\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210\u306e\u30ac\u30a4\u30c9\u30e9\u30a4\u30f3<\/a>      <\/li>      <li>        <a href=\"#i-48\">\u72b6\u614b\u7ba1\u7406\u3068\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306e\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3<\/a>      <\/li>      <li>        <a href=\"#i-51\">\u30c6\u30b9\u30c8\u6226\u7565\u3068\u52b9\u7387\u7684\u306a\u30c6\u30b9\u30c8\u5b9f\u88c5<\/a>      <\/li>      <li>        <a href=\"#i-55\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306e\u6700\u9069\u5316<\/a>      <\/li>      <li>        <a href=\"#i-56\">\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u306e\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>      <li>        <a href=\"#i-60\">API\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u52b9\u7387\u5316\u3068\u8a8d\u8a3c\u306e\u5b9f\u88c5<\/a>      <\/li>      <li>        <a href=\"#i-64\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u3068CSRF\u4fdd\u8b77\u306e\u8a2d\u5b9a<\/a>      <\/li>      <li>        <a href=\"#i-69\">\u5b9f\u8df5\u7684\u306a\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/a>      <\/li>      <li>        <a href=\"#i-70\">\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-77\">\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb\u3068\u305d\u306e\u6d3b\u7528\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-80\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u306e\u8a3a\u65ad\u3068\u6539\u5584<\/a>      <\/li>      <li>        <a href=\"#i-85\">\u30d7\u30ed\u30c0\u30af\u30b7\u30e7\u30f3\u74b0\u5883\u3078\u306e\u5c55\u958b<\/a>      <\/li>      <li>        <a href=\"#i-86\">\u672c\u756a\u74b0\u5883\u306e\u69cb\u7bc9\u3068\u8a2d\u5b9a\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>      <li>        <a href=\"#i-90\">\u7d99\u7d9a\u7684\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u306e\u5b9f\u88c5\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-93\">\u76e3\u8996\u3068\u30ed\u30b0\u53ce\u96c6\u306e\u8a2d\u5b9a<\/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-0\">Rails\u00d7React\u306e\u57fa\u790e\u77e5\u8b58<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-1\">\u305d\u308c\u305e\u308c\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u7279\u5fb4\u3068\u76f8\u6027\u306e\u826f\u3055<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ruby on Rails\u3068React\u306f\u3001\u305d\u308c\u305e\u308c\u306b\u72ec\u81ea\u306e\u5f37\u307f\u3092\u6301\u3061\u306a\u304c\u3089\u3001\u4e92\u3044\u3092\u88dc\u5b8c\u3057\u5408\u3048\u308b\u512a\u308c\u305f\u7d44\u307f\u5408\u308f\u305b\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">Ruby on Rails\u306e\u7279\u5fb4<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5f37\u529b\u306a\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u6a5f\u80fd<\/strong><\/li>\n\n\n\n<li>ActiveRecord\u306b\u3088\u308b\u76f4\u611f\u7684\u306a\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u64cd\u4f5c<\/li>\n\n\n\n<li>\u8c4a\u5bcc\u306a\u8a8d\u8a3c\u30fb\u8a8d\u53ef\u30e9\u30a4\u30d6\u30e9\u30ea\uff08Devise, Pundit\u306a\u3069\uff09<\/li>\n\n\n\n<li>REST API\u306e\u7c21\u5358\u306a\u5b9f\u88c5<\/li>\n\n\n\n<li><strong>\u898f\u7d04over\u8a2d\u5b9a<\/strong>\u306e\u601d\u60f3\u306b\u3088\u308b\u9ad8\u3044\u958b\u767a\u751f\u7523\u6027<\/li>\n\n\n\n<li><strong>ActiveJob<\/strong>\u306b\u3088\u308b\u975e\u540c\u671f\u51e6\u7406\u306e\u7c21\u5358\u306a\u5b9f\u88c5<\/li>\n\n\n\n<li><strong>ActionCable<\/strong>\u306b\u3088\u308bWebSocket\u5bfe\u5fdc<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-3\">React\u306e\u7279\u5fb4<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u4eee\u60f3DOM<\/strong>\u306b\u3088\u308b\u52b9\u7387\u7684\u306aUI\u66f4\u65b0<\/li>\n\n\n\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d9\u30fc\u30b9<\/strong>\u306e\u30e2\u30b8\u30e5\u30e9\u30fc\u8a2d\u8a08<\/li>\n\n\n\n<li><strong>\u8c4a\u5bcc\u306a\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0<\/strong>\uff08Redux, React Router\u7b49\uff09<\/li>\n\n\n\n<li><strong>JSX<\/strong>\u306b\u3088\u308b\u5ba3\u8a00\u7684\u306aUI\u5b9f\u88c5<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-4\">\u76f8\u6027\u306e\u826f\u3055\u3092\u793a\u3059\u5177\u4f53\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=\"\"># app\/controllers\/api\/v1\/posts_controller.rb\nclass Api::V1::PostsController &lt; ApplicationController\n  def index\n    posts = Post.includes(:user).order(created_at: :desc)\n    render json: posts, include: :user\n  end\nend<\/pre>\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=\"\">\/\/ app\/javascript\/components\/Posts.jsx\nimport React, { useState, useEffect } from 'react';\n\nconst Posts = () =&gt; {\n  const [posts, setPosts] = useState([]);\n\n  useEffect(() =&gt; {\n    \/\/ Rails\u306eAPI\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u304b\u3089\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\n    fetch('\/api\/v1\/posts')\n      .then(response =&gt; response.json())\n      .then(data =&gt; setPosts(data));\n  }, []);\n\n  return (\n    &lt;div className=\"posts-container\"&gt;\n      {posts.map(post =&gt; (\n        &lt;div key={post.id} className=\"post\"&gt;\n          &lt;h3&gt;{post.title}&lt;\/h3&gt;\n          &lt;p&gt;by {post.user.name}&lt;\/p&gt;\n          &lt;p&gt;{post.content}&lt;\/p&gt;\n        &lt;\/div&gt;\n      ))}\n    &lt;\/div&gt;\n  );\n};\n\nexport default Posts;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-5\">Rails\u3067\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u73fe\u3059\u308b\u30e1\u30ea\u30c3\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-6\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u5411\u4e0a<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u90e8\u5206\u7684\u306a\u753b\u9762\u66f4\u65b0<\/strong>\u306b\u3088\u308b\u9ad8\u901f\u306a\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13<\/li>\n\n\n\n<li><strong>\u30ad\u30e3\u30c3\u30b7\u30e5\u5236\u5fa1<\/strong>\u306e\u67d4\u8edf\u6027\u5411\u4e0a<\/li>\n\n\n\n<li><strong>\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u306e\u30c7\u30fc\u30bf\u53d6\u5f97<\/strong>\u306b\u3088\u308bUX\u306e\u6539\u5584<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-7\">\u958b\u767a\u52b9\u7387\u306e\u5411\u4e0a<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u95a2\u5fc3\u306e\u5206\u96e2<\/strong>\u306b\u3088\u308b\u4fdd\u5b88\u6027\u306e\u5411\u4e0a<\/li>\n\n\n\n<li>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\uff1aRails\u306b\u3088\u308b\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u3068\u30c7\u30fc\u30bf\u51e6\u7406<\/li>\n\n\n\n<li>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\uff1aReact\u306b\u3088\u308b\u8868\u793a\u30ed\u30b8\u30c3\u30af\u3068\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3<\/li>\n\n\n\n<li><strong>\u4e26\u884c\u958b\u767a<\/strong>\u306e\u5b9f\u73fe<\/li>\n\n\n\n<li>API\u3068UI\u3092\u5225\u30c1\u30fc\u30e0\u3067\u958b\u767a\u53ef\u80fd<\/li>\n\n\n\n<li>\u30e2\u30c3\u30af\u30b5\u30fc\u30d0\u30fc\u3092\u4f7f\u7528\u3057\u305f\u72ec\u7acb\u3057\u305f\u958b\u767a<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u306e\u5411\u4e0a<\/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=\"\"># config\/routes.rb\nRails.application.routes.draw do\n  # API\u7528\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\n  namespace :api do\n    namespace :v1 do\n      resources :posts\n      resources :comments\n    end\n  end\n\n  # SPA\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\n  root 'home#index'\n  get '*path', to: 'home#index'\nend<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-9\">\u958b\u767a\u52b9\u7387\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u4e21\u7acb\u3078\u306e\u5f71\u97ff<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">\u958b\u767a\u52b9\u7387\u3092\u9ad8\u3081\u308b\u5de5\u592b<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u578b\u5b89\u5168\u6027\u306e\u78ba\u4fdd<\/strong><\/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=\"\">\/\/ TypeScript\u3092\u4f7f\u7528\u3057\u305f\u578b\u5b9a\u7fa9\ninterface Post {\n  id: number;\n  title: string;\n  content: string;\n  user: {\n    id: number;\n    name: string;\n  };\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u74b0\u5883\u306e\u6700\u9069\u5316<\/strong><\/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=\"\">\/\/ webpack.config.js\nmodule.exports = {\n  devServer: {\n    proxy: {\n      '\/api': 'http:\/\/localhost:3000'\n    },\n    hot: true\n  }\n};<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-11\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u30dd\u30a4\u30f3\u30c8<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c7\u30fc\u30bf\u53d6\u5f97\u306e\u6700\u9069\u5316<\/strong><\/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=\"\"># app\/controllers\/api\/v1\/posts_controller.rb\ndef index\n  posts = Post.includes(:user, :comments)\n             .page(params[:page])\n             .per(20)\n\n  render json: posts, \n         include: { \n           user: { only: [:id, :name] },\n           comments: { only: [:id, :content] }\n         }\nend<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u6700\u9069\u5316<\/strong><\/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=\"\">\/\/ React.lazy\u3092\u4f7f\u7528\u3057\u305f\u52d5\u7684\u30a4\u30f3\u30dd\u30fc\u30c8\nconst PostEditor = React.lazy(() =&gt; import('.\/PostEditor'));\n\nfunction App() {\n  return (\n    &lt;Suspense fallback={&lt;LoadingSpinner \/&gt;}&gt;\n      &lt;PostEditor \/&gt;\n    &lt;\/Suspense&gt;\n  );\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8a08\u6e2c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Rails Performance Monitoring<\/strong><\/li>\n\n\n\n<li>rack-mini-profiler gem\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>NewRelic\u3084Scout\u306b\u3088\u308b\u76e3\u8996<\/li>\n\n\n\n<li><strong>React Performance Monitoring<\/strong><\/li>\n\n\n\n<li>React Developer Tools<\/li>\n\n\n\n<li>Lighthouse \u30b9\u30b3\u30a2\u306e\u5b9a\u671f\u7684\u306a\u30c1\u30a7\u30c3\u30af<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u3088\u3046\u306b\u3001Rails\u3068React\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u305d\u308c\u305e\u308c\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u9577\u6240\u3092\u6d3b\u304b\u3057\u306a\u304c\u3089\u3001\u958b\u767a\u52b9\u7387\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u4e21\u7acb\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u305f\u3060\u3057\u3001\u9069\u5207\u306a\u8a2d\u8a08\u3068\u5b9f\u88c5\u304c\u91cd\u8981\u3067\u3001\u7279\u306bAPI\u8a2d\u8a08\u3068\u30b9\u30c6\u30fc\u30c8\u7ba1\u7406\u306b\u306f\u6ce8\u610f\u3092\u6255\u3046\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"i-13\">Rails\u00d7React\u7d71\u5408\u306e7\u3064\u306e\u5b9f\u88c5\u30a2\u30d7\u30ed\u30fc\u30c1<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-14\">\u5f93\u6765\u306eWebpacker\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u306e\u30e1\u30ea\u30c3\u30c8\u3068\u30c7\u30e1\u30ea\u30c3\u30c8<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Webpacker\u306f\u9577\u3089\u304fRails\u00d7React\u7d71\u5408\u306e\u6a19\u6e96\u7684\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-15\">\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u624b\u9806<\/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=\"\"># Gemfile\ngem 'webpacker'<\/pre>\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=\"\"># \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u30b3\u30de\u30f3\u30c9\nrails webpacker:install\nrails webpacker:install:react<\/pre>\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=\"\">\/\/ app\/javascript\/packs\/application.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from '..\/components\/App'\n\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\n  ReactDOM.render(\n    &lt;App \/&gt;,\n    document.getElementById('root')\n  )\n})<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rails 6\u7cfb\u307e\u3067\u306e\u5145\u5b9f\u3057\u305f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/li>\n\n\n\n<li>\u30a2\u30bb\u30c3\u30c8\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3068\u306e\u7d71\u5408\u304c\u5bb9\u6613<\/li>\n\n\n\n<li>\u8c4a\u5bcc\u306a\u5b9f\u88c5\u4f8b\u3068\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30b5\u30dd\u30fc\u30c8<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-17\">\u30c7\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6bd4\u8f03\u7684\u9045\u3044\u30d3\u30eb\u30c9\u6642\u9593<\/li>\n\n\n\n<li>\u8a2d\u5b9a\u306e\u8907\u96d1\u3055<\/li>\n\n\n\n<li>\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf\u304c\u591a\u3044<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-18\">\u65b0\u3057\u3044import maps\u306b\u3088\u308b\u30a2\u30d7\u30ed\u30fc\u30c1\u306e\u7279\u5fb4<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Rails 7\u3067\u5c0e\u5165\u3055\u308c\u305fimport maps\u306f\u3001\u65b0\u3057\u3044\u7d71\u5408\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\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=\"\"># Gemfile\ngem 'importmap-rails'<\/pre>\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=\"\"># config\/importmap.rb\npin \"react\", to: \"https:\/\/ga.jspm.io\/npm:react@17.0.2\/index.js\"\npin \"react-dom\", to: \"https:\/\/ga.jspm.io\/npm:react-dom@17.0.2\/index.js\"<\/pre>\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=\"\">&lt;%# app\/views\/layouts\/application.html.erb %&gt;\n&lt;%= javascript_importmap_tags %&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-19\">\u7279\u5fb4<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u4e0d\u8981\u306e\u9ad8\u901f\u306a\u958b\u767a\u74b0\u5883<\/li>\n\n\n\n<li>\u30b7\u30f3\u30d7\u30eb\u306a\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u672c\u756a\u74b0\u5883\u3067\u306e\u9ad8\u901f\u306a\u521d\u671f\u30ed\u30fc\u30c9<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-20\">\u6ce8\u610f\u70b9<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e00\u90e8\u306enpm\u30d1\u30c3\u30b1\u30fc\u30b8\u3067\u4e92\u63db\u6027\u306e\u554f\u984c<\/li>\n\n\n\n<li>\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u306e\u6700\u9069\u5316\u304c\u9650\u5b9a\u7684<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-21\">API \u30e2\u30fc\u30c9\u3067\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5206\u96e2\u30d1\u30bf\u30fc\u30f3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b8c\u5168\u306a\u5206\u96e2\u306b\u3088\u308b\u67d4\u8edf\u306a\u958b\u767a\u3092\u5b9f\u73fe\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=\"\"># config\/application.rb\nmodule YourApp\n  class Application &lt; Rails::Application\n    config.api_only = true\n  end\nend<\/pre>\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=\"\"># app\/controllers\/api\/v1\/base_controller.rb\nclass Api::V1::BaseController &lt; ActionController::API\n  include ActionController::HttpAuthentication::Token::ControllerMethods\n\n  before_action :authenticate_token!\n\n  private\n\n  def authenticate_token!\n    # \u30c8\u30fc\u30af\u30f3\u8a8d\u8a3c\u306e\u5b9f\u88c5\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-22\">\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\/\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u5b8c\u5168\u306a\u5206\u96e2<\/li>\n\n\n\n<li>\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u306e\u5bb9\u6613\u3055<\/li>\n\n\n\n<li>\u72ec\u7acb\u3057\u305f\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-23\">\u30e2\u30ce\u30ea\u30b9\u69cb\u6210\u3067\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u7d71\u5408\u30d1\u30bf\u30fc\u30f3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5358\u4e00\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3068\u3057\u3066\u7ba1\u7406\u3059\u308b\u65b9\u6cd5\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=\"\"># app\/controllers\/pages_controller.rb\nclass PagesController &lt; ApplicationController\n  def index\n    @initial_data = {\n      current_user: current_user.as_json,\n      posts: Post.recent.as_json\n    }\n  end\nend<\/pre>\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=\"\">&lt;%# app\/views\/pages\/index.html.erb %&gt;\n&lt;div id=\"root\" \n     data-initial-data=\"&lt;%= @initial_data.to_json %&gt;\"&gt;\n&lt;\/div&gt;<\/pre>\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=\"\">\/\/ app\/javascript\/components\/App.jsx\nconst App = () =&gt; {\n  const initialData = JSON.parse(\n    document.getElementById('root').dataset.initialData\n  );\n\n  return (\n    &lt;Provider store={configureStore(initialData)}&gt;\n      &lt;Router&gt;\n        &lt;Routes \/&gt;\n      &lt;\/Router&gt;\n    &lt;\/Provider&gt;\n  );\n};<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-24\">\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u306e\u7c21\u7d20\u3055<\/li>\n\n\n\n<li>\u30bb\u30c3\u30b7\u30e7\u30f3\u7ba1\u7406\u306e\u5bb9\u6613\u3055<\/li>\n\n\n\n<li>\u958b\u767a\u74b0\u5883\u306e\u7d71\u4e00<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-25\">Hotwire\u3068\u306e\u4f75\u7528\u30d1\u30bf\u30fc\u30f3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6700\u65b0\u306eRails\u6a5f\u80fd\u3068React\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u65b9\u6cd5\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=\"\"># Gemfile\ngem 'hotwire-rails'<\/pre>\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=\"\"># app\/controllers\/posts_controller.rb\nclass PostsController &lt; ApplicationController\n  def create\n    @post = Post.create(post_params)\n\n    respond_to do |format|\n      format.turbo_stream\n      format.json { render json: @post }\n    end\n  end\nend<\/pre>\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=\"\">\/\/ app\/javascript\/components\/PostForm.jsx\nconst PostForm = () =&gt; {\n  const handleSubmit = async (data) =&gt; {\n    const response = await fetch('\/posts', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application\/json',\n        'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content\n      },\n      body: JSON.stringify(data)\n    });\n\n    if (response.headers.get('Content-Type').includes('text\/vnd.turbo-stream.html')) {\n      const turboStream = await response.text();\n      Turbo.renderStreamMessage(turboStream);\n    }\n  };\n\n  return (\n    &lt;Form onSubmit={handleSubmit}&gt;\n      {\/* \u30d5\u30a9\u30fc\u30e0\u306e\u5185\u5bb9 *\/}\n    &lt;\/Form&gt;\n  );\n};<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-26\">\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5f93\u6765\u306eRails\u306e\u5229\u70b9\u3092\u7dad\u6301<\/li>\n\n\n\n<li>\u6bb5\u968e\u7684\u306a\u5c0e\u5165\u304c\u53ef\u80fd<\/li>\n\n\n\n<li>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u66f4\u65b0\u306e\u5bb9\u6613\u3055<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-27\">esbuild\u3092\u6d3b\u7528\u3057\u305f\u6700\u65b0\u30a2\u30d7\u30ed\u30fc\u30c1<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9ad8\u901f\u306a\u30d3\u30eb\u30c9\u3092\u5b9f\u73fe\u3059\u308b\u65b0\u3057\u3044\u65b9\u6cd5\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=\"\"># Gemfile\ngem 'jsbundling-rails'<\/pre>\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=\"\"># package.json\n{\n  \"scripts\": {\n    \"build\": \"esbuild app\/javascript\/*.* --bundle --sourcemap --outdir=app\/assets\/builds --public-path=assets\"\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-28\">\u7279\u5fb4<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8d85\u9ad8\u901f\u306a\u30d3\u30eb\u30c9<\/li>\n\n\n\n<li>\u30b7\u30f3\u30d7\u30eb\u306a\u8a2d\u5b9a<\/li>\n\n\n\n<li>\u6700\u5c0f\u9650\u306e\u4f9d\u5b58\u95a2\u4fc2<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-29\">Vite\u3092\u4f7f\u7528\u3057\u305f\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6700\u65b0\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u30c4\u30fc\u30eb\u3092\u6d3b\u7528\u3059\u308b\u65b9\u6cd5\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=\"\"># Gemfile\ngem 'vite_rails'<\/pre>\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=\"\">\/\/ vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs\/plugin-react'\n\nexport default defineConfig({\n  plugins: [react()],\n  server: {\n    proxy: {\n      '\/api': 'http:\/\/localhost:3000'\n    }\n  }\n})<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-30\">\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HMR\u306b\u3088\u308b\u9ad8\u901f\u306a\u958b\u767a<\/li>\n\n\n\n<li>\u30e2\u30c0\u30f3\u306a\u958b\u767a\u4f53\u9a13<\/li>\n\n\n\n<li>\u8c4a\u5bcc\u306a\u30d7\u30e9\u30b0\u30a4\u30f3<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u5404\u30a2\u30d7\u30ed\u30fc\u30c1\u306e\u9078\u629e\u57fa\u6e96\uff1a<\/p>\n\n\n<div id=\"id-ac2aad38-fe78-428b-9288-394faf8e2eb0\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30a2\u30d7\u30ed\u30fc\u30c1<\/th><th>\u63a8\u5968\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9<\/th><th>\u5b66\u7fd2\u30b3\u30b9\u30c8<\/th><th>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<\/th><\/tr><\/thead><tbody><tr><td>Webpacker<\/td><td>\u30ec\u30ac\u30b7\u30fc\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/td><td>\u4e2d<\/td><td>\u4e2d<\/td><\/tr><tr><td>Import Maps<\/td><td>\u5c0f\u898f\u6a21\u30a2\u30d7\u30ea<\/td><td>\u4f4e<\/td><td>\u9ad8<\/td><\/tr><tr><td>API\u5206\u96e2<\/td><td>\u5927\u898f\u6a21\u30a2\u30d7\u30ea<\/td><td>\u9ad8<\/td><td>\u9ad8<\/td><\/tr><tr><td>\u30e2\u30ce\u30ea\u30b9<\/td><td>\u4e2d\u898f\u6a21\u30a2\u30d7\u30ea<\/td><td>\u4e2d<\/td><td>\u4e2d<\/td><\/tr><tr><td>Hotwire\u4f75\u7528<\/td><td>\u6bb5\u968e\u7684\u79fb\u884c<\/td><td>\u4e2d<\/td><td>\u9ad8<\/td><\/tr><tr><td>esbuild<\/td><td>\u65b0\u898f\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/td><td>\u4f4e<\/td><td>\u9ad8<\/td><\/tr><tr><td>Vite<\/td><td>\u30e2\u30c0\u30f3\u958b\u767a\u91cd\u8996<\/td><td>\u4e2d<\/td><td>\u9ad8<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u898f\u6a21\u3084\u8981\u4ef6\u306b\u5fdc\u3058\u3066\u9069\u5207\u306b\u9078\u629e\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002\u7279\u306b\u3001\u958b\u767a\u30c1\u30fc\u30e0\u306e\u30b9\u30ad\u30eb\u30bb\u30c3\u30c8\u3084\u65e2\u5b58\u306e\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u3068\u306e\u89aa\u548c\u6027\u3092\u8003\u616e\u306b\u5165\u308c\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-31\">\u5b9f\u8df5\u7684\u306a\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u30ac\u30a4\u30c9<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-32\">\u958b\u767a\u74b0\u5883\u306e\u69cb\u7bc9\u624b\u9806\u3068\u6ce8\u610f\u70b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-33\">\u524d\u63d0\u6761\u4ef6<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ruby 3.2.0\u4ee5\u4e0a<\/li>\n\n\n\n<li>Node.js 18.0.0\u4ee5\u4e0a<\/li>\n\n\n\n<li>Yarn 1.22.0\u4ee5\u4e0a<\/li>\n\n\n\n<li>PostgreSQL 14.0\u4ee5\u4e0a\uff08\u63a8\u5968\uff09<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-34\">\u57fa\u672c\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=\"\"># Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u6210\nrails new myapp --database=postgresql --css=tailwind --javascript=esbuild\n\n# \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u79fb\u52d5\ncd myapp\n\n# \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u4f5c\u6210\nrails db:create\n\n# React\u95a2\u9023\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nyarn add react react-dom @types\/react @types\/react-dom<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-35\">\u74b0\u5883\u69cb\u6210\u306e\u30dd\u30a4\u30f3\u30c8<\/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=\"\"># config\/database.yml\ndefault: &amp;default\n  adapter: postgresql\n  encoding: unicode\n  pool: &lt;%= ENV.fetch(\"RAILS_MAX_THREADS\") { 5 } %&gt;\n  username: &lt;%= ENV['DATABASE_USERNAME'] %&gt;\n  password: &lt;%= ENV['DATABASE_PASSWORD'] %&gt;\n\ndevelopment:\n  &lt;&lt;: *default\n  database: myapp_development<\/pre>\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=\"\"># config\/environments\/development.rb\nRails.application.configure do\n  # Hot Module Replacement\u6709\u52b9\u5316\n  config.hotwire_livereload.enabled = true\n\n  # \u30c7\u30d0\u30c3\u30b0\u60c5\u5831\u306e\u8868\u793a\n  config.debug_exception_response_format = :api\nend<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-36\">\u5fc5\u8981\u306agem\u3068npm\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u9078\u5b9a<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-37\">\u63a8\u5968gem\u4e00\u89a7<\/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=\"\"># Gemfile\nsource \"https:\/\/rubygems.org\"\n\n# \u57fa\u672c\u30d1\u30c3\u30b1\u30fc\u30b8\ngem \"rails\", \"~&gt; 7.1.0\"\ngem \"pg\", \"~&gt; 1.1\"\ngem \"puma\", \"~&gt; 6.0\"\n\n# API\u95a2\u9023\ngem \"jbuilder\", \"~&gt; 2.7\"\ngem \"rack-cors\"\n\n# \u8a8d\u8a3c\u30fb\u8a8d\u53ef\ngem \"devise\", \"~&gt; 4.9\"\ngem \"pundit\", \"~&gt; 2.3\"\n\n# \u958b\u767a\u30fb\u30c6\u30b9\u30c8\u74b0\u5883\ngroup :development, :test do\n  gem \"rspec-rails\"\n  gem \"factory_bot_rails\"\n  gem \"pry-rails\"\n  gem \"dotenv-rails\"\nend\n\n# \u958b\u767a\u74b0\u5883\u306e\u307f\ngroup :development do\n  gem \"web-console\"\n  gem \"rack-mini-profiler\"\n  gem \"listen\"\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-38\">\u63a8\u5968npm\u30d1\u30c3\u30b1\u30fc\u30b8<\/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=\"\">{\n  \"dependencies\": {\n    \"@rails\/actioncable\": \"^7.1.0\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-router-dom\": \"^6.8.0\",\n    \"@reduxjs\/toolkit\": \"^1.9.0\",\n    \"react-query\": \"^3.39.0\",\n    \"axios\": \"^1.3.0\"\n  },\n  \"devDependencies\": {\n    \"@types\/react\": \"^18.0.0\",\n    \"@types\/react-dom\": \"^18.0.0\",\n    \"esbuild\": \"^0.19.0\",\n    \"eslint\": \"^8.35.0\",\n    \"prettier\": \"^2.8.0\",\n    \"typescript\": \"^5.0.0\"\n  }\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-39\">\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u89e3\u8aac\u3068\u8abf\u6574\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-40\">Webpack\u306e\u8a2d\u5b9a\uff08esbuild\u4f7f\u7528\u6642\uff09<\/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=\"\">\/\/ esbuild.config.js\nconst path = require('path')\nconst esbuild = require('esbuild')\n\nesbuild.build({\n  entryPoints: ['app\/javascript\/application.js'],\n  bundle: true,\n  outdir: path.join(process.cwd(), 'app\/assets\/builds'),\n  publicPath: '\/assets',\n  watch: process.argv.includes('--watch'),\n  plugins: [\n    \/\/ React Fast Refresh\u5bfe\u5fdc\n    require('esbuild-plugin-react-refresh')(),\n  ],\n  define: {\n    'process.env.NODE_ENV': `\"${process.env.NODE_ENV}\"`\n  },\n  loader: {\n    '.js': 'jsx',\n    '.png': 'file',\n    '.svg': 'file',\n    '.jpg': 'file'\n  }\n}).catch(() =&gt; process.exit(1))<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-41\">CORS\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=\"\"># config\/initializers\/cors.rb\nRails.application.config.middleware.insert_before 0, Rack::Cors do\n  allow do\n    origins 'localhost:3000', 'localhost:5173'\n\n    resource '*',\n      headers: :any,\n      methods: [:get, :post, :put, :patch, :delete, :options, :head],\n      credentials: true\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-42\">\u74b0\u5883\u5909\u6570\u306e\u7ba1\u7406<\/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=\"\"># .env\nDATABASE_USERNAME=postgres\nDATABASE_PASSWORD=password\nREDIS_URL=redis:\/\/localhost:6379\/1\nJWT_SECRET_KEY=your_secret_key<\/pre>\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=\"\"># config\/application.rb\nmodule YourApp\n  class Application &lt; Rails::Application\n    # \u74b0\u5883\u5909\u6570\u306e\u8aad\u307f\u8fbc\u307f\n    Dotenv::Railtie.load if Rails.env.development? || Rails.env.test?\n\n    # API\u8a2d\u5b9a\n    config.api_only = true\n\n    # \u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u8a2d\u5b9a\n    config.time_zone = 'Tokyo'\n    config.active_record.default_timezone = :local\n\n    # \u56fd\u969b\u5316\u8a2d\u5b9a\n    config.i18n.default_locale = :ja\n    config.i18n.available_locales = [:ja, :en]\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-43\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\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=\"\"># config\/initializers\/security_headers.rb\nRails.application.config.action_dispatch.default_headers = {\n  'X-Frame-Options' =&gt; 'SAMEORIGIN',\n  'X-XSS-Protection' =&gt; '1; mode=block',\n  'X-Content-Type-Options' =&gt; 'nosniff',\n  'X-Download-Options' =&gt; 'noopen',\n  'X-Permitted-Cross-Domain-Policies' =&gt; 'none',\n  'Referrer-Policy' =&gt; 'strict-origin-when-cross-origin'\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u8a2d\u5b9a\u306f\u3001\u958b\u767a\u74b0\u5883\u306e\u8981\u4ef6\u3084\u898f\u6a21\u306b\u5fdc\u3058\u3066\u9069\u5b9c\u8abf\u6574\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u7279\u306b\u672c\u756a\u74b0\u5883\u3078\u306e\u30c7\u30d7\u30ed\u30a4\u6642\u306b\u306f\u3001\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u8a2d\u5b9a\u3092\u614e\u91cd\u306b\u78ba\u8a8d\u3059\u308b\u3053\u3068\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-44\">\u5b9f\u88c5\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-45\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8a2d\u8a08\u3068\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210\u306e\u30ac\u30a4\u30c9\u30e9\u30a4\u30f3<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-46\">\u63a8\u5968\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\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=\"\">app\/javascript\/\n\u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 common\/            # \u5171\u901a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n\u2502   \u251c\u2500\u2500 features\/          # \u6a5f\u80fd\u5225\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n\u2502   \u2514\u2500\u2500 layouts\/           # \u30ec\u30a4\u30a2\u30a6\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n\u251c\u2500\u2500 hooks\/                 # \u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\n\u251c\u2500\u2500 services\/             # API\u30b5\u30fc\u30d3\u30b9\n\u251c\u2500\u2500 store\/                # \u72b6\u614b\u7ba1\u7406\n\u2514\u2500\u2500 utils\/                # \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u95a2\u6570<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-47\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8a2d\u8a08\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\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=\"\">\/\/ app\/javascript\/components\/features\/Posts\/PostList.tsx\ninterface Post {\n  id: number;\n  title: string;\n  content: string;\n  author: {\n    id: number;\n    name: string;\n  };\n}\n\n\/\/ \u30d7\u30ec\u30bc\u30f3\u30c6\u30fc\u30b7\u30e7\u30ca\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst PostListItem = ({ post }: { post: Post }) =&gt; (\n  &lt;div className=\"p-4 border rounded-lg\"&gt;\n    &lt;h3 className=\"text-xl font-bold\"&gt;{post.title}&lt;\/h3&gt;\n    &lt;p className=\"text-gray-600\"&gt;{post.content}&lt;\/p&gt;\n    &lt;span className=\"text-sm\"&gt;by {post.author.name}&lt;\/span&gt;\n  &lt;\/div&gt;\n);\n\n\/\/ \u30b3\u30f3\u30c6\u30ca\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\nconst PostList = () =&gt; {\n  const { data: posts, isLoading, error } = useQuery&lt;Post[]&gt;('posts', fetchPosts);\n\n  if (isLoading) return &lt;LoadingSpinner \/&gt;;\n  if (error) return &lt;ErrorMessage error={error} \/&gt;;\n\n  return (\n    &lt;div className=\"space-y-4\"&gt;\n      {posts?.map(post =&gt; (\n        &lt;PostListItem key={post.id} post={post} \/&gt;\n      ))}\n    &lt;\/div&gt;\n  );\n};<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-48\">\u72b6\u614b\u7ba1\u7406\u3068\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306e\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-49\">Redux Toolkit\u3092\u4f7f\u7528\u3057\u305f\u72b6\u614b\u7ba1\u7406<\/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=\"\">\/\/ app\/javascript\/store\/features\/postsSlice.ts\nimport { createSlice, createAsyncThunk } from '@reduxjs\/toolkit';\n\nexport const fetchPosts = createAsyncThunk(\n  'posts\/fetchPosts',\n  async () =&gt; {\n    const response = await fetch('\/api\/v1\/posts');\n    return response.json();\n  }\n);\n\nconst postsSlice = createSlice({\n  name: 'posts',\n  initialState: {\n    items: [],\n    loading: false,\n    error: null\n  },\n  reducers: {},\n  extraReducers: (builder) =&gt; {\n    builder\n      .addCase(fetchPosts.pending, (state) =&gt; {\n        state.loading = true;\n      })\n      .addCase(fetchPosts.fulfilled, (state, action) =&gt; {\n        state.loading = false;\n        state.items = action.payload;\n      })\n      .addCase(fetchPosts.rejected, (state, action) =&gt; {\n        state.loading = false;\n        state.error = action.error.message;\n      });\n  }\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-50\">\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u306b\u3088\u308b\u30ed\u30b8\u30c3\u30af\u306e\u5206\u96e2<\/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=\"\">\/\/ app\/javascript\/hooks\/usePosts.ts\nconst usePosts = () =&gt; {\n  const dispatch = useDispatch();\n  const posts = useSelector(selectPosts);\n  const loading = useSelector(selectPostsLoading);\n  const error = useSelector(selectPostsError);\n\n  useEffect(() =&gt; {\n    dispatch(fetchPosts());\n  }, [dispatch]);\n\n  const createPost = async (postData) =&gt; {\n    try {\n      const response = await fetch('\/api\/v1\/posts', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application\/json',\n          'X-CSRF-Token': document.querySelector('[name=\"csrf-token\"]').content\n        },\n        body: JSON.stringify(postData)\n      });\n      const data = await response.json();\n      dispatch(addPost(data));\n    } catch (error) {\n      console.error('Error creating post:', error);\n    }\n  };\n\n  return { posts, loading, error, createPost };\n};<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-51\">\u30c6\u30b9\u30c8\u6226\u7565\u3068\u52b9\u7387\u7684\u306a\u30c6\u30b9\u30c8\u5b9f\u88c5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-52\">Rails\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30c6\u30b9\u30c8<\/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=\"\"># spec\/requests\/api\/v1\/posts_spec.rb\nRSpec.describe 'Api::V1::Posts', type: :request do\n  describe 'GET \/api\/v1\/posts' do\n    let!(:posts) { create_list(:post, 3) }\n\n    it 'returns all posts' do\n      get api_v1_posts_path\n      expect(response).to have_http_status(200)\n      expect(json['data'].size).to eq(3)\n    end\n  end\n\n  describe 'POST \/api\/v1\/posts' do\n    let(:valid_attributes) { attributes_for(:post) }\n\n    context 'with valid parameters' do\n      it 'creates a new post' do\n        expect {\n          post api_v1_posts_path, params: { post: valid_attributes }\n        }.to change(Post, :count).by(1)\n        expect(response).to have_http_status(201)\n      end\n    end\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-53\">React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30c6\u30b9\u30c8<\/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=\"\">\/\/ app\/javascript\/components\/PostList.test.tsx\nimport { render, screen, waitFor } from '@testing-library\/react';\nimport userEvent from '@testing-library\/user-event';\nimport PostList from '.\/PostList';\n\ndescribe('PostList', () =&gt; {\n  it('renders posts correctly', async () =&gt; {\n    const mockPosts = [\n      { id: 1, title: 'Test Post', content: 'Test Content' }\n    ];\n\n    jest.spyOn(global, 'fetch').mockImplementation(() =&gt;\n      Promise.resolve({\n        json: () =&gt; Promise.resolve(mockPosts)\n      } as Response)\n    );\n\n    render(&lt;PostList \/&gt;);\n\n    await waitFor(() =&gt; {\n      expect(screen.getByText('Test Post')).toBeInTheDocument();\n    });\n  });\n\n  it('handles errors correctly', async () =&gt; {\n    jest.spyOn(global, 'fetch').mockRejectedValue(new Error('Failed to fetch'));\n\n    render(&lt;PostList \/&gt;);\n\n    await waitFor(() =&gt; {\n      expect(screen.getByText(\/error\/i)).toBeInTheDocument();\n    });\n  });\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-54\">\u30c6\u30b9\u30c8\u306e\u81ea\u52d5\u5316\u3068CI\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=\"\"># .github\/workflows\/test.yml\nname: Test\non: [push, pull_request]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    services:\n      postgres:\n        image: postgres:14\n        env:\n          POSTGRES_USER: postgres\n          POSTGRES_PASSWORD: postgres\n          POSTGRES_DB: test\n        ports: ['5432:5432']\n        options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5\n\n    steps:\n      - uses: actions\/checkout@v3\n\n      - name: Set up Ruby\n        uses: ruby\/setup-ruby@v1\n        with:\n          ruby-version: '3.2'\n          bundler-cache: true\n\n      - name: Set up Node\n        uses: actions\/setup-node@v3\n        with:\n          node-version: '18'\n          cache: 'yarn'\n\n      - name: Install dependencies\n        run: |\n          bundle install\n          yarn install\n\n      - name: Run tests\n        run: |\n          bundle exec rspec\n          yarn test<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4fdd\u5b88\u6027\u3068\u54c1\u8cea\u3092\u9ad8\u3081\u308b\u305f\u3081\u306e\u91cd\u8981\u306a\u6307\u91dd\u3068\u306a\u308a\u307e\u3059\u3002\u7279\u306b\u30c6\u30b9\u30c8\u99c6\u52d5\u958b\u767a\uff08TDD\uff09\u3068\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8cac\u52d9\u5206\u96e2\u306f\u3001\u9577\u671f\u7684\u306a\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u6027\u3092\u78ba\u4fdd\u3059\u308b\u4e0a\u3067\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-55\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3068\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306e\u6700\u9069\u5316<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-56\">\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u306e\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-57\">\u30b3\u30fc\u30c9\u5206\u5272\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=\"\">\/\/ app\/javascript\/routes\/index.jsx\nimport { lazy, Suspense } from 'react';\n\nconst Dashboard = lazy(() =&gt; import('..\/pages\/Dashboard'));\nconst UserProfile = lazy(() =&gt; import('..\/pages\/UserProfile'));\nconst Settings = lazy(() =&gt; import('..\/pages\/Settings'));\n\nconst Routes = () =&gt; (\n  &lt;Suspense fallback={&lt;LoadingSpinner \/&gt;}&gt;\n    &lt;Switch&gt;\n      &lt;Route path=\"\/dashboard\" component={Dashboard} \/&gt;\n      &lt;Route path=\"\/profile\" component={UserProfile} \/&gt;\n      &lt;Route path=\"\/settings\" component={Settings} \/&gt;\n    &lt;\/Switch&gt;\n  &lt;\/Suspense&gt;\n);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-58\">Tree Shaking\u306e\u6d3b\u7528<\/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=\"\">\/\/ webpack.config.js\nmodule.exports = {\n  mode: 'production',\n  optimization: {\n    usedExports: true,\n    sideEffects: true,\n    minimize: true\n  }\n};<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-59\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u5b9f\u88c5\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=\"\">\/\/ app\/javascript\/components\/OptimizedImage.jsx\nconst OptimizedImage = ({ src, alt, width, height }) =&gt; {\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  return (\n    &lt;div className=\"image-container\"&gt;\n      &lt;img\n        src={src}\n        alt={alt}\n        width={width}\n        height={height}\n        loading=\"lazy\"\n        onLoad={() =&gt; setIsLoaded(true)}\n        className={`transition-opacity duration-300 ${\n          isLoaded ? 'opacity-100' : 'opacity-0'\n        }`}\n      \/&gt;\n    &lt;\/div&gt;\n  );\n};<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-60\">API\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u52b9\u7387\u5316\u3068\u8a8d\u8a3c\u306e\u5b9f\u88c5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-61\">API\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u6700\u9069\u5316<\/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=\"\"># app\/controllers\/api\/v1\/posts_controller.rb\nclass Api::V1::PostsController &lt; ApplicationController\n  include ActionController::Caching\n\n  caches_action :index, expires_in: 15.minutes, \n                       if: -&gt; { request.format.json? }\n\n  def index\n    posts = Post.includes(:user, :comments)\n                .page(params[:page])\n                .per(20)\n                .cache_key([Post.maximum(:updated_at)])\n\n    render json: posts, \n           include: {\n             user: { only: [:id, :name] },\n             comments: { only: [:id, content] }\n           }\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-62\">JWT\u8a8d\u8a3c\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=\"\"># app\/controllers\/concerns\/jwt_authenticatable.rb\nmodule JwtAuthenticatable\n  extend ActiveSupport::Concern\n\n  included do\n    before_action :authenticate_jwt!\n  end\n\n  private\n\n  def authenticate_jwt!\n    token = request.headers['Authorization']&amp;.split(' ')&amp;.last\n    begin\n      decoded_token = JWT.decode(token, Rails.application.credentials.secret_key_base)\n      @current_user = User.find(decoded_token[0]['user_id'])\n    rescue JWT::DecodeError, ActiveRecord::RecordNotFound\n      render json: { error: 'Unauthorized' }, status: :unauthorized\n    end\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-63\">\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u306eAPI\u547c\u3073\u51fa\u3057\u6700\u9069\u5316<\/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=\"\">\/\/ app\/javascript\/services\/api.js\nimport axios from 'axios';\nimport { setupCache } from 'axios-cache-adapter';\n\nconst cache = setupCache({\n  maxAge: 15 * 60 * 1000, \/\/ 15\u5206\n  exclude: { query: false }\n});\n\nconst api = axios.create({\n  adapter: cache.adapter,\n  baseURL: '\/api\/v1',\n  headers: {\n    'Content-Type': 'application\/json'\n  }\n});\n\napi.interceptors.request.use(config =&gt; {\n  const token = localStorage.getItem('jwt_token');\n  if (token) {\n    config.headers.Authorization = `Bearer ${token}`;\n  }\n  return config;\n});<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-64\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u3068CSRF\u4fdd\u8b77\u306e\u8a2d\u5b9a<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-65\">CSRF\u30c8\u30fc\u30af\u30f3\u306e\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=\"\"># config\/application.rb\nconfig.action_controller.default_protect_from_forgery = true<\/pre>\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=\"\">\/\/ app\/javascript\/utils\/axios.js\naxios.defaults.headers.common['X-CSRF-Token'] = document\n  .querySelector('meta[name=\"csrf-token\"]')\n  ?.getAttribute('content');<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-66\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30d8\u30c3\u30c0\u30fc\u306e\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=\"\"># config\/initializers\/secure_headers.rb\nSecureHeaders::Configuration.default do |config|\n  config.x_frame_options = \"SAMEORIGIN\"\n  config.x_content_type_options = \"nosniff\"\n  config.x_xss_protection = \"1; mode=block\"\n  config.x_download_options = \"noopen\"\n  config.x_permitted_cross_domain_policies = \"none\"\n  config.referrer_policy = %w(origin-when-cross-origin strict-origin-when-cross-origin)\n\n  config.csp = {\n    default_src: %w('self'),\n    script_src: %w('self' 'unsafe-inline' 'unsafe-eval'),\n    style_src: %w('self' 'unsafe-inline'),\n    img_src: %w('self' data: https:),\n    connect_src: %w('self' ws: wss:),\n    font_src: %w('self' data:),\n    object_src: %w('none'),\n    child_src: %w('self'),\n    frame_ancestors: %w('none'),\n    form_action: %w('self'),\n    base_uri: %w('self'),\n    manifest_src: %w('self')\n  }\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-67\">XSS\u5bfe\u7b56\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=\"\">\/\/ app\/javascript\/utils\/sanitize.js\nimport DOMPurify from 'dompurify';\n\nexport const sanitizeHtml = (dirty) =&gt; {\n  return DOMPurify.sanitize(dirty, {\n    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],\n    ALLOWED_ATTRIBUTES: {\n      'a': ['href', 'title']\n    }\n  });\n};\n\n\/\/ \u4f7f\u7528\u4f8b\nconst UserContent = ({ htmlContent }) =&gt; {\n  return &lt;div dangerouslySetInnerHTML={{ \n    __html: sanitizeHtml(htmlContent) \n  }} \/&gt;;\n};<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-68\">SQL\u30a4\u30f3\u30b8\u30a7\u30af\u30b7\u30e7\u30f3\u5bfe\u7b56<\/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=\"\"># app\/models\/post.rb\nclass Post &lt; ApplicationRecord\n  scope :search, -&gt;(query) {\n    sanitized_query = sanitize_sql_like(query)\n    where('title ILIKE ? OR content ILIKE ?', \n          \"%#{sanitized_query}%\", \n          \"%#{sanitized_query}%\")\n  }\nend<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u6700\u9069\u5316\u3068\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u54c1\u8cea\u3068\u4fe1\u983c\u6027\u3092\u5927\u304d\u304f\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002\u7279\u306b\u672c\u756a\u74b0\u5883\u3067\u306f\u3001\u5b9a\u671f\u7684\u306a\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u76e3\u67fb\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u3092\u5b9f\u65bd\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-69\">\u5b9f\u8df5\u7684\u306a\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-70\">\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-71\">Rails\u30b5\u30a4\u30c9\u306e\u30a8\u30e9\u30fc\u5bfe\u5fdc<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-72\">ActiveRecord::RecordInvalid<\/h4>\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=\"\"># \u554f\u984c\u306e\u3042\u308b\u30b3\u30fc\u30c9\ndef create\n  @post = Post.create!(post_params)\n  render json: @post\nend\n\n# \u6539\u5584\u5f8c\u306e\u30b3\u30fc\u30c9\ndef create\n  @post = Post.new(post_params)\n  if @post.save\n    render json: @post, status: :created\n  else\n    render json: { errors: @post.errors.full_messages }, \n           status: :unprocessable_entity\n  end\nend<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-73\">N+1\u30af\u30a8\u30ea\u306e\u89e3\u6c7a<\/h4>\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=\"\"># \u554f\u984c\u306e\u3042\u308b\u30b3\u30fc\u30c9\ndef index\n  posts = Post.all\n  render json: posts\nend\n\n# \u6539\u5584\u5f8c\u306e\u30b3\u30fc\u30c9\ndef index\n  posts = Post.includes(:user, comments: :user)\n  render json: posts, \n         include: {\n           user: { only: [:id, :name] },\n           comments: { \n             include: { \n               user: { only: [:id, :name] } \n             } \n           }\n         }\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-74\">React\u30b5\u30a4\u30c9\u306e\u30a8\u30e9\u30fc\u5bfe\u5fdc<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-75\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u554f\u984c<\/h4>\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=\"\">\/\/ \u554f\u984c\u306e\u3042\u308b\u30b3\u30fc\u30c9\nconst UserList = () =&gt; {\n  const [users, setUsers] = useState([]);\n\n  useEffect(() =&gt; {\n    fetchUsers().then(data =&gt; setUsers(data));\n  }); \/\/ \u4f9d\u5b58\u914d\u5217\u304c\u672a\u6307\u5b9a\n\n  \/\/ \u6539\u5584\u5f8c\u306e\u30b3\u30fc\u30c9\n  useEffect(() =&gt; {\n    fetchUsers().then(data =&gt; setUsers(data));\n  }, []); \/\/ \u7a7a\u306e\u4f9d\u5b58\u914d\u5217\u3092\u6307\u5b9a\n};<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"i-76\">\u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u306e\u9632\u6b62<\/h4>\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 PostDetail = ({ id }) =&gt; {\n  const [post, setPost] = useState(null);\n\n  useEffect(() =&gt; {\n    let isMounted = true;\n\n    const fetchPost = async () =&gt; {\n      try {\n        const response = await fetch(`\/api\/posts\/${id}`);\n        const data = await response.json();\n        if (isMounted) {\n          setPost(data);\n        }\n      } catch (error) {\n        if (isMounted) {\n          console.error('Error fetching post:', error);\n        }\n      }\n    };\n\n    fetchPost();\n\n    return () =&gt; {\n      isMounted = false;\n    };\n  }, [id]);\n};<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-77\">\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb\u3068\u305d\u306e\u6d3b\u7528\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-78\">Rails\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb<\/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=\"\"># Gemfile\ngroup :development do\n  gem 'pry-rails'\n  gem 'pry-byebug'\n  gem 'better_errors'\n  gem 'binding_of_caller'\nend\n\n# \u30c7\u30d0\u30c3\u30b0\u4f8b\ndef complex_method\n  byebug # \u3053\u3053\u3067\u30c7\u30d0\u30c3\u30b0\u3092\u958b\u59cb\n  result = calculate_something\n  binding.pry # \u3088\u308a\u8a73\u7d30\u306a\u8abf\u67fb\u304c\u5fc5\u8981\u306a\u5834\u5408\n  result\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-79\">React\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb<\/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=\"\">\/\/ \u30ab\u30b9\u30bf\u30e0\u30c7\u30d0\u30c3\u30b0\u30d5\u30c3\u30af\nconst useDebugLog = (componentName, props) =&gt; {\n  useEffect(() =&gt; {\n    if (process.env.NODE_ENV === 'development') {\n      console.log(`[${componentName}] rendered with props:`, props);\n    }\n  });\n};\n\n\/\/ \u4f7f\u7528\u4f8b\nconst DebugComponent = (props) =&gt; {\n  useDebugLog('DebugComponent', props);\n\n  return (\n    &lt;div&gt;\n      {\/* \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5185\u5bb9 *\/}\n    &lt;\/div&gt;\n  );\n};<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-80\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u306e\u8a3a\u65ad\u3068\u6539\u5584<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-81\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0<\/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=\"\"># config\/initializers\/rack_mini_profiler.rb\nif Rails.env.development?\n  require 'rack-mini-profiler'\n  Rack::MiniProfiler.config.position = 'bottom-right'\n  Rack::MiniProfiler.config.start_hidden = false\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-82\">React\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/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 { memo, useCallback, useMemo } from 'react';\n\nconst ExpensiveComponent = memo(({ data, onAction }) =&gt; {\n  const processedData = useMemo(() =&gt; {\n    return data.map(item =&gt; ({\n      ...item,\n      calculated: expensiveCalculation(item)\n    }));\n  }, [data]);\n\n  const handleClick = useCallback(() =&gt; {\n    onAction(processedData);\n  }, [processedData, onAction]);\n\n  return (\n    &lt;div onClick={handleClick}&gt;\n      {processedData.map(item =&gt; (\n        &lt;div key={item.id}&gt;{item.calculated}&lt;\/div&gt;\n      ))}\n    &lt;\/div&gt;\n  );\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-83\">\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\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=\"\"># app\/models\/post.rb\nclass Post &lt; ApplicationRecord\n  after_commit :clear_cache\n\n  def self.cached_recent\n    Rails.cache.fetch(['recent_posts', cache_key_with_version]) do\n      includes(:user).limit(10).order(created_at: :desc).to_a\n    end\n  end\n\n  private\n\n  def clear_cache\n    Rails.cache.delete(['recent_posts', self.class.cache_key_with_version])\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-84\">\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8a08\u6e2c<\/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=\"\">\/\/ app\/javascript\/utils\/performance.js\nexport const measurePerformance = (componentName) =&gt; {\n  const start = performance.now();\n\n  return () =&gt; {\n    const end = performance.now();\n    const duration = end - start;\n\n    if (duration &gt; 100) {\n      console.warn(\n        `[Performance] ${componentName} took ${duration.toFixed(2)}ms to render`\n      );\n    }\n  };\n};\n\n\/\/ \u4f7f\u7528\u4f8b\nconst SlowComponent = () =&gt; {\n  useEffect(() =&gt; {\n    const endMeasure = measurePerformance('SlowComponent');\n    return endMeasure;\n  });\n\n  return &lt;div&gt;{\/* \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5185\u5bb9 *\/}&lt;\/div&gt;;\n};<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u624b\u6cd5\u306f\u3001\u958b\u767a\u30d7\u30ed\u30bb\u30b9\u3092\u52b9\u7387\u5316\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u54c1\u8cea\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306e\u91cd\u8981\u306a\u30c4\u30fc\u30eb\u3068\u306a\u308a\u307e\u3059\u3002\u5b9a\u671f\u7684\u306a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u3068\u9069\u5207\u306a\u30c7\u30d0\u30c3\u30b0\u6226\u7565\u306e\u5b9f\u65bd\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-85\">\u30d7\u30ed\u30c0\u30af\u30b7\u30e7\u30f3\u74b0\u5883\u3078\u306e\u5c55\u958b<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-86\">\u672c\u756a\u74b0\u5883\u306e\u69cb\u7bc9\u3068\u8a2d\u5b9a\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-87\">\u74b0\u5883\u5909\u6570\u306e\u7ba1\u7406<\/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=\"\"># config\/credentials.yml.enc\nproduction:\n  secret_key_base: &lt;%= ENV['SECRET_KEY_BASE'] %&gt;\n  database_url: &lt;%= ENV['DATABASE_URL'] %&gt;\n  redis_url: &lt;%= ENV['REDIS_URL'] %&gt;\n  aws:\n    access_key_id: &lt;%= ENV['AWS_ACCESS_KEY_ID'] %&gt;\n    secret_access_key: &lt;%= ENV['AWS_SECRET_ACCESS_KEY'] %&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-88\">\u672c\u756a\u7528Web\u30b5\u30fc\u30d0\u30fc\u306e\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=\"\"># config\/puma.rb\nmax_threads_count = ENV.fetch(\"RAILS_MAX_THREADS\") { 5 }\nmin_threads_count = ENV.fetch(\"RAILS_MIN_THREADS\") { max_threads_count }\nthreads min_threads_count, max_threads_count\n\nworker_timeout 3600 if ENV.fetch(\"RAILS_ENV\", \"development\") == \"development\"\nport ENV.fetch(\"PORT\") { 3000 }\nenvironment ENV.fetch(\"RAILS_ENV\") { \"development\" }\n\nworkers ENV.fetch(\"WEB_CONCURRENCY\") { 2 }\npreload_app!\n\nbefore_fork do\n  ActiveRecord::Base.connection_pool.disconnect! if defined?(ActiveRecord)\nend\n\non_worker_boot do\n  ActiveRecord::Base.establish_connection if defined?(ActiveRecord)\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-89\">\u30a2\u30bb\u30c3\u30c8\u306e\u6700\u9069\u5316<\/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=\"\">\/\/ webpack.production.js\nconst TerserPlugin = require('terser-webpack-plugin');\nconst CompressionPlugin = require('compression-webpack-plugin');\n\nmodule.exports = {\n  mode: 'production',\n  optimization: {\n    minimizer: [\n      new TerserPlugin({\n        terserOptions: {\n          compress: {\n            drop_console: true,\n          },\n        },\n      }),\n    ],\n    splitChunks: {\n      chunks: 'all',\n    },\n  },\n  plugins: [\n    new CompressionPlugin({\n      filename: '[path][base].gz',\n      algorithm: 'gzip',\n      test: \/\\.(js|css|html|svg)$\/,\n      threshold: 10240,\n      minRatio: 0.8,\n    }),\n  ],\n};<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-90\">\u7d99\u7d9a\u7684\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u306e\u5b9f\u88c5\u65b9\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-91\">GitHub Actions\u306e\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=\"\"># .github\/workflows\/deploy.yml\nname: Deploy to Production\n\non:\n  push:\n    branches: [ main ]\n\njobs:\n  test-and-deploy:\n    runs-on: ubuntu-latest\n\n    steps:\n    - uses: actions\/checkout@v3\n\n    - name: Set up Ruby\n      uses: ruby\/setup-ruby@v1\n      with:\n        ruby-version: '3.2'\n        bundler-cache: true\n\n    - name: Set up Node\n      uses: actions\/setup-node@v3\n      with:\n        node-version: '18'\n        cache: 'yarn'\n\n    - name: Install dependencies\n      run: |\n        bundle install --jobs 4 --retry 3\n        yarn install\n\n    - name: Run tests\n      run: |\n        bundle exec rspec\n        yarn test\n\n    - name: Deploy to Heroku\n      uses: akhileshns\/heroku-deploy@v3.12.14\n      with:\n        heroku_api_key: ${{ secrets.HEROKU_API_KEY }}\n        heroku_app_name: \"your-app-name\"\n        heroku_email: \"your-email@example.com\"<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-92\">\u30c7\u30d7\u30ed\u30a4\u30b9\u30af\u30ea\u30d7\u30c8\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=\"\">#!\/bin\/bash\n# deploy.sh\n\n# \u30d7\u30ea\u30c7\u30d7\u30ed\u30a4\u30c1\u30a7\u30c3\u30af\necho \"Running pre-deployment checks...\"\nbundle exec rspec\nif [ $? -ne 0 ]; then\n    echo \"Tests failed! Aborting deployment.\"\n    exit 1\nfi\n\n# \u30a2\u30bb\u30c3\u30c8\u306e\u30d7\u30ea\u30b3\u30f3\u30d1\u30a4\u30eb\necho \"Precompiling assets...\"\nRAILS_ENV=production bundle exec rake assets:precompile\n\n# \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\necho \"Running database migrations...\"\nRAILS_ENV=production bundle exec rake db:migrate\n\n# \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u518d\u8d77\u52d5\necho \"Restarting application...\"\ntouch tmp\/restart.txt<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-93\">\u76e3\u8996\u3068\u30ed\u30b0\u53ce\u96c6\u306e\u8a2d\u5b9a<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-94\">\u30ed\u30b0\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=\"\"># config\/environments\/production.rb\nconfig.log_level = :info\nconfig.log_tags = [ :request_id ]\n\nif ENV[\"RAILS_LOG_TO_STDOUT\"].present?\n  logger = ActiveSupport::Logger.new(STDOUT)\n  logger.formatter = config.log_formatter\n  config.logger = ActiveSupport::TaggedLogging.new(logger)\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-95\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0<\/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=\"\"># config\/initializers\/scout_apm.rb\nScoutApm::Agent.config(\n  name: \"Your App Name\",\n  key: ENV['SCOUT_KEY'],\n  monitor: true,\n  log_level: :info\n)<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-96\">\u30a8\u30e9\u30fc\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0<\/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=\"\"># config\/initializers\/sentry.rb\nSentry.init do |config|\n  config.dsn = ENV['SENTRY_DSN']\n  config.breadcrumbs_logger = [:active_support_logger, :http_logger]\n\n  config.traces_sample_rate = 0.5\n  config.send_default_pii = true\n\n  config.before_send = lambda do |event, hint|\n    if event.exception\n      # \u7279\u5b9a\u306e\u4f8b\u5916\u3092\u9664\u5916\n      return nil if event.exception.is_a?(ActiveRecord::RecordNotFound)\n    end\n    event\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-97\">\u30ab\u30b9\u30bf\u30e0\u30e1\u30c8\u30ea\u30af\u30b9\u53ce\u96c6<\/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=\"\"># app\/controllers\/application_controller.rb\nclass ApplicationController &lt; ActionController::Base\n  around_action :track_request_metrics\n\n  private\n\n  def track_request_metrics\n    start_time = Time.current\n\n    yield\n\n    duration = Time.current - start_time\n    StatsD.timing(\"request.duration\", duration * 1000)\n    StatsD.increment(\"request.status.#{response.status}\")\n  end\nend<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-98\">\u30d8\u30eb\u30b9\u30c1\u30a7\u30c3\u30af\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8<\/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=\"\"># app\/controllers\/health_controller.rb\nclass HealthController &lt; ApplicationController\n  def check\n    health_status = {\n      database: database_connected?,\n      redis: redis_connected?,\n      sidekiq: sidekiq_running?\n    }\n\n    if health_status.values.all?\n      render json: { status: 'ok', checks: health_status }\n    else\n      render json: { status: 'error', checks: health_status }, \n             status: :service_unavailable\n    end\n  end\n\n  private\n\n  def database_connected?\n    ActiveRecord::Base.connection.active?\n  rescue StandardError\n    false\n  end\n\n  def redis_connected?\n    Redis.current.ping == 'PONG'\n  rescue StandardError\n    false\n  end\n\n  def sidekiq_running?\n    Sidekiq::ProcessSet.new.size.positive?\n  rescue StandardError\n    false\n  end\nend<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u308c\u3089\u306e\u8a2d\u5b9a\u3068\u5b9f\u88c5\u306b\u3088\u308a\u3001\u672c\u756a\u74b0\u5883\u3067\u306e\u5b89\u5b9a\u3057\u305f\u904b\u7528\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u5b9a\u671f\u7684\u306a\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u3068\u30ed\u30b0\u306e\u5206\u6790\u3092\u884c\u3044\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u8a2d\u5b9a\u3092\u8abf\u6574\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1412","post","type-post","status-publish","format-standard","category-ruby","nothumb"],"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1412","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=1412"}],"version-history":[{"count":1,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1412\/revisions"}],"predecessor-version":[{"id":1465,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1412\/revisions\/1465"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}