{"id":9205,"date":"2025-10-12T16:38:58","date_gmt":"2025-10-12T16:38:58","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=9205"},"modified":"2025-10-12T16:38:58","modified_gmt":"2025-10-12T16:38:58","slug":"remix-3-%e7%99%ba%e8%a1%a8%e3%81%be%e3%81%a8%e3%82%81-react-%e3%82%92%e6%8d%a8%e3%81%a6%e3%80%81web%e6%a8%99%e6%ba%96%e3%81%a7%e6%96%b0%e3%81%97%e3%81%84%e4%b8%96%e7%95%8c%e3%81%b8","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/9205\/","title":{"rendered":"Remix 3 \u767a\u8868\u307e\u3068\u3081 &#8211; React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078"},"content":{"rendered":"\n<\/p>\n<div>\n<h2 id=\"%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB\" data-line=\"0\" class=\"code-line\">\n \u306f\u3058\u3081\u306b<\/h2>\n<p data-line=\"2\" class=\"code-line\">2025\u5e7410\u670810\u65e5\u3001\u30ab\u30ca\u30c0\u306e\u30c8\u30ed\u30f3\u30c8\u3067\u958b\u50ac\u3055\u308c\u305f\u30a4\u30d9\u30f3\u30c8 &#8220;Remix Jam 2025&#8221; \u3067 Ryan Florence \u3068 Michael Jackson \u304c <strong>Remix 3<\/strong> \u3092\u767a\u8868\u3057\u307e\u3057\u305f\u3002\u3053\u306e\u30bb\u30c3\u30b7\u30e7\u30f3\u306f\u3001React Router \u306e\u751f\u307f\u306e\u89aa\u305f\u3061\u304c\u3001\u306a\u305c React \u304b\u3089\u96e2\u308c\u3001\u72ec\u81ea\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f5c\u308b\u3053\u3068\u306b\u3057\u305f\u306e\u304b\u3001\u305d\u306e\u7406\u7531\u3068\u65b0\u3057\u3044\u30d3\u30b8\u30e7\u30f3\u3092\u8a9e\u3063\u305f\u6b74\u53f2\u7684\u306a\u767a\u8868\u3067\u3059\u3002<\/p>\n<p data-line=\"4\" class=\"code-line\"><span class=\"embed-block zenn-embedded zenn-embedded-card\"><iframe id=\"zenn-embedded__15d23f9547e09\" src=\"https:\/\/embed.zenn.studio\/card#zenn-embedded__15d23f9547e09\" data-content=\"https%3A%2F%2Fwww.youtube.com%2Flive%2Fxt_iEOn2a6Y%3Ft%3D11764s\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\"><\/iframe><\/span><a target=\"_blank\" href=\"https:\/\/www.youtube.com\/live\/xt_iEOn2a6Y?t=11764s\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/www.youtube.com\/live\/xt_iEOn2a6Y?t=11764s<\/a><\/p>\n<p data-line=\"6\" class=\"code-line\">\u672c\u8a18\u4e8b\u3067\u306f\u30011\u6642\u959347\u5206\u306b\u53ca\u3076\u30bb\u30c3\u30b7\u30e7\u30f3\u306e\u5185\u5bb9\u3092\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n<aside class=\"msg alert\"><span class=\"msg-symbol\">!<\/span><\/p>\n<div class=\"msg-content\">\n<p data-line=\"9\" class=\"code-line\"><strong>\u6ce8\u610f\u4e8b\u9805<\/strong><\/p>\n<ul data-line=\"11\" class=\"code-line\">\n<li data-line=\"11\" class=\"code-line\">\u3053\u306e\u8a18\u4e8b\u306f\u3001\u30bb\u30c3\u30b7\u30e7\u30f3\u52d5\u753b\u306e\u97f3\u58f0\u3092 AI \u3067\u6587\u5b57\u8d77\u3053\u3057\u3057\u3001\u305d\u306e\u5185\u5bb9\u3092\u3082\u3068\u306b AI \u3092\u6d3b\u7528\u3057\u3066\u57f7\u7b46\u3057\u3066\u3044\u307e\u3059<\/li>\n<li data-line=\"12\" class=\"code-line\">\u8a18\u4e8b\u5185\u306e\u30b3\u30fc\u30c9\u4f8b\u306f\u3001\u30bb\u30c3\u30b7\u30e7\u30f3\u3067\u306e\u8aac\u660e\u3092\u3082\u3068\u306b\u518d\u69cb\u6210\u3057\u305f\u3082\u306e\u3067\u3059\u304c\u3001\u5b9f\u969b\u306e\u52d5\u4f5c\u78ba\u8a8d\u306f\u307e\u3060\u884c\u3048\u3066\u3044\u307e\u305b\u3093<\/li>\n<li data-line=\"13\" class=\"code-line\">Remix 3 \u306f\u73fe\u5728\u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u6bb5\u968e\u306e\u305f\u3081\u3001\u5b9f\u969b\u306e API \u3084\u4ed5\u69d8\u306f\u5909\u66f4\u3055\u308c\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059<\/li>\n<li data-line=\"14\" class=\"code-line\">\u30b3\u30fc\u30c9\u306e\u6b63\u78ba\u6027\u306b\u3064\u3044\u3066\u306f\u3001\u8ffd\u3063\u3066\u78ba\u8a8d\u30fb\u4fee\u6b63\u3059\u308b\u4e88\u5b9a\u3067\u3059<\/li>\n<li data-line=\"15\" class=\"code-line\">\u3088\u308a\u6b63\u78ba\u306a\u60c5\u5831\u306b\u3064\u3044\u3066\u306f\u3001\u4e0a\u8a18\u306e\u52d5\u753b\u3092\u76f4\u63a5\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044<\/li>\n<\/ul>\n<\/div>\n<\/aside>\n<aside class=\"msg message\"><span class=\"msg-symbol\">!<\/span><\/p>\n<div class=\"msg-content\">\n<p data-line=\"19\" class=\"code-line\">\u3053\u306e\u8a18\u4e8b\u306f\u3001\u30bb\u30c3\u30b7\u30e7\u30f3\u306e\u524d\u534a\u90e8\u5206\uff08Part 1\uff09\u306e\u307f\u3092\u6271\u3044\u307e\u3059\u3002\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u95a2\u9023\u306e\u5185\u5bb9\u306f Part 2 \u3067\u8a9e\u3089\u308c\u307e\u3057\u305f\u3002<\/p>\n<\/div>\n<\/aside>\n<h2 id=\"%E3%81%AA%E3%81%9C-remix-3-%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%AE%E3%81%8B\" data-line=\"22\" class=\"code-line\">\n \u306a\u305c Remix 3 \u3092\u4f5c\u308b\u306e\u304b<\/h2>\n<blockquote data-line=\"24\" class=\"code-line\">\n<p data-line=\"24\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=11850s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (3:17:30~)<\/a><\/p>\n<\/blockquote>\n<h3 id=\"react-%E3%81%B8%E3%81%AE%E6%84%9F%E8%AC%9D%E3%81%A8%E6%B1%BA%E5%88%A5\" data-line=\"26\" class=\"code-line\">\n React \u3078\u306e\u611f\u8b1d\u3068\u6c7a\u5225<\/h3>\n<p data-line=\"28\" class=\"code-line\">Michael Jackson \u3068 Ryan Florence \u306f\u3001React \u306b\u5bfe\u3057\u3066\u6df1\u3044\u656c\u610f\u3092\u6301\u3063\u3066\u3044\u307e\u3059\u3002React \u306f\u5f7c\u3089\u306e\u30ad\u30e3\u30ea\u30a2\u3092\u5909\u3048\u3001Web \u958b\u767a\u306e\u8003\u3048\u65b9\u3092\u4e00\u5909\u3055\u305b\u307e\u3057\u305f\u3002React Router \u309210\u5e74\u4ee5\u4e0a\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u3057\u3001Shopify \u306e\u3088\u3046\u306a\u5927\u4f01\u696d\u304c\u305d\u308c\u306b\u4f9d\u5b58\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p data-line=\"30\" class=\"code-line\">\u3057\u304b\u3057\u3001\u3053\u30531\u301c2\u5e74\u3001\u5f7c\u3089\u306f React \u306e\u65b9\u5411\u6027\u306b\u9055\u548c\u611f\u3092\u611f\u3058\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<blockquote data-line=\"32\" class=\"code-line\">\n<p data-line=\"32\" class=\"code-line\">\u300c\u50d5\u3089\u306f\u3082\u3046\u3001React \u304c\u3069\u3053\u306b\u5411\u304b\u3063\u3066\u3044\u308b\u306e\u304b\u5206\u304b\u3089\u306a\u304f\u306a\u3063\u3066\u304d\u305f\u300d- Michael Jackson<\/p>\n<\/blockquote>\n<h3 id=\"%E7%8F%BE%E4%BB%A3%E3%81%AE%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E9%96%8B%E7%99%BA%E3%81%AE%E8%A4%87%E9%9B%91%E3%81%95\" data-line=\"34\" class=\"code-line\">\n \u73fe\u4ee3\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u8907\u96d1\u3055<\/h3>\n<p data-line=\"36\" class=\"code-line\">Ryan \u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u306e\u8907\u96d1\u3055\u306b\u3064\u3044\u3066\u7387\u76f4\u306b\u8a9e\u308a\u307e\u3059\uff1a<\/p>\n<blockquote data-line=\"38\" class=\"code-line\">\n<p data-line=\"38\" class=\"code-line\">\u300c\u6b63\u76f4\u8a00\u3063\u3066\u3001\u5168\u4f53\u50cf\u3092\u628a\u63e1\u3067\u304d\u306a\u304f\u306a\u3063\u3066\u304d\u305f\u3002\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u8005\u3068\u3057\u3066\u3001\u81ea\u5206\u3067\u3082\u4f55\u304c\u8d77\u304d\u3066\u3044\u308b\u306e\u304b\u5206\u304b\u3089\u306a\u3044\u6642\u304c\u3042\u308b\u300d- Ryan Florence<\/p>\n<\/blockquote>\n<p data-line=\"40\" class=\"code-line\">\u5f7c\u3089\u306f\u3001\u3053\u306e\u72b6\u6cc1\u3092\u300c\u5c71\u3092\u767b\u308b\u300d\u6bd4\u55a9\u3067\u8868\u73fe\u3057\u3066\u3044\u307e\u3059\uff1a<\/p>\n<blockquote data-line=\"42\" class=\"code-line\">\n<p data-line=\"42\" class=\"code-line\">\u300c\u50d5\u3089\u306f\u3053\u306e\u5c71\u3092\u767b\u3063\u3066\u304d\u3066\u3001\u9802\u4e0a\u3067\u30ad\u30e3\u30f3\u30d7\u3057\u3088\u3046\u3068\u3057\u3066\u3044\u308b\u3002\u3067\u3082\u3001\u767b\u3063\u3066\u304d\u305f\u304a\u304b\u3052\u3067\u8996\u91ce\u304c\u5e83\u304c\u308a\u3001\u5225\u306e\u5c71\u304c\u898b\u3048\u3066\u304d\u305f\u3002\u3082\u3063\u3068\u30b7\u30f3\u30d7\u30eb\u306a\u5c71\u304c\u3002\u3060\u304b\u3089\u3001\u3053\u306e\u5c71\u3092\u4e0b\u308a\u3066\u3001\u3042\u3063\u3061\u306e\u5c71\u306b\u767b\u308a\u76f4\u3059\u3053\u3068\u306b\u3057\u305f\u300d- Ryan Florence<\/p>\n<\/blockquote>\n<h3 id=\"web-%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E9%80%B2%E5%8C%96\" data-line=\"44\" class=\"code-line\">\n Web \u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306e\u9032\u5316<\/h3>\n<p data-line=\"46\" class=\"code-line\">Node.js \u306f16\u6b73\u3001React \u306f12\u301c13\u6b73\u3067\u3059\u3002\u305d\u306e\u9593\u306b Web \u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u5927\u304d\u304f\u9032\u5316\u3057\u307e\u3057\u305f\uff1a<\/p>\n<ul data-line=\"48\" class=\"code-line\">\n<li data-line=\"48\" class=\"code-line\">\n<strong>ES Modules<\/strong>: \u30d6\u30e9\u30a6\u30b6\u3067\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u30ed\u30fc\u30c9\u3067\u304d\u308b<\/li>\n<li data-line=\"49\" class=\"code-line\">\n<strong>TypeScript<\/strong>: \u578b\u306b\u3088\u308b\u958b\u767a\u4f53\u9a13\u306e\u5411\u4e0a<\/li>\n<li data-line=\"50\" class=\"code-line\">\n<strong>Service Workers<\/strong>: \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u6a5f\u80fd\u3092\u30d6\u30e9\u30a6\u30b6\u3067<\/li>\n<li data-line=\"51\" class=\"code-line\">\n<strong>Web Streams<\/strong>: Node.js \u306b\u3082\u6a19\u6e96\u30b9\u30c8\u30ea\u30fc\u30e0\u304c<\/li>\n<li data-line=\"52\" class=\"code-line\">\n<strong>Fetch API<\/strong>: Node.js \u3067\u3082\u4f7f\u3048\u308b<\/li>\n<li data-line=\"53\" class=\"code-line\">\n<strong>Web Crypto<\/strong>: \u6697\u53f7\u5316\u6a5f\u80fd\u304c\u6a19\u6e96\u306b<\/li>\n<\/ul>\n<blockquote data-line=\"55\" class=\"code-line\">\n<p data-line=\"55\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=12165s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (3:22:45~)<\/a><\/p>\n<\/blockquote>\n<h3 id=\"ai-%E6%99%82%E4%BB%A3%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF\" data-line=\"57\" class=\"code-line\">\n AI \u6642\u4ee3\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af<\/h3>\n<p data-line=\"59\" class=\"code-line\">Ryan \u306f\u3001AI \u6642\u4ee3\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u5fc5\u8981\u306a\u8981\u7d20\u306b\u3064\u3044\u3066\u8a9e\u308a\u307e\u3059\uff1a<\/p>\n<ul data-line=\"61\" class=\"code-line\">\n<li data-line=\"61\" class=\"code-line\">\n<strong>\u5b89\u5b9a\u3057\u305f URL<\/strong>: LLM \u304c\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u3001URL \u306f\u5e38\u306b\u540c\u3058\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308b<\/li>\n<li data-line=\"62\" class=\"code-line\">\n<strong>\u30b7\u30f3\u30d7\u30eb\u306a\u30b3\u30fc\u30c9<\/strong>: AI \u304c\u751f\u6210\u30fb\u7406\u89e3\u3057\u3084\u3059\u3044\u30b3\u30fc\u30c9<\/li>\n<li data-line=\"63\" class=\"code-line\">\n<strong>\u30d0\u30f3\u30c9\u30e9\u30fc\u3078\u306e\u4f9d\u5b58\u3092\u6e1b\u3089\u3059<\/strong>: \u30e9\u30f3\u30bf\u30a4\u30e0\u30bb\u30de\u30f3\u30c6\u30a3\u30af\u30b9\u304c\u30d0\u30f3\u30c9\u30e9\u30fc\u306b\u4f9d\u5b58\u3057\u306a\u3044<\/li>\n<\/ul>\n<p data-line=\"65\" class=\"code-line\">React \u306e <code>use server<\/code> \u3067\u306f\u3001RPC \u95a2\u6570\u306e URL \u304c\u30d3\u30eb\u30c9\u3054\u3068\u306b\u5909\u308f\u3063\u3066\u3057\u307e\u3046\u305f\u3081\u3001AI \u304c\u305d\u308c\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u56f0\u96e3\u3067\u3059\u3002<\/p>\n<blockquote data-line=\"67\" class=\"code-line\">\n<p data-line=\"67\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=11974s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (3:19:34~)<\/a><\/p>\n<\/blockquote>\n<h2 id=\"remix-3-%E3%81%AE%E6%A0%B8%E5%BF%83%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2\" data-line=\"69\" class=\"code-line\">\n Remix 3 \u306e\u6838\u5fc3\u30a2\u30a4\u30c7\u30a2<\/h2>\n<h3 id=\"%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97-(setup-scope)\" data-line=\"71\" class=\"code-line\">\n \u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u30b9\u30b3\u30fc\u30d7 (Setup Scope)<\/h3>\n<blockquote data-line=\"73\" class=\"code-line\">\n<p data-line=\"73\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=13803s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (3:50:03~)<\/a><\/p>\n<\/blockquote>\n<p data-line=\"75\" class=\"code-line\">Remix 3 \u306e\u6700\u3082\u9769\u65b0\u7684\u306a\u6982\u5ff5\u304c <strong>Setup Scope\uff08\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u30b9\u30b3\u30fc\u30d7\uff09<\/strong> \u3067\u3059\u3002<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-javascript\"><code class=\"language-javascript code-line\" data-line=\"77\"><span class=\"token keyword module\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> events <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword module\">from<\/span> <span class=\"token string\">\"@remix-run\/events\"<\/span>\n<span class=\"token keyword module\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> tempo <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword module\">from<\/span> <span class=\"token string\">\".\/01-intro\/tempo\"<\/span>\n<span class=\"token keyword module\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> createRoot<span class=\"token punctuation\">,<\/span> type <span class=\"token maybe-class-name\">Remix<\/span> <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword module\">from<\/span> <span class=\"token string\">\"@remix-run\/dom\"<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\"><span class=\"token maybe-class-name\">App<\/span><\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token keyword\">this<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">Remix<\/span><span class=\"token punctuation\">.<\/span><span class=\"token property-access\"><span class=\"token maybe-class-name\">Handle<\/span><\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  \n  <span class=\"token keyword\">let<\/span> bpm <span class=\"token operator\">=<\/span> <span class=\"token number\">60<\/span><span class=\"token punctuation\">;<\/span>\n\n  \n  <span class=\"token keyword control-flow\">return<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token operator\">button\n      on<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token function\">tempo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n        bpm <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">detail<\/span>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n    <span class=\"token operator\">&gt;<\/span>\n      <span class=\"token constant\">BPM<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>bpm<span class=\"token punctuation\">}<\/span>\n    <span class=\"token operator\"><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token function\">createRoot<\/span><span class=\"token punctuation\">(<\/span><span class=\"token dom variable\">document<\/span><span class=\"token punctuation\">.<\/span><span class=\"token property-access\">body<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\"><span class=\"token maybe-class-name\">App<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">)<\/span>\n<\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<p data-line=\"102\" class=\"code-line\">\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8\uff1a<\/p>\n<ol data-line=\"104\" class=\"code-line\">\n<li data-line=\"104\" class=\"code-line\"><strong>\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u30b3\u30fc\u30c9\u306f1\u56de\u3060\u3051\u5b9f\u884c\u3055\u308c\u308b<\/strong><\/li>\n<li data-line=\"105\" class=\"code-line\">\n<strong>\u72b6\u614b\u306f JavaScript \u306e\u30af\u30ed\u30fc\u30b8\u30e3\u306b\u4fdd\u5b58\u3055\u308c\u308b<\/strong>\uff08Remix \u306e\u7279\u5225\u306a\u6a5f\u80fd\u3067\u306f\u306a\u3044\uff09<\/li>\n<li data-line=\"106\" class=\"code-line\"><strong>\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306f <code>this.update()<\/code> \u3092\u660e\u793a\u7684\u306b\u547c\u3076<\/strong><\/li>\n<\/ol>\n<blockquote data-line=\"108\" class=\"code-line\">\n<p data-line=\"108\" class=\"code-line\">\u300c\u30dc\u30bf\u30f3\u306f\u3069\u3046\u3084\u3063\u3066 BPM \u304c\u5909\u308f\u3063\u305f\u3053\u3068\u3092\u77e5\u308b\u306e\uff1f <strong>\u77e5\u3089\u306a\u3044<\/strong>\u3002\u305d\u308c\u304c Remix 3 \u306e\u7d20\u6674\u3089\u3057\u3044\u3068\u3053\u308d\u3002\u3053\u308c\u306f\u305f\u3060\u306e JavaScript \u30b9\u30b3\u30fc\u30d7\u3002\u541b\u304c <code>update()<\/code> \u3092\u547c\u3093\u3060\u6642\u3060\u3051\u3001\u30ec\u30f3\u30c0\u30fc\u95a2\u6570\u3092\u518d\u5b9f\u884c\u3059\u308b\u300d- Ryan Florence<\/p>\n<\/blockquote>\n<h3 id=\"remix-events%3A-%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E7%AC%AC%E4%B8%80%E7%B4%9A%E5%B8%82%E6%B0%91%E3%81%AB\" data-line=\"110\" class=\"code-line\">\n Remix Events: \u30a4\u30d9\u30f3\u30c8\u3092\u7b2c\u4e00\u7d1a\u5e02\u6c11\u306b<\/h3>\n<blockquote data-line=\"112\" class=\"code-line\">\n<p data-line=\"112\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=12890s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (3:34:50~)<\/a><\/p>\n<\/blockquote>\n<p data-line=\"114\" class=\"code-line\">Remix 3 \u3067\u306f\u3001<strong>\u30a4\u30d9\u30f3\u30c8\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u540c\u3058\u30ec\u30d9\u30eb\u306e\u62bd\u8c61\u5316<\/strong>\u3068\u3057\u3066\u6271\u3044\u307e\u3059\u3002<\/p>\n<h4 id=\"click-%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E8%A4%87%E9%9B%91%E3%81%95\" data-line=\"116\" class=\"code-line\">\n <code>click<\/code> \u30a4\u30d9\u30f3\u30c8\u306e\u8907\u96d1\u3055<\/h4>\n<p data-line=\"118\" class=\"code-line\">Ryan \u306f\u3001<code>click<\/code> \u30a4\u30d9\u30f3\u30c8\u306e\u8907\u96d1\u3055\u3092\u8aac\u660e\u3057\u307e\u3059\uff1a<\/p>\n<ul data-line=\"120\" class=\"code-line\">\n<li data-line=\"120\" class=\"code-line\">\u30de\u30a6\u30b9\u30c0\u30a6\u30f3 + \u30de\u30a6\u30b9\u30a2\u30c3\u30d7\uff08\u540c\u3058\u8981\u7d20\u4e0a\uff09<\/li>\n<li data-line=\"121\" class=\"code-line\">\u30ad\u30fc\u30dc\u30fc\u30c9\u306e Space \u30c0\u30a6\u30f3 + Space \u30a2\u30c3\u30d7\uff08Escape \u306a\u3057\uff09<\/li>\n<li data-line=\"122\" class=\"code-line\">\u30ad\u30fc\u30dc\u30fc\u30c9\u306e Enter \u30c0\u30a6\u30f3\uff08\u5373\u5ea7\u306b\u30af\u30ea\u30c3\u30af + \u30ea\u30d4\u30fc\u30c8\uff09<\/li>\n<li data-line=\"123\" class=\"code-line\">\u30bf\u30c3\u30c1\u30b9\u30bf\u30fc\u30c8 + \u30bf\u30c3\u30c1\u30a2\u30c3\u30d7\uff08\u30b9\u30ef\u30a4\u30d7\u306a\u3057\uff09<\/li>\n<\/ul>\n<p data-line=\"125\" class=\"code-line\">\u3053\u308c\u3089\u3059\u3079\u3066\u304c <code>click<\/code> \u30a4\u30d9\u30f3\u30c8\u3067\u3059\u3002<\/p>\n<h4 id=\"%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90\" data-line=\"127\" class=\"code-line\">\n \u30ab\u30b9\u30bf\u30e0\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u306e\u4f5c\u6210<\/h4>\n<p data-line=\"129\" class=\"code-line\">Remix Events \u3092\u4f7f\u3046\u3068\u3001\u72ec\u81ea\u306e\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3067\u304d\u307e\u3059\uff1a<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-javascript\"><code class=\"language-javascript code-line\" data-line=\"131\"><span class=\"token keyword module\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> createInteraction<span class=\"token punctuation\">,<\/span> events <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword module\">from<\/span> <span class=\"token string\">\"@remix-run\/events\"<\/span>\n<span class=\"token keyword module\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> pressDown <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword module\">from<\/span> <span class=\"token string\">\"@remix-run\/events\/press\"<\/span>\n\n<span class=\"token keyword module\">export<\/span> <span class=\"token keyword\">const<\/span> tempo <span class=\"token operator\">=<\/span> createInteraction<span class=\"token operator\"><span class=\"token maybe-class-name\">HTMLElement<\/span><span class=\"token punctuation\">,<\/span> number<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span>\n  <span class=\"token string\">\"rmx:tempo\"<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> target<span class=\"token punctuation\">,<\/span> dispatch <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">let<\/span> <span class=\"token literal-property property\">taps<\/span><span class=\"token operator\">:<\/span> number<span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span>\n    <span class=\"token keyword\">let<\/span> <span class=\"token literal-property property\">resetTimer<\/span><span class=\"token operator\">:<\/span> number <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span>\n\n    <span class=\"token keyword\">function<\/span> <span class=\"token function\">handleTap<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n      <span class=\"token function\">clearTimeout<\/span><span class=\"token punctuation\">(<\/span>resetTimer<span class=\"token punctuation\">)<\/span>\n      taps<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">push<\/span><span class=\"token punctuation\">(<\/span><span class=\"token known-class-name class-name\">Date<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span>\n      taps <span class=\"token operator\">=<\/span> taps<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">tap<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token known-class-name class-name\">Date<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">-<\/span> tap <span class=\"token operator\"> <span class=\"token number\">4000<\/span><span class=\"token punctuation\">)<\/span>\n      <span class=\"token keyword control-flow\">if<\/span> <span class=\"token punctuation\">(<\/span>taps<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">length<\/span> <span class=\"token operator\">&gt;=<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n        <span class=\"token keyword\">let<\/span> intervals <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token keyword control-flow\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\"> taps<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">length<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n          intervals<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">push<\/span><span class=\"token punctuation\">(<\/span>taps<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">-<\/span> taps<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">-<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span>\n        <span class=\"token keyword\">let<\/span> bpm <span class=\"token operator\">=<\/span> intervals<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">map<\/span><span class=\"token punctuation\">(<\/span>\n          <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">interval<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token number\">60000<\/span> <span class=\"token operator\">\/<\/span> interval\n        <span class=\"token punctuation\">)<\/span>\n        <span class=\"token keyword\">let<\/span> avgTempo <span class=\"token operator\">=<\/span> <span class=\"token known-class-name class-name\">Math<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">round<\/span><span class=\"token punctuation\">(<\/span>\n          bpm<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">reduce<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">sum<span class=\"token punctuation\">,<\/span> value<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> sum <span class=\"token operator\">+<\/span> value<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span>\n            bpm<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">length<\/span>\n        <span class=\"token punctuation\">)<\/span>\n        <span class=\"token function\">dispatch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> <span class=\"token literal-property property\">detail<\/span><span class=\"token operator\">:<\/span> avgTempo <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\n      <span class=\"token punctuation\">}<\/span>\n      resetTimer <span class=\"token operator\">=<\/span> <span class=\"token dom variable\">window<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">setTimeout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n        taps <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span>\n      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">4000<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">}<\/span>\n\n    <span class=\"token keyword control-flow\">return<\/span> <span class=\"token function\">events<\/span><span class=\"token punctuation\">(<\/span>target<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token function\">pressDown<\/span><span class=\"token punctuation\">(<\/span>handleTap<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">)<\/span>\n<\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<p data-line=\"169\" class=\"code-line\">\u4f7f\u3044\u65b9\uff1a<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-javascript\"><code class=\"language-javascript code-line\" data-line=\"171\"><span class=\"token operator\">button on<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token function\">tempo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n  bpm <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">detail<\/span>\n  <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\n  <span class=\"token constant\">BPM<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>bpm<span class=\"token punctuation\">}<\/span>\n<span class=\"token operator\"><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span>\n<\/span><\/span><\/code><\/pre>\n<\/div>\n<blockquote data-line=\"180\" class=\"code-line\">\n<p data-line=\"180\" class=\"code-line\">\u300c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u8981\u7d20\u306b\u5bfe\u3059\u308b\u62bd\u8c61\u5316\u3067\u3042\u308b\u3088\u3046\u306b\u3001\u30ab\u30b9\u30bf\u30e0\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u306f\u30a4\u30d9\u30f3\u30c8\u306b\u5bfe\u3059\u308b\u62bd\u8c61\u5316\u3060\u300d- Ryan Florence<\/p>\n<\/blockquote>\n<p data-line=\"182\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--iyhC7x8---\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/260a4d86b2ec45cffe665cf6.png%3Fsha%3D94228daff5e3e5105a4dc5c0518b1c8208fcb2c2\" alt=\"Remix Events \u306e\u6982\u5ff5\u56f3\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u56f3: Components are to elements as custom interactions are to events<\/em><\/p>\n<h3 id=\"context-api%3A-%E5%86%8D%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%92%E5%BC%95%E3%81%8D%E8%B5%B7%E3%81%93%E3%81%95%E3%81%AA%E3%81%84\" data-line=\"185\" class=\"code-line\">\n Context API: \u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u5f15\u304d\u8d77\u3053\u3055\u306a\u3044<\/h3>\n<aside class=\"msg alert\"><span class=\"msg-symbol\">!<\/span><\/p>\n<div class=\"msg-content\">\n<ul data-line=\"188\" class=\"code-line\">\n<li data-line=\"188\" class=\"code-line\">\u3053\u3053\u4ee5\u964d\u306b\u51fa\u3066\u304f\u308b\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306f\u3001\u6587\u5b57\u8d77\u3053\u3057\u3067\u8a71\u3055\u308c\u3066\u3044\u308b\u5185\u5bb9\u304b\u3089\u3001AI \u304c\u30b3\u30fc\u30c9\u3092\u63a8\u6e2c\u3057\u305f\u3082\u306e\u306a\u306e\u3067\u3001\u6b63\u3057\u304f\u306a\u3044\u53ef\u80fd\u6027\u304c\u9ad8\u3044\u3067\u3059\u3002<\/li>\n<li data-line=\"189\" class=\"code-line\">\u4eca\u5f8c\u3001\u52d5\u753b\u3092\u898b\u76f4\u3057\u3066\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u78ba\u8a8d\u3057\u3066\u4fee\u6b63\u3057\u3066\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/div>\n<\/aside>\n<blockquote data-line=\"192\" class=\"code-line\">\n<p data-line=\"192\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=14856s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (4:07:36~)<\/a><\/p>\n<\/blockquote>\n<p data-line=\"194\" class=\"code-line\">Remix 3 \u306e Context API \u306f\u3001React \u3068\u306f\u6839\u672c\u7684\u306b\u7570\u306a\u308a\u307e\u3059\u3002<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-typescript\"><code class=\"language-typescript code-line\" data-line=\"196\">\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">App<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token operator\">:<\/span> RemixHandle<span class=\"token operator\"><span class=\"token punctuation\">{<\/span> drummer<span class=\"token operator\">:<\/span> Drummer <span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> drummer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Drummer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  \n  <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>context<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> drummer <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token operator\">DrumMachine <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">TempoDisplay<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token operator\">:<\/span> RemixHandle<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  \n  <span class=\"token keyword\">const<\/span> drummer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>context<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span>App<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>drummer<span class=\"token punctuation\">;<\/span>\n\n  \n  drummer<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'change'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>update<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">return<\/span> <span class=\"token operator\">div<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">{<\/span>drummer<span class=\"token punctuation\">.<\/span>bpm<span class=\"token punctuation\">}<\/span> <span class=\"token constant\">BPM<\/span><span class=\"token operator\"><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<p data-line=\"223\" class=\"code-line\">\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8\uff1a<\/p>\n<ol data-line=\"225\" class=\"code-line\">\n<li data-line=\"225\" class=\"code-line\"><strong><code>context.set()<\/code> \u306f\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u5f15\u304d\u8d77\u3053\u3055\u306a\u3044<\/strong><\/li>\n<li data-line=\"226\" class=\"code-line\">\n<strong><code>context.get(Component)<\/code> \u3067\u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u3092\u76f4\u63a5\u53c2\u7167<\/strong>\uff08&#8221;Go to Definition&#8221; \u304c\u52b9\u304f\uff01\uff09<\/li>\n<li data-line=\"227\" class=\"code-line\">\n<strong>\u578b\u5b89\u5168<\/strong>: \u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u578b\u304b\u3089\u81ea\u52d5\u63a8\u8ad6<\/li>\n<\/ol>\n<p data-line=\"229\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--3UgzMfIA--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/ada9eb6df98240e52a69a5ed.png%3Fsha%3D3143a4e6b31ae9c4242d32cfbf4a1c5efeceae85\" alt=\"Context API \u306e\u5b9f\u88c5\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u56f3: Go to Definition \u3067\u30d7\u30ed\u30d0\u30a4\u30c0\u30fc\u306b\u76f4\u63a5\u30b8\u30e3\u30f3\u30d7\u3067\u304d\u308b<\/em><\/p>\n<h3 id=\"signal%3A-%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86%E3%81%AE%E7%AE%A1%E7%90%86\" data-line=\"232\" class=\"code-line\">\n Signal: \u975e\u540c\u671f\u51e6\u7406\u306e\u7ba1\u7406<\/h3>\n<blockquote data-line=\"234\" class=\"code-line\">\n<p data-line=\"234\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=16370s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (4:32:50~)<\/a><\/p>\n<\/blockquote>\n<p data-line=\"236\" class=\"code-line\">Remix 3 \u306b\u306f\u91cd\u8981\u306a\u539f\u5247\u304c\u3042\u308a\u307e\u3059\uff1a<\/p>\n<blockquote data-line=\"238\" class=\"code-line\">\n<p data-line=\"238\" class=\"code-line\">\u300c\u95a2\u6570\u3092\u6e21\u3057\u305f\u3089\u3001signal \u3092\u8fd4\u3059\u300d<\/p>\n<\/blockquote>\n<p data-line=\"240\" class=\"code-line\">\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u30fc\u306b\u306f\u81ea\u52d5\u7684\u306b <code>signal<\/code> \u304c\u6e21\u3055\u308c\u307e\u3059\uff08<code>AbortController<\/code> \u306e signal\uff09\uff1a<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-javascript\"><code class=\"language-javascript code-line\" data-line=\"242\"><span class=\"token operator\">select\n  <span class=\"token literal-property property\">on<\/span><span class=\"token operator\">:<\/span>change<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<span class=\"token punctuation\">,<\/span> signal<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n    state <span class=\"token operator\">=<\/span> <span class=\"token string\">'loading'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n    \n    <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword control-flow\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">\/api\/cities?state=<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>event<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">target<\/span><span class=\"token punctuation\">.<\/span><span class=\"token property-access\">value<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n      signal\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n    \n    <span class=\"token keyword control-flow\">if<\/span> <span class=\"token punctuation\">(<\/span>signal<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">aborted<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword control-flow\">return<\/span><span class=\"token punctuation\">;<\/span>\n\n    cities <span class=\"token operator\">=<\/span> <span class=\"token keyword control-flow\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    state <span class=\"token operator\">=<\/span> <span class=\"token string\">'loaded'<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span>\n<span class=\"token operator\">&gt;<\/span>\n<\/span><\/code><\/pre>\n<\/div>\n<p data-line=\"263\" class=\"code-line\">\u30e6\u30fc\u30b6\u30fc\u304c\u9023\u7d9a\u3057\u3066\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u3092\u5909\u66f4\u3059\u308b\u3068\uff1a<\/p>\n<ol data-line=\"265\" class=\"code-line\">\n<li data-line=\"265\" class=\"code-line\">\u53e4\u3044\u30cf\u30f3\u30c9\u30e9\u30fc\u306e signal \u304c abort \u3055\u308c\u308b<\/li>\n<li data-line=\"266\" class=\"code-line\">\n<code>fetch()<\/code> \u304c\u81ea\u52d5\u7684\u306b\u30ad\u30e3\u30f3\u30bb\u30eb\u3055\u308c\u308b<\/li>\n<li data-line=\"267\" class=\"code-line\">\n<code>signal.aborted<\/code> \u30c1\u30a7\u30c3\u30af\u3067\u53e4\u3044\u51e6\u7406\u3092\u30b9\u30ad\u30c3\u30d7<\/li>\n<\/ol>\n<p data-line=\"269\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--OaJPnj6C--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/3ab05ed6c26332da5716371c.png%3Fsha%3D1dd877aaee4042f42acd7c46e3f87280c5dcd8fc\" alt=\"Signal \u3067\u30ec\u30fc\u30b9\u30b3\u30f3\u30c7\u30a3\u30b7\u30e7\u30f3\u3092\u89e3\u6c7a\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u56f3: \u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30bf\u30d6\u3067\u53e4\u3044\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u30ad\u30e3\u30f3\u30bb\u30eb\u3055\u308c\u3066\u3044\u308b\u69d8\u5b50<\/em><\/p>\n<p data-line=\"272\" class=\"code-line\">\u3053\u308c\u306b\u3088\u308a\u3001<strong>\u30ec\u30fc\u30b9\u30b3\u30f3\u30c7\u30a3\u30b7\u30e7\u30f3\u3092\u624b\u52d5\u3067\u3001\u3057\u304b\u3057\u30b7\u30f3\u30d7\u30eb\u306b\u89e3\u6c7a<\/strong>\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2 id=\"%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%83%87%E3%83%A2%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6\" data-line=\"274\" class=\"code-line\">\n \u5b9f\u969b\u306e\u30c7\u30e2\u304b\u3089\u5b66\u3076<\/h2>\n<h3 id=\"%E3%83%87%E3%83%A21%3A-%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC%E3%82%A2%E3%83%97%E3%83%AA\" data-line=\"276\" class=\"code-line\">\n \u30c7\u30e21: \u30ab\u30a6\u30f3\u30bf\u30fc\u30a2\u30d7\u30ea<\/h3>\n<blockquote data-line=\"278\" class=\"code-line\">\n<p data-line=\"278\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=12543s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (3:29:03~)<\/a><\/p>\n<\/blockquote>\n<p data-line=\"280\" class=\"code-line\">\u6700\u3082\u30b7\u30f3\u30d7\u30eb\u306a\u4f8b\u304b\u3089\u59cb\u307e\u308a\u307e\u3059\u3002<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-javascript\"><code class=\"language-javascript code-line\" data-line=\"282\">\n<span class=\"token keyword\">const<\/span> button <span class=\"token operator\">=<\/span> <span class=\"token dom variable\">document<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'button'<\/span><span class=\"token punctuation\">)<\/span>\n<span class=\"token keyword\">let<\/span> count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span>\n\nbutton<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">textContent<\/span> <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Count: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>count<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span>\nbutton<span class=\"token punctuation\">.<\/span><span class=\"token method-variable function-variable method function property-access\">onclick<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n  count<span class=\"token operator\">++<\/span>\n  button<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">textContent<\/span> <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Count: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>count<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<\/div>\n<p data-line=\"294\" class=\"code-line\">\u3053\u308c\u3092 Remix 3 \u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\uff1a<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-javascript\"><code class=\"language-javascript code-line\" data-line=\"296\"><span class=\"token keyword\">function<\/span> <span class=\"token function\"><span class=\"token maybe-class-name\">Counter<\/span><\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token keyword\">this<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">RemixHandle<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">let<\/span> count <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword control-flow\">return<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword control-flow\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token operator\">button\n        <span class=\"token literal-property property\">on<\/span><span class=\"token operator\">:<\/span>click<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n          count<span class=\"token operator\">++<\/span>\n          <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token operator\">&gt;<\/span>\n        <span class=\"token literal-property property\">Count<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>count<span class=\"token punctuation\">}<\/span>\n      <span class=\"token operator\"><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/span><\/span><\/code><\/pre>\n<\/div>\n<blockquote data-line=\"315\" class=\"code-line\">\n<p data-line=\"315\" class=\"code-line\">\u300c\u5c71\u3092\u4e0b\u308a\u3066\u3044\u308b\u3093\u3060\u3002\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u306f\u4f55\u304c\u3042\u308b\uff1f\u300d- Ryan Florence<\/p>\n<\/blockquote>\n<p data-line=\"317\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--NwwGjzNv--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/b9ee447a2ac123a6e8e885b5.png%3Fsha%3D9c95216c7d74bfe181c89c2f106dd75c6db297f1\" alt=\"\u30ab\u30a6\u30f3\u30bf\u30fc\u30a2\u30d7\u30ea\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u56f3: \u30b7\u30f3\u30d7\u30eb\u306a\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u5b9f\u88c5<\/em><\/p>\n<h3 id=\"%E3%83%87%E3%83%A22%3A-bpm-(tempo-tapper)-%E3%82%A2%E3%83%97%E3%83%AA\" data-line=\"320\" class=\"code-line\">\n \u30c7\u30e22: BPM (Tempo Tapper) \u30a2\u30d7\u30ea<\/h3>\n<blockquote data-line=\"322\" class=\"code-line\">\n<p data-line=\"322\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=12782s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (3:33:02~)<\/a><\/p>\n<\/blockquote>\n<p data-line=\"324\" class=\"code-line\">\u30dc\u30bf\u30f3\u3092\u30bf\u30c3\u30d7\u3057\u3066 BPM\uff08\u30c6\u30f3\u30dd\uff09\u3092\u8a08\u7b97\u3059\u308b\u30a2\u30d7\u30ea\u3067\u3059\u3002<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-javascript\"><code class=\"language-javascript code-line\" data-line=\"326\"><span class=\"token keyword\">function<\/span> <span class=\"token function\"><span class=\"token maybe-class-name\">TempoTapper<\/span><\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token keyword\">this<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">RemixHandle<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">let<\/span> bpm <span class=\"token operator\">=<\/span> <span class=\"token number\">60<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword control-flow\">return<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword control-flow\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token operator\">button\n        <span class=\"token literal-property property\">on<\/span><span class=\"token operator\">:<\/span>tempo<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n          bpm <span class=\"token operator\">=<\/span> e<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">detail<\/span><span class=\"token punctuation\">;<\/span>\n          <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token operator\">&gt;<\/span>\n        <span class=\"token punctuation\">{<\/span>bpm<span class=\"token punctuation\">}<\/span> <span class=\"token constant\">BPM<\/span>\n      <span class=\"token operator\"><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/span><\/span><\/code><\/pre>\n<\/div>\n<p data-line=\"345\" class=\"code-line\"><code>tempo<\/code> \u30ab\u30b9\u30bf\u30e0\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u304c\u3001\u8907\u96d1\u306a\u30bf\u30c3\u30d7\u8a08\u7b97\u30ed\u30b8\u30c3\u30af\u3092\u30ab\u30d7\u30bb\u30eb\u5316\u3057\u3066\u3044\u307e\u3059\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u7d50\u679c\u3092\u53d7\u3051\u53d6\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n<p data-line=\"347\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--9Bf1hKMl--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/14d6bbae692b58ff0e0c3b0e.png%3Fsha%3D9b5a38232c60d409baa0e1fe56185903045aa0e1\" alt=\"BPM\u8a08\u7b97\u30ed\u30b8\u30c3\u30af\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u56f3: \u30bf\u30c3\u30d7\u9593\u9694\u3092\u8a08\u7b97\u3057\u3066\u5e73\u5747BPM\u3092\u7b97\u51fa<\/em><\/p>\n<h3 id=\"%E3%83%87%E3%83%A23%3A-%E3%83%89%E3%83%A9%E3%83%A0%E3%83%9E%E3%82%B7%E3%83%B3\" data-line=\"350\" class=\"code-line\">\n \u30c7\u30e23: \u30c9\u30e9\u30e0\u30de\u30b7\u30f3<\/h3>\n<blockquote data-line=\"352\" class=\"code-line\">\n<p data-line=\"352\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=14162s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (3:56:02~)<\/a><\/p>\n<\/blockquote>\n<p data-line=\"354\" class=\"code-line\">\u5b8c\u5168\u306a\u30c9\u30e9\u30e0\u30de\u30b7\u30f3\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002<\/p>\n<p data-line=\"356\" class=\"code-line\">\u4e3b\u306a\u6a5f\u80fd\uff1a<\/p>\n<ul data-line=\"358\" class=\"code-line\">\n<li data-line=\"358\" class=\"code-line\">Play\/Stop \u30dc\u30bf\u30f3<\/li>\n<li data-line=\"359\" class=\"code-line\">\u30c6\u30f3\u30dd\u8abf\u6574\uff08BPM\uff09<\/li>\n<li data-line=\"360\" class=\"code-line\">\u30d3\u30b8\u30e5\u30a2\u30e9\u30a4\u30b6\u30fc\uff08\u97f3\u91cf\u8868\u793a\uff09<\/li>\n<li data-line=\"361\" class=\"code-line\">\u30ad\u30fc\u30dc\u30fc\u30c9\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\uff08Space: \u518d\u751f\/\u505c\u6b62\u3001Arrow Up\/Down: \u30c6\u30f3\u30dd\u5909\u66f4\uff09<\/li>\n<\/ul>\n<h4 id=\"drummer-%E3%82%AF%E3%83%A9%E3%82%B9%EF%BC%88ai-%E3%81%8C%E7%94%9F%E6%88%90%EF%BC%89\" data-line=\"363\" class=\"code-line\">\n Drummer \u30af\u30e9\u30b9\uff08AI \u304c\u751f\u6210\uff09<\/h4>\n<div class=\"code-block-container\">\n<pre class=\"language-javascript\"><code class=\"language-javascript code-line\" data-line=\"365\"><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Drummer<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">EventTarget<\/span> <span class=\"token punctuation\">{<\/span>\n  #bpm <span class=\"token operator\">=<\/span> <span class=\"token number\">90<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token function\">play<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">bpm<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token property-access\">#bpm<\/span> <span class=\"token operator\">=<\/span> bpm<span class=\"token punctuation\">;<\/span>\n    \n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">dispatchEvent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">CustomEvent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'change'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token function\">stop<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    \n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">dispatchEvent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">CustomEvent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'change'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">set<\/span> <span class=\"token function\">bpm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">value<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token property-access\">#bpm<\/span> <span class=\"token operator\">=<\/span> value<span class=\"token punctuation\">;<\/span>\n    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">dispatchEvent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">CustomEvent<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'change'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n\n  <span class=\"token keyword\">get<\/span> <span class=\"token function\">bpm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword control-flow\">return<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token property-access\">#bpm<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<blockquote data-line=\"391\" class=\"code-line\">\n<p data-line=\"391\" class=\"code-line\">\u300cCursor \u306b\u300e\u30ad\u30c3\u30af\u3001\u30b9\u30cd\u30a2\u3001\u30cf\u30a4\u30cf\u30c3\u30c8\u3092\u6301\u3063\u305f\u30c9\u30e9\u30de\u30fc\u3092\u4f5c\u3063\u3066\u300f\u3063\u3066\u983c\u3093\u3060\u3089\u3001\u3053\u3044\u3064\u304c\u5410\u304d\u51fa\u3057\u3066\u304f\u308c\u305f\u3002\u6700\u9ad8\u3060\u308d\uff1f\u300d- Ryan Florence<\/p>\n<\/blockquote>\n<h4 id=\"%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E7%B5%B1%E5%90%88\" data-line=\"393\" class=\"code-line\">\n \u30ad\u30fc\u30dc\u30fc\u30c9\u30a4\u30d9\u30f3\u30c8\u306e\u7d71\u5408<\/h4>\n<div class=\"code-block-container\">\n<pre class=\"language-javascript\"><code class=\"language-javascript code-line\" data-line=\"395\"><span class=\"token keyword module\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> space<span class=\"token punctuation\">,<\/span> arrowUp<span class=\"token punctuation\">,<\/span> arrowDown <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword module\">from<\/span> <span class=\"token string\">'@remix\/events'<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">function<\/span> <span class=\"token function\"><span class=\"token maybe-class-name\">App<\/span><\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token keyword\">this<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">RemixHandle<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> drummer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Drummer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword control-flow\">return<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword control-flow\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token operator\">div\n        <span class=\"token literal-property property\">on<\/span><span class=\"token operator\">:<\/span><span class=\"token dom variable\">window<\/span><span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">[<\/span>\n          <span class=\"token punctuation\">[<\/span>space<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> drummer<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">toggle<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n          <span class=\"token punctuation\">[<\/span>arrowUp<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> drummer<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">bpm<\/span> <span class=\"token operator\">+=<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n          <span class=\"token punctuation\">[<\/span>arrowDown<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> drummer<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">bpm<\/span> <span class=\"token operator\">-=<\/span> <span class=\"token number\">5<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n        <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span>\n      <span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\"><span class=\"token maybe-class-name\">DrumMachine<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\"><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<p data-line=\"417\" class=\"code-line\"><code>window<\/code> \u306b\u30a4\u30d9\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u3066\u3044\u308b\u306e\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306e\u30b3\u30fc\u30c9\u3068\u5909\u308f\u308a\u307e\u305b\u3093\u3002<\/p>\n<p data-line=\"419\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--QYMT5l2e--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/86a4e12b1214a24e954d534b.png%3Fsha%3Dd382719e273818743bf74cdf2d82ae9926e66ade\" alt=\"\u30ad\u30fc\u30dc\u30fc\u30c9\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u56f3: Space\u3001Arrow Up\/Down \u3067\u30c9\u30e9\u30e0\u30de\u30b7\u30f3\u3092\u64cd\u4f5c<\/em><\/p>\n<h3 id=\"%E3%83%87%E3%83%A24%3A-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%A8%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86\" data-line=\"422\" class=\"code-line\">\n \u30c7\u30e24: \u30d5\u30a9\u30fc\u30e0\u3068\u975e\u540c\u671f\u51e6\u7406<\/h3>\n<blockquote data-line=\"424\" class=\"code-line\">\n<p data-line=\"424\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=16044s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (4:27:24~)<\/a><\/p>\n<\/blockquote>\n<p data-line=\"426\" class=\"code-line\">\u5dde\u3092\u9078\u629e\u3059\u308b\u3068\u3001\u305d\u306e\u5dde\u306e\u90fd\u5e02\u30ea\u30b9\u30c8\u3092 fetch \u3059\u308b\u5178\u578b\u7684\u306a UI \u3067\u3059\u3002<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-javascript\"><code class=\"language-javascript code-line\" data-line=\"428\"><span class=\"token keyword\">function<\/span> <span class=\"token function\"><span class=\"token maybe-class-name\">CitySelector<\/span><\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token keyword\">this<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">RemixHandle<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">let<\/span> state <span class=\"token operator\">=<\/span> <span class=\"token string\">'idle'<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">let<\/span> cities <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword control-flow\">return<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n    <span class=\"token keyword control-flow\">return<\/span> <span class=\"token punctuation\">(<\/span>\n      <span class=\"token operator\">form<span class=\"token operator\">&gt;<\/span>\n        <span class=\"token operator\">select\n          <span class=\"token literal-property property\">on<\/span><span class=\"token operator\">:<\/span>change<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<span class=\"token punctuation\">,<\/span> signal<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n            state <span class=\"token operator\">=<\/span> <span class=\"token string\">'loading'<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n            <span class=\"token keyword\">const<\/span> response <span class=\"token operator\">=<\/span> <span class=\"token keyword control-flow\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span>\n              <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">\/api\/cities?state=<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>event<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">target<\/span><span class=\"token punctuation\">.<\/span><span class=\"token property-access\">value<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">,<\/span>\n              <span class=\"token punctuation\">{<\/span> signal <span class=\"token punctuation\">}<\/span>\n            <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n            <span class=\"token keyword control-flow\">if<\/span> <span class=\"token punctuation\">(<\/span>signal<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">aborted<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword control-flow\">return<\/span><span class=\"token punctuation\">;<\/span>\n\n            cities <span class=\"token operator\">=<\/span> <span class=\"token keyword control-flow\">await<\/span> response<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n            state <span class=\"token operator\">=<\/span> <span class=\"token string\">'loaded'<\/span><span class=\"token punctuation\">;<\/span>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n          <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token operator\">&gt;<\/span>\n          <span class=\"token operator\">option<span class=\"token operator\">&gt;<\/span><span class=\"token maybe-class-name\">Alabama<\/span><span class=\"token operator\"><span class=\"token operator\">\/<\/span>option<span class=\"token operator\">&gt;<\/span>\n          <span class=\"token operator\">option<span class=\"token operator\">&gt;<\/span><span class=\"token maybe-class-name\">Alaska<\/span><span class=\"token operator\"><span class=\"token operator\">\/<\/span>option<span class=\"token operator\">&gt;<\/span>\n          <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token operator\"><span class=\"token operator\">\/<\/span>select<span class=\"token operator\">&gt;<\/span>\n\n        <span class=\"token operator\">select disabled<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span>state <span class=\"token operator\">===<\/span> <span class=\"token string\">'loading'<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\n          <span class=\"token punctuation\">{<\/span>cities<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">city<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">(<\/span>\n            <span class=\"token operator\">option<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">{<\/span>city<span class=\"token punctuation\">}<\/span><span class=\"token operator\"><span class=\"token operator\">\/<\/span>option<span class=\"token operator\">&gt;<\/span>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\n        <span class=\"token operator\"><span class=\"token operator\">\/<\/span>select<span class=\"token operator\">&gt;<\/span>\n      <span class=\"token operator\"><span class=\"token operator\">\/<\/span>form<span class=\"token operator\">&gt;<\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<blockquote data-line=\"469\" class=\"code-line\">\n<p data-line=\"469\" class=\"code-line\">\u300c\u30a4\u30d9\u30f3\u30c8\u304b\u3089\u8003\u3048\u59cb\u3081\u308b\u3002\u305d\u308c\u304c\u50d5\u306e\u3084\u308a\u65b9\u3002\u30e6\u30fc\u30b6\u30fc\u304c\u6700\u521d\u306e\u30bb\u30ec\u30af\u30c8\u30dc\u30c3\u30af\u30b9\u3092\u5909\u66f4\u3057\u305f \u2192 \u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u72b6\u614b\u306b\u3059\u308b \u2192 \u30c7\u30fc\u30bf\u3092\u53d6\u5f97 \u2192 \u30ed\u30fc\u30c9\u5b8c\u4e86\u3002\u3053\u308c\u304c\u4e00\u756a\u81ea\u7136\u306a\u8003\u3048\u65b9\u3060\u3068\u601d\u308f\u306a\u3044\uff1f\u300d- Ryan Florence<\/p>\n<\/blockquote>\n<p data-line=\"471\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--LU49JIPd--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/010d6f28c2c4bb48f7fa99fe.png%3Fsha%3De0b63622b21420e3c0a16ac662ae991e14d2cddf\" alt=\"\u30ec\u30fc\u30b9\u30b3\u30f3\u30c7\u30a3\u30b7\u30e7\u30f3\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u56f3: \u9023\u7d9a\u3057\u3066\u9078\u629e\u3092\u5909\u66f4\u3057\u305f\u5834\u5408\u306e\u554f\u984c<\/em><\/p>\n<h2 id=\"remix-3-%E3%81%AE%E8%A8%AD%E8%A8%88%E6%80%9D%E6%83%B3\" data-line=\"474\" class=\"code-line\">\n Remix 3 \u306e\u8a2d\u8a08\u601d\u60f3<\/h2>\n<h3 id=\"%E6%8A%BD%E8%B1%A1%E5%8C%96%E3%81%AF%E6%9C%80%E5%B0%8F%E9%99%90%E3%81%AB\" data-line=\"476\" class=\"code-line\">\n \u62bd\u8c61\u5316\u306f\u6700\u5c0f\u9650\u306b<\/h3>\n<blockquote data-line=\"478\" class=\"code-line\">\n<p data-line=\"478\" class=\"code-line\">\u300c\u62bd\u8c61\u5316\u306f\u3001\u672c\u5f53\u306b\u5fc5\u8981\u3060\u3068\u611f\u3058\u308b\u307e\u3067\u5c0e\u5165\u3057\u306a\u3044\u3002\u30a4\u30d9\u30f3\u30c8\u306b\u306f\u578b\u5b89\u5168\u6027\u3068\u5408\u6210\u306e\u305f\u3081\u306b\u5fc5\u8981\u3060\u3063\u305f\u3002\u3067\u3082\u3001\u4ed6\u306e\u90e8\u5206\u306f\uff1f\u300d- Ryan Florence<\/p>\n<\/blockquote>\n<p data-line=\"480\" class=\"code-line\">Remix 3 \u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u7279\u5225\u306a\u72b6\u614b\u7ba1\u7406\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3044\u307e\u305b\u3093\uff1a<\/p>\n<p data-line=\"486\" class=\"code-line\">\u66f4\u65b0\u3082\u660e\u793a\u7684\uff1a<\/p>\n<h3 id=\"web-%E6%A8%99%E6%BA%96%E3%82%92%E6%9C%80%E5%A4%A7%E9%99%90%E6%B4%BB%E7%94%A8\" data-line=\"492\" class=\"code-line\">\n Web \u6a19\u6e96\u3092\u6700\u5927\u9650\u6d3b\u7528<\/h3>\n<ul data-line=\"494\" class=\"code-line\">\n<li data-line=\"494\" class=\"code-line\">\n<code>EventTarget<\/code> \u3068 <code>CustomEvent<\/code>\n<\/li>\n<li data-line=\"495\" class=\"code-line\">\n<code>AbortController<\/code> \u3068 <code>signal<\/code>\n<\/li>\n<li data-line=\"496\" class=\"code-line\">\n<code>PointerEvent<\/code> \u3067\u30de\u30a6\u30b9\u30fb\u30bf\u30c3\u30c1\u30fb\u30da\u30f3\u3092\u7d71\u4e00<\/li>\n<li data-line=\"497\" class=\"code-line\">DOM API \u3092\u305d\u306e\u307e\u307e\u5229\u7528<\/li>\n<\/ul>\n<h3 id=\"typescript-%E3%83%95%E3%82%A1%E3%83%BC%E3%82%B9%E3%83%88%E3%81%AE%E9%96%8B%E7%99%BA%E4%BD%93%E9%A8%93\" data-line=\"499\" class=\"code-line\">\n TypeScript \u30d5\u30a1\u30fc\u30b9\u30c8\u306e\u958b\u767a\u4f53\u9a13<\/h3>\n<blockquote data-line=\"501\" class=\"code-line\">\n<p data-line=\"501\" class=\"code-line\">\u300cRemix 1 \u3068 2 \u3067\u306f TypeScript \u306f\u30b5\u30a4\u30c9\u30af\u30a8\u30b9\u30c8\u307f\u305f\u3044\u306a\u3082\u306e\u3060\u3063\u305f\u3002\u3067\u3082\u4eca\u306f\u3001TypeScript \u304c\u958b\u767a\u4f53\u9a13\u306e\u4e2d\u5fc3\u3060\u300d- Michael Jackson<\/p>\n<\/blockquote>\n<p data-line=\"503\" class=\"code-line\">\u3059\u3079\u3066\u306e API \u304c\u578b\u5b89\u5168\u306b\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\uff1a<\/p>\n<ul data-line=\"505\" class=\"code-line\">\n<li data-line=\"505\" class=\"code-line\">\u30a4\u30d9\u30f3\u30c8\u306e detail \u578b<\/li>\n<li data-line=\"506\" class=\"code-line\">Context \u306e\u578b\u63a8\u8ad6<\/li>\n<li data-line=\"507\" class=\"code-line\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e props \u578b<\/li>\n<\/ul>\n<h3 id=\"llm-%E3%81%A7%E7%94%9F%E6%88%90%E3%81%97%E3%82%84%E3%81%99%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89\" data-line=\"509\" class=\"code-line\">\n LLM \u3067\u751f\u6210\u3057\u3084\u3059\u3044\u30b3\u30fc\u30c9<\/h3>\n<p data-line=\"511\" class=\"code-line\">Ryan \u306f\u3001AI \u304c Drummer \u30af\u30e9\u30b9\u3092\u751f\u6210\u3057\u305f\u3053\u3068\u3092\u4f55\u5ea6\u3082\u5f37\u8abf\u3057\u307e\u3059\u3002Remix 3 \u306e\u30b3\u30fc\u30c9\u306f\uff1a<\/p>\n<ul data-line=\"513\" class=\"code-line\">\n<li data-line=\"513\" class=\"code-line\">\u30b7\u30f3\u30d7\u30eb\u3067\u4e88\u6e2c\u53ef\u80fd<\/li>\n<li data-line=\"514\" class=\"code-line\">\u7279\u6b8a\u306a\u898f\u5247\u304c\u5c11\u306a\u3044<\/li>\n<li data-line=\"515\" class=\"code-line\">Web \u6a19\u6e96\u306b\u57fa\u3065\u3044\u3066\u3044\u308b<\/li>\n<\/ul>\n<p data-line=\"517\" class=\"code-line\">\u305d\u306e\u305f\u3081\u3001LLM \u304c\u7406\u89e3\u30fb\u751f\u6210\u3057\u3084\u3059\u3044\u306e\u3067\u3059\u3002<\/p>\n<h2 id=\"react-router-%E3%81%AF%E7%B6%99%E7%B6%9A%E3%81%95%E3%82%8C%E3%82%8B\" data-line=\"519\" class=\"code-line\">\n React Router \u306f\u7d99\u7d9a\u3055\u308c\u308b<\/h2>\n<blockquote data-line=\"521\" class=\"code-line\">\n<p data-line=\"521\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=11944s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (3:19:04~)<\/a><\/p>\n<\/blockquote>\n<p data-line=\"523\" class=\"code-line\">\u91cd\u8981\u306a\u30dd\u30a4\u30f3\u30c8\uff1a<\/p>\n<ul data-line=\"525\" class=\"code-line\">\n<li data-line=\"525\" class=\"code-line\"><strong>React Router \u306f\u7d99\u7d9a\u3055\u308c\u307e\u3059<\/strong><\/li>\n<li data-line=\"526\" class=\"code-line\">Shopify \u306a\u3069\u591a\u304f\u306e\u4f01\u696d\u304c React Router \u306b\u4f9d\u5b58<\/li>\n<li data-line=\"527\" class=\"code-line\">Remix \u30c1\u30fc\u30e0\u304c React Router V7 \u3092\u958b\u767a\u4e2d<\/li>\n<li data-line=\"528\" class=\"code-line\">Remix 3 \u306f\u5225\u306e\u9078\u629e\u80a2\u3068\u3057\u3066\u63d0\u4f9b<\/li>\n<\/ul>\n<blockquote data-line=\"530\" class=\"code-line\">\n<p data-line=\"530\" class=\"code-line\">\u300cReact Router \u306f\u3069\u3053\u306b\u3082\u884c\u304b\u306a\u3044\u3002\u305d\u308c\u3060\u3051\u306f\u660e\u78ba\u306b\u3057\u3066\u304a\u304d\u305f\u3044\u300d- Ryan Florence<\/p>\n<\/blockquote>\n<h2 id=\"%E7%8F%BE%E5%9C%A8%E3%81%AE%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9\" data-line=\"532\" class=\"code-line\">\n \u73fe\u5728\u306e\u30b9\u30c6\u30fc\u30bf\u30b9<\/h2>\n<blockquote data-line=\"534\" class=\"code-line\">\n<p data-line=\"534\" class=\"code-line\">\ud83d\udca1 <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=xt_iEOn2a6Y&amp;t=13232s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\u52d5\u753b\u3067\u78ba\u8a8d\u3059\u308b (3:40:32~)<\/a><\/p>\n<\/blockquote>\n<ul data-line=\"536\" class=\"code-line\">\n<li data-line=\"536\" class=\"code-line\"><strong>\u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u6bb5\u968e<\/strong><\/li>\n<li data-line=\"537\" class=\"code-line\">\u30d6\u30ed\u30b0\u6295\u7a3f\u306e3\u30f6\u6708\u5f8c\u306b\u958b\u767a\u958b\u59cb<\/li>\n<li data-line=\"538\" class=\"code-line\">\u500b\u5225\u30d1\u30c3\u30b1\u30fc\u30b8\u3068\u3057\u3066\u516c\u958b\u4e2d\uff08<code>@remix\/events<\/code>\u3001<code>@remix\/ui<\/code> \u306a\u3069\uff09<\/li>\n<li data-line=\"539\" class=\"code-line\">\u6700\u7d42\u7684\u306b\u306f\u7d71\u5408\u3055\u308c\u305f\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u3057\u3066\u63d0\u4f9b\u4e88\u5b9a<\/li>\n<li data-line=\"540\" class=\"code-line\">\n<strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea\u3082\u958b\u767a\u4e2d<\/strong>\uff08\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3001\u30c6\u30fc\u30de\u30b7\u30b9\u30c6\u30e0\u306a\u3069\uff09<\/li>\n<\/ul>\n<p data-line=\"542\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--LeXoK3ZS--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/49bb46ab4620f5feb44496e4.png%3Fsha%3Dfebad67ebfcb83caf2d37857ffc1513dd9ddb6f8\" alt=\"\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u56f3: Remix UI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u30d7\u30ec\u30d3\u30e5\u30fc<\/em><\/p>\n<h2 id=\"%E3%81%BE%E3%81%A8%E3%82%81\" data-line=\"545\" class=\"code-line\">\n \u307e\u3068\u3081<\/h2>\n<p data-line=\"547\" class=\"code-line\">Remix 3 \u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306e\u8907\u96d1\u3055\u306b\u5bfe\u3059\u308b\u30a2\u30f3\u30c1\u30c6\u30fc\u30bc\u3067\u3059\u3002<\/p>\n<p data-line=\"549\" class=\"code-line\"><strong>\u4e3b\u8981\u306a\u7279\u5fb4\uff1a<\/strong><\/p>\n<ol data-line=\"551\" class=\"code-line\">\n<li data-line=\"551\" class=\"code-line\">\n<strong>Setup Scope<\/strong>: JavaScript \u306e\u30af\u30ed\u30fc\u30b8\u30e3\u3092\u6d3b\u7528\u3057\u305f\u72b6\u614b\u7ba1\u7406<\/li>\n<li data-line=\"552\" class=\"code-line\">\n<strong>Remix Events<\/strong>: \u30a4\u30d9\u30f3\u30c8\u3092\u7b2c\u4e00\u7d1a\u5e02\u6c11\u3068\u3057\u3066\u6271\u3046<\/li>\n<li data-line=\"553\" class=\"code-line\">\n<strong>\u660e\u793a\u7684\u306a\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/strong>: <code>this.update()<\/code> \u3067\u5236\u5fa1<\/li>\n<li data-line=\"554\" class=\"code-line\">\n<strong>\u578b\u5b89\u5168\u306a Context API<\/strong>: \u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u5f15\u304d\u8d77\u3053\u3055\u306a\u3044<\/li>\n<li data-line=\"555\" class=\"code-line\">\n<strong>Signal \u306b\u3088\u308b\u975e\u540c\u671f\u7ba1\u7406<\/strong>: \u30ec\u30fc\u30b9\u30b3\u30f3\u30c7\u30a3\u30b7\u30e7\u30f3\u3092\u30b7\u30f3\u30d7\u30eb\u306b\u89e3\u6c7a<\/li>\n<li data-line=\"556\" class=\"code-line\">\n<strong>Web \u6a19\u6e96\u30d9\u30fc\u30b9<\/strong>: \u30d0\u30f3\u30c9\u30e9\u30fc\u3078\u306e\u4f9d\u5b58\u3092\u6700\u5c0f\u5316<\/li>\n<li data-line=\"557\" class=\"code-line\">\n<strong>TypeScript \u30d5\u30a1\u30fc\u30b9\u30c8<\/strong>: \u3059\u3079\u3066\u306e API \u304c\u578b\u5b89\u5168<\/li>\n<li data-line=\"558\" class=\"code-line\">\n<strong>AI \u30d5\u30ec\u30f3\u30c9\u30ea\u30fc<\/strong>: LLM \u304c\u7406\u89e3\u30fb\u751f\u6210\u3057\u3084\u3059\u3044\u30b3\u30fc\u30c9<\/li>\n<\/ol>\n<p data-line=\"560\" class=\"code-line\"><strong>Ryan \u3068 Michael \u306e\u30e1\u30c3\u30bb\u30fc\u30b8\uff1a<\/strong><\/p>\n<blockquote data-line=\"562\" class=\"code-line\">\n<p data-line=\"562\" class=\"code-line\">\u300c3\u30f6\u6708\u9593\u3001\u65e5\u306e\u5149\u3092\u898b\u3066\u3044\u306a\u3044\u3002\u3067\u3082\u3001\u3053\u308c\u306f\u30ef\u30af\u30ef\u30af\u3059\u308b\u3002\u50d5\u3089\u306f\u6b63\u3057\u3044\u5c71\u3092\u898b\u3064\u3051\u305f\u3068\u601d\u3046\u300d- Ryan Florence<\/p>\n<\/blockquote>\n<p data-line=\"564\" class=\"code-line\">Remix 3 \u306f\u3001Web \u958b\u767a\u306e\u672a\u6765\u3092\u518d\u5b9a\u7fa9\u3057\u3088\u3046\u3068\u3057\u3066\u3044\u307e\u3059\u3002\u30b7\u30f3\u30d7\u30eb\u3055\u3001Web \u6a19\u6e96\u3001\u578b\u5b89\u5168\u6027\u3001\u305d\u3057\u3066 AI \u3068\u306e\u89aa\u548c\u6027\u3002\u3053\u308c\u3089\u3059\u3079\u3066\u3092\u517c\u306d\u5099\u3048\u305f\u65b0\u3057\u3044\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u767b\u5834\u3092\u3001\u671f\u5f85\u3057\u3066\u5f85\u3061\u307e\u3057\u3087\u3046\u3002<\/p>\n<hr data-line=\"566\" class=\"code-line\"\/>\n<h2 id=\"%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF\" data-line=\"568\" class=\"code-line\">\n \u53c2\u8003\u30ea\u30f3\u30af<\/h2>\n<hr data-line=\"574\" class=\"code-line\"\/>\n<p data-line=\"576\" class=\"code-line\">\u3053\u306e\u8a18\u4e8b\u304c\u5f79\u306b\u7acb\u3063\u305f\u3089\u3001\u305c\u3072\u5b9f\u969b\u306e\u30bb\u30c3\u30b7\u30e7\u30f3\u52d5\u753b\u3082\u3054\u89a7\u304f\u3060\u3055\u3044\u3002Ryan \u306e\u30e9\u30a4\u30d6\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3068\u8efd\u5999\u306a\u30c8\u30fc\u30af\u306f\u3001\u6587\u5b57\u3067\u306f\u4f1d\u3048\u304d\u308c\u306a\u3044\u9b45\u529b\u304c\u3042\u308a\u307e\u3059\uff01<\/p>\n<\/div>\n\n<br \/><a href=\"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction\">\u5143\u306e\u8a18\u4e8b\u3092\u78ba\u8a8d\u3059\u308b <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\u306f\u3058\u3081\u306b 2025\u5e7410\u670810\u65e5\u3001\u30ab\u30ca\u30c0\u306e\u30c8\u30ed\u30f3\u30c8\u3067\u958b\u50ac\u3055\u308c\u305f\u30a4\u30d9\u30f3\u30c8 &#8220;Remix Jam 2025&#8221; \u3067 Ryan Florence \u3068 Michael Jackson \u304c Remix 3 \u3092 [&hellip;]","protected":false},"author":1,"featured_media":9206,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-9205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hatena-blog"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Remix 3 \u767a\u8868\u307e\u3068\u3081 - React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078 - \u30dd\u30b1\u30b3\u30f3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Remix 3 \u767a\u8868\u307e\u3068\u3081 - React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078 - \u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"og:description\" content=\"\u306f\u3058\u3081\u306b 2025\u5e7410\u670810\u65e5\u3001\u30ab\u30ca\u30c0\u306e\u30c8\u30ed\u30f3\u30c8\u3067\u958b\u50ac\u3055\u308c\u305f\u30a4\u30d9\u30f3\u30c8 &#8220;Remix Jam 2025&#8221; \u3067 Ryan Florence \u3068 Michael Jackson \u304c Remix 3 \u3092 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction\" \/>\n<meta property=\"og:site_name\" content=\"\u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-12T16:38:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1760287138_og-base-w1200-v2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"info@pokecon.jp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"info@pokecon.jp\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/zenn.dev\\\/coji\\\/articles\\\/remix3-introduction#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/9205\\\/\"},\"author\":{\"name\":\"info@pokecon.jp\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"headline\":\"Remix 3 \u767a\u8868\u307e\u3068\u3081 &#8211; React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078\",\"datePublished\":\"2025-10-12T16:38:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/9205\\\/\"},\"wordCount\":244,\"image\":{\"@id\":\"https:\\\/\\\/zenn.dev\\\/coji\\\/articles\\\/remix3-introduction#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/1760287138_og-base-w1200-v2.png\",\"articleSection\":[\"\u306f\u3066\u306a\u30d6\u30ed\u30b0\"],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/9205\\\/\",\"url\":\"https:\\\/\\\/zenn.dev\\\/coji\\\/articles\\\/remix3-introduction\",\"name\":\"Remix 3 \u767a\u8868\u307e\u3068\u3081 - React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078 - \u30dd\u30b1\u30b3\u30f3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/zenn.dev\\\/coji\\\/articles\\\/remix3-introduction#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/zenn.dev\\\/coji\\\/articles\\\/remix3-introduction#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/1760287138_og-base-w1200-v2.png\",\"datePublished\":\"2025-10-12T16:38:58+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/zenn.dev\\\/coji\\\/articles\\\/remix3-introduction#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/zenn.dev\\\/coji\\\/articles\\\/remix3-introduction\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/zenn.dev\\\/coji\\\/articles\\\/remix3-introduction#primaryimage\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/1760287138_og-base-w1200-v2.png\",\"contentUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/1760287138_og-base-w1200-v2.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/zenn.dev\\\/coji\\\/articles\\\/remix3-introduction#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Remix 3 \u767a\u8868\u307e\u3068\u3081 &#8211; React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\",\"name\":\"\u30dd\u30b1\u30b3\u30f3\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\",\"name\":\"info@pokecon.jp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"caption\":\"info@pokecon.jp\"},\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/author\\\/infopokecon-jp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Remix 3 \u767a\u8868\u307e\u3068\u3081 - React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078 - \u30dd\u30b1\u30b3\u30f3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction","og_locale":"ja_JP","og_type":"article","og_title":"Remix 3 \u767a\u8868\u307e\u3068\u3081 - React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078 - \u30dd\u30b1\u30b3\u30f3","og_description":"\u306f\u3058\u3081\u306b 2025\u5e7410\u670810\u65e5\u3001\u30ab\u30ca\u30c0\u306e\u30c8\u30ed\u30f3\u30c8\u3067\u958b\u50ac\u3055\u308c\u305f\u30a4\u30d9\u30f3\u30c8 &#8220;Remix Jam 2025&#8221; \u3067 Ryan Florence \u3068 Michael Jackson \u304c Remix 3 \u3092 [&hellip;]","og_url":"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction","og_site_name":"\u30dd\u30b1\u30b3\u30f3","article_published_time":"2025-10-12T16:38:58+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1760287138_og-base-w1200-v2.png","type":"image\/png"}],"author":"info@pokecon.jp","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"info@pokecon.jp","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"4\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction#article","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/9205\/"},"author":{"name":"info@pokecon.jp","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"headline":"Remix 3 \u767a\u8868\u307e\u3068\u3081 &#8211; React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078","datePublished":"2025-10-12T16:38:58+00:00","mainEntityOfPage":{"@id":"https:\/\/pokecon.jp\/job\/9205\/"},"wordCount":244,"image":{"@id":"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1760287138_og-base-w1200-v2.png","articleSection":["\u306f\u3066\u306a\u30d6\u30ed\u30b0"],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/pokecon.jp\/job\/9205\/","url":"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction","name":"Remix 3 \u767a\u8868\u307e\u3068\u3081 - React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078 - \u30dd\u30b1\u30b3\u30f3","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/#website"},"primaryImageOfPage":{"@id":"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction#primaryimage"},"image":{"@id":"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1760287138_og-base-w1200-v2.png","datePublished":"2025-10-12T16:38:58+00:00","author":{"@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"breadcrumb":{"@id":"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zenn.dev\/coji\/articles\/remix3-introduction"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction#primaryimage","url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1760287138_og-base-w1200-v2.png","contentUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/10\/1760287138_og-base-w1200-v2.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/zenn.dev\/coji\/articles\/remix3-introduction#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/pokecon.jp\/job\/"},{"@type":"ListItem","position":2,"name":"Remix 3 \u767a\u8868\u307e\u3068\u3081 &#8211; React \u3092\u6368\u3066\u3001Web\u6a19\u6e96\u3067\u65b0\u3057\u3044\u4e16\u754c\u3078"}]},{"@type":"WebSite","@id":"https:\/\/pokecon.jp\/job\/#website","url":"https:\/\/pokecon.jp\/job\/","name":"\u30dd\u30b1\u30b3\u30f3","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pokecon.jp\/job\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997","name":"info@pokecon.jp","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","caption":"info@pokecon.jp"},"url":"https:\/\/pokecon.jp\/job\/author\/infopokecon-jp\/"}]}},"_links":{"self":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/9205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/comments?post=9205"}],"version-history":[{"count":1,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/9205\/revisions"}],"predecessor-version":[{"id":9207,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/9205\/revisions\/9207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media\/9206"}],"wp:attachment":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media?parent=9205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/categories?post=9205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/tags?post=9205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}