\n\t\t\t\x3CCounter />\n\t\t\t\x3CCountAtomScopeProvider userId=\"tom@example.com\">\n\t\t\t\t\x3CCounter />\n\t\t\t\t\x3CCounter />\n\t\t\t\x3C/CountAtomScopeProvider>\n\t\t\x3C/CountAtomScopeProvider>\n\t);\n}\n```\n\n上記の例は `jotai` を使っているが、`bunshi` も使うと以下のように書くことができる。\n\n```tsx:sample.tsx\nimport { atom, useAtom } from \"jotai\";\nimport {\n\tScopeProvider,\n\tcreateScope,\n\tmolecule,\n\tuseMolecule,\n} from \"bunshi/react\";\n\nconst UserScope = createScope(undefined);\nconst countMolecule = molecule((mol, scope) => {\n\tconst userId = scope(UserScope);\n\tconsole.log(\"Creating a new atom for\", userId);\n\treturn atom(0);\n});\n\n// ... Counter unchanged\n\nexport function App() {\n\treturn (\n\t\t\x3CScopeProvider scope={UserScope} value=\"bob@example.com\">\n\t\t\t\x3CCounter />\n\t\t\x3C/ScopeProvider>\n\t);\n}\n```\n\n## まとめ\n\n今回は `bunshi` というライブラリの基本概念からその魅力までを調べた。途中で実装の方を参照することが多々あったが、ほとんどテストされていてドキュメントも充実しているため、理解するのは難しくなかった。\n\n`bunshi` を使って状態管理のベストプラクティスを追求したいと思った。",description:"自分の理解を深めるために調べ尽くす",published:!0,publishedAt:"2024-05-29T22:23:29.51+09:00[Asia/Tokyo]",tags:$R[7313]=["state","jotai","bunshi"],title:"bunshiを理解する",_meta:$R[7314]={filePath:"01HYDY4ANBK11SCFE0K2K3DV5A/slug.md",fileName:"slug.md",directory:"01HYDY4ANBK11SCFE0K2K3DV5A",extension:"md",path:"01HYDY4ANBK11SCFE0K2K3DV5A/slug"},abstract:"bunshiを理解するはじめにbunshi というライブラリがある。状態管理ライブラリの DI を行うものだ。jotai を使う機会があり、調べを進める中で当時名前を聞いた jotai-molecule が bunshi という名前で良い感じに開発されていて気になったので調べてみる。注意: この記事が書かれた当時の情報であり、最新の情報とは異なる可能性がある。bunshi のバージョンは 2.1.5 である。bunshiの特徴bunshi は次のような特徴を持つ。バンドルサイズが小さいgzip 圧縮されたサイズで 1.18KB しかない。また他のライブラリに依存いていないのも大きな特徴だ。framework agnosticであるbunshi は jotai や zustand、nanostores などの状態管理ライブラリを molecule という概念でラップすることで、状態のスコープ",mdast:$R[7315]={children:$R[7316]=[$R[7317]={children:$R[7318]=[$R[7319]={children:$R[7320]=[$R[7321]={position:$R[7322]={start:$R[7323]={line:3,column:4,offset:18},end:$R[7324]={line:3,column:8,offset:22}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[7325]={start:$R[7326]={line:3,column:1,offset:15},end:$R[7327]={line:3,column:8,offset:22}},type:"heading"},$R[7328]={children:$R[7329]=[$R[7330]={children:$R[7331]=[$R[7332]={position:$R[7333]={start:$R[7334]={line:5,column:2,offset:25},end:$R[7335]={line:5,column:8,offset:31}},type:"text",value:"bunshi"}],position:$R[7336]={start:$R[7337]={line:5,column:1,offset:24},end:$R[7338]={line:5,column:47,offset:70}},title:void 0,type:"link",url:"https://github.com/saasquatch/bunshi"},$R[7339]={position:$R[7340]={start:$R[7341]={line:5,column:47,offset:70},end:$R[7342]={line:5,column:81,offset:104}},type:"text",value:" というライブラリがある。状態管理ライブラリの DI を行うものだ。"}],position:$R[7343]={start:$R[7344]={line:5,column:1,offset:24},end:$R[7345]={line:5,column:81,offset:104}},type:"paragraph"},$R[7346]={children:$R[7347]=[$R[7348]={position:$R[7349]={start:$R[7350]={line:7,column:1,offset:106},end:$R[7351]={line:7,column:8,offset:113}},type:"inlineCode",value:"jotai"},$R[7352]={position:$R[7353]={start:$R[7354]={line:7,column:8,offset:113},end:$R[7355]={line:7,column:35,offset:140}},type:"text",value:" を使う機会があり、調べを進める中で当時名前を聞いた "},$R[7356]={position:$R[7357]={start:$R[7358]={line:7,column:35,offset:140},end:$R[7359]={line:7,column:51,offset:156}},type:"inlineCode",value:"jotai-molecule"},$R[7360]={position:$R[7361]={start:$R[7362]={line:7,column:51,offset:156},end:$R[7363]={line:7,column:54,offset:159}},type:"text",value:" が "},$R[7364]={position:$R[7365]={start:$R[7366]={line:7,column:54,offset:159},end:$R[7367]={line:7,column:62,offset:167}},type:"inlineCode",value:"bunshi"},$R[7368]={position:$R[7369]={start:$R[7370]={line:7,column:62,offset:167},end:$R[7371]={line:7,column:94,offset:199}},type:"text",value:" という名前で良い感じに開発されていて気になったので調べてみる。"}],position:$R[7372]={start:$R[7373]={line:7,column:1,offset:106},end:$R[7374]={line:7,column:94,offset:199}},type:"paragraph"},$R[7375]={children:$R[7376]=[$R[7377]={position:$R[7378]={start:$R[7379]={line:9,column:1,offset:201},end:$R[7380]={line:9,column:40,offset:240}},type:"text",value:"注意: この記事が書かれた当時の情報であり、最新の情報とは異なる可能性がある。"},$R[7381]={position:$R[7382]={start:$R[7383]={line:9,column:40,offset:240},end:$R[7384]={line:9,column:48,offset:248}},type:"inlineCode",value:"bunshi"},$R[7385]={position:$R[7386]={start:$R[7387]={line:9,column:48,offset:248},end:$R[7388]={line:9,column:57,offset:257}},type:"text",value:" のバージョンは "},$R[7389]={position:$R[7390]={start:$R[7391]={line:9,column:57,offset:257},end:$R[7392]={line:9,column:64,offset:264}},type:"inlineCode",value:"2.1.5"},$R[7393]={position:$R[7394]={start:$R[7395]={line:9,column:64,offset:264},end:$R[7396]={line:9,column:69,offset:269}},type:"text",value:" である。"}],position:$R[7397]={start:$R[7398]={line:9,column:1,offset:201},end:$R[7399]={line:9,column:69,offset:269}},type:"paragraph"}],position:$R[7400]={end:$R[7401]={line:9,column:69,offset:269},start:$R[7402]={line:3,column:1,offset:15}},type:"section"},$R[7403]={children:$R[7404]=[$R[7405]={children:$R[7406]=[$R[7407]={position:$R[7408]={start:$R[7409]={line:11,column:4,offset:274},end:$R[7410]={line:11,column:13,offset:283}},type:"text",value:"bunshiの特徴"}],id:"bunshiの特徴",level:2,plain:"bunshiの特徴",position:$R[7411]={start:$R[7412]={line:11,column:1,offset:271},end:$R[7413]={line:11,column:13,offset:283}},type:"heading"},$R[7414]={children:$R[7415]=[$R[7416]={position:$R[7417]={start:$R[7418]={line:13,column:1,offset:285},end:$R[7419]={line:13,column:9,offset:293}},type:"inlineCode",value:"bunshi"},$R[7420]={position:$R[7421]={start:$R[7422]={line:13,column:9,offset:293},end:$R[7423]={line:13,column:22,offset:306}},type:"text",value:" は次のような特徴を持つ。"}],position:$R[7424]={start:$R[7425]={line:13,column:1,offset:285},end:$R[7426]={line:13,column:22,offset:306}},type:"paragraph"},$R[7427]={children:$R[7428]=[$R[7429]={children:$R[7430]=[$R[7431]={position:$R[7432]={start:$R[7433]={line:15,column:5,offset:312},end:$R[7434]={line:15,column:16,offset:323}},type:"text",value:"バンドルサイズが小さい"}],id:"バンドルサイズが小さい",level:3,plain:"バンドルサイズが小さい",position:$R[7435]={start:$R[7436]={line:15,column:1,offset:308},end:$R[7437]={line:15,column:16,offset:323}},type:"heading"},$R[7438]={children:$R[7439]=[$R[7440]={position:$R[7441]={start:$R[7442]={line:17,column:1,offset:325},end:$R[7443]={line:17,column:54,offset:378}},type:"text",value:"gzip 圧縮されたサイズで 1.18KB しかない。また他のライブラリに依存いていないのも大きな特徴だ。"}],position:$R[7444]={start:$R[7445]={line:17,column:1,offset:325},end:$R[7446]={line:17,column:54,offset:378}},type:"paragraph"}],position:$R[7447]={end:$R[7448]={line:17,column:54,offset:378},start:$R[7449]={line:15,column:1,offset:308}},type:"section"},$R[7450]={children:$R[7451]=[$R[7452]={children:$R[7453]=[$R[7454]={position:$R[7455]={start:$R[7456]={line:19,column:5,offset:384},end:$R[7457]={line:19,column:26,offset:405}},type:"text",value:"framework agnosticである"}],id:"framework-agnosticである",level:3,plain:"framework agnosticである",position:$R[7458]={start:$R[7459]={line:19,column:1,offset:380},end:$R[7460]={line:19,column:26,offset:405}},type:"heading"},$R[7461]={children:$R[7462]=[$R[7463]={position:$R[7464]={start:$R[7465]={line:21,column:1,offset:407},end:$R[7466]={line:21,column:9,offset:415}},type:"inlineCode",value:"bunshi"},$R[7467]={position:$R[7468]={start:$R[7469]={line:21,column:9,offset:415},end:$R[7470]={line:21,column:12,offset:418}},type:"text",value:" は "},$R[7471]={position:$R[7472]={start:$R[7473]={line:21,column:12,offset:418},end:$R[7474]={line:21,column:19,offset:425}},type:"inlineCode",value:"jotai"},$R[7475]={position:$R[7476]={start:$R[7477]={line:21,column:19,offset:425},end:$R[7478]={line:21,column:22,offset:428}},type:"text",value:" や "},$R[7479]={position:$R[7480]={start:$R[7481]={line:21,column:22,offset:428},end:$R[7482]={line:21,column:31,offset:437}},type:"inlineCode",value:"zustand"},$R[7483]={position:$R[7484]={start:$R[7485]={line:21,column:31,offset:437},end:$R[7486]={line:21,column:32,offset:438}},type:"text",value:"、"},$R[7487]={position:$R[7488]={start:$R[7489]={line:21,column:32,offset:438},end:$R[7490]={line:21,column:44,offset:450}},type:"inlineCode",value:"nanostores"},$R[7491]={position:$R[7492]={start:$R[7493]={line:21,column:44,offset:450},end:$R[7494]={line:21,column:59,offset:465}},type:"text",value:" などの状態管理ライブラリを "},$R[7495]={position:$R[7496]={start:$R[7497]={line:21,column:59,offset:465},end:$R[7498]={line:21,column:69,offset:475}},type:"inlineCode",value:"molecule"},$R[7499]={position:$R[7500]={start:$R[7501]={line:21,column:69,offset:475},end:$R[7502]={line:21,column:109,offset:515}},type:"text",value:" という概念でラップすることで、状態のスコープ管理や依存注入を行うことができる。"}],position:$R[7503]={start:$R[7504]={line:21,column:1,offset:407},end:$R[7505]={line:21,column:109,offset:515}},type:"paragraph"},$R[7506]={children:$R[7507]=[$R[7508]={position:$R[7509]={start:$R[7510]={line:23,column:1,offset:517},end:$R[7511]={line:23,column:11,offset:527}},type:"inlineCode",value:"molecule"},$R[7512]={position:$R[7513]={start:$R[7514]={line:23,column:11,offset:527},end:$R[7515]={line:23,column:68,offset:584}},type:"text",value:" の宣言は framework agnostic であるため、ロジックをフレームワークに依存させず書くことができる"},$R[7516]={footnoteIndex:0,position:$R[7517]={start:$R[7518]={line:23,column:68,offset:584},end:$R[7519]={line:23,column:72,offset:588}},referenceIndex:1,type:"footnoteReference"},$R[7520]={position:$R[7521]={start:$R[7522]={line:23,column:72,offset:588},end:$R[7523]={line:23,column:73,offset:589}},type:"text",value:"。"}],position:$R[7524]={start:$R[7525]={line:23,column:1,offset:517},end:$R[7526]={line:23,column:73,offset:589}},type:"paragraph"}],position:$R[7527]={end:$R[7528]={line:23,column:73,offset:589},start:$R[7529]={line:19,column:1,offset:380}},type:"section"},$R[7530]={children:$R[7531]=[$R[7532]={children:$R[7533]=[$R[7534]={position:$R[7535]={start:$R[7536]={line:27,column:5,offset:747},end:$R[7537]={line:27,column:20,offset:762}},type:"text",value:"パフォーマンスに配慮されている"}],id:"パフォーマンスに配慮されている",level:3,plain:"パフォーマンスに配慮されている",position:$R[7538]={start:$R[7539]={line:27,column:1,offset:743},end:$R[7540]={line:27,column:20,offset:762}},type:"heading"},$R[7541]={children:$R[7542]=[$R[7543]={position:$R[7544]={start:$R[7545]={line:29,column:1,offset:764},end:$R[7546]={line:29,column:10,offset:773}},type:"inlineCode",value:"WeakMap"},$R[7547]={position:$R[7548]={start:$R[7549]={line:29,column:10,offset:773},end:$R[7550]={line:29,column:24,offset:787}},type:"text",value:" を用いたメモリリークの防止"},$R[7551]={footnoteIndex:1,position:$R[7552]={start:$R[7553]={line:29,column:24,offset:787},end:$R[7554]={line:29,column:28,offset:791}},referenceIndex:1,type:"footnoteReference"},$R[7555]={position:$R[7556]={start:$R[7557]={line:29,column:28,offset:791},end:$R[7558]={line:29,column:66,offset:829}},type:"text",value:"や、不要な再レンダリングを防止するためにフレームワークのインテグレーション("},$R[7559]={position:$R[7560]={start:$R[7561]={line:29,column:66,offset:829},end:$R[7562]={line:29,column:73,offset:836}},type:"inlineCode",value:"React"},$R[7563]={position:$R[7564]={start:$R[7565]={line:29,column:73,offset:836},end:$R[7566]={line:29,column:75,offset:838}},type:"text",value:", "},$R[7567]={position:$R[7568]={start:$R[7569]={line:29,column:75,offset:838},end:$R[7570]={line:29,column:80,offset:843}},type:"inlineCode",value:"Vue"},$R[7571]={position:$R[7572]={start:$R[7573]={line:29,column:80,offset:843},end:$R[7574]={line:29,column:93,offset:856}},type:"text",value:")ではメモ化を行っている。"}],position:$R[7575]={start:$R[7576]={line:29,column:1,offset:764},end:$R[7577]={line:29,column:93,offset:856}},type:"paragraph"}],position:$R[7578]={end:$R[7579]={line:29,column:93,offset:856},start:$R[7580]={line:27,column:1,offset:743}},type:"section"}],position:$R[7581]={end:$R[7582]={line:29,column:93,offset:856},start:$R[7583]={line:11,column:1,offset:271}},type:"section"},$R[7584]={children:$R[7585]=[$R[7586]={children:$R[7587]=[$R[7588]={position:$R[7589]={start:$R[7590]={line:33,column:4,offset:985},end:$R[7591]={line:33,column:15,offset:996}},type:"text",value:"bunshiの基本概念"}],id:"bunshiの基本概念",level:2,plain:"bunshiの基本概念",position:$R[7592]={start:$R[7593]={line:33,column:1,offset:982},end:$R[7594]={line:33,column:15,offset:996}},type:"heading"},$R[7595]={children:$R[7596]=[$R[7597]={position:$R[7598]={start:$R[7599]={line:35,column:1,offset:998},end:$R[7600]={line:35,column:25,offset:1022}},type:"text",value:"bunshi は次の 3 つの概念で構成される。"}],position:$R[7601]={start:$R[7602]={line:35,column:1,offset:998},end:$R[7603]={line:35,column:25,offset:1022}},type:"paragraph"},$R[7604]={children:$R[7605]=[$R[7606]={children:$R[7607]=[$R[7608]={position:$R[7609]={start:$R[7610]={line:37,column:5,offset:1028},end:$R[7611]={line:37,column:13,offset:1036}},type:"text",value:"molecule"}],id:"molecule",level:3,plain:"molecule",position:$R[7612]={start:$R[7613]={line:37,column:1,offset:1024},end:$R[7614]={line:37,column:13,offset:1036}},type:"heading"},$R[7615]={children:$R[7616]=[$R[7617]={position:$R[7618]={start:$R[7619]={line:39,column:1,offset:1038},end:$R[7620]={line:39,column:11,offset:1048}},type:"inlineCode",value:"molecule"},$R[7621]={position:$R[7622]={start:$R[7623]={line:39,column:11,offset:1048},end:$R[7624]={line:39,column:14,offset:1051}},type:"text",value:" は "},$R[7625]={position:$R[7626]={start:$R[7627]={line:39,column:14,offset:1051},end:$R[7628]={line:39,column:22,offset:1059}},type:"inlineCode",value:"bunshi"},$R[7629]={position:$R[7630]={start:$R[7631]={line:39,column:22,offset:1059},end:$R[7632]={line:39,column:57,offset:1094}},type:"text",value:" の core 的な概念であり、実態は値を返す関数の HoF である。"}],position:$R[7633]={start:$R[7634]={line:39,column:1,offset:1038},end:$R[7635]={line:39,column:57,offset:1094}},type:"paragraph"},$R[7636]={children:$R[7637]=[$R[7638]={position:$R[7639]={start:$R[7640]={line:41,column:1,offset:1096},end:$R[7641]={line:41,column:45,offset:1140}},type:"text",value:"最大の特徴は、関数の実行結果がキャッシュされることである。以下の例は常に同じ乱数を返す。"}],position:$R[7642]={start:$R[7643]={line:41,column:1,offset:1096},end:$R[7644]={line:41,column:45,offset:1140}},type:"paragraph"},$R[7645]={filename:"sample.ts ts",lang:"ts",position:$R[7646]={start:$R[7647]={line:43,column:1,offset:1142},end:$R[7648]={line:47,column:4,offset:1258}},type:"code",value:"import { molecule } from \"bunshi\";\n\nexport const RandomMolecule = molecule(() => Math.random());",hast:$R[7649]={type:"root",children:$R[7650]=[$R[7651]={type:"element",tagName:"pre",properties:$R[7652]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[7653]=[$R[7654]={type:"element",tagName:"code",properties:$R[7655]={},children:$R[7656]=[$R[7657]={type:"element",tagName:"span",properties:$R[7658]={class:"line"},children:$R[7659]=[$R[7660]={type:"element",tagName:"span",properties:$R[7661]={style:"color:#4D9375"},children:$R[7662]=[$R[7663]={type:"text",value:"import"}]},$R[7664]={type:"element",tagName:"span",properties:$R[7665]={style:"color:#666666"},children:$R[7666]=[$R[7667]={type:"text",value:" {"}]},$R[7668]={type:"element",tagName:"span",properties:$R[7669]={style:"color:#BD976A"},children:$R[7670]=[$R[7671]={type:"text",value:" molecule"}]},$R[7672]={type:"element",tagName:"span",properties:$R[7673]={style:"color:#666666"},children:$R[7674]=[$R[7675]={type:"text",value:" }"}]},$R[7676]={type:"element",tagName:"span",properties:$R[7677]={style:"color:#4D9375"},children:$R[7678]=[$R[7679]={type:"text",value:" from"}]},$R[7680]={type:"element",tagName:"span",properties:$R[7681]={style:"color:#C98A7D77"},children:$R[7682]=[$R[7683]={type:"text",value:" \""}]},$R[7684]={type:"element",tagName:"span",properties:$R[7685]={style:"color:#C98A7D"},children:$R[7686]=[$R[7687]={type:"text",value:"bunshi"}]},$R[7688]={type:"element",tagName:"span",properties:$R[7689]={style:"color:#C98A7D77"},children:$R[7690]=[$R[7691]={type:"text",value:"\""}]},$R[7692]={type:"element",tagName:"span",properties:$R[7693]={style:"color:#666666"},children:$R[7694]=[$R[7695]={type:"text",value:";"}]}]},$R[7696]={type:"text",value:"\n"},$R[7697]={type:"element",tagName:"span",properties:$R[7698]={class:"line"},children:$R[7699]=[]},$R[7700]={type:"text",value:"\n"},$R[7701]={type:"element",tagName:"span",properties:$R[7702]={class:"line"},children:$R[7703]=[$R[7704]={type:"element",tagName:"span",properties:$R[7705]={style:"color:#4D9375"},children:$R[7706]=[$R[7707]={type:"text",value:"export"}]},$R[7708]={type:"element",tagName:"span",properties:$R[7709]={style:"color:#CB7676"},children:$R[7710]=[$R[7711]={type:"text",value:" const "}]},$R[7712]={type:"element",tagName:"span",properties:$R[7713]={style:"color:#BD976A"},children:$R[7714]=[$R[7715]={type:"text",value:"RandomMolecule"}]},$R[7716]={type:"element",tagName:"span",properties:$R[7717]={style:"color:#666666"},children:$R[7718]=[$R[7719]={type:"text",value:" ="}]},$R[7720]={type:"element",tagName:"span",properties:$R[7721]={style:"color:#80A665"},children:$R[7722]=[$R[7723]={type:"text",value:" molecule"}]},$R[7724]={type:"element",tagName:"span",properties:$R[7725]={style:"color:#666666"},children:$R[7726]=[$R[7727]={type:"text",value:"(()"}]},$R[7728]={type:"element",tagName:"span",properties:$R[7729]={style:"color:#666666"},children:$R[7730]=[$R[7731]={type:"text",value:" =>"}]},$R[7732]={type:"element",tagName:"span",properties:$R[7733]={style:"color:#BD976A"},children:$R[7734]=[$R[7735]={type:"text",value:" Math"}]},$R[7736]={type:"element",tagName:"span",properties:$R[7737]={style:"color:#666666"},children:$R[7738]=[$R[7739]={type:"text",value:"."}]},$R[7740]={type:"element",tagName:"span",properties:$R[7741]={style:"color:#80A665"},children:$R[7742]=[$R[7743]={type:"text",value:"random"}]},$R[7744]={type:"element",tagName:"span",properties:$R[7745]={style:"color:#666666"},children:$R[7746]=[$R[7747]={type:"text",value:"());"}]}]}]}]}]}},$R[7748]={children:$R[7749]=[$R[7750]={position:$R[7751]={start:$R[7752]={line:49,column:1,offset:1260},end:$R[7753]={line:49,column:4,offset:1263}},type:"text",value:"また "},$R[7754]={position:$R[7755]={start:$R[7756]={line:49,column:4,offset:1263},end:$R[7757]={line:49,column:14,offset:1273}},type:"inlineCode",value:"molecule"},$R[7758]={position:$R[7759]={start:$R[7760]={line:49,column:14,offset:1273},end:$R[7761]={line:49,column:19,offset:1278}},type:"text",value:" は他の "},$R[7762]={position:$R[7763]={start:$R[7764]={line:49,column:19,offset:1278},end:$R[7765]={line:49,column:29,offset:1288}},type:"inlineCode",value:"molecule"},$R[7766]={position:$R[7767]={start:$R[7768]={line:49,column:29,offset:1288},end:$R[7769]={line:49,column:37,offset:1296}},type:"text",value:" に依存できる。"}],position:$R[7770]={start:$R[7771]={line:49,column:1,offset:1260},end:$R[7772]={line:49,column:37,offset:1296}},type:"paragraph"},$R[7773]={filename:"sample.ts ts",lang:"ts",position:$R[7774]={start:$R[7775]={line:51,column:1,offset:1298},end:$R[7776]={line:59,column:4,offset:1579}},type:"code",value:"import { molecule } from \"bunshi\";\n\nexport const RandomMolecule = molecule(() => Math.random());\nexport const UsernameMolecule = molecule(\n\tmol => `You are user ${mol(RandomMolecule)}`,\n);\nexport const IDMolecule = molecule(mol => `ID: ${mol(RandomMolecule)}`);",hast:$R[7777]={type:"root",children:$R[7778]=[$R[7779]={type:"element",tagName:"pre",properties:$R[7780]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[7781]=[$R[7782]={type:"element",tagName:"code",properties:$R[7783]={},children:$R[7784]=[$R[7785]={type:"element",tagName:"span",properties:$R[7786]={class:"line"},children:$R[7787]=[$R[7788]={type:"element",tagName:"span",properties:$R[7789]={style:"color:#4D9375"},children:$R[7790]=[$R[7791]={type:"text",value:"import"}]},$R[7792]={type:"element",tagName:"span",properties:$R[7793]={style:"color:#666666"},children:$R[7794]=[$R[7795]={type:"text",value:" {"}]},$R[7796]={type:"element",tagName:"span",properties:$R[7797]={style:"color:#BD976A"},children:$R[7798]=[$R[7799]={type:"text",value:" molecule"}]},$R[7800]={type:"element",tagName:"span",properties:$R[7801]={style:"color:#666666"},children:$R[7802]=[$R[7803]={type:"text",value:" }"}]},$R[7804]={type:"element",tagName:"span",properties:$R[7805]={style:"color:#4D9375"},children:$R[7806]=[$R[7807]={type:"text",value:" from"}]},$R[7808]={type:"element",tagName:"span",properties:$R[7809]={style:"color:#C98A7D77"},children:$R[7810]=[$R[7811]={type:"text",value:" \""}]},$R[7812]={type:"element",tagName:"span",properties:$R[7813]={style:"color:#C98A7D"},children:$R[7814]=[$R[7815]={type:"text",value:"bunshi"}]},$R[7816]={type:"element",tagName:"span",properties:$R[7817]={style:"color:#C98A7D77"},children:$R[7818]=[$R[7819]={type:"text",value:"\""}]},$R[7820]={type:"element",tagName:"span",properties:$R[7821]={style:"color:#666666"},children:$R[7822]=[$R[7823]={type:"text",value:";"}]}]},$R[7824]={type:"text",value:"\n"},$R[7825]={type:"element",tagName:"span",properties:$R[7826]={class:"line"},children:$R[7827]=[]},$R[7828]={type:"text",value:"\n"},$R[7829]={type:"element",tagName:"span",properties:$R[7830]={class:"line"},children:$R[7831]=[$R[7832]={type:"element",tagName:"span",properties:$R[7833]={style:"color:#4D9375"},children:$R[7834]=[$R[7835]={type:"text",value:"export"}]},$R[7836]={type:"element",tagName:"span",properties:$R[7837]={style:"color:#CB7676"},children:$R[7838]=[$R[7839]={type:"text",value:" const "}]},$R[7840]={type:"element",tagName:"span",properties:$R[7841]={style:"color:#BD976A"},children:$R[7842]=[$R[7843]={type:"text",value:"RandomMolecule"}]},$R[7844]={type:"element",tagName:"span",properties:$R[7845]={style:"color:#666666"},children:$R[7846]=[$R[7847]={type:"text",value:" ="}]},$R[7848]={type:"element",tagName:"span",properties:$R[7849]={style:"color:#80A665"},children:$R[7850]=[$R[7851]={type:"text",value:" molecule"}]},$R[7852]={type:"element",tagName:"span",properties:$R[7853]={style:"color:#666666"},children:$R[7854]=[$R[7855]={type:"text",value:"(()"}]},$R[7856]={type:"element",tagName:"span",properties:$R[7857]={style:"color:#666666"},children:$R[7858]=[$R[7859]={type:"text",value:" =>"}]},$R[7860]={type:"element",tagName:"span",properties:$R[7861]={style:"color:#BD976A"},children:$R[7862]=[$R[7863]={type:"text",value:" Math"}]},$R[7864]={type:"element",tagName:"span",properties:$R[7865]={style:"color:#666666"},children:$R[7866]=[$R[7867]={type:"text",value:"."}]},$R[7868]={type:"element",tagName:"span",properties:$R[7869]={style:"color:#80A665"},children:$R[7870]=[$R[7871]={type:"text",value:"random"}]},$R[7872]={type:"element",tagName:"span",properties:$R[7873]={style:"color:#666666"},children:$R[7874]=[$R[7875]={type:"text",value:"());"}]}]},$R[7876]={type:"text",value:"\n"},$R[7877]={type:"element",tagName:"span",properties:$R[7878]={class:"line"},children:$R[7879]=[$R[7880]={type:"element",tagName:"span",properties:$R[7881]={style:"color:#4D9375"},children:$R[7882]=[$R[7883]={type:"text",value:"export"}]},$R[7884]={type:"element",tagName:"span",properties:$R[7885]={style:"color:#CB7676"},children:$R[7886]=[$R[7887]={type:"text",value:" const "}]},$R[7888]={type:"element",tagName:"span",properties:$R[7889]={style:"color:#BD976A"},children:$R[7890]=[$R[7891]={type:"text",value:"UsernameMolecule"}]},$R[7892]={type:"element",tagName:"span",properties:$R[7893]={style:"color:#666666"},children:$R[7894]=[$R[7895]={type:"text",value:" ="}]},$R[7896]={type:"element",tagName:"span",properties:$R[7897]={style:"color:#80A665"},children:$R[7898]=[$R[7899]={type:"text",value:" molecule"}]},$R[7900]={type:"element",tagName:"span",properties:$R[7901]={style:"color:#666666"},children:$R[7902]=[$R[7903]={type:"text",value:"("}]}]},$R[7904]={type:"text",value:"\n"},$R[7905]={type:"element",tagName:"span",properties:$R[7906]={class:"line"},children:$R[7907]=[$R[7908]={type:"element",tagName:"span",properties:$R[7909]={style:"color:#BD976A"},children:$R[7910]=[$R[7911]={type:"text",value:"\tmol"}]},$R[7912]={type:"element",tagName:"span",properties:$R[7913]={style:"color:#666666"},children:$R[7914]=[$R[7915]={type:"text",value:" =>"}]},$R[7916]={type:"element",tagName:"span",properties:$R[7917]={style:"color:#C98A7D77"},children:$R[7918]=[$R[7919]={type:"text",value:" `"}]},$R[7920]={type:"element",tagName:"span",properties:$R[7921]={style:"color:#C98A7D"},children:$R[7922]=[$R[7923]={type:"text",value:"You are user "}]},$R[7924]={type:"element",tagName:"span",properties:$R[7925]={style:"color:#4D9375"},children:$R[7926]=[$R[7927]={type:"text",value:"${"}]},$R[7928]={type:"element",tagName:"span",properties:$R[7929]={style:"color:#80A665"},children:$R[7930]=[$R[7931]={type:"text",value:"mol"}]},$R[7932]={type:"element",tagName:"span",properties:$R[7933]={style:"color:#666666"},children:$R[7934]=[$R[7935]={type:"text",value:"("}]},$R[7936]={type:"element",tagName:"span",properties:$R[7937]={style:"color:#C98A7D"},children:$R[7938]=[$R[7939]={type:"text",value:"RandomMolecule"}]},$R[7940]={type:"element",tagName:"span",properties:$R[7941]={style:"color:#666666"},children:$R[7942]=[$R[7943]={type:"text",value:")"}]},$R[7944]={type:"element",tagName:"span",properties:$R[7945]={style:"color:#4D9375"},children:$R[7946]=[$R[7947]={type:"text",value:"}"}]},$R[7948]={type:"element",tagName:"span",properties:$R[7949]={style:"color:#C98A7D77"},children:$R[7950]=[$R[7951]={type:"text",value:"`"}]},$R[7952]={type:"element",tagName:"span",properties:$R[7953]={style:"color:#666666"},children:$R[7954]=[$R[7955]={type:"text",value:","}]}]},$R[7956]={type:"text",value:"\n"},$R[7957]={type:"element",tagName:"span",properties:$R[7958]={class:"line"},children:$R[7959]=[$R[7960]={type:"element",tagName:"span",properties:$R[7961]={style:"color:#666666"},children:$R[7962]=[$R[7963]={type:"text",value:");"}]}]},$R[7964]={type:"text",value:"\n"},$R[7965]={type:"element",tagName:"span",properties:$R[7966]={class:"line"},children:$R[7967]=[$R[7968]={type:"element",tagName:"span",properties:$R[7969]={style:"color:#4D9375"},children:$R[7970]=[$R[7971]={type:"text",value:"export"}]},$R[7972]={type:"element",tagName:"span",properties:$R[7973]={style:"color:#CB7676"},children:$R[7974]=[$R[7975]={type:"text",value:" const "}]},$R[7976]={type:"element",tagName:"span",properties:$R[7977]={style:"color:#BD976A"},children:$R[7978]=[$R[7979]={type:"text",value:"IDMolecule"}]},$R[7980]={type:"element",tagName:"span",properties:$R[7981]={style:"color:#666666"},children:$R[7982]=[$R[7983]={type:"text",value:" ="}]},$R[7984]={type:"element",tagName:"span",properties:$R[7985]={style:"color:#80A665"},children:$R[7986]=[$R[7987]={type:"text",value:" molecule"}]},$R[7988]={type:"element",tagName:"span",properties:$R[7989]={style:"color:#666666"},children:$R[7990]=[$R[7991]={type:"text",value:"("}]},$R[7992]={type:"element",tagName:"span",properties:$R[7993]={style:"color:#BD976A"},children:$R[7994]=[$R[7995]={type:"text",value:"mol"}]},$R[7996]={type:"element",tagName:"span",properties:$R[7997]={style:"color:#666666"},children:$R[7998]=[$R[7999]={type:"text",value:" =>"}]},$R[8000]={type:"element",tagName:"span",properties:$R[8001]={style:"color:#C98A7D77"},children:$R[8002]=[$R[8003]={type:"text",value:" `"}]},$R[8004]={type:"element",tagName:"span",properties:$R[8005]={style:"color:#C98A7D"},children:$R[8006]=[$R[8007]={type:"text",value:"ID: "}]},$R[8008]={type:"element",tagName:"span",properties:$R[8009]={style:"color:#4D9375"},children:$R[8010]=[$R[8011]={type:"text",value:"${"}]},$R[8012]={type:"element",tagName:"span",properties:$R[8013]={style:"color:#80A665"},children:$R[8014]=[$R[8015]={type:"text",value:"mol"}]},$R[8016]={type:"element",tagName:"span",properties:$R[8017]={style:"color:#666666"},children:$R[8018]=[$R[8019]={type:"text",value:"("}]},$R[8020]={type:"element",tagName:"span",properties:$R[8021]={style:"color:#C98A7D"},children:$R[8022]=[$R[8023]={type:"text",value:"RandomMolecule"}]},$R[8024]={type:"element",tagName:"span",properties:$R[8025]={style:"color:#666666"},children:$R[8026]=[$R[8027]={type:"text",value:")"}]},$R[8028]={type:"element",tagName:"span",properties:$R[8029]={style:"color:#4D9375"},children:$R[8030]=[$R[8031]={type:"text",value:"}"}]},$R[8032]={type:"element",tagName:"span",properties:$R[8033]={style:"color:#C98A7D77"},children:$R[8034]=[$R[8035]={type:"text",value:"`"}]},$R[8036]={type:"element",tagName:"span",properties:$R[8037]={style:"color:#666666"},children:$R[8038]=[$R[8039]={type:"text",value:");"}]}]}]}]}]}},$R[8040]={children:$R[8041]=[$R[8042]={position:$R[8043]={start:$R[8044]={line:61,column:1,offset:1581},end:$R[8045]={line:61,column:31,offset:1611}},type:"text",value:"依存は自動で解決されるため、コード保守やテストが容易になる。"}],position:$R[8046]={start:$R[8047]={line:61,column:1,offset:1581},end:$R[8048]={line:61,column:31,offset:1611}},type:"paragraph"},$R[8049]={children:$R[8050]=[$R[8051]={position:$R[8052]={start:$R[8053]={line:63,column:1,offset:1613},end:$R[8054]={line:63,column:9,offset:1621}},type:"text",value:"ロジックなどを "},$R[8055]={position:$R[8056]={start:$R[8057]={line:63,column:9,offset:1621},end:$R[8058]={line:63,column:19,offset:1631}},type:"inlineCode",value:"molecule"},$R[8059]={position:$R[8060]={start:$R[8061]={line:63,column:19,offset:1631},end:$R[8062]={line:63,column:44,offset:1656}},type:"text",value:" に閉じ込めることでコードは非結合で遅延的となる。"}],position:$R[8063]={start:$R[8064]={line:63,column:1,offset:1613},end:$R[8065]={line:63,column:44,offset:1656}},type:"paragraph"},$R[8066]={children:$R[8067]=[$R[8068]={children:$R[8069]=[$R[8070]={children:$R[8071]=[$R[8072]={position:$R[8073]={start:$R[8074]={line:65,column:3,offset:1660},end:$R[8075]={line:65,column:6,offset:1663}},type:"text",value:"非結合"}],position:$R[8076]={start:$R[8077]={line:65,column:3,offset:1660},end:$R[8078]={line:65,column:6,offset:1663}},type:"paragraph"},$R[8079]={children:$R[8080]=[$R[8081]={children:$R[8082]=[$R[8083]={children:$R[8084]=[$R[8085]={position:$R[8086]={start:$R[8087]={line:67,column:5,offset:1669},end:$R[8088]={line:67,column:8,offset:1672}},type:"text",value:"ある "},$R[8089]={position:$R[8090]={start:$R[8091]={line:67,column:8,offset:1672},end:$R[8092]={line:67,column:18,offset:1682}},type:"inlineCode",value:"molecule"},$R[8093]={position:$R[8094]={start:$R[8095]={line:67,column:18,offset:1682},end:$R[8096]={line:67,column:35,offset:1699}},type:"text",value:" をリファクタリングする時、その "},$R[8097]={position:$R[8098]={start:$R[8099]={line:67,column:35,offset:1699},end:$R[8100]={line:67,column:45,offset:1709}},type:"inlineCode",value:"molecule"},$R[8101]={position:$R[8102]={start:$R[8103]={line:67,column:45,offset:1709},end:$R[8104]={line:67,column:54,offset:1718}},type:"text",value:" に依存する他の "},$R[8105]={position:$R[8106]={start:$R[8107]={line:67,column:54,offset:1718},end:$R[8108]={line:67,column:64,offset:1728}},type:"inlineCode",value:"molecule"},$R[8109]={position:$R[8110]={start:$R[8111]={line:67,column:64,offset:1728},end:$R[8112]={line:67,column:73,offset:1737}},type:"text",value:" に影響を与えない"}],position:$R[8113]={start:$R[8114]={line:67,column:5,offset:1669},end:$R[8115]={line:67,column:73,offset:1737}},type:"paragraph"}],position:$R[8116]={start:$R[8117]={line:67,column:3,offset:1667},end:$R[8118]={line:67,column:73,offset:1737}},type:"listItem"}],position:$R[8119]={start:$R[8120]={line:67,column:3,offset:1667},end:$R[8121]={line:67,column:73,offset:1737}},type:"unorderedList"}],position:$R[8122]={start:$R[8123]={line:65,column:1,offset:1658},end:$R[8124]={line:67,column:73,offset:1737}},type:"listItem"},$R[8125]={children:$R[8126]=[$R[8127]={children:$R[8128]=[$R[8129]={position:$R[8130]={start:$R[8131]={line:69,column:3,offset:1741},end:$R[8132]={line:69,column:6,offset:1744}},type:"text",value:"遅延的"}],position:$R[8133]={start:$R[8134]={line:69,column:3,offset:1741},end:$R[8135]={line:69,column:6,offset:1744}},type:"paragraph"},$R[8136]={children:$R[8137]=[$R[8138]={children:$R[8139]=[$R[8140]={children:$R[8141]=[$R[8142]={position:$R[8143]={start:$R[8144]={line:71,column:5,offset:1750},end:$R[8145]={line:71,column:15,offset:1760}},type:"inlineCode",value:"molecule"},$R[8146]={position:$R[8147]={start:$R[8148]={line:71,column:15,offset:1760},end:$R[8149]={line:71,column:30,offset:1775}},type:"text",value:" は必要になるまで実行されない"}],position:$R[8150]={start:$R[8151]={line:71,column:5,offset:1750},end:$R[8152]={line:71,column:30,offset:1775}},type:"paragraph"}],position:$R[8153]={start:$R[8154]={line:71,column:3,offset:1748},end:$R[8155]={line:71,column:30,offset:1775}},type:"listItem"}],position:$R[8156]={start:$R[8157]={line:71,column:3,offset:1748},end:$R[8158]={line:71,column:30,offset:1775}},type:"unorderedList"}],position:$R[8159]={start:$R[8160]={line:69,column:1,offset:1739},end:$R[8161]={line:71,column:30,offset:1775}},type:"listItem"}],position:$R[8162]={start:$R[8163]={line:65,column:1,offset:1658},end:$R[8164]={line:71,column:30,offset:1775}},type:"unorderedList"}],position:$R[8165]={end:$R[8166]={line:71,column:30,offset:1775},start:$R[8167]={line:37,column:1,offset:1024}},type:"section"},$R[8168]={children:$R[8169]=[$R[8170]={children:$R[8171]=[$R[8172]={position:$R[8173]={start:$R[8174]={line:73,column:5,offset:1781},end:$R[8175]={line:73,column:10,offset:1786}},type:"text",value:"scope"}],id:"scope",level:3,plain:"scope",position:$R[8176]={start:$R[8177]={line:73,column:1,offset:1777},end:$R[8178]={line:73,column:10,offset:1786}},type:"heading"},$R[8179]={children:$R[8180]=[$R[8181]={position:$R[8182]={start:$R[8183]={line:75,column:1,offset:1788},end:$R[8184]={line:75,column:8,offset:1795}},type:"inlineCode",value:"scope"},$R[8185]={position:$R[8186]={start:$R[8187]={line:75,column:8,offset:1795},end:$R[8188]={line:75,column:11,offset:1798}},type:"text",value:" は "},$R[8189]={position:$R[8190]={start:$R[8191]={line:75,column:11,offset:1798},end:$R[8192]={line:75,column:21,offset:1808}},type:"inlineCode",value:"molecule"},$R[8193]={position:$R[8194]={start:$R[8195]={line:75,column:21,offset:1808},end:$R[8196]={line:75,column:71,offset:1858}},type:"text",value:" を異なるコンポーネントで共通の環境を共有して使うための依存関係のグラフを構築するための概念である。"}],position:$R[8197]={start:$R[8198]={line:75,column:1,offset:1788},end:$R[8199]={line:75,column:71,offset:1858}},type:"paragraph"},$R[8200]={children:$R[8201]=[$R[8202]={position:$R[8203]={start:$R[8204]={line:77,column:1,offset:1860},end:$R[8205]={line:77,column:14,offset:1873}},type:"inlineCode",value:"createScope"},$R[8206]={position:$R[8207]={start:$R[8208]={line:77,column:14,offset:1873},end:$R[8209]={line:77,column:22,offset:1881}},type:"text",value:" 関数を使って "},$R[8210]={position:$R[8211]={start:$R[8212]={line:77,column:22,offset:1881},end:$R[8213]={line:77,column:29,offset:1888}},type:"inlineCode",value:"scope"},$R[8214]={position:$R[8215]={start:$R[8216]={line:77,column:29,offset:1888},end:$R[8217]={line:77,column:36,offset:1895}},type:"text",value:" を作成する。"}],position:$R[8218]={start:$R[8219]={line:77,column:1,offset:1860},end:$R[8220]={line:77,column:36,offset:1895}},type:"paragraph"},$R[8221]={filename:"sample.ts ts",lang:"ts",position:$R[8222]={start:$R[8223]={line:79,column:1,offset:1897},end:$R[8224]={line:86,column:4,offset:2054}},type:"code",value:"import { createScope } from \"bunshi\";\n\n/**\n * Scope for a user id\n */\nexport const UserScope = createScope\x3Cstring>(\"alice@example.com\");",hast:$R[8225]={type:"root",children:$R[8226]=[$R[8227]={type:"element",tagName:"pre",properties:$R[8228]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[8229]=[$R[8230]={type:"element",tagName:"code",properties:$R[8231]={},children:$R[8232]=[$R[8233]={type:"element",tagName:"span",properties:$R[8234]={class:"line"},children:$R[8235]=[$R[8236]={type:"element",tagName:"span",properties:$R[8237]={style:"color:#4D9375"},children:$R[8238]=[$R[8239]={type:"text",value:"import"}]},$R[8240]={type:"element",tagName:"span",properties:$R[8241]={style:"color:#666666"},children:$R[8242]=[$R[8243]={type:"text",value:" {"}]},$R[8244]={type:"element",tagName:"span",properties:$R[8245]={style:"color:#BD976A"},children:$R[8246]=[$R[8247]={type:"text",value:" createScope"}]},$R[8248]={type:"element",tagName:"span",properties:$R[8249]={style:"color:#666666"},children:$R[8250]=[$R[8251]={type:"text",value:" }"}]},$R[8252]={type:"element",tagName:"span",properties:$R[8253]={style:"color:#4D9375"},children:$R[8254]=[$R[8255]={type:"text",value:" from"}]},$R[8256]={type:"element",tagName:"span",properties:$R[8257]={style:"color:#C98A7D77"},children:$R[8258]=[$R[8259]={type:"text",value:" \""}]},$R[8260]={type:"element",tagName:"span",properties:$R[8261]={style:"color:#C98A7D"},children:$R[8262]=[$R[8263]={type:"text",value:"bunshi"}]},$R[8264]={type:"element",tagName:"span",properties:$R[8265]={style:"color:#C98A7D77"},children:$R[8266]=[$R[8267]={type:"text",value:"\""}]},$R[8268]={type:"element",tagName:"span",properties:$R[8269]={style:"color:#666666"},children:$R[8270]=[$R[8271]={type:"text",value:";"}]}]},$R[8272]={type:"text",value:"\n"},$R[8273]={type:"element",tagName:"span",properties:$R[8274]={class:"line"},children:$R[8275]=[]},$R[8276]={type:"text",value:"\n"},$R[8277]={type:"element",tagName:"span",properties:$R[8278]={class:"line"},children:$R[8279]=[$R[8280]={type:"element",tagName:"span",properties:$R[8281]={style:"color:#758575DD"},children:$R[8282]=[$R[8283]={type:"text",value:"/**"}]}]},$R[8284]={type:"text",value:"\n"},$R[8285]={type:"element",tagName:"span",properties:$R[8286]={class:"line"},children:$R[8287]=[$R[8288]={type:"element",tagName:"span",properties:$R[8289]={style:"color:#758575DD"},children:$R[8290]=[$R[8291]={type:"text",value:" * Scope for a user id"}]}]},$R[8292]={type:"text",value:"\n"},$R[8293]={type:"element",tagName:"span",properties:$R[8294]={class:"line"},children:$R[8295]=[$R[8296]={type:"element",tagName:"span",properties:$R[8297]={style:"color:#758575DD"},children:$R[8298]=[$R[8299]={type:"text",value:" */"}]}]},$R[8300]={type:"text",value:"\n"},$R[8301]={type:"element",tagName:"span",properties:$R[8302]={class:"line"},children:$R[8303]=[$R[8304]={type:"element",tagName:"span",properties:$R[8305]={style:"color:#4D9375"},children:$R[8306]=[$R[8307]={type:"text",value:"export"}]},$R[8308]={type:"element",tagName:"span",properties:$R[8309]={style:"color:#CB7676"},children:$R[8310]=[$R[8311]={type:"text",value:" const "}]},$R[8312]={type:"element",tagName:"span",properties:$R[8313]={style:"color:#BD976A"},children:$R[8314]=[$R[8315]={type:"text",value:"UserScope"}]},$R[8316]={type:"element",tagName:"span",properties:$R[8317]={style:"color:#666666"},children:$R[8318]=[$R[8319]={type:"text",value:" ="}]},$R[8320]={type:"element",tagName:"span",properties:$R[8321]={style:"color:#80A665"},children:$R[8322]=[$R[8323]={type:"text",value:" createScope"}]},$R[8324]={type:"element",tagName:"span",properties:$R[8325]={style:"color:#666666"},children:$R[8326]=[$R[8327]={type:"text",value:"\x3C"}]},$R[8328]={type:"element",tagName:"span",properties:$R[8329]={style:"color:#5DA994"},children:$R[8330]=[$R[8331]={type:"text",value:"string"}]},$R[8332]={type:"element",tagName:"span",properties:$R[8333]={style:"color:#666666"},children:$R[8334]=[$R[8335]={type:"text",value:">("}]},$R[8336]={type:"element",tagName:"span",properties:$R[8337]={style:"color:#C98A7D77"},children:$R[8338]=[$R[8339]={type:"text",value:"\""}]},$R[8340]={type:"element",tagName:"span",properties:$R[8341]={style:"color:#C98A7D"},children:$R[8342]=[$R[8343]={type:"text",value:"alice@example.com"}]},$R[8344]={type:"element",tagName:"span",properties:$R[8345]={style:"color:#C98A7D77"},children:$R[8346]=[$R[8347]={type:"text",value:"\""}]},$R[8348]={type:"element",tagName:"span",properties:$R[8349]={style:"color:#666666"},children:$R[8350]=[$R[8351]={type:"text",value:");"}]}]}]}]}]}},$R[8352]={children:$R[8353]=[$R[8354]={position:$R[8355]={start:$R[8356]={line:88,column:1,offset:2056},end:$R[8357]={line:88,column:6,offset:2061}},type:"text",value:"宣言した "},$R[8358]={position:$R[8359]={start:$R[8360]={line:88,column:6,offset:2061},end:$R[8361]={line:88,column:13,offset:2068}},type:"inlineCode",value:"scope"},$R[8362]={position:$R[8363]={start:$R[8364]={line:88,column:13,offset:2068},end:$R[8365]={line:88,column:47,offset:2102}},type:"text",value:" はフレームワークによって異なる方法でプロバイダーを提供する。私は "},$R[8366]={position:$R[8367]={start:$R[8368]={line:88,column:47,offset:2102},end:$R[8369]={line:88,column:54,offset:2109}},type:"inlineCode",value:"React"},$R[8370]={position:$R[8371]={start:$R[8372]={line:88,column:54,offset:2109},end:$R[8373]={line:88,column:64,offset:2119}},type:"text",value:" を使っているので、"},$R[8374]={position:$R[8375]={start:$R[8376]={line:88,column:64,offset:2119},end:$R[8377]={line:88,column:71,offset:2126}},type:"inlineCode",value:"React"},$R[8378]={position:$R[8379]={start:$R[8380]={line:88,column:71,offset:2126},end:$R[8381]={line:88,column:89,offset:2144}},type:"text",value:" でのプロバイダーの提供方法を示す。"}],position:$R[8382]={start:$R[8383]={line:88,column:1,offset:2056},end:$R[8384]={line:88,column:89,offset:2144}},type:"paragraph"},$R[8385]={filename:"sample.tsx tsx",lang:"tsx",position:$R[8386]={start:$R[8387]={line:90,column:1,offset:2146},end:$R[8388]={line:103,column:4,offset:2438}},type:"code",value:"import { ScopeProvider } from \"bunshi/react\";\nimport type { ReactElement } from \"react\";\n\nimport { UserScope } from \"./scopes\";\n\nexport function App({ children }: Props): ReactElement {\n\treturn (\n\t\t\x3CScopeProvider scope={UserScope}>\n\t\t\t{children}\n\t\t\x3C/ScopeProvider>\n\t);\n}",hast:$R[8389]={type:"root",children:$R[8390]=[$R[8391]={type:"element",tagName:"pre",properties:$R[8392]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[8393]=[$R[8394]={type:"element",tagName:"code",properties:$R[8395]={},children:$R[8396]=[$R[8397]={type:"element",tagName:"span",properties:$R[8398]={class:"line"},children:$R[8399]=[$R[8400]={type:"element",tagName:"span",properties:$R[8401]={style:"color:#4D9375"},children:$R[8402]=[$R[8403]={type:"text",value:"import"}]},$R[8404]={type:"element",tagName:"span",properties:$R[8405]={style:"color:#666666"},children:$R[8406]=[$R[8407]={type:"text",value:" {"}]},$R[8408]={type:"element",tagName:"span",properties:$R[8409]={style:"color:#BD976A"},children:$R[8410]=[$R[8411]={type:"text",value:" ScopeProvider"}]},$R[8412]={type:"element",tagName:"span",properties:$R[8413]={style:"color:#666666"},children:$R[8414]=[$R[8415]={type:"text",value:" }"}]},$R[8416]={type:"element",tagName:"span",properties:$R[8417]={style:"color:#4D9375"},children:$R[8418]=[$R[8419]={type:"text",value:" from"}]},$R[8420]={type:"element",tagName:"span",properties:$R[8421]={style:"color:#C98A7D77"},children:$R[8422]=[$R[8423]={type:"text",value:" \""}]},$R[8424]={type:"element",tagName:"span",properties:$R[8425]={style:"color:#C98A7D"},children:$R[8426]=[$R[8427]={type:"text",value:"bunshi/react"}]},$R[8428]={type:"element",tagName:"span",properties:$R[8429]={style:"color:#C98A7D77"},children:$R[8430]=[$R[8431]={type:"text",value:"\""}]},$R[8432]={type:"element",tagName:"span",properties:$R[8433]={style:"color:#666666"},children:$R[8434]=[$R[8435]={type:"text",value:";"}]}]},$R[8436]={type:"text",value:"\n"},$R[8437]={type:"element",tagName:"span",properties:$R[8438]={class:"line"},children:$R[8439]=[$R[8440]={type:"element",tagName:"span",properties:$R[8441]={style:"color:#4D9375"},children:$R[8442]=[$R[8443]={type:"text",value:"import"}]},$R[8444]={type:"element",tagName:"span",properties:$R[8445]={style:"color:#4D9375"},children:$R[8446]=[$R[8447]={type:"text",value:" type"}]},$R[8448]={type:"element",tagName:"span",properties:$R[8449]={style:"color:#666666"},children:$R[8450]=[$R[8451]={type:"text",value:" {"}]},$R[8452]={type:"element",tagName:"span",properties:$R[8453]={style:"color:#BD976A"},children:$R[8454]=[$R[8455]={type:"text",value:" ReactElement"}]},$R[8456]={type:"element",tagName:"span",properties:$R[8457]={style:"color:#666666"},children:$R[8458]=[$R[8459]={type:"text",value:" }"}]},$R[8460]={type:"element",tagName:"span",properties:$R[8461]={style:"color:#4D9375"},children:$R[8462]=[$R[8463]={type:"text",value:" from"}]},$R[8464]={type:"element",tagName:"span",properties:$R[8465]={style:"color:#C98A7D77"},children:$R[8466]=[$R[8467]={type:"text",value:" \""}]},$R[8468]={type:"element",tagName:"span",properties:$R[8469]={style:"color:#C98A7D"},children:$R[8470]=[$R[8471]={type:"text",value:"react"}]},$R[8472]={type:"element",tagName:"span",properties:$R[8473]={style:"color:#C98A7D77"},children:$R[8474]=[$R[8475]={type:"text",value:"\""}]},$R[8476]={type:"element",tagName:"span",properties:$R[8477]={style:"color:#666666"},children:$R[8478]=[$R[8479]={type:"text",value:";"}]}]},$R[8480]={type:"text",value:"\n"},$R[8481]={type:"element",tagName:"span",properties:$R[8482]={class:"line"},children:$R[8483]=[]},$R[8484]={type:"text",value:"\n"},$R[8485]={type:"element",tagName:"span",properties:$R[8486]={class:"line"},children:$R[8487]=[$R[8488]={type:"element",tagName:"span",properties:$R[8489]={style:"color:#4D9375"},children:$R[8490]=[$R[8491]={type:"text",value:"import"}]},$R[8492]={type:"element",tagName:"span",properties:$R[8493]={style:"color:#666666"},children:$R[8494]=[$R[8495]={type:"text",value:" {"}]},$R[8496]={type:"element",tagName:"span",properties:$R[8497]={style:"color:#BD976A"},children:$R[8498]=[$R[8499]={type:"text",value:" UserScope"}]},$R[8500]={type:"element",tagName:"span",properties:$R[8501]={style:"color:#666666"},children:$R[8502]=[$R[8503]={type:"text",value:" }"}]},$R[8504]={type:"element",tagName:"span",properties:$R[8505]={style:"color:#4D9375"},children:$R[8506]=[$R[8507]={type:"text",value:" from"}]},$R[8508]={type:"element",tagName:"span",properties:$R[8509]={style:"color:#C98A7D77"},children:$R[8510]=[$R[8511]={type:"text",value:" \""}]},$R[8512]={type:"element",tagName:"span",properties:$R[8513]={style:"color:#C98A7D"},children:$R[8514]=[$R[8515]={type:"text",value:"./scopes"}]},$R[8516]={type:"element",tagName:"span",properties:$R[8517]={style:"color:#C98A7D77"},children:$R[8518]=[$R[8519]={type:"text",value:"\""}]},$R[8520]={type:"element",tagName:"span",properties:$R[8521]={style:"color:#666666"},children:$R[8522]=[$R[8523]={type:"text",value:";"}]}]},$R[8524]={type:"text",value:"\n"},$R[8525]={type:"element",tagName:"span",properties:$R[8526]={class:"line"},children:$R[8527]=[]},$R[8528]={type:"text",value:"\n"},$R[8529]={type:"element",tagName:"span",properties:$R[8530]={class:"line"},children:$R[8531]=[$R[8532]={type:"element",tagName:"span",properties:$R[8533]={style:"color:#4D9375"},children:$R[8534]=[$R[8535]={type:"text",value:"export"}]},$R[8536]={type:"element",tagName:"span",properties:$R[8537]={style:"color:#CB7676"},children:$R[8538]=[$R[8539]={type:"text",value:" function"}]},$R[8540]={type:"element",tagName:"span",properties:$R[8541]={style:"color:#80A665"},children:$R[8542]=[$R[8543]={type:"text",value:" App"}]},$R[8544]={type:"element",tagName:"span",properties:$R[8545]={style:"color:#666666"},children:$R[8546]=[$R[8547]={type:"text",value:"({"}]},$R[8548]={type:"element",tagName:"span",properties:$R[8549]={style:"color:#BD976A"},children:$R[8550]=[$R[8551]={type:"text",value:" children"}]},$R[8552]={type:"element",tagName:"span",properties:$R[8553]={style:"color:#666666"},children:$R[8554]=[$R[8555]={type:"text",value:" }: "}]},$R[8556]={type:"element",tagName:"span",properties:$R[8557]={style:"color:#5DA994"},children:$R[8558]=[$R[8559]={type:"text",value:"Props"}]},$R[8560]={type:"element",tagName:"span",properties:$R[8561]={style:"color:#666666"},children:$R[8562]=[$R[8563]={type:"text",value:"):"}]},$R[8564]={type:"element",tagName:"span",properties:$R[8565]={style:"color:#5DA994"},children:$R[8566]=[$R[8567]={type:"text",value:" ReactElement"}]},$R[8568]={type:"element",tagName:"span",properties:$R[8569]={style:"color:#666666"},children:$R[8570]=[$R[8571]={type:"text",value:" {"}]}]},$R[8572]={type:"text",value:"\n"},$R[8573]={type:"element",tagName:"span",properties:$R[8574]={class:"line"},children:$R[8575]=[$R[8576]={type:"element",tagName:"span",properties:$R[8577]={style:"color:#4D9375"},children:$R[8578]=[$R[8579]={type:"text",value:"\treturn"}]},$R[8580]={type:"element",tagName:"span",properties:$R[8581]={style:"color:#666666"},children:$R[8582]=[$R[8583]={type:"text",value:" ("}]}]},$R[8584]={type:"text",value:"\n"},$R[8585]={type:"element",tagName:"span",properties:$R[8586]={class:"line"},children:$R[8587]=[$R[8588]={type:"element",tagName:"span",properties:$R[8589]={style:"color:#666666"},children:$R[8590]=[$R[8591]={type:"text",value:"\t\t\x3C"}]},$R[8592]={type:"element",tagName:"span",properties:$R[8593]={style:"color:#B8A965"},children:$R[8594]=[$R[8595]={type:"text",value:"ScopeProvider"}]},$R[8596]={type:"element",tagName:"span",properties:$R[8597]={style:"color:#BD976A"},children:$R[8598]=[$R[8599]={type:"text",value:" scope"}]},$R[8600]={type:"element",tagName:"span",properties:$R[8601]={style:"color:#666666"},children:$R[8602]=[$R[8603]={type:"text",value:"={"}]},$R[8604]={type:"element",tagName:"span",properties:$R[8605]={style:"color:#BD976A"},children:$R[8606]=[$R[8607]={type:"text",value:"UserScope"}]},$R[8608]={type:"element",tagName:"span",properties:$R[8609]={style:"color:#666666"},children:$R[8610]=[$R[8611]={type:"text",value:"}>"}]}]},$R[8612]={type:"text",value:"\n"},$R[8613]={type:"element",tagName:"span",properties:$R[8614]={class:"line"},children:$R[8615]=[$R[8616]={type:"element",tagName:"span",properties:$R[8617]={style:"color:#666666"},children:$R[8618]=[$R[8619]={type:"text",value:"\t\t\t{"}]},$R[8620]={type:"element",tagName:"span",properties:$R[8621]={style:"color:#BD976A"},children:$R[8622]=[$R[8623]={type:"text",value:"children"}]},$R[8624]={type:"element",tagName:"span",properties:$R[8625]={style:"color:#666666"},children:$R[8626]=[$R[8627]={type:"text",value:"}"}]}]},$R[8628]={type:"text",value:"\n"},$R[8629]={type:"element",tagName:"span",properties:$R[8630]={class:"line"},children:$R[8631]=[$R[8632]={type:"element",tagName:"span",properties:$R[8633]={style:"color:#666666"},children:$R[8634]=[$R[8635]={type:"text",value:"\t\t\x3C/"}]},$R[8636]={type:"element",tagName:"span",properties:$R[8637]={style:"color:#B8A965"},children:$R[8638]=[$R[8639]={type:"text",value:"ScopeProvider"}]},$R[8640]={type:"element",tagName:"span",properties:$R[8641]={style:"color:#666666"},children:$R[8642]=[$R[8643]={type:"text",value:">"}]}]},$R[8644]={type:"text",value:"\n"},$R[8645]={type:"element",tagName:"span",properties:$R[8646]={class:"line"},children:$R[8647]=[$R[8648]={type:"element",tagName:"span",properties:$R[8649]={style:"color:#666666"},children:$R[8650]=[$R[8651]={type:"text",value:"\t);"}]}]},$R[8652]={type:"text",value:"\n"},$R[8653]={type:"element",tagName:"span",properties:$R[8654]={class:"line"},children:$R[8655]=[$R[8656]={type:"element",tagName:"span",properties:$R[8657]={style:"color:#666666"},children:$R[8658]=[$R[8659]={type:"text",value:"}"}]}]}]}]}]}},$R[8660]={children:$R[8661]=[$R[8662]={position:$R[8663]={start:$R[8664]={line:105,column:1,offset:2440},end:$R[8665]={line:105,column:8,offset:2447}},type:"inlineCode",value:"scope"},$R[8666]={position:$R[8667]={start:$R[8668]={line:105,column:8,offset:2447},end:$R[8669]={line:105,column:14,offset:2453}},type:"text",value:" の真価は、"},$R[8670]={position:$R[8671]={start:$R[8672]={line:105,column:14,offset:2453},end:$R[8673]={line:105,column:24,offset:2463}},type:"inlineCode",value:"molecule"},$R[8674]={position:$R[8675]={start:$R[8676]={line:105,column:24,offset:2463},end:$R[8677]={line:105,column:27,offset:2466}},type:"text",value:" を "},$R[8678]={position:$R[8679]={start:$R[8680]={line:105,column:27,offset:2466},end:$R[8681]={line:105,column:34,offset:2473}},type:"inlineCode",value:"scope"},$R[8682]={position:$R[8683]={start:$R[8684]={line:105,column:34,offset:2473},end:$R[8685]={line:105,column:49,offset:2488}},type:"text",value:" に依存させることで発揮する。"}],position:$R[8686]={start:$R[8687]={line:105,column:1,offset:2440},end:$R[8688]={line:105,column:49,offset:2488}},type:"paragraph"},$R[8689]={filename:"sample.ts ts",lang:"ts",position:$R[8690]={start:$R[8691]={line:107,column:1,offset:2490},end:$R[8692]={line:114,column:4,offset:2682}},type:"code",value:"import { molecule } from \"bunshi\";\nimport { UserScope } from \"./scopes\";\n\nexport const UsernameMolecule = molecule(\n\t(_mol, scope) => `You are user ${scope(UserScope)}`,\n);",hast:$R[8693]={type:"root",children:$R[8694]=[$R[8695]={type:"element",tagName:"pre",properties:$R[8696]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[8697]=[$R[8698]={type:"element",tagName:"code",properties:$R[8699]={},children:$R[8700]=[$R[8701]={type:"element",tagName:"span",properties:$R[8702]={class:"line"},children:$R[8703]=[$R[8704]={type:"element",tagName:"span",properties:$R[8705]={style:"color:#4D9375"},children:$R[8706]=[$R[8707]={type:"text",value:"import"}]},$R[8708]={type:"element",tagName:"span",properties:$R[8709]={style:"color:#666666"},children:$R[8710]=[$R[8711]={type:"text",value:" {"}]},$R[8712]={type:"element",tagName:"span",properties:$R[8713]={style:"color:#BD976A"},children:$R[8714]=[$R[8715]={type:"text",value:" molecule"}]},$R[8716]={type:"element",tagName:"span",properties:$R[8717]={style:"color:#666666"},children:$R[8718]=[$R[8719]={type:"text",value:" }"}]},$R[8720]={type:"element",tagName:"span",properties:$R[8721]={style:"color:#4D9375"},children:$R[8722]=[$R[8723]={type:"text",value:" from"}]},$R[8724]={type:"element",tagName:"span",properties:$R[8725]={style:"color:#C98A7D77"},children:$R[8726]=[$R[8727]={type:"text",value:" \""}]},$R[8728]={type:"element",tagName:"span",properties:$R[8729]={style:"color:#C98A7D"},children:$R[8730]=[$R[8731]={type:"text",value:"bunshi"}]},$R[8732]={type:"element",tagName:"span",properties:$R[8733]={style:"color:#C98A7D77"},children:$R[8734]=[$R[8735]={type:"text",value:"\""}]},$R[8736]={type:"element",tagName:"span",properties:$R[8737]={style:"color:#666666"},children:$R[8738]=[$R[8739]={type:"text",value:";"}]}]},$R[8740]={type:"text",value:"\n"},$R[8741]={type:"element",tagName:"span",properties:$R[8742]={class:"line"},children:$R[8743]=[$R[8744]={type:"element",tagName:"span",properties:$R[8745]={style:"color:#4D9375"},children:$R[8746]=[$R[8747]={type:"text",value:"import"}]},$R[8748]={type:"element",tagName:"span",properties:$R[8749]={style:"color:#666666"},children:$R[8750]=[$R[8751]={type:"text",value:" {"}]},$R[8752]={type:"element",tagName:"span",properties:$R[8753]={style:"color:#BD976A"},children:$R[8754]=[$R[8755]={type:"text",value:" UserScope"}]},$R[8756]={type:"element",tagName:"span",properties:$R[8757]={style:"color:#666666"},children:$R[8758]=[$R[8759]={type:"text",value:" }"}]},$R[8760]={type:"element",tagName:"span",properties:$R[8761]={style:"color:#4D9375"},children:$R[8762]=[$R[8763]={type:"text",value:" from"}]},$R[8764]={type:"element",tagName:"span",properties:$R[8765]={style:"color:#C98A7D77"},children:$R[8766]=[$R[8767]={type:"text",value:" \""}]},$R[8768]={type:"element",tagName:"span",properties:$R[8769]={style:"color:#C98A7D"},children:$R[8770]=[$R[8771]={type:"text",value:"./scopes"}]},$R[8772]={type:"element",tagName:"span",properties:$R[8773]={style:"color:#C98A7D77"},children:$R[8774]=[$R[8775]={type:"text",value:"\""}]},$R[8776]={type:"element",tagName:"span",properties:$R[8777]={style:"color:#666666"},children:$R[8778]=[$R[8779]={type:"text",value:";"}]}]},$R[8780]={type:"text",value:"\n"},$R[8781]={type:"element",tagName:"span",properties:$R[8782]={class:"line"},children:$R[8783]=[]},$R[8784]={type:"text",value:"\n"},$R[8785]={type:"element",tagName:"span",properties:$R[8786]={class:"line"},children:$R[8787]=[$R[8788]={type:"element",tagName:"span",properties:$R[8789]={style:"color:#4D9375"},children:$R[8790]=[$R[8791]={type:"text",value:"export"}]},$R[8792]={type:"element",tagName:"span",properties:$R[8793]={style:"color:#CB7676"},children:$R[8794]=[$R[8795]={type:"text",value:" const "}]},$R[8796]={type:"element",tagName:"span",properties:$R[8797]={style:"color:#BD976A"},children:$R[8798]=[$R[8799]={type:"text",value:"UsernameMolecule"}]},$R[8800]={type:"element",tagName:"span",properties:$R[8801]={style:"color:#666666"},children:$R[8802]=[$R[8803]={type:"text",value:" ="}]},$R[8804]={type:"element",tagName:"span",properties:$R[8805]={style:"color:#80A665"},children:$R[8806]=[$R[8807]={type:"text",value:" molecule"}]},$R[8808]={type:"element",tagName:"span",properties:$R[8809]={style:"color:#666666"},children:$R[8810]=[$R[8811]={type:"text",value:"("}]}]},$R[8812]={type:"text",value:"\n"},$R[8813]={type:"element",tagName:"span",properties:$R[8814]={class:"line"},children:$R[8815]=[$R[8816]={type:"element",tagName:"span",properties:$R[8817]={style:"color:#666666"},children:$R[8818]=[$R[8819]={type:"text",value:"\t("}]},$R[8820]={type:"element",tagName:"span",properties:$R[8821]={style:"color:#BD976A"},children:$R[8822]=[$R[8823]={type:"text",value:"_mol"}]},$R[8824]={type:"element",tagName:"span",properties:$R[8825]={style:"color:#666666"},children:$R[8826]=[$R[8827]={type:"text",value:","}]},$R[8828]={type:"element",tagName:"span",properties:$R[8829]={style:"color:#BD976A"},children:$R[8830]=[$R[8831]={type:"text",value:" scope"}]},$R[8832]={type:"element",tagName:"span",properties:$R[8833]={style:"color:#666666"},children:$R[8834]=[$R[8835]={type:"text",value:")"}]},$R[8836]={type:"element",tagName:"span",properties:$R[8837]={style:"color:#666666"},children:$R[8838]=[$R[8839]={type:"text",value:" =>"}]},$R[8840]={type:"element",tagName:"span",properties:$R[8841]={style:"color:#C98A7D77"},children:$R[8842]=[$R[8843]={type:"text",value:" `"}]},$R[8844]={type:"element",tagName:"span",properties:$R[8845]={style:"color:#C98A7D"},children:$R[8846]=[$R[8847]={type:"text",value:"You are user "}]},$R[8848]={type:"element",tagName:"span",properties:$R[8849]={style:"color:#4D9375"},children:$R[8850]=[$R[8851]={type:"text",value:"${"}]},$R[8852]={type:"element",tagName:"span",properties:$R[8853]={style:"color:#80A665"},children:$R[8854]=[$R[8855]={type:"text",value:"scope"}]},$R[8856]={type:"element",tagName:"span",properties:$R[8857]={style:"color:#666666"},children:$R[8858]=[$R[8859]={type:"text",value:"("}]},$R[8860]={type:"element",tagName:"span",properties:$R[8861]={style:"color:#C98A7D"},children:$R[8862]=[$R[8863]={type:"text",value:"UserScope"}]},$R[8864]={type:"element",tagName:"span",properties:$R[8865]={style:"color:#666666"},children:$R[8866]=[$R[8867]={type:"text",value:")"}]},$R[8868]={type:"element",tagName:"span",properties:$R[8869]={style:"color:#4D9375"},children:$R[8870]=[$R[8871]={type:"text",value:"}"}]},$R[8872]={type:"element",tagName:"span",properties:$R[8873]={style:"color:#C98A7D77"},children:$R[8874]=[$R[8875]={type:"text",value:"`"}]},$R[8876]={type:"element",tagName:"span",properties:$R[8877]={style:"color:#666666"},children:$R[8878]=[$R[8879]={type:"text",value:","}]}]},$R[8880]={type:"text",value:"\n"},$R[8881]={type:"element",tagName:"span",properties:$R[8882]={class:"line"},children:$R[8883]=[$R[8884]={type:"element",tagName:"span",properties:$R[8885]={style:"color:#666666"},children:$R[8886]=[$R[8887]={type:"text",value:");"}]}]}]}]}]}},$R[8888]={children:$R[8889]=[$R[8890]={position:$R[8891]={start:$R[8892]={line:116,column:1,offset:2684},end:$R[8893]={line:116,column:8,offset:2691}},type:"inlineCode",value:"scope"},$R[8894]={position:$R[8895]={start:$R[8896]={line:116,column:8,offset:2691},end:$R[8897]={line:116,column:11,offset:2694}},type:"text",value:" を "},$R[8898]={position:$R[8899]={start:$R[8900]={line:116,column:11,offset:2694},end:$R[8901]={line:116,column:21,offset:2704}},type:"inlineCode",value:"molecule"},$R[8902]={position:$R[8903]={start:$R[8904]={line:116,column:21,offset:2704},end:$R[8905]={line:116,column:32,offset:2715}},type:"text",value:" に依存させることで "},$R[8906]={position:$R[8907]={start:$R[8908]={line:116,column:32,offset:2715},end:$R[8909]={line:116,column:42,offset:2725}},type:"inlineCode",value:"molecule"},$R[8910]={position:$R[8911]={start:$R[8912]={line:116,column:42,offset:2725},end:$R[8913]={line:116,column:70,offset:2753}},type:"text",value:" はアプリケーション全体で 1 回実行されるのではなく、"},$R[8914]={position:$R[8915]={start:$R[8916]={line:116,column:70,offset:2753},end:$R[8917]={line:116,column:77,offset:2760}},type:"inlineCode",value:"scope"},$R[8918]={position:$R[8919]={start:$R[8920]={line:116,column:77,offset:2760},end:$R[8921]={line:116,column:98,offset:2781}},type:"text",value:" をマウントするごとに再実行される。また、"},$R[8922]={position:$R[8923]={start:$R[8924]={line:116,column:98,offset:2781},end:$R[8925]={line:116,column:105,offset:2788}},type:"inlineCode",value:"scope"},$R[8926]={position:$R[8927]={start:$R[8928]={line:116,column:105,offset:2788},end:$R[8929]={line:116,column:113,offset:2796}},type:"text",value:" に渡した値は "},$R[8930]={position:$R[8931]={start:$R[8932]={line:116,column:113,offset:2796},end:$R[8933]={line:116,column:120,offset:2803}},type:"inlineCode",value:"scope"},$R[8934]={position:$R[8935]={start:$R[8936]={line:116,column:120,offset:2803},end:$R[8937]={line:116,column:131,offset:2814}},type:"text",value:" プロバイダー内部の "},$R[8938]={position:$R[8939]={start:$R[8940]={line:116,column:131,offset:2814},end:$R[8941]={line:116,column:141,offset:2824}},type:"inlineCode",value:"molecule"},$R[8942]={position:$R[8943]={start:$R[8944]={line:116,column:141,offset:2824},end:$R[8945]={line:116,column:145,offset:2828}},type:"text",value:" から "},$R[8946]={position:$R[8947]={start:$R[8948]={line:116,column:145,offset:2828},end:$R[8949]={line:116,column:154,offset:2837}},type:"inlineCode",value:"scope()"},$R[8950]={position:$R[8951]={start:$R[8952]={line:116,column:154,offset:2837},end:$R[8953]={line:116,column:167,offset:2850}},type:"text",value:" 関数を通じて取得できる。"}],position:$R[8954]={start:$R[8955]={line:116,column:1,offset:2684},end:$R[8956]={line:116,column:167,offset:2850}},type:"paragraph"}],position:$R[8957]={end:$R[8958]={line:116,column:167,offset:2850},start:$R[8959]={line:73,column:1,offset:1777}},type:"section"},$R[8960]={children:$R[8961]=[$R[8962]={children:$R[8963]=[$R[8964]={position:$R[8965]={start:$R[8966]={line:118,column:5,offset:2856},end:$R[8967]={line:118,column:14,offset:2865}},type:"text",value:"lifecycle"}],id:"lifecycle",level:3,plain:"lifecycle",position:$R[8968]={start:$R[8969]={line:118,column:1,offset:2852},end:$R[8970]={line:118,column:14,offset:2865}},type:"heading"},$R[8971]={children:$R[8972]=[$R[8973]={position:$R[8974]={start:$R[8975]={line:120,column:1,offset:2867},end:$R[8976]={line:120,column:11,offset:2877}},type:"inlineCode",value:"molecule"},$R[8977]={position:$R[8978]={start:$R[8979]={line:120,column:11,offset:2877},end:$R[8980]={line:120,column:85,offset:2951}},type:"text",value:" はアプリケーションやスコープに応じて必要なときに実行され使用中であることを示すためマウントされ、必要でなくなったらアンマウントされ GC される。"}],position:$R[8981]={start:$R[8982]={line:120,column:1,offset:2867},end:$R[8983]={line:120,column:85,offset:2951}},type:"paragraph"},$R[8984]={children:$R[8985]=[$R[8986]={position:$R[8987]={start:$R[8988]={line:122,column:1,offset:2953},end:$R[8989]={line:122,column:7,offset:2959}},type:"text",value:"以下の図は "},$R[8990]={children:$R[8991]=[$R[8992]={position:$R[8993]={start:$R[8994]={line:122,column:8,offset:2960},end:$R[8995]={line:122,column:17,offset:2969}},type:"text",value:"公式のドキュメント"}],position:$R[8996]={start:$R[8997]={line:122,column:7,offset:2959},end:$R[8998]={line:122,column:62,offset:3014}},title:void 0,type:"link",url:"https://www.bunshi.org/concepts/lifecycle/"},$R[8999]={position:$R[9000]={start:$R[9001]={line:122,column:62,offset:3014},end:$R[9002]={line:122,column:85,offset:3037}},type:"text",value:" から引用したものである。とてもわかりやすい。"}],position:$R[9003]={start:$R[9004]={line:122,column:1,offset:2953},end:$R[9005]={line:122,column:85,offset:3037}},type:"paragraph"},$R[9006]={children:$R[9007]=[$R[9008]={alt:"bunshiのライフサイクル",position:$R[9009]={start:$R[9010]={line:124,column:1,offset:3039},end:$R[9011]={line:124,column:35,offset:3073}},title:void 0,type:"image",url:"./lifecycle.png",transformed:$R[9012]=[$R[9013]={dim:$R[9014]={h:1800,w:1390},path:"/img/lifecycle-YaSDHDzK-1390x1800.webp"},$R[9015]={dim:$R[9016]={h:1260,w:973},path:"/img/lifecycle-YaSDHDzK-973x1260.webp"},$R[9017]={dim:$R[9018]={h:882,w:681},path:"/img/lifecycle-YaSDHDzK-681x882.webp"},$R[9019]={dim:$R[9020]={h:617,w:477},path:"/img/lifecycle-YaSDHDzK-477x617.webp"},$R[9021]={dim:$R[9022]={h:432,w:334},path:"/img/lifecycle-YaSDHDzK-334x432.webp"}]}],position:$R[9023]={start:$R[9024]={line:124,column:1,offset:3039},end:$R[9025]={line:124,column:35,offset:3073}},type:"paragraph"},$R[9026]={children:$R[9027]=[$R[9028]={position:$R[9029]={start:$R[9030]={line:126,column:1,offset:3075},end:$R[9031]={line:126,column:9,offset:3083}},type:"text",value:"次の例のように "},$R[9032]={position:$R[9033]={start:$R[9034]={line:126,column:9,offset:3083},end:$R[9035]={line:126,column:18,offset:3092}},type:"inlineCode",value:"onMount"},$R[9036]={position:$R[9037]={start:$R[9038]={line:126,column:18,offset:3092},end:$R[9039]={line:126,column:40,offset:3114}},type:"text",value:" 関数とその cleanup 関数を使って "},$R[9040]={position:$R[9041]={start:$R[9042]={line:126,column:40,offset:3114},end:$R[9043]={line:126,column:50,offset:3124}},type:"inlineCode",value:"molecule"},$R[9044]={position:$R[9045]={start:$R[9046]={line:126,column:50,offset:3124},end:$R[9047]={line:126,column:77,offset:3151}},type:"text",value:" のマウントとアンマウント時の処理を行うことができる。"}],position:$R[9048]={start:$R[9049]={line:126,column:1,offset:3075},end:$R[9050]={line:126,column:77,offset:3151}},type:"paragraph"},$R[9051]={filename:"sample.ts ts",lang:"ts",position:$R[9052]={start:$R[9053]={line:128,column:1,offset:3153},end:$R[9054]={line:140,column:4,offset:3436}},type:"code",value:"import { molecule, onMount } from \"bunshi\";\nimport { atom } from \"jotai/vanilla\";\n\nexport const CountMolecule = molecule(() => {\n\tconsole.log(\"Created\");\n\tonMount(() => {\n\t\tconsole.log(\"Mounted\");\n\t\treturn () => console.log(\"Unmounted\");\n\t});\n\treturn atom(0);\n});",hast:$R[9055]={type:"root",children:$R[9056]=[$R[9057]={type:"element",tagName:"pre",properties:$R[9058]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[9059]=[$R[9060]={type:"element",tagName:"code",properties:$R[9061]={},children:$R[9062]=[$R[9063]={type:"element",tagName:"span",properties:$R[9064]={class:"line"},children:$R[9065]=[$R[9066]={type:"element",tagName:"span",properties:$R[9067]={style:"color:#4D9375"},children:$R[9068]=[$R[9069]={type:"text",value:"import"}]},$R[9070]={type:"element",tagName:"span",properties:$R[9071]={style:"color:#666666"},children:$R[9072]=[$R[9073]={type:"text",value:" {"}]},$R[9074]={type:"element",tagName:"span",properties:$R[9075]={style:"color:#BD976A"},children:$R[9076]=[$R[9077]={type:"text",value:" molecule"}]},$R[9078]={type:"element",tagName:"span",properties:$R[9079]={style:"color:#666666"},children:$R[9080]=[$R[9081]={type:"text",value:","}]},$R[9082]={type:"element",tagName:"span",properties:$R[9083]={style:"color:#BD976A"},children:$R[9084]=[$R[9085]={type:"text",value:" onMount"}]},$R[9086]={type:"element",tagName:"span",properties:$R[9087]={style:"color:#666666"},children:$R[9088]=[$R[9089]={type:"text",value:" }"}]},$R[9090]={type:"element",tagName:"span",properties:$R[9091]={style:"color:#4D9375"},children:$R[9092]=[$R[9093]={type:"text",value:" from"}]},$R[9094]={type:"element",tagName:"span",properties:$R[9095]={style:"color:#C98A7D77"},children:$R[9096]=[$R[9097]={type:"text",value:" \""}]},$R[9098]={type:"element",tagName:"span",properties:$R[9099]={style:"color:#C98A7D"},children:$R[9100]=[$R[9101]={type:"text",value:"bunshi"}]},$R[9102]={type:"element",tagName:"span",properties:$R[9103]={style:"color:#C98A7D77"},children:$R[9104]=[$R[9105]={type:"text",value:"\""}]},$R[9106]={type:"element",tagName:"span",properties:$R[9107]={style:"color:#666666"},children:$R[9108]=[$R[9109]={type:"text",value:";"}]}]},$R[9110]={type:"text",value:"\n"},$R[9111]={type:"element",tagName:"span",properties:$R[9112]={class:"line"},children:$R[9113]=[$R[9114]={type:"element",tagName:"span",properties:$R[9115]={style:"color:#4D9375"},children:$R[9116]=[$R[9117]={type:"text",value:"import"}]},$R[9118]={type:"element",tagName:"span",properties:$R[9119]={style:"color:#666666"},children:$R[9120]=[$R[9121]={type:"text",value:" {"}]},$R[9122]={type:"element",tagName:"span",properties:$R[9123]={style:"color:#BD976A"},children:$R[9124]=[$R[9125]={type:"text",value:" atom"}]},$R[9126]={type:"element",tagName:"span",properties:$R[9127]={style:"color:#666666"},children:$R[9128]=[$R[9129]={type:"text",value:" }"}]},$R[9130]={type:"element",tagName:"span",properties:$R[9131]={style:"color:#4D9375"},children:$R[9132]=[$R[9133]={type:"text",value:" from"}]},$R[9134]={type:"element",tagName:"span",properties:$R[9135]={style:"color:#C98A7D77"},children:$R[9136]=[$R[9137]={type:"text",value:" \""}]},$R[9138]={type:"element",tagName:"span",properties:$R[9139]={style:"color:#C98A7D"},children:$R[9140]=[$R[9141]={type:"text",value:"jotai/vanilla"}]},$R[9142]={type:"element",tagName:"span",properties:$R[9143]={style:"color:#C98A7D77"},children:$R[9144]=[$R[9145]={type:"text",value:"\""}]},$R[9146]={type:"element",tagName:"span",properties:$R[9147]={style:"color:#666666"},children:$R[9148]=[$R[9149]={type:"text",value:";"}]}]},$R[9150]={type:"text",value:"\n"},$R[9151]={type:"element",tagName:"span",properties:$R[9152]={class:"line"},children:$R[9153]=[]},$R[9154]={type:"text",value:"\n"},$R[9155]={type:"element",tagName:"span",properties:$R[9156]={class:"line"},children:$R[9157]=[$R[9158]={type:"element",tagName:"span",properties:$R[9159]={style:"color:#4D9375"},children:$R[9160]=[$R[9161]={type:"text",value:"export"}]},$R[9162]={type:"element",tagName:"span",properties:$R[9163]={style:"color:#CB7676"},children:$R[9164]=[$R[9165]={type:"text",value:" const "}]},$R[9166]={type:"element",tagName:"span",properties:$R[9167]={style:"color:#BD976A"},children:$R[9168]=[$R[9169]={type:"text",value:"CountMolecule"}]},$R[9170]={type:"element",tagName:"span",properties:$R[9171]={style:"color:#666666"},children:$R[9172]=[$R[9173]={type:"text",value:" ="}]},$R[9174]={type:"element",tagName:"span",properties:$R[9175]={style:"color:#80A665"},children:$R[9176]=[$R[9177]={type:"text",value:" molecule"}]},$R[9178]={type:"element",tagName:"span",properties:$R[9179]={style:"color:#666666"},children:$R[9180]=[$R[9181]={type:"text",value:"(()"}]},$R[9182]={type:"element",tagName:"span",properties:$R[9183]={style:"color:#666666"},children:$R[9184]=[$R[9185]={type:"text",value:" =>"}]},$R[9186]={type:"element",tagName:"span",properties:$R[9187]={style:"color:#666666"},children:$R[9188]=[$R[9189]={type:"text",value:" {"}]}]},$R[9190]={type:"text",value:"\n"},$R[9191]={type:"element",tagName:"span",properties:$R[9192]={class:"line"},children:$R[9193]=[$R[9194]={type:"element",tagName:"span",properties:$R[9195]={style:"color:#BD976A"},children:$R[9196]=[$R[9197]={type:"text",value:"\tconsole"}]},$R[9198]={type:"element",tagName:"span",properties:$R[9199]={style:"color:#666666"},children:$R[9200]=[$R[9201]={type:"text",value:"."}]},$R[9202]={type:"element",tagName:"span",properties:$R[9203]={style:"color:#80A665"},children:$R[9204]=[$R[9205]={type:"text",value:"log"}]},$R[9206]={type:"element",tagName:"span",properties:$R[9207]={style:"color:#666666"},children:$R[9208]=[$R[9209]={type:"text",value:"("}]},$R[9210]={type:"element",tagName:"span",properties:$R[9211]={style:"color:#C98A7D77"},children:$R[9212]=[$R[9213]={type:"text",value:"\""}]},$R[9214]={type:"element",tagName:"span",properties:$R[9215]={style:"color:#C98A7D"},children:$R[9216]=[$R[9217]={type:"text",value:"Created"}]},$R[9218]={type:"element",tagName:"span",properties:$R[9219]={style:"color:#C98A7D77"},children:$R[9220]=[$R[9221]={type:"text",value:"\""}]},$R[9222]={type:"element",tagName:"span",properties:$R[9223]={style:"color:#666666"},children:$R[9224]=[$R[9225]={type:"text",value:");"}]}]},$R[9226]={type:"text",value:"\n"},$R[9227]={type:"element",tagName:"span",properties:$R[9228]={class:"line"},children:$R[9229]=[$R[9230]={type:"element",tagName:"span",properties:$R[9231]={style:"color:#80A665"},children:$R[9232]=[$R[9233]={type:"text",value:"\tonMount"}]},$R[9234]={type:"element",tagName:"span",properties:$R[9235]={style:"color:#666666"},children:$R[9236]=[$R[9237]={type:"text",value:"(()"}]},$R[9238]={type:"element",tagName:"span",properties:$R[9239]={style:"color:#666666"},children:$R[9240]=[$R[9241]={type:"text",value:" =>"}]},$R[9242]={type:"element",tagName:"span",properties:$R[9243]={style:"color:#666666"},children:$R[9244]=[$R[9245]={type:"text",value:" {"}]}]},$R[9246]={type:"text",value:"\n"},$R[9247]={type:"element",tagName:"span",properties:$R[9248]={class:"line"},children:$R[9249]=[$R[9250]={type:"element",tagName:"span",properties:$R[9251]={style:"color:#BD976A"},children:$R[9252]=[$R[9253]={type:"text",value:"\t\tconsole"}]},$R[9254]={type:"element",tagName:"span",properties:$R[9255]={style:"color:#666666"},children:$R[9256]=[$R[9257]={type:"text",value:"."}]},$R[9258]={type:"element",tagName:"span",properties:$R[9259]={style:"color:#80A665"},children:$R[9260]=[$R[9261]={type:"text",value:"log"}]},$R[9262]={type:"element",tagName:"span",properties:$R[9263]={style:"color:#666666"},children:$R[9264]=[$R[9265]={type:"text",value:"("}]},$R[9266]={type:"element",tagName:"span",properties:$R[9267]={style:"color:#C98A7D77"},children:$R[9268]=[$R[9269]={type:"text",value:"\""}]},$R[9270]={type:"element",tagName:"span",properties:$R[9271]={style:"color:#C98A7D"},children:$R[9272]=[$R[9273]={type:"text",value:"Mounted"}]},$R[9274]={type:"element",tagName:"span",properties:$R[9275]={style:"color:#C98A7D77"},children:$R[9276]=[$R[9277]={type:"text",value:"\""}]},$R[9278]={type:"element",tagName:"span",properties:$R[9279]={style:"color:#666666"},children:$R[9280]=[$R[9281]={type:"text",value:");"}]}]},$R[9282]={type:"text",value:"\n"},$R[9283]={type:"element",tagName:"span",properties:$R[9284]={class:"line"},children:$R[9285]=[$R[9286]={type:"element",tagName:"span",properties:$R[9287]={style:"color:#4D9375"},children:$R[9288]=[$R[9289]={type:"text",value:"\t\treturn"}]},$R[9290]={type:"element",tagName:"span",properties:$R[9291]={style:"color:#666666"},children:$R[9292]=[$R[9293]={type:"text",value:" ()"}]},$R[9294]={type:"element",tagName:"span",properties:$R[9295]={style:"color:#666666"},children:$R[9296]=[$R[9297]={type:"text",value:" =>"}]},$R[9298]={type:"element",tagName:"span",properties:$R[9299]={style:"color:#BD976A"},children:$R[9300]=[$R[9301]={type:"text",value:" console"}]},$R[9302]={type:"element",tagName:"span",properties:$R[9303]={style:"color:#666666"},children:$R[9304]=[$R[9305]={type:"text",value:"."}]},$R[9306]={type:"element",tagName:"span",properties:$R[9307]={style:"color:#80A665"},children:$R[9308]=[$R[9309]={type:"text",value:"log"}]},$R[9310]={type:"element",tagName:"span",properties:$R[9311]={style:"color:#666666"},children:$R[9312]=[$R[9313]={type:"text",value:"("}]},$R[9314]={type:"element",tagName:"span",properties:$R[9315]={style:"color:#C98A7D77"},children:$R[9316]=[$R[9317]={type:"text",value:"\""}]},$R[9318]={type:"element",tagName:"span",properties:$R[9319]={style:"color:#C98A7D"},children:$R[9320]=[$R[9321]={type:"text",value:"Unmounted"}]},$R[9322]={type:"element",tagName:"span",properties:$R[9323]={style:"color:#C98A7D77"},children:$R[9324]=[$R[9325]={type:"text",value:"\""}]},$R[9326]={type:"element",tagName:"span",properties:$R[9327]={style:"color:#666666"},children:$R[9328]=[$R[9329]={type:"text",value:");"}]}]},$R[9330]={type:"text",value:"\n"},$R[9331]={type:"element",tagName:"span",properties:$R[9332]={class:"line"},children:$R[9333]=[$R[9334]={type:"element",tagName:"span",properties:$R[9335]={style:"color:#666666"},children:$R[9336]=[$R[9337]={type:"text",value:"\t});"}]}]},$R[9338]={type:"text",value:"\n"},$R[9339]={type:"element",tagName:"span",properties:$R[9340]={class:"line"},children:$R[9341]=[$R[9342]={type:"element",tagName:"span",properties:$R[9343]={style:"color:#4D9375"},children:$R[9344]=[$R[9345]={type:"text",value:"\treturn"}]},$R[9346]={type:"element",tagName:"span",properties:$R[9347]={style:"color:#80A665"},children:$R[9348]=[$R[9349]={type:"text",value:" atom"}]},$R[9350]={type:"element",tagName:"span",properties:$R[9351]={style:"color:#666666"},children:$R[9352]=[$R[9353]={type:"text",value:"("}]},$R[9354]={type:"element",tagName:"span",properties:$R[9355]={style:"color:#4C9A91"},children:$R[9356]=[$R[9357]={type:"text",value:"0"}]},$R[9358]={type:"element",tagName:"span",properties:$R[9359]={style:"color:#666666"},children:$R[9360]=[$R[9361]={type:"text",value:");"}]}]},$R[9362]={type:"text",value:"\n"},$R[9363]={type:"element",tagName:"span",properties:$R[9364]={class:"line"},children:$R[9365]=[$R[9366]={type:"element",tagName:"span",properties:$R[9367]={style:"color:#666666"},children:$R[9368]=[$R[9369]={type:"text",value:"});"}]}]}]}]}]}},$R[9370]={children:$R[9371]=[$R[9372]={position:$R[9373]={start:$R[9374]={line:142,column:1,offset:3438},end:$R[9375]={line:142,column:25,offset:3462}},type:"text",value:"次にライフサイクルの各ステップについて説明する。"}],position:$R[9376]={start:$R[9377]={line:142,column:1,offset:3438},end:$R[9378]={line:142,column:25,offset:3462}},type:"paragraph"},$R[9379]={children:$R[9380]=[$R[9381]={children:$R[9382]=[$R[9383]={position:$R[9384]={start:$R[9385]={line:144,column:6,offset:3469},end:$R[9386]={line:144,column:13,offset:3476}},type:"text",value:"Created"}],id:"created",level:4,plain:"Created",position:$R[9387]={start:$R[9388]={line:144,column:1,offset:3464},end:$R[9389]={line:144,column:13,offset:3476}},type:"heading"},$R[9390]={children:$R[9391]=[$R[9392]={position:$R[9393]={start:$R[9394]={line:146,column:1,offset:3478},end:$R[9395]={line:146,column:18,offset:3495}},type:"text",value:"アプリケーションが初期化された時、"},$R[9396]={position:$R[9397]={start:$R[9398]={line:146,column:18,offset:3495},end:$R[9399]={line:146,column:25,offset:3502}},type:"inlineCode",value:"scope"},$R[9400]={position:$R[9401]={start:$R[9402]={line:146,column:25,offset:3502},end:$R[9403]={line:146,column:50,offset:3527}},type:"text",value:" を登録したプロバイダーがマウントされた時などに "},$R[9404]={position:$R[9405]={start:$R[9406]={line:146,column:50,offset:3527},end:$R[9407]={line:146,column:60,offset:3537}},type:"inlineCode",value:"molecule"},$R[9408]={position:$R[9409]={start:$R[9410]={line:146,column:60,offset:3537},end:$R[9411]={line:146,column:85,offset:3562}},type:"text",value:" の値は作成され、すべての値は GC 可能になる。"}],position:$R[9412]={start:$R[9413]={line:146,column:1,offset:3478},end:$R[9414]={line:146,column:85,offset:3562}},type:"paragraph"}],position:$R[9415]={end:$R[9416]={line:146,column:85,offset:3562},start:$R[9417]={line:144,column:1,offset:3464}},type:"section"},$R[9418]={children:$R[9419]=[$R[9420]={children:$R[9421]=[$R[9422]={position:$R[9423]={start:$R[9424]={line:148,column:6,offset:3569},end:$R[9425]={line:148,column:13,offset:3576}},type:"text",value:"Mounted"}],id:"mounted",level:4,plain:"Mounted",position:$R[9426]={start:$R[9427]={line:148,column:1,offset:3564},end:$R[9428]={line:148,column:13,offset:3576}},type:"heading"},$R[9429]={children:$R[9430]=[$R[9431]={position:$R[9432]={start:$R[9433]={line:150,column:1,offset:3578},end:$R[9434]={line:150,column:11,offset:3588}},type:"inlineCode",value:"molecule"},$R[9435]={position:$R[9436]={start:$R[9437]={line:150,column:11,offset:3588},end:$R[9438]={line:150,column:34,offset:3611}},type:"text",value:" の値は実行されただけではキャッシュされない。"},$R[9439]={position:$R[9440]={start:$R[9441]={line:150,column:34,offset:3611},end:$R[9442]={line:150,column:41,offset:3618}},type:"inlineCode",value:"React"},$R[9443]={position:$R[9444]={start:$R[9445]={line:150,column:41,offset:3618},end:$R[9446]={line:150,column:44,offset:3621}},type:"text",value:" や "},$R[9447]={position:$R[9448]={start:$R[9449]={line:150,column:44,offset:3621},end:$R[9450]={line:150,column:49,offset:3626}},type:"inlineCode",value:"Vue"},$R[9451]={position:$R[9452]={start:$R[9453]={line:150,column:49,offset:3626},end:$R[9454]={line:150,column:53,offset:3630}},type:"text",value:" では "},$R[9455]={position:$R[9456]={start:$R[9457]={line:150,column:53,offset:3630},end:$R[9458]={line:150,column:66,offset:3643}},type:"inlineCode",value:"useMolecule"},$R[9459]={position:$R[9460]={start:$R[9461]={line:150,column:66,offset:3643},end:$R[9462]={line:150,column:76,offset:3653}},type:"text",value:" フックを使用して "},$R[9463]={position:$R[9464]={start:$R[9465]={line:150,column:76,offset:3653},end:$R[9466]={line:150,column:86,offset:3663}},type:"inlineCode",value:"molecule"},$R[9467]={position:$R[9468]={start:$R[9469]={line:150,column:86,offset:3663},end:$R[9470]={line:150,column:106,offset:3683}},type:"text",value:" をマウントすることでキャッシュされる。"}],position:$R[9471]={start:$R[9472]={line:150,column:1,offset:3578},end:$R[9473]={line:150,column:106,offset:3683}},type:"paragraph"}],position:$R[9474]={end:$R[9475]={line:150,column:106,offset:3683},start:$R[9476]={line:148,column:1,offset:3564}},type:"section"},$R[9477]={children:$R[9478]=[$R[9479]={children:$R[9480]=[$R[9481]={position:$R[9482]={start:$R[9483]={line:152,column:6,offset:3690},end:$R[9484]={line:152,column:15,offset:3699}},type:"text",value:"Unmounted"}],id:"unmounted",level:4,plain:"Unmounted",position:$R[9485]={start:$R[9486]={line:152,column:1,offset:3685},end:$R[9487]={line:152,column:15,offset:3699}},type:"heading"},$R[9488]={children:$R[9489]=[$R[9490]={position:$R[9491]={start:$R[9492]={line:154,column:1,offset:3701},end:$R[9493]={line:154,column:11,offset:3711}},type:"inlineCode",value:"molecule"},$R[9494]={position:$R[9495]={start:$R[9496]={line:154,column:11,offset:3711},end:$R[9497]={line:154,column:25,offset:3725}},type:"text",value:" の値が使用されなくなると、"},$R[9498]={position:$R[9499]={start:$R[9500]={line:154,column:25,offset:3725},end:$R[9501]={line:154,column:35,offset:3735}},type:"inlineCode",value:"molecule"},$R[9502]={position:$R[9503]={start:$R[9504]={line:154,column:35,offset:3735},end:$R[9505]={line:154,column:53,offset:3753}},type:"text",value:" はアンマウントされ、GC される。"},$R[9506]={position:$R[9507]={start:$R[9508]={line:154,column:53,offset:3753},end:$R[9509]={line:154,column:60,offset:3760}},type:"inlineCode",value:"React"},$R[9510]={position:$R[9511]={start:$R[9512]={line:154,column:60,offset:3760},end:$R[9513]={line:154,column:63,offset:3763}},type:"text",value:" や "},$R[9514]={position:$R[9515]={start:$R[9516]={line:154,column:63,offset:3763},end:$R[9517]={line:154,column:68,offset:3768}},type:"inlineCode",value:"Vue"},$R[9518]={position:$R[9519]={start:$R[9520]={line:154,column:68,offset:3768},end:$R[9521]={line:154,column:72,offset:3772}},type:"text",value:" では "},$R[9522]={position:$R[9523]={start:$R[9524]={line:154,column:72,offset:3772},end:$R[9525]={line:154,column:85,offset:3785}},type:"inlineCode",value:"useMolecule"},$R[9526]={position:$R[9527]={start:$R[9528]={line:154,column:85,offset:3785},end:$R[9529]={line:154,column:104,offset:3804}},type:"text",value:" フックで自動的にアンマウントされる。"}],position:$R[9530]={start:$R[9531]={line:154,column:1,offset:3701},end:$R[9532]={line:154,column:104,offset:3804}},type:"paragraph"},$R[9533]={children:$R[9534]=[$R[9535]={position:$R[9536]={start:$R[9537]={line:156,column:1,offset:3806},end:$R[9538]={line:156,column:75,offset:3880}},type:"text",value:"React Strict mode を使用している方は unmount された後に再度 mount されることがあるので、この点に注意が必要である。"},$R[9539]={position:$R[9540]={start:$R[9541]={line:156,column:75,offset:3880},end:$R[9542]={line:156,column:86,offset:3891}},type:"inlineCode",value:"useEffect"},$R[9543]={position:$R[9544]={start:$R[9545]={line:156,column:86,offset:3891},end:$R[9546]={line:156,column:122,offset:3927}},type:"text",value:" などのフックの正当性を確認するために 2 回実行されるのと同じように、"},$R[9547]={position:$R[9548]={start:$R[9549]={line:156,column:122,offset:3927},end:$R[9550]={line:156,column:132,offset:3937}},type:"inlineCode",value:"molecule"},$R[9551]={position:$R[9552]={start:$R[9553]={line:156,column:132,offset:3937},end:$R[9554]={line:156,column:153,offset:3958}},type:"text",value:" も 2 回実行されることがある。この時、"},$R[9555]={position:$R[9556]={start:$R[9557]={line:156,column:153,offset:3958},end:$R[9558]={line:156,column:180,offset:3985}},type:"inlineCode",value:"mount -> unmount -> mount"},$R[9559]={position:$R[9560]={start:$R[9561]={line:156,column:180,offset:3985},end:$R[9562]={line:156,column:191,offset:3996}},type:"text",value:" の順番で実行される。"}],position:$R[9563]={start:$R[9564]={line:156,column:1,offset:3806},end:$R[9565]={line:156,column:191,offset:3996}},type:"paragraph"}],position:$R[9566]={end:$R[9567]={line:156,column:191,offset:3996},start:$R[9568]={line:152,column:1,offset:3685}},type:"section"}],position:$R[9569]={end:$R[9570]={line:156,column:191,offset:3996},start:$R[9571]={line:118,column:1,offset:2852}},type:"section"}],position:$R[9572]={end:$R[9573]={line:156,column:191,offset:3996},start:$R[9574]={line:33,column:1,offset:982}},type:"section"},$R[9575]={children:$R[9576]=[$R[9577]={children:$R[9578]=[$R[9579]={position:$R[9580]={start:$R[9581]={line:158,column:4,offset:4001},end:$R[9582]={line:158,column:19,offset:4016}},type:"text",value:"個人的に面白いと思ったポイント"}],id:"個人的に面白いと思ったポイント",level:2,plain:"個人的に面白いと思ったポイント",position:$R[9583]={start:$R[9584]={line:158,column:1,offset:3998},end:$R[9585]={line:158,column:19,offset:4016}},type:"heading"},$R[9586]={children:$R[9587]=[$R[9588]={position:$R[9589]={start:$R[9590]={line:160,column:1,offset:4018},end:$R[9591]={line:160,column:19,offset:4036}},type:"inlineCode",value:"MoleculeInjector"},$R[9592]={position:$R[9593]={start:$R[9594]={line:160,column:19,offset:4036},end:$R[9595]={line:160,column:26,offset:4043}},type:"text",value:"(を生成する "},$R[9596]={position:$R[9597]={start:$R[9598]={line:160,column:26,offset:4043},end:$R[9599]={line:160,column:42,offset:4059}},type:"inlineCode",value:"createInjector"},$R[9600]={position:$R[9601]={start:$R[9602]={line:160,column:42,offset:4059},end:$R[9603]={line:160,column:45,offset:4062}},type:"text",value:")と "},$R[9604]={position:$R[9605]={start:$R[9606]={line:160,column:45,offset:4062},end:$R[9607]={line:160,column:64,offset:4081}},type:"inlineCode",value:"moleculeInterface"},$R[9608]={position:$R[9609]={start:$R[9610]={line:160,column:64,offset:4081},end:$R[9611]={line:160,column:67,offset:4084}},type:"text",value:" だ。"}],position:$R[9612]={start:$R[9613]={line:160,column:1,offset:4018},end:$R[9614]={line:160,column:67,offset:4084}},type:"paragraph"},$R[9615]={meta:$R[9616]={title:"moleculeInterface",open_graph:$R[9617]={title:"moleculeInterface",type:"article",url:void 0,locale:"en",description:void 0,site_name:"Bunshi"},twitter_card:$R[9618]={card:"summary_large_image",title:"moleculeInterface",description:void 0},favicon:"https://www.bunshi.org/public/favicon.ico"},oembed:void 0,position:$R[9619]={start:$R[9620]={line:162,column:1,offset:4086},end:$R[9621]={line:162,column:80,offset:4165}},src:"https://www.bunshi.org/reference/vanilla/functions/functionmoleculeinterface-1/",type:"embed"},$R[9622]={meta:$R[9623]={title:"MoleculeInjector",open_graph:$R[9624]={title:"MoleculeInjector",type:"article",url:void 0,locale:"en",description:void 0,site_name:"Bunshi"},twitter_card:$R[9625]={card:"summary_large_image",title:"MoleculeInjector",description:void 0},favicon:"https://www.bunshi.org/public/favicon.ico"},oembed:void 0,position:$R[9626]={start:$R[9627]={line:164,column:1,offset:4167},end:$R[9628]={line:164,column:82,offset:4248}},src:"https://www.bunshi.org/reference/vanilla/type-aliases/type-aliasmoleculeinjector/",type:"embed"},$R[9629]={children:$R[9630]=[$R[9631]={position:$R[9632]={start:$R[9633]={line:166,column:1,offset:4250},end:$R[9634]={line:166,column:6,offset:4255}},type:"text",value:"それぞれ "},$R[9635]={position:$R[9636]={start:$R[9637]={line:166,column:6,offset:4255},end:$R[9638]={line:166,column:14,offset:4263}},type:"inlineCode",value:"bunshi"},$R[9639]={position:$R[9640]={start:$R[9641]={line:166,column:14,offset:4263},end:$R[9642]={line:166,column:45,offset:4294}},type:"text",value:" の依存関係のグラフを構築するための DI コンテナと、他の "},$R[9643]={position:$R[9644]={start:$R[9645]={line:166,column:45,offset:4294},end:$R[9646]={line:166,column:55,offset:4304}},type:"inlineCode",value:"molecule"},$R[9647]={position:$R[9648]={start:$R[9649]={line:166,column:55,offset:4304},end:$R[9650]={line:166,column:93,offset:4342}},type:"text",value:" が依存できるための参照を提供するものだ。ドキュメントにある通り、どちらも "},$R[9651]={position:$R[9652]={start:$R[9653]={line:166,column:93,offset:4342},end:$R[9654]={line:166,column:103,offset:4352}},type:"inlineCode",value:"molecule"},$R[9655]={position:$R[9656]={start:$R[9657]={line:166,column:103,offset:4352},end:$R[9658]={line:166,column:106,offset:4355}},type:"text",value:" や "},$R[9659]={position:$R[9660]={start:$R[9661]={line:166,column:106,offset:4355},end:$R[9662]={line:166,column:119,offset:4368}},type:"inlineCode",value:"useMolecule"},$R[9663]={position:$R[9664]={start:$R[9665]={line:166,column:119,offset:4368},end:$R[9666]={line:166,column:168,offset:4417}},type:"text",value:" の裏で使用されておりユーザーがこれらを直接使用するのはテストコードを書く場合やライブラリとして "},$R[9667]={position:$R[9668]={start:$R[9669]={line:166,column:168,offset:4417},end:$R[9670]={line:166,column:178,offset:4427}},type:"inlineCode",value:"molecule"},$R[9671]={position:$R[9672]={start:$R[9673]={line:166,column:178,offset:4427},end:$R[9674]={line:166,column:194,offset:4443}},type:"text",value:" を提供する場合などに限られる。"}],position:$R[9675]={start:$R[9676]={line:166,column:1,offset:4250},end:$R[9677]={line:166,column:194,offset:4443}},type:"paragraph"},$R[9678]={children:$R[9679]=[$R[9680]={position:$R[9681]={start:$R[9682]={line:168,column:1,offset:4445},end:$R[9683]={line:168,column:43,offset:4487}},type:"text",value:"私がこれらの機能を面白いと感じたのは、今まで TS の DI コンテナと言われると、"},$R[9684]={children:$R[9685]=[$R[9686]={position:$R[9687]={start:$R[9688]={line:168,column:44,offset:4488},end:$R[9689]={line:168,column:50,offset:4494}},type:"text",value:"NestJS"}],position:$R[9690]={start:$R[9691]={line:168,column:43,offset:4487},end:$R[9692]={line:168,column:72,offset:4516}},title:void 0,type:"link",url:"https://nestjs.com/"},$R[9693]={position:$R[9694]={start:$R[9695]={line:168,column:72,offset:4516},end:$R[9696]={line:168,column:80,offset:4524}},type:"text",value:" に乗っかるか、"},$R[9697]={children:$R[9698]=[$R[9699]={position:$R[9700]={start:$R[9701]={line:168,column:81,offset:4525},end:$R[9702]={line:168,column:89,offset:4533}},type:"text",value:"TSyringe"}],position:$R[9703]={start:$R[9704]={line:168,column:80,offset:4524},end:$R[9705]={line:168,column:129,offset:4573}},title:void 0,type:"link",url:"https://github.com/microsoft/tsyringe"},$R[9706]={position:$R[9707]={start:$R[9708]={line:168,column:129,offset:4573},end:$R[9709]={line:168,column:259,offset:4703}},type:"text",value:" であった。前者はバックエンドを構築するためのフレームワークなので、そもそもフロントエンド文脈で使うことがない。また TSyringe は DI コンテナとしては良くできている。循環依存やインスタンスを使い捨てるなどができるが、デコレータを使用する必要があり "},$R[9710]={position:$R[9711]={start:$R[9712]={line:168,column:259,offset:4703},end:$R[9713]={line:168,column:277,offset:4721}},type:"inlineCode",value:"reflect-metadata"},$R[9714]={position:$R[9715]={start:$R[9716]={line:168,column:277,offset:4721},end:$R[9717]={line:168,column:286,offset:4730}},type:"text",value:" を使う制約がある"},$R[9718]={footnoteIndex:2,position:$R[9719]={start:$R[9720]={line:168,column:286,offset:4730},end:$R[9721]={line:168,column:290,offset:4734}},referenceIndex:1,type:"footnoteReference"},$R[9722]={position:$R[9723]={start:$R[9724]={line:168,column:290,offset:4734},end:$R[9725]={line:168,column:291,offset:4735}},type:"text",value:"。"}],position:$R[9726]={start:$R[9727]={line:168,column:1,offset:4445},end:$R[9728]={line:168,column:291,offset:4735}},type:"paragraph"},$R[9729]={children:$R[9730]=[$R[9731]={position:$R[9732]={start:$R[9733]={line:170,column:1,offset:4737},end:$R[9734]={line:170,column:5,offset:4741}},type:"text",value:"その点 "},$R[9735]={position:$R[9736]={start:$R[9737]={line:170,column:5,offset:4741},end:$R[9738]={line:170,column:13,offset:4749}},type:"inlineCode",value:"bunshi"},$R[9739]={position:$R[9740]={start:$R[9741]={line:170,column:13,offset:4749},end:$R[9742]={line:170,column:55,offset:4791}},type:"text",value:" はスコープで分けられていて、かつ自動で DI される仕組みをとても気に入っている。"}],position:$R[9743]={start:$R[9744]={line:170,column:1,offset:4737},end:$R[9745]={line:170,column:55,offset:4791}},type:"paragraph"}],position:$R[9746]={end:$R[9747]={line:170,column:55,offset:4791},start:$R[9748]={line:158,column:1,offset:3998}},type:"section"},$R[9749]={children:$R[9750]=[$R[9751]={children:$R[9752]=[$R[9753]={position:$R[9754]={start:$R[9755]={line:174,column:4,offset:4858},end:$R[9756]={line:174,column:12,offset:4866}},type:"text",value:"結局何が嬉しい?"}],id:"結局何が嬉しい",level:2,plain:"結局何が嬉しい?",position:$R[9757]={start:$R[9758]={line:174,column:1,offset:4855},end:$R[9759]={line:174,column:12,offset:4866}},type:"heading"},$R[9760]={children:$R[9761]=[$R[9762]={position:$R[9763]={start:$R[9764]={line:176,column:1,offset:4868},end:$R[9765]={line:176,column:9,offset:4876}},type:"inlineCode",value:"bunshi"},$R[9766]={position:$R[9767]={start:$R[9768]={line:176,column:9,offset:4876},end:$R[9769]={line:176,column:71,offset:4938}},type:"text",value:" を使うことで、ステートのリフトアップやプッシュダウンを容易に実現できる。以下の 2 つの例を見れば一目瞭然であると言える。"}],position:$R[9770]={start:$R[9771]={line:176,column:1,offset:4868},end:$R[9772]={line:176,column:71,offset:4938}},type:"paragraph"},$R[9773]={filename:"sample.tsx tsx",lang:"tsx",position:$R[9774]={start:$R[9775]={line:178,column:1,offset:4940},end:$R[9776]={line:223,column:4,offset:5998}},type:"code",value:"import { atom, useAtom } from \"jotai\";\n\nfunction createAtom(userId: string) {\n\treturn atom(userId === \"bob@example.com\" ? 0 : 1);\n}\n\nconst CountAtomContext = React.createContext(createAtom(\"bob@example.com\"));\nconst useCountAtom = () => useContext(CountAtomContext);\nfunction CountAtomScopeProvider({ children, userId }) {\n\t// Create a new atom for every user Id\n\tconst countAtom = useMemo(() => createAtom(userId), [userId]);\n\treturn (\n\t\t\x3CCountAtomContext.Provider value={countAtom}>\n\t\t\t{children}\n\t\t\x3C/CountAtomContext.Provider>\n\t);\n}\n\nfunction Counter() {\n\tconst countAtom = useCountAtom();\n\tconst [count, setCount] = useAtom(countAtom);\n\treturn (\n\t\t\x3Cdiv>\n\t\t\tcount:\n\t\t\t{\" \"}\n\t\t\t{count}\n\t\t\t{\" \"}\n\t\t\t\x3Cbutton onClick={() => setCount(c => c + 1)}>+1\x3C/button>\n\t\t\x3C/div>\n\t);\n}\n\nexport function App() {\n\treturn (\n\t\t\x3CCountAtomScopeProvider userId=\"bob@example.com\">\n\t\t\t\x3CCounter />\n\t\t\t\x3CCounter />\n\t\t\t\x3CCountAtomScopeProvider userId=\"tom@example.com\">\n\t\t\t\t\x3CCounter />\n\t\t\t\t\x3CCounter />\n\t\t\t\x3C/CountAtomScopeProvider>\n\t\t\x3C/CountAtomScopeProvider>\n\t);\n}",hast:$R[9777]={type:"root",children:$R[9778]=[$R[9779]={type:"element",tagName:"pre",properties:$R[9780]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[9781]=[$R[9782]={type:"element",tagName:"code",properties:$R[9783]={},children:$R[9784]=[$R[9785]={type:"element",tagName:"span",properties:$R[9786]={class:"line"},children:$R[9787]=[$R[9788]={type:"element",tagName:"span",properties:$R[9789]={style:"color:#4D9375"},children:$R[9790]=[$R[9791]={type:"text",value:"import"}]},$R[9792]={type:"element",tagName:"span",properties:$R[9793]={style:"color:#666666"},children:$R[9794]=[$R[9795]={type:"text",value:" {"}]},$R[9796]={type:"element",tagName:"span",properties:$R[9797]={style:"color:#BD976A"},children:$R[9798]=[$R[9799]={type:"text",value:" atom"}]},$R[9800]={type:"element",tagName:"span",properties:$R[9801]={style:"color:#666666"},children:$R[9802]=[$R[9803]={type:"text",value:","}]},$R[9804]={type:"element",tagName:"span",properties:$R[9805]={style:"color:#BD976A"},children:$R[9806]=[$R[9807]={type:"text",value:" useAtom"}]},$R[9808]={type:"element",tagName:"span",properties:$R[9809]={style:"color:#666666"},children:$R[9810]=[$R[9811]={type:"text",value:" }"}]},$R[9812]={type:"element",tagName:"span",properties:$R[9813]={style:"color:#4D9375"},children:$R[9814]=[$R[9815]={type:"text",value:" from"}]},$R[9816]={type:"element",tagName:"span",properties:$R[9817]={style:"color:#C98A7D77"},children:$R[9818]=[$R[9819]={type:"text",value:" \""}]},$R[9820]={type:"element",tagName:"span",properties:$R[9821]={style:"color:#C98A7D"},children:$R[9822]=[$R[9823]={type:"text",value:"jotai"}]},$R[9824]={type:"element",tagName:"span",properties:$R[9825]={style:"color:#C98A7D77"},children:$R[9826]=[$R[9827]={type:"text",value:"\""}]},$R[9828]={type:"element",tagName:"span",properties:$R[9829]={style:"color:#666666"},children:$R[9830]=[$R[9831]={type:"text",value:";"}]}]},$R[9832]={type:"text",value:"\n"},$R[9833]={type:"element",tagName:"span",properties:$R[9834]={class:"line"},children:$R[9835]=[]},$R[9836]={type:"text",value:"\n"},$R[9837]={type:"element",tagName:"span",properties:$R[9838]={class:"line"},children:$R[9839]=[$R[9840]={type:"element",tagName:"span",properties:$R[9841]={style:"color:#CB7676"},children:$R[9842]=[$R[9843]={type:"text",value:"function"}]},$R[9844]={type:"element",tagName:"span",properties:$R[9845]={style:"color:#80A665"},children:$R[9846]=[$R[9847]={type:"text",value:" createAtom"}]},$R[9848]={type:"element",tagName:"span",properties:$R[9849]={style:"color:#666666"},children:$R[9850]=[$R[9851]={type:"text",value:"("}]},$R[9852]={type:"element",tagName:"span",properties:$R[9853]={style:"color:#BD976A"},children:$R[9854]=[$R[9855]={type:"text",value:"userId"}]},$R[9856]={type:"element",tagName:"span",properties:$R[9857]={style:"color:#666666"},children:$R[9858]=[$R[9859]={type:"text",value:": "}]},$R[9860]={type:"element",tagName:"span",properties:$R[9861]={style:"color:#5DA994"},children:$R[9862]=[$R[9863]={type:"text",value:"string"}]},$R[9864]={type:"element",tagName:"span",properties:$R[9865]={style:"color:#666666"},children:$R[9866]=[$R[9867]={type:"text",value:")"}]},$R[9868]={type:"element",tagName:"span",properties:$R[9869]={style:"color:#666666"},children:$R[9870]=[$R[9871]={type:"text",value:" {"}]}]},$R[9872]={type:"text",value:"\n"},$R[9873]={type:"element",tagName:"span",properties:$R[9874]={class:"line"},children:$R[9875]=[$R[9876]={type:"element",tagName:"span",properties:$R[9877]={style:"color:#4D9375"},children:$R[9878]=[$R[9879]={type:"text",value:"\treturn"}]},$R[9880]={type:"element",tagName:"span",properties:$R[9881]={style:"color:#80A665"},children:$R[9882]=[$R[9883]={type:"text",value:" atom"}]},$R[9884]={type:"element",tagName:"span",properties:$R[9885]={style:"color:#666666"},children:$R[9886]=[$R[9887]={type:"text",value:"("}]},$R[9888]={type:"element",tagName:"span",properties:$R[9889]={style:"color:#BD976A"},children:$R[9890]=[$R[9891]={type:"text",value:"userId"}]},$R[9892]={type:"element",tagName:"span",properties:$R[9893]={style:"color:#CB7676"},children:$R[9894]=[$R[9895]={type:"text",value:" ==="}]},$R[9896]={type:"element",tagName:"span",properties:$R[9897]={style:"color:#C98A7D77"},children:$R[9898]=[$R[9899]={type:"text",value:" \""}]},$R[9900]={type:"element",tagName:"span",properties:$R[9901]={style:"color:#C98A7D"},children:$R[9902]=[$R[9903]={type:"text",value:"bob@example.com"}]},$R[9904]={type:"element",tagName:"span",properties:$R[9905]={style:"color:#C98A7D77"},children:$R[9906]=[$R[9907]={type:"text",value:"\""}]},$R[9908]={type:"element",tagName:"span",properties:$R[9909]={style:"color:#CB7676"},children:$R[9910]=[$R[9911]={type:"text",value:" ?"}]},$R[9912]={type:"element",tagName:"span",properties:$R[9913]={style:"color:#4C9A91"},children:$R[9914]=[$R[9915]={type:"text",value:" 0"}]},$R[9916]={type:"element",tagName:"span",properties:$R[9917]={style:"color:#CB7676"},children:$R[9918]=[$R[9919]={type:"text",value:" :"}]},$R[9920]={type:"element",tagName:"span",properties:$R[9921]={style:"color:#4C9A91"},children:$R[9922]=[$R[9923]={type:"text",value:" 1"}]},$R[9924]={type:"element",tagName:"span",properties:$R[9925]={style:"color:#666666"},children:$R[9926]=[$R[9927]={type:"text",value:");"}]}]},$R[9928]={type:"text",value:"\n"},$R[9929]={type:"element",tagName:"span",properties:$R[9930]={class:"line"},children:$R[9931]=[$R[9932]={type:"element",tagName:"span",properties:$R[9933]={style:"color:#666666"},children:$R[9934]=[$R[9935]={type:"text",value:"}"}]}]},$R[9936]={type:"text",value:"\n"},$R[9937]={type:"element",tagName:"span",properties:$R[9938]={class:"line"},children:$R[9939]=[]},$R[9940]={type:"text",value:"\n"},$R[9941]={type:"element",tagName:"span",properties:$R[9942]={class:"line"},children:$R[9943]=[$R[9944]={type:"element",tagName:"span",properties:$R[9945]={style:"color:#CB7676"},children:$R[9946]=[$R[9947]={type:"text",value:"const"}]},$R[9948]={type:"element",tagName:"span",properties:$R[9949]={style:"color:#BD976A"},children:$R[9950]=[$R[9951]={type:"text",value:" CountAtomContext"}]},$R[9952]={type:"element",tagName:"span",properties:$R[9953]={style:"color:#666666"},children:$R[9954]=[$R[9955]={type:"text",value:" ="}]},$R[9956]={type:"element",tagName:"span",properties:$R[9957]={style:"color:#BD976A"},children:$R[9958]=[$R[9959]={type:"text",value:" React"}]},$R[9960]={type:"element",tagName:"span",properties:$R[9961]={style:"color:#666666"},children:$R[9962]=[$R[9963]={type:"text",value:"."}]},$R[9964]={type:"element",tagName:"span",properties:$R[9965]={style:"color:#80A665"},children:$R[9966]=[$R[9967]={type:"text",value:"createContext"}]},$R[9968]={type:"element",tagName:"span",properties:$R[9969]={style:"color:#666666"},children:$R[9970]=[$R[9971]={type:"text",value:"("}]},$R[9972]={type:"element",tagName:"span",properties:$R[9973]={style:"color:#80A665"},children:$R[9974]=[$R[9975]={type:"text",value:"createAtom"}]},$R[9976]={type:"element",tagName:"span",properties:$R[9977]={style:"color:#666666"},children:$R[9978]=[$R[9979]={type:"text",value:"("}]},$R[9980]={type:"element",tagName:"span",properties:$R[9981]={style:"color:#C98A7D77"},children:$R[9982]=[$R[9983]={type:"text",value:"\""}]},$R[9984]={type:"element",tagName:"span",properties:$R[9985]={style:"color:#C98A7D"},children:$R[9986]=[$R[9987]={type:"text",value:"bob@example.com"}]},$R[9988]={type:"element",tagName:"span",properties:$R[9989]={style:"color:#C98A7D77"},children:$R[9990]=[$R[9991]={type:"text",value:"\""}]},$R[9992]={type:"element",tagName:"span",properties:$R[9993]={style:"color:#666666"},children:$R[9994]=[$R[9995]={type:"text",value:"));"}]}]},$R[9996]={type:"text",value:"\n"},$R[9997]={type:"element",tagName:"span",properties:$R[9998]={class:"line"},children:$R[9999]=[$R[10000]={type:"element",tagName:"span",properties:$R[10001]={style:"color:#CB7676"},children:$R[10002]=[$R[10003]={type:"text",value:"const"}]},$R[10004]={type:"element",tagName:"span",properties:$R[10005]={style:"color:#80A665"},children:$R[10006]=[$R[10007]={type:"text",value:" useCountAtom"}]},$R[10008]={type:"element",tagName:"span",properties:$R[10009]={style:"color:#666666"},children:$R[10010]=[$R[10011]={type:"text",value:" ="}]},$R[10012]={type:"element",tagName:"span",properties:$R[10013]={style:"color:#666666"},children:$R[10014]=[$R[10015]={type:"text",value:" ()"}]},$R[10016]={type:"element",tagName:"span",properties:$R[10017]={style:"color:#666666"},children:$R[10018]=[$R[10019]={type:"text",value:" =>"}]},$R[10020]={type:"element",tagName:"span",properties:$R[10021]={style:"color:#80A665"},children:$R[10022]=[$R[10023]={type:"text",value:" useContext"}]},$R[10024]={type:"element",tagName:"span",properties:$R[10025]={style:"color:#666666"},children:$R[10026]=[$R[10027]={type:"text",value:"("}]},$R[10028]={type:"element",tagName:"span",properties:$R[10029]={style:"color:#BD976A"},children:$R[10030]=[$R[10031]={type:"text",value:"CountAtomContext"}]},$R[10032]={type:"element",tagName:"span",properties:$R[10033]={style:"color:#666666"},children:$R[10034]=[$R[10035]={type:"text",value:");"}]}]},$R[10036]={type:"text",value:"\n"},$R[10037]={type:"element",tagName:"span",properties:$R[10038]={class:"line"},children:$R[10039]=[$R[10040]={type:"element",tagName:"span",properties:$R[10041]={style:"color:#CB7676"},children:$R[10042]=[$R[10043]={type:"text",value:"function"}]},$R[10044]={type:"element",tagName:"span",properties:$R[10045]={style:"color:#80A665"},children:$R[10046]=[$R[10047]={type:"text",value:" CountAtomScopeProvider"}]},$R[10048]={type:"element",tagName:"span",properties:$R[10049]={style:"color:#666666"},children:$R[10050]=[$R[10051]={type:"text",value:"({"}]},$R[10052]={type:"element",tagName:"span",properties:$R[10053]={style:"color:#BD976A"},children:$R[10054]=[$R[10055]={type:"text",value:" children"}]},$R[10056]={type:"element",tagName:"span",properties:$R[10057]={style:"color:#666666"},children:$R[10058]=[$R[10059]={type:"text",value:","}]},$R[10060]={type:"element",tagName:"span",properties:$R[10061]={style:"color:#BD976A"},children:$R[10062]=[$R[10063]={type:"text",value:" userId"}]},$R[10064]={type:"element",tagName:"span",properties:$R[10065]={style:"color:#666666"},children:$R[10066]=[$R[10067]={type:"text",value:" })"}]},$R[10068]={type:"element",tagName:"span",properties:$R[10069]={style:"color:#666666"},children:$R[10070]=[$R[10071]={type:"text",value:" {"}]}]},$R[10072]={type:"text",value:"\n"},$R[10073]={type:"element",tagName:"span",properties:$R[10074]={class:"line"},children:$R[10075]=[$R[10076]={type:"element",tagName:"span",properties:$R[10077]={style:"color:#758575DD"},children:$R[10078]=[$R[10079]={type:"text",value:"\t// Create a new atom for every user Id"}]}]},$R[10080]={type:"text",value:"\n"},$R[10081]={type:"element",tagName:"span",properties:$R[10082]={class:"line"},children:$R[10083]=[$R[10084]={type:"element",tagName:"span",properties:$R[10085]={style:"color:#CB7676"},children:$R[10086]=[$R[10087]={type:"text",value:"\tconst"}]},$R[10088]={type:"element",tagName:"span",properties:$R[10089]={style:"color:#BD976A"},children:$R[10090]=[$R[10091]={type:"text",value:" countAtom"}]},$R[10092]={type:"element",tagName:"span",properties:$R[10093]={style:"color:#666666"},children:$R[10094]=[$R[10095]={type:"text",value:" ="}]},$R[10096]={type:"element",tagName:"span",properties:$R[10097]={style:"color:#80A665"},children:$R[10098]=[$R[10099]={type:"text",value:" useMemo"}]},$R[10100]={type:"element",tagName:"span",properties:$R[10101]={style:"color:#666666"},children:$R[10102]=[$R[10103]={type:"text",value:"(()"}]},$R[10104]={type:"element",tagName:"span",properties:$R[10105]={style:"color:#666666"},children:$R[10106]=[$R[10107]={type:"text",value:" =>"}]},$R[10108]={type:"element",tagName:"span",properties:$R[10109]={style:"color:#80A665"},children:$R[10110]=[$R[10111]={type:"text",value:" createAtom"}]},$R[10112]={type:"element",tagName:"span",properties:$R[10113]={style:"color:#666666"},children:$R[10114]=[$R[10115]={type:"text",value:"("}]},$R[10116]={type:"element",tagName:"span",properties:$R[10117]={style:"color:#BD976A"},children:$R[10118]=[$R[10119]={type:"text",value:"userId"}]},$R[10120]={type:"element",tagName:"span",properties:$R[10121]={style:"color:#666666"},children:$R[10122]=[$R[10123]={type:"text",value:"),"}]},$R[10124]={type:"element",tagName:"span",properties:$R[10125]={style:"color:#666666"},children:$R[10126]=[$R[10127]={type:"text",value:" ["}]},$R[10128]={type:"element",tagName:"span",properties:$R[10129]={style:"color:#BD976A"},children:$R[10130]=[$R[10131]={type:"text",value:"userId"}]},$R[10132]={type:"element",tagName:"span",properties:$R[10133]={style:"color:#666666"},children:$R[10134]=[$R[10135]={type:"text",value:"]);"}]}]},$R[10136]={type:"text",value:"\n"},$R[10137]={type:"element",tagName:"span",properties:$R[10138]={class:"line"},children:$R[10139]=[$R[10140]={type:"element",tagName:"span",properties:$R[10141]={style:"color:#4D9375"},children:$R[10142]=[$R[10143]={type:"text",value:"\treturn"}]},$R[10144]={type:"element",tagName:"span",properties:$R[10145]={style:"color:#666666"},children:$R[10146]=[$R[10147]={type:"text",value:" ("}]}]},$R[10148]={type:"text",value:"\n"},$R[10149]={type:"element",tagName:"span",properties:$R[10150]={class:"line"},children:$R[10151]=[$R[10152]={type:"element",tagName:"span",properties:$R[10153]={style:"color:#666666"},children:$R[10154]=[$R[10155]={type:"text",value:"\t\t\x3C"}]},$R[10156]={type:"element",tagName:"span",properties:$R[10157]={style:"color:#B8A965"},children:$R[10158]=[$R[10159]={type:"text",value:"CountAtomContext.Provider"}]},$R[10160]={type:"element",tagName:"span",properties:$R[10161]={style:"color:#BD976A"},children:$R[10162]=[$R[10163]={type:"text",value:" value"}]},$R[10164]={type:"element",tagName:"span",properties:$R[10165]={style:"color:#666666"},children:$R[10166]=[$R[10167]={type:"text",value:"={"}]},$R[10168]={type:"element",tagName:"span",properties:$R[10169]={style:"color:#BD976A"},children:$R[10170]=[$R[10171]={type:"text",value:"countAtom"}]},$R[10172]={type:"element",tagName:"span",properties:$R[10173]={style:"color:#666666"},children:$R[10174]=[$R[10175]={type:"text",value:"}>"}]}]},$R[10176]={type:"text",value:"\n"},$R[10177]={type:"element",tagName:"span",properties:$R[10178]={class:"line"},children:$R[10179]=[$R[10180]={type:"element",tagName:"span",properties:$R[10181]={style:"color:#666666"},children:$R[10182]=[$R[10183]={type:"text",value:"\t\t\t{"}]},$R[10184]={type:"element",tagName:"span",properties:$R[10185]={style:"color:#BD976A"},children:$R[10186]=[$R[10187]={type:"text",value:"children"}]},$R[10188]={type:"element",tagName:"span",properties:$R[10189]={style:"color:#666666"},children:$R[10190]=[$R[10191]={type:"text",value:"}"}]}]},$R[10192]={type:"text",value:"\n"},$R[10193]={type:"element",tagName:"span",properties:$R[10194]={class:"line"},children:$R[10195]=[$R[10196]={type:"element",tagName:"span",properties:$R[10197]={style:"color:#666666"},children:$R[10198]=[$R[10199]={type:"text",value:"\t\t\x3C/"}]},$R[10200]={type:"element",tagName:"span",properties:$R[10201]={style:"color:#B8A965"},children:$R[10202]=[$R[10203]={type:"text",value:"CountAtomContext.Provider"}]},$R[10204]={type:"element",tagName:"span",properties:$R[10205]={style:"color:#666666"},children:$R[10206]=[$R[10207]={type:"text",value:">"}]}]},$R[10208]={type:"text",value:"\n"},$R[10209]={type:"element",tagName:"span",properties:$R[10210]={class:"line"},children:$R[10211]=[$R[10212]={type:"element",tagName:"span",properties:$R[10213]={style:"color:#666666"},children:$R[10214]=[$R[10215]={type:"text",value:"\t);"}]}]},$R[10216]={type:"text",value:"\n"},$R[10217]={type:"element",tagName:"span",properties:$R[10218]={class:"line"},children:$R[10219]=[$R[10220]={type:"element",tagName:"span",properties:$R[10221]={style:"color:#666666"},children:$R[10222]=[$R[10223]={type:"text",value:"}"}]}]},$R[10224]={type:"text",value:"\n"},$R[10225]={type:"element",tagName:"span",properties:$R[10226]={class:"line"},children:$R[10227]=[]},$R[10228]={type:"text",value:"\n"},$R[10229]={type:"element",tagName:"span",properties:$R[10230]={class:"line"},children:$R[10231]=[$R[10232]={type:"element",tagName:"span",properties:$R[10233]={style:"color:#CB7676"},children:$R[10234]=[$R[10235]={type:"text",value:"function"}]},$R[10236]={type:"element",tagName:"span",properties:$R[10237]={style:"color:#80A665"},children:$R[10238]=[$R[10239]={type:"text",value:" Counter"}]},$R[10240]={type:"element",tagName:"span",properties:$R[10241]={style:"color:#666666"},children:$R[10242]=[$R[10243]={type:"text",value:"()"}]},$R[10244]={type:"element",tagName:"span",properties:$R[10245]={style:"color:#666666"},children:$R[10246]=[$R[10247]={type:"text",value:" {"}]}]},$R[10248]={type:"text",value:"\n"},$R[10249]={type:"element",tagName:"span",properties:$R[10250]={class:"line"},children:$R[10251]=[$R[10252]={type:"element",tagName:"span",properties:$R[10253]={style:"color:#CB7676"},children:$R[10254]=[$R[10255]={type:"text",value:"\tconst"}]},$R[10256]={type:"element",tagName:"span",properties:$R[10257]={style:"color:#BD976A"},children:$R[10258]=[$R[10259]={type:"text",value:" countAtom"}]},$R[10260]={type:"element",tagName:"span",properties:$R[10261]={style:"color:#666666"},children:$R[10262]=[$R[10263]={type:"text",value:" ="}]},$R[10264]={type:"element",tagName:"span",properties:$R[10265]={style:"color:#80A665"},children:$R[10266]=[$R[10267]={type:"text",value:" useCountAtom"}]},$R[10268]={type:"element",tagName:"span",properties:$R[10269]={style:"color:#666666"},children:$R[10270]=[$R[10271]={type:"text",value:"();"}]}]},$R[10272]={type:"text",value:"\n"},$R[10273]={type:"element",tagName:"span",properties:$R[10274]={class:"line"},children:$R[10275]=[$R[10276]={type:"element",tagName:"span",properties:$R[10277]={style:"color:#CB7676"},children:$R[10278]=[$R[10279]={type:"text",value:"\tconst"}]},$R[10280]={type:"element",tagName:"span",properties:$R[10281]={style:"color:#666666"},children:$R[10282]=[$R[10283]={type:"text",value:" ["}]},$R[10284]={type:"element",tagName:"span",properties:$R[10285]={style:"color:#BD976A"},children:$R[10286]=[$R[10287]={type:"text",value:"count"}]},$R[10288]={type:"element",tagName:"span",properties:$R[10289]={style:"color:#666666"},children:$R[10290]=[$R[10291]={type:"text",value:","}]},$R[10292]={type:"element",tagName:"span",properties:$R[10293]={style:"color:#BD976A"},children:$R[10294]=[$R[10295]={type:"text",value:" setCount"}]},$R[10296]={type:"element",tagName:"span",properties:$R[10297]={style:"color:#666666"},children:$R[10298]=[$R[10299]={type:"text",value:"]"}]},$R[10300]={type:"element",tagName:"span",properties:$R[10301]={style:"color:#666666"},children:$R[10302]=[$R[10303]={type:"text",value:" ="}]},$R[10304]={type:"element",tagName:"span",properties:$R[10305]={style:"color:#80A665"},children:$R[10306]=[$R[10307]={type:"text",value:" useAtom"}]},$R[10308]={type:"element",tagName:"span",properties:$R[10309]={style:"color:#666666"},children:$R[10310]=[$R[10311]={type:"text",value:"("}]},$R[10312]={type:"element",tagName:"span",properties:$R[10313]={style:"color:#BD976A"},children:$R[10314]=[$R[10315]={type:"text",value:"countAtom"}]},$R[10316]={type:"element",tagName:"span",properties:$R[10317]={style:"color:#666666"},children:$R[10318]=[$R[10319]={type:"text",value:");"}]}]},$R[10320]={type:"text",value:"\n"},$R[10321]={type:"element",tagName:"span",properties:$R[10322]={class:"line"},children:$R[10323]=[$R[10324]={type:"element",tagName:"span",properties:$R[10325]={style:"color:#4D9375"},children:$R[10326]=[$R[10327]={type:"text",value:"\treturn"}]},$R[10328]={type:"element",tagName:"span",properties:$R[10329]={style:"color:#666666"},children:$R[10330]=[$R[10331]={type:"text",value:" ("}]}]},$R[10332]={type:"text",value:"\n"},$R[10333]={type:"element",tagName:"span",properties:$R[10334]={class:"line"},children:$R[10335]=[$R[10336]={type:"element",tagName:"span",properties:$R[10337]={style:"color:#666666"},children:$R[10338]=[$R[10339]={type:"text",value:"\t\t\x3C"}]},$R[10340]={type:"element",tagName:"span",properties:$R[10341]={style:"color:#4D9375"},children:$R[10342]=[$R[10343]={type:"text",value:"div"}]},$R[10344]={type:"element",tagName:"span",properties:$R[10345]={style:"color:#666666"},children:$R[10346]=[$R[10347]={type:"text",value:">"}]}]},$R[10348]={type:"text",value:"\n"},$R[10349]={type:"element",tagName:"span",properties:$R[10350]={class:"line"},children:$R[10351]=[$R[10352]={type:"element",tagName:"span",properties:$R[10353]={style:"color:#DBD7CAEE"},children:$R[10354]=[$R[10355]={type:"text",value:"\t\t\tcount:"}]}]},$R[10356]={type:"text",value:"\n"},$R[10357]={type:"element",tagName:"span",properties:$R[10358]={class:"line"},children:$R[10359]=[$R[10360]={type:"element",tagName:"span",properties:$R[10361]={style:"color:#666666"},children:$R[10362]=[$R[10363]={type:"text",value:"\t\t\t{"}]},$R[10364]={type:"element",tagName:"span",properties:$R[10365]={style:"color:#C98A7D77"},children:$R[10366]=[$R[10367]={type:"text",value:"\""}]},$R[10368]={type:"element",tagName:"span",properties:$R[10369]={style:"color:#C98A7D77"},children:$R[10370]=[$R[10371]={type:"text",value:" \""}]},$R[10372]={type:"element",tagName:"span",properties:$R[10373]={style:"color:#666666"},children:$R[10374]=[$R[10375]={type:"text",value:"}"}]}]},$R[10376]={type:"text",value:"\n"},$R[10377]={type:"element",tagName:"span",properties:$R[10378]={class:"line"},children:$R[10379]=[$R[10380]={type:"element",tagName:"span",properties:$R[10381]={style:"color:#666666"},children:$R[10382]=[$R[10383]={type:"text",value:"\t\t\t{"}]},$R[10384]={type:"element",tagName:"span",properties:$R[10385]={style:"color:#BD976A"},children:$R[10386]=[$R[10387]={type:"text",value:"count"}]},$R[10388]={type:"element",tagName:"span",properties:$R[10389]={style:"color:#666666"},children:$R[10390]=[$R[10391]={type:"text",value:"}"}]}]},$R[10392]={type:"text",value:"\n"},$R[10393]={type:"element",tagName:"span",properties:$R[10394]={class:"line"},children:$R[10395]=[$R[10396]={type:"element",tagName:"span",properties:$R[10397]={style:"color:#666666"},children:$R[10398]=[$R[10399]={type:"text",value:"\t\t\t{"}]},$R[10400]={type:"element",tagName:"span",properties:$R[10401]={style:"color:#C98A7D77"},children:$R[10402]=[$R[10403]={type:"text",value:"\""}]},$R[10404]={type:"element",tagName:"span",properties:$R[10405]={style:"color:#C98A7D77"},children:$R[10406]=[$R[10407]={type:"text",value:" \""}]},$R[10408]={type:"element",tagName:"span",properties:$R[10409]={style:"color:#666666"},children:$R[10410]=[$R[10411]={type:"text",value:"}"}]}]},$R[10412]={type:"text",value:"\n"},$R[10413]={type:"element",tagName:"span",properties:$R[10414]={class:"line"},children:$R[10415]=[$R[10416]={type:"element",tagName:"span",properties:$R[10417]={style:"color:#666666"},children:$R[10418]=[$R[10419]={type:"text",value:"\t\t\t\x3C"}]},$R[10420]={type:"element",tagName:"span",properties:$R[10421]={style:"color:#4D9375"},children:$R[10422]=[$R[10423]={type:"text",value:"button"}]},$R[10424]={type:"element",tagName:"span",properties:$R[10425]={style:"color:#BD976A"},children:$R[10426]=[$R[10427]={type:"text",value:" onClick"}]},$R[10428]={type:"element",tagName:"span",properties:$R[10429]={style:"color:#666666"},children:$R[10430]=[$R[10431]={type:"text",value:"={()"}]},$R[10432]={type:"element",tagName:"span",properties:$R[10433]={style:"color:#666666"},children:$R[10434]=[$R[10435]={type:"text",value:" =>"}]},$R[10436]={type:"element",tagName:"span",properties:$R[10437]={style:"color:#80A665"},children:$R[10438]=[$R[10439]={type:"text",value:" setCount"}]},$R[10440]={type:"element",tagName:"span",properties:$R[10441]={style:"color:#666666"},children:$R[10442]=[$R[10443]={type:"text",value:"("}]},$R[10444]={type:"element",tagName:"span",properties:$R[10445]={style:"color:#BD976A"},children:$R[10446]=[$R[10447]={type:"text",value:"c"}]},$R[10448]={type:"element",tagName:"span",properties:$R[10449]={style:"color:#666666"},children:$R[10450]=[$R[10451]={type:"text",value:" =>"}]},$R[10452]={type:"element",tagName:"span",properties:$R[10453]={style:"color:#BD976A"},children:$R[10454]=[$R[10455]={type:"text",value:" c"}]},$R[10456]={type:"element",tagName:"span",properties:$R[10457]={style:"color:#CB7676"},children:$R[10458]=[$R[10459]={type:"text",value:" +"}]},$R[10460]={type:"element",tagName:"span",properties:$R[10461]={style:"color:#4C9A91"},children:$R[10462]=[$R[10463]={type:"text",value:" 1"}]},$R[10464]={type:"element",tagName:"span",properties:$R[10465]={style:"color:#666666"},children:$R[10466]=[$R[10467]={type:"text",value:")}>"}]},$R[10468]={type:"element",tagName:"span",properties:$R[10469]={style:"color:#DBD7CAEE"},children:$R[10470]=[$R[10471]={type:"text",value:"+1"}]},$R[10472]={type:"element",tagName:"span",properties:$R[10473]={style:"color:#666666"},children:$R[10474]=[$R[10475]={type:"text",value:"\x3C/"}]},$R[10476]={type:"element",tagName:"span",properties:$R[10477]={style:"color:#4D9375"},children:$R[10478]=[$R[10479]={type:"text",value:"button"}]},$R[10480]={type:"element",tagName:"span",properties:$R[10481]={style:"color:#666666"},children:$R[10482]=[$R[10483]={type:"text",value:">"}]}]},$R[10484]={type:"text",value:"\n"},$R[10485]={type:"element",tagName:"span",properties:$R[10486]={class:"line"},children:$R[10487]=[$R[10488]={type:"element",tagName:"span",properties:$R[10489]={style:"color:#666666"},children:$R[10490]=[$R[10491]={type:"text",value:"\t\t\x3C/"}]},$R[10492]={type:"element",tagName:"span",properties:$R[10493]={style:"color:#4D9375"},children:$R[10494]=[$R[10495]={type:"text",value:"div"}]},$R[10496]={type:"element",tagName:"span",properties:$R[10497]={style:"color:#666666"},children:$R[10498]=[$R[10499]={type:"text",value:">"}]}]},$R[10500]={type:"text",value:"\n"},$R[10501]={type:"element",tagName:"span",properties:$R[10502]={class:"line"},children:$R[10503]=[$R[10504]={type:"element",tagName:"span",properties:$R[10505]={style:"color:#666666"},children:$R[10506]=[$R[10507]={type:"text",value:"\t);"}]}]},$R[10508]={type:"text",value:"\n"},$R[10509]={type:"element",tagName:"span",properties:$R[10510]={class:"line"},children:$R[10511]=[$R[10512]={type:"element",tagName:"span",properties:$R[10513]={style:"color:#666666"},children:$R[10514]=[$R[10515]={type:"text",value:"}"}]}]},$R[10516]={type:"text",value:"\n"},$R[10517]={type:"element",tagName:"span",properties:$R[10518]={class:"line"},children:$R[10519]=[]},$R[10520]={type:"text",value:"\n"},$R[10521]={type:"element",tagName:"span",properties:$R[10522]={class:"line"},children:$R[10523]=[$R[10524]={type:"element",tagName:"span",properties:$R[10525]={style:"color:#4D9375"},children:$R[10526]=[$R[10527]={type:"text",value:"export"}]},$R[10528]={type:"element",tagName:"span",properties:$R[10529]={style:"color:#CB7676"},children:$R[10530]=[$R[10531]={type:"text",value:" function"}]},$R[10532]={type:"element",tagName:"span",properties:$R[10533]={style:"color:#80A665"},children:$R[10534]=[$R[10535]={type:"text",value:" App"}]},$R[10536]={type:"element",tagName:"span",properties:$R[10537]={style:"color:#666666"},children:$R[10538]=[$R[10539]={type:"text",value:"()"}]},$R[10540]={type:"element",tagName:"span",properties:$R[10541]={style:"color:#666666"},children:$R[10542]=[$R[10543]={type:"text",value:" {"}]}]},$R[10544]={type:"text",value:"\n"},$R[10545]={type:"element",tagName:"span",properties:$R[10546]={class:"line"},children:$R[10547]=[$R[10548]={type:"element",tagName:"span",properties:$R[10549]={style:"color:#4D9375"},children:$R[10550]=[$R[10551]={type:"text",value:"\treturn"}]},$R[10552]={type:"element",tagName:"span",properties:$R[10553]={style:"color:#666666"},children:$R[10554]=[$R[10555]={type:"text",value:" ("}]}]},$R[10556]={type:"text",value:"\n"},$R[10557]={type:"element",tagName:"span",properties:$R[10558]={class:"line"},children:$R[10559]=[$R[10560]={type:"element",tagName:"span",properties:$R[10561]={style:"color:#666666"},children:$R[10562]=[$R[10563]={type:"text",value:"\t\t\x3C"}]},$R[10564]={type:"element",tagName:"span",properties:$R[10565]={style:"color:#B8A965"},children:$R[10566]=[$R[10567]={type:"text",value:"CountAtomScopeProvider"}]},$R[10568]={type:"element",tagName:"span",properties:$R[10569]={style:"color:#BD976A"},children:$R[10570]=[$R[10571]={type:"text",value:" userId"}]},$R[10572]={type:"element",tagName:"span",properties:$R[10573]={style:"color:#666666"},children:$R[10574]=[$R[10575]={type:"text",value:"="}]},$R[10576]={type:"element",tagName:"span",properties:$R[10577]={style:"color:#C98A7D77"},children:$R[10578]=[$R[10579]={type:"text",value:"\""}]},$R[10580]={type:"element",tagName:"span",properties:$R[10581]={style:"color:#C98A7D"},children:$R[10582]=[$R[10583]={type:"text",value:"bob@example.com"}]},$R[10584]={type:"element",tagName:"span",properties:$R[10585]={style:"color:#C98A7D77"},children:$R[10586]=[$R[10587]={type:"text",value:"\""}]},$R[10588]={type:"element",tagName:"span",properties:$R[10589]={style:"color:#666666"},children:$R[10590]=[$R[10591]={type:"text",value:">"}]}]},$R[10592]={type:"text",value:"\n"},$R[10593]={type:"element",tagName:"span",properties:$R[10594]={class:"line"},children:$R[10595]=[$R[10596]={type:"element",tagName:"span",properties:$R[10597]={style:"color:#666666"},children:$R[10598]=[$R[10599]={type:"text",value:"\t\t\t\x3C"}]},$R[10600]={type:"element",tagName:"span",properties:$R[10601]={style:"color:#B8A965"},children:$R[10602]=[$R[10603]={type:"text",value:"Counter"}]},$R[10604]={type:"element",tagName:"span",properties:$R[10605]={style:"color:#666666"},children:$R[10606]=[$R[10607]={type:"text",value:" />"}]}]},$R[10608]={type:"text",value:"\n"},$R[10609]={type:"element",tagName:"span",properties:$R[10610]={class:"line"},children:$R[10611]=[$R[10612]={type:"element",tagName:"span",properties:$R[10613]={style:"color:#666666"},children:$R[10614]=[$R[10615]={type:"text",value:"\t\t\t\x3C"}]},$R[10616]={type:"element",tagName:"span",properties:$R[10617]={style:"color:#B8A965"},children:$R[10618]=[$R[10619]={type:"text",value:"Counter"}]},$R[10620]={type:"element",tagName:"span",properties:$R[10621]={style:"color:#666666"},children:$R[10622]=[$R[10623]={type:"text",value:" />"}]}]},$R[10624]={type:"text",value:"\n"},$R[10625]={type:"element",tagName:"span",properties:$R[10626]={class:"line"},children:$R[10627]=[$R[10628]={type:"element",tagName:"span",properties:$R[10629]={style:"color:#666666"},children:$R[10630]=[$R[10631]={type:"text",value:"\t\t\t\x3C"}]},$R[10632]={type:"element",tagName:"span",properties:$R[10633]={style:"color:#B8A965"},children:$R[10634]=[$R[10635]={type:"text",value:"CountAtomScopeProvider"}]},$R[10636]={type:"element",tagName:"span",properties:$R[10637]={style:"color:#BD976A"},children:$R[10638]=[$R[10639]={type:"text",value:" userId"}]},$R[10640]={type:"element",tagName:"span",properties:$R[10641]={style:"color:#666666"},children:$R[10642]=[$R[10643]={type:"text",value:"="}]},$R[10644]={type:"element",tagName:"span",properties:$R[10645]={style:"color:#C98A7D77"},children:$R[10646]=[$R[10647]={type:"text",value:"\""}]},$R[10648]={type:"element",tagName:"span",properties:$R[10649]={style:"color:#C98A7D"},children:$R[10650]=[$R[10651]={type:"text",value:"tom@example.com"}]},$R[10652]={type:"element",tagName:"span",properties:$R[10653]={style:"color:#C98A7D77"},children:$R[10654]=[$R[10655]={type:"text",value:"\""}]},$R[10656]={type:"element",tagName:"span",properties:$R[10657]={style:"color:#666666"},children:$R[10658]=[$R[10659]={type:"text",value:">"}]}]},$R[10660]={type:"text",value:"\n"},$R[10661]={type:"element",tagName:"span",properties:$R[10662]={class:"line"},children:$R[10663]=[$R[10664]={type:"element",tagName:"span",properties:$R[10665]={style:"color:#666666"},children:$R[10666]=[$R[10667]={type:"text",value:"\t\t\t\t\x3C"}]},$R[10668]={type:"element",tagName:"span",properties:$R[10669]={style:"color:#B8A965"},children:$R[10670]=[$R[10671]={type:"text",value:"Counter"}]},$R[10672]={type:"element",tagName:"span",properties:$R[10673]={style:"color:#666666"},children:$R[10674]=[$R[10675]={type:"text",value:" />"}]}]},$R[10676]={type:"text",value:"\n"},$R[10677]={type:"element",tagName:"span",properties:$R[10678]={class:"line"},children:$R[10679]=[$R[10680]={type:"element",tagName:"span",properties:$R[10681]={style:"color:#666666"},children:$R[10682]=[$R[10683]={type:"text",value:"\t\t\t\t\x3C"}]},$R[10684]={type:"element",tagName:"span",properties:$R[10685]={style:"color:#B8A965"},children:$R[10686]=[$R[10687]={type:"text",value:"Counter"}]},$R[10688]={type:"element",tagName:"span",properties:$R[10689]={style:"color:#666666"},children:$R[10690]=[$R[10691]={type:"text",value:" />"}]}]},$R[10692]={type:"text",value:"\n"},$R[10693]={type:"element",tagName:"span",properties:$R[10694]={class:"line"},children:$R[10695]=[$R[10696]={type:"element",tagName:"span",properties:$R[10697]={style:"color:#666666"},children:$R[10698]=[$R[10699]={type:"text",value:"\t\t\t\x3C/"}]},$R[10700]={type:"element",tagName:"span",properties:$R[10701]={style:"color:#B8A965"},children:$R[10702]=[$R[10703]={type:"text",value:"CountAtomScopeProvider"}]},$R[10704]={type:"element",tagName:"span",properties:$R[10705]={style:"color:#666666"},children:$R[10706]=[$R[10707]={type:"text",value:">"}]}]},$R[10708]={type:"text",value:"\n"},$R[10709]={type:"element",tagName:"span",properties:$R[10710]={class:"line"},children:$R[10711]=[$R[10712]={type:"element",tagName:"span",properties:$R[10713]={style:"color:#666666"},children:$R[10714]=[$R[10715]={type:"text",value:"\t\t\x3C/"}]},$R[10716]={type:"element",tagName:"span",properties:$R[10717]={style:"color:#B8A965"},children:$R[10718]=[$R[10719]={type:"text",value:"CountAtomScopeProvider"}]},$R[10720]={type:"element",tagName:"span",properties:$R[10721]={style:"color:#666666"},children:$R[10722]=[$R[10723]={type:"text",value:">"}]}]},$R[10724]={type:"text",value:"\n"},$R[10725]={type:"element",tagName:"span",properties:$R[10726]={class:"line"},children:$R[10727]=[$R[10728]={type:"element",tagName:"span",properties:$R[10729]={style:"color:#666666"},children:$R[10730]=[$R[10731]={type:"text",value:"\t);"}]}]},$R[10732]={type:"text",value:"\n"},$R[10733]={type:"element",tagName:"span",properties:$R[10734]={class:"line"},children:$R[10735]=[$R[10736]={type:"element",tagName:"span",properties:$R[10737]={style:"color:#666666"},children:$R[10738]=[$R[10739]={type:"text",value:"}"}]}]}]}]}]}},$R[10740]={children:$R[10741]=[$R[10742]={position:$R[10743]={start:$R[10744]={line:225,column:1,offset:6000},end:$R[10745]={line:225,column:7,offset:6006}},type:"text",value:"上記の例は "},$R[10746]={position:$R[10747]={start:$R[10748]={line:225,column:7,offset:6006},end:$R[10749]={line:225,column:14,offset:6013}},type:"inlineCode",value:"jotai"},$R[10750]={position:$R[10751]={start:$R[10752]={line:225,column:14,offset:6013},end:$R[10753]={line:225,column:23,offset:6022}},type:"text",value:" を使っているが、"},$R[10754]={position:$R[10755]={start:$R[10756]={line:225,column:23,offset:6022},end:$R[10757]={line:225,column:31,offset:6030}},type:"inlineCode",value:"bunshi"},$R[10758]={position:$R[10759]={start:$R[10760]={line:225,column:31,offset:6030},end:$R[10761]={line:225,column:51,offset:6050}},type:"text",value:" も使うと以下のように書くことができる。"}],position:$R[10762]={start:$R[10763]={line:225,column:1,offset:6000},end:$R[10764]={line:225,column:51,offset:6050}},type:"paragraph"},$R[10765]={filename:"sample.tsx tsx",lang:"tsx",position:$R[10766]={start:$R[10767]={line:227,column:1,offset:6052},end:$R[10768]={line:252,column:4,offset:6556}},type:"code",value:"import { atom, useAtom } from \"jotai\";\nimport {\n\tScopeProvider,\n\tcreateScope,\n\tmolecule,\n\tuseMolecule,\n} from \"bunshi/react\";\n\nconst UserScope = createScope(undefined);\nconst countMolecule = molecule((mol, scope) => {\n\tconst userId = scope(UserScope);\n\tconsole.log(\"Creating a new atom for\", userId);\n\treturn atom(0);\n});\n\n// ... Counter unchanged\n\nexport function App() {\n\treturn (\n\t\t\x3CScopeProvider scope={UserScope} value=\"bob@example.com\">\n\t\t\t\x3CCounter />\n\t\t\x3C/ScopeProvider>\n\t);\n}",hast:$R[10769]={type:"root",children:$R[10770]=[$R[10771]={type:"element",tagName:"pre",properties:$R[10772]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[10773]=[$R[10774]={type:"element",tagName:"code",properties:$R[10775]={},children:$R[10776]=[$R[10777]={type:"element",tagName:"span",properties:$R[10778]={class:"line"},children:$R[10779]=[$R[10780]={type:"element",tagName:"span",properties:$R[10781]={style:"color:#4D9375"},children:$R[10782]=[$R[10783]={type:"text",value:"import"}]},$R[10784]={type:"element",tagName:"span",properties:$R[10785]={style:"color:#666666"},children:$R[10786]=[$R[10787]={type:"text",value:" {"}]},$R[10788]={type:"element",tagName:"span",properties:$R[10789]={style:"color:#BD976A"},children:$R[10790]=[$R[10791]={type:"text",value:" atom"}]},$R[10792]={type:"element",tagName:"span",properties:$R[10793]={style:"color:#666666"},children:$R[10794]=[$R[10795]={type:"text",value:","}]},$R[10796]={type:"element",tagName:"span",properties:$R[10797]={style:"color:#BD976A"},children:$R[10798]=[$R[10799]={type:"text",value:" useAtom"}]},$R[10800]={type:"element",tagName:"span",properties:$R[10801]={style:"color:#666666"},children:$R[10802]=[$R[10803]={type:"text",value:" }"}]},$R[10804]={type:"element",tagName:"span",properties:$R[10805]={style:"color:#4D9375"},children:$R[10806]=[$R[10807]={type:"text",value:" from"}]},$R[10808]={type:"element",tagName:"span",properties:$R[10809]={style:"color:#C98A7D77"},children:$R[10810]=[$R[10811]={type:"text",value:" \""}]},$R[10812]={type:"element",tagName:"span",properties:$R[10813]={style:"color:#C98A7D"},children:$R[10814]=[$R[10815]={type:"text",value:"jotai"}]},$R[10816]={type:"element",tagName:"span",properties:$R[10817]={style:"color:#C98A7D77"},children:$R[10818]=[$R[10819]={type:"text",value:"\""}]},$R[10820]={type:"element",tagName:"span",properties:$R[10821]={style:"color:#666666"},children:$R[10822]=[$R[10823]={type:"text",value:";"}]}]},$R[10824]={type:"text",value:"\n"},$R[10825]={type:"element",tagName:"span",properties:$R[10826]={class:"line"},children:$R[10827]=[$R[10828]={type:"element",tagName:"span",properties:$R[10829]={style:"color:#4D9375"},children:$R[10830]=[$R[10831]={type:"text",value:"import"}]},$R[10832]={type:"element",tagName:"span",properties:$R[10833]={style:"color:#666666"},children:$R[10834]=[$R[10835]={type:"text",value:" {"}]}]},$R[10836]={type:"text",value:"\n"},$R[10837]={type:"element",tagName:"span",properties:$R[10838]={class:"line"},children:$R[10839]=[$R[10840]={type:"element",tagName:"span",properties:$R[10841]={style:"color:#BD976A"},children:$R[10842]=[$R[10843]={type:"text",value:"\tScopeProvider"}]},$R[10844]={type:"element",tagName:"span",properties:$R[10845]={style:"color:#666666"},children:$R[10846]=[$R[10847]={type:"text",value:","}]}]},$R[10848]={type:"text",value:"\n"},$R[10849]={type:"element",tagName:"span",properties:$R[10850]={class:"line"},children:$R[10851]=[$R[10852]={type:"element",tagName:"span",properties:$R[10853]={style:"color:#BD976A"},children:$R[10854]=[$R[10855]={type:"text",value:"\tcreateScope"}]},$R[10856]={type:"element",tagName:"span",properties:$R[10857]={style:"color:#666666"},children:$R[10858]=[$R[10859]={type:"text",value:","}]}]},$R[10860]={type:"text",value:"\n"},$R[10861]={type:"element",tagName:"span",properties:$R[10862]={class:"line"},children:$R[10863]=[$R[10864]={type:"element",tagName:"span",properties:$R[10865]={style:"color:#BD976A"},children:$R[10866]=[$R[10867]={type:"text",value:"\tmolecule"}]},$R[10868]={type:"element",tagName:"span",properties:$R[10869]={style:"color:#666666"},children:$R[10870]=[$R[10871]={type:"text",value:","}]}]},$R[10872]={type:"text",value:"\n"},$R[10873]={type:"element",tagName:"span",properties:$R[10874]={class:"line"},children:$R[10875]=[$R[10876]={type:"element",tagName:"span",properties:$R[10877]={style:"color:#BD976A"},children:$R[10878]=[$R[10879]={type:"text",value:"\tuseMolecule"}]},$R[10880]={type:"element",tagName:"span",properties:$R[10881]={style:"color:#666666"},children:$R[10882]=[$R[10883]={type:"text",value:","}]}]},$R[10884]={type:"text",value:"\n"},$R[10885]={type:"element",tagName:"span",properties:$R[10886]={class:"line"},children:$R[10887]=[$R[10888]={type:"element",tagName:"span",properties:$R[10889]={style:"color:#666666"},children:$R[10890]=[$R[10891]={type:"text",value:"}"}]},$R[10892]={type:"element",tagName:"span",properties:$R[10893]={style:"color:#4D9375"},children:$R[10894]=[$R[10895]={type:"text",value:" from"}]},$R[10896]={type:"element",tagName:"span",properties:$R[10897]={style:"color:#C98A7D77"},children:$R[10898]=[$R[10899]={type:"text",value:" \""}]},$R[10900]={type:"element",tagName:"span",properties:$R[10901]={style:"color:#C98A7D"},children:$R[10902]=[$R[10903]={type:"text",value:"bunshi/react"}]},$R[10904]={type:"element",tagName:"span",properties:$R[10905]={style:"color:#C98A7D77"},children:$R[10906]=[$R[10907]={type:"text",value:"\""}]},$R[10908]={type:"element",tagName:"span",properties:$R[10909]={style:"color:#666666"},children:$R[10910]=[$R[10911]={type:"text",value:";"}]}]},$R[10912]={type:"text",value:"\n"},$R[10913]={type:"element",tagName:"span",properties:$R[10914]={class:"line"},children:$R[10915]=[]},$R[10916]={type:"text",value:"\n"},$R[10917]={type:"element",tagName:"span",properties:$R[10918]={class:"line"},children:$R[10919]=[$R[10920]={type:"element",tagName:"span",properties:$R[10921]={style:"color:#CB7676"},children:$R[10922]=[$R[10923]={type:"text",value:"const"}]},$R[10924]={type:"element",tagName:"span",properties:$R[10925]={style:"color:#BD976A"},children:$R[10926]=[$R[10927]={type:"text",value:" UserScope"}]},$R[10928]={type:"element",tagName:"span",properties:$R[10929]={style:"color:#666666"},children:$R[10930]=[$R[10931]={type:"text",value:" ="}]},$R[10932]={type:"element",tagName:"span",properties:$R[10933]={style:"color:#80A665"},children:$R[10934]=[$R[10935]={type:"text",value:" createScope"}]},$R[10936]={type:"element",tagName:"span",properties:$R[10937]={style:"color:#666666"},children:$R[10938]=[$R[10939]={type:"text",value:"("}]},$R[10940]={type:"element",tagName:"span",properties:$R[10941]={style:"color:#CB7676"},children:$R[10942]=[$R[10943]={type:"text",value:"undefined"}]},$R[10944]={type:"element",tagName:"span",properties:$R[10945]={style:"color:#666666"},children:$R[10946]=[$R[10947]={type:"text",value:");"}]}]},$R[10948]={type:"text",value:"\n"},$R[10949]={type:"element",tagName:"span",properties:$R[10950]={class:"line"},children:$R[10951]=[$R[10952]={type:"element",tagName:"span",properties:$R[10953]={style:"color:#CB7676"},children:$R[10954]=[$R[10955]={type:"text",value:"const"}]},$R[10956]={type:"element",tagName:"span",properties:$R[10957]={style:"color:#BD976A"},children:$R[10958]=[$R[10959]={type:"text",value:" countMolecule"}]},$R[10960]={type:"element",tagName:"span",properties:$R[10961]={style:"color:#666666"},children:$R[10962]=[$R[10963]={type:"text",value:" ="}]},$R[10964]={type:"element",tagName:"span",properties:$R[10965]={style:"color:#80A665"},children:$R[10966]=[$R[10967]={type:"text",value:" molecule"}]},$R[10968]={type:"element",tagName:"span",properties:$R[10969]={style:"color:#666666"},children:$R[10970]=[$R[10971]={type:"text",value:"(("}]},$R[10972]={type:"element",tagName:"span",properties:$R[10973]={style:"color:#BD976A"},children:$R[10974]=[$R[10975]={type:"text",value:"mol"}]},$R[10976]={type:"element",tagName:"span",properties:$R[10977]={style:"color:#666666"},children:$R[10978]=[$R[10979]={type:"text",value:","}]},$R[10980]={type:"element",tagName:"span",properties:$R[10981]={style:"color:#BD976A"},children:$R[10982]=[$R[10983]={type:"text",value:" scope"}]},$R[10984]={type:"element",tagName:"span",properties:$R[10985]={style:"color:#666666"},children:$R[10986]=[$R[10987]={type:"text",value:")"}]},$R[10988]={type:"element",tagName:"span",properties:$R[10989]={style:"color:#666666"},children:$R[10990]=[$R[10991]={type:"text",value:" =>"}]},$R[10992]={type:"element",tagName:"span",properties:$R[10993]={style:"color:#666666"},children:$R[10994]=[$R[10995]={type:"text",value:" {"}]}]},$R[10996]={type:"text",value:"\n"},$R[10997]={type:"element",tagName:"span",properties:$R[10998]={class:"line"},children:$R[10999]=[$R[11000]={type:"element",tagName:"span",properties:$R[11001]={style:"color:#CB7676"},children:$R[11002]=[$R[11003]={type:"text",value:"\tconst"}]},$R[11004]={type:"element",tagName:"span",properties:$R[11005]={style:"color:#BD976A"},children:$R[11006]=[$R[11007]={type:"text",value:" userId"}]},$R[11008]={type:"element",tagName:"span",properties:$R[11009]={style:"color:#666666"},children:$R[11010]=[$R[11011]={type:"text",value:" ="}]},$R[11012]={type:"element",tagName:"span",properties:$R[11013]={style:"color:#80A665"},children:$R[11014]=[$R[11015]={type:"text",value:" scope"}]},$R[11016]={type:"element",tagName:"span",properties:$R[11017]={style:"color:#666666"},children:$R[11018]=[$R[11019]={type:"text",value:"("}]},$R[11020]={type:"element",tagName:"span",properties:$R[11021]={style:"color:#BD976A"},children:$R[11022]=[$R[11023]={type:"text",value:"UserScope"}]},$R[11024]={type:"element",tagName:"span",properties:$R[11025]={style:"color:#666666"},children:$R[11026]=[$R[11027]={type:"text",value:");"}]}]},$R[11028]={type:"text",value:"\n"},$R[11029]={type:"element",tagName:"span",properties:$R[11030]={class:"line"},children:$R[11031]=[$R[11032]={type:"element",tagName:"span",properties:$R[11033]={style:"color:#BD976A"},children:$R[11034]=[$R[11035]={type:"text",value:"\tconsole"}]},$R[11036]={type:"element",tagName:"span",properties:$R[11037]={style:"color:#666666"},children:$R[11038]=[$R[11039]={type:"text",value:"."}]},$R[11040]={type:"element",tagName:"span",properties:$R[11041]={style:"color:#80A665"},children:$R[11042]=[$R[11043]={type:"text",value:"log"}]},$R[11044]={type:"element",tagName:"span",properties:$R[11045]={style:"color:#666666"},children:$R[11046]=[$R[11047]={type:"text",value:"("}]},$R[11048]={type:"element",tagName:"span",properties:$R[11049]={style:"color:#C98A7D77"},children:$R[11050]=[$R[11051]={type:"text",value:"\""}]},$R[11052]={type:"element",tagName:"span",properties:$R[11053]={style:"color:#C98A7D"},children:$R[11054]=[$R[11055]={type:"text",value:"Creating a new atom for"}]},$R[11056]={type:"element",tagName:"span",properties:$R[11057]={style:"color:#C98A7D77"},children:$R[11058]=[$R[11059]={type:"text",value:"\""}]},$R[11060]={type:"element",tagName:"span",properties:$R[11061]={style:"color:#666666"},children:$R[11062]=[$R[11063]={type:"text",value:","}]},$R[11064]={type:"element",tagName:"span",properties:$R[11065]={style:"color:#BD976A"},children:$R[11066]=[$R[11067]={type:"text",value:" userId"}]},$R[11068]={type:"element",tagName:"span",properties:$R[11069]={style:"color:#666666"},children:$R[11070]=[$R[11071]={type:"text",value:");"}]}]},$R[11072]={type:"text",value:"\n"},$R[11073]={type:"element",tagName:"span",properties:$R[11074]={class:"line"},children:$R[11075]=[$R[11076]={type:"element",tagName:"span",properties:$R[11077]={style:"color:#4D9375"},children:$R[11078]=[$R[11079]={type:"text",value:"\treturn"}]},$R[11080]={type:"element",tagName:"span",properties:$R[11081]={style:"color:#80A665"},children:$R[11082]=[$R[11083]={type:"text",value:" atom"}]},$R[11084]={type:"element",tagName:"span",properties:$R[11085]={style:"color:#666666"},children:$R[11086]=[$R[11087]={type:"text",value:"("}]},$R[11088]={type:"element",tagName:"span",properties:$R[11089]={style:"color:#4C9A91"},children:$R[11090]=[$R[11091]={type:"text",value:"0"}]},$R[11092]={type:"element",tagName:"span",properties:$R[11093]={style:"color:#666666"},children:$R[11094]=[$R[11095]={type:"text",value:");"}]}]},$R[11096]={type:"text",value:"\n"},$R[11097]={type:"element",tagName:"span",properties:$R[11098]={class:"line"},children:$R[11099]=[$R[11100]={type:"element",tagName:"span",properties:$R[11101]={style:"color:#666666"},children:$R[11102]=[$R[11103]={type:"text",value:"});"}]}]},$R[11104]={type:"text",value:"\n"},$R[11105]={type:"element",tagName:"span",properties:$R[11106]={class:"line"},children:$R[11107]=[]},$R[11108]={type:"text",value:"\n"},$R[11109]={type:"element",tagName:"span",properties:$R[11110]={class:"line"},children:$R[11111]=[$R[11112]={type:"element",tagName:"span",properties:$R[11113]={style:"color:#758575DD"},children:$R[11114]=[$R[11115]={type:"text",value:"// ... Counter unchanged"}]}]},$R[11116]={type:"text",value:"\n"},$R[11117]={type:"element",tagName:"span",properties:$R[11118]={class:"line"},children:$R[11119]=[]},$R[11120]={type:"text",value:"\n"},$R[11121]={type:"element",tagName:"span",properties:$R[11122]={class:"line"},children:$R[11123]=[$R[11124]={type:"element",tagName:"span",properties:$R[11125]={style:"color:#4D9375"},children:$R[11126]=[$R[11127]={type:"text",value:"export"}]},$R[11128]={type:"element",tagName:"span",properties:$R[11129]={style:"color:#CB7676"},children:$R[11130]=[$R[11131]={type:"text",value:" function"}]},$R[11132]={type:"element",tagName:"span",properties:$R[11133]={style:"color:#80A665"},children:$R[11134]=[$R[11135]={type:"text",value:" App"}]},$R[11136]={type:"element",tagName:"span",properties:$R[11137]={style:"color:#666666"},children:$R[11138]=[$R[11139]={type:"text",value:"()"}]},$R[11140]={type:"element",tagName:"span",properties:$R[11141]={style:"color:#666666"},children:$R[11142]=[$R[11143]={type:"text",value:" {"}]}]},$R[11144]={type:"text",value:"\n"},$R[11145]={type:"element",tagName:"span",properties:$R[11146]={class:"line"},children:$R[11147]=[$R[11148]={type:"element",tagName:"span",properties:$R[11149]={style:"color:#4D9375"},children:$R[11150]=[$R[11151]={type:"text",value:"\treturn"}]},$R[11152]={type:"element",tagName:"span",properties:$R[11153]={style:"color:#666666"},children:$R[11154]=[$R[11155]={type:"text",value:" ("}]}]},$R[11156]={type:"text",value:"\n"},$R[11157]={type:"element",tagName:"span",properties:$R[11158]={class:"line"},children:$R[11159]=[$R[11160]={type:"element",tagName:"span",properties:$R[11161]={style:"color:#666666"},children:$R[11162]=[$R[11163]={type:"text",value:"\t\t\x3C"}]},$R[11164]={type:"element",tagName:"span",properties:$R[11165]={style:"color:#B8A965"},children:$R[11166]=[$R[11167]={type:"text",value:"ScopeProvider"}]},$R[11168]={type:"element",tagName:"span",properties:$R[11169]={style:"color:#BD976A"},children:$R[11170]=[$R[11171]={type:"text",value:" scope"}]},$R[11172]={type:"element",tagName:"span",properties:$R[11173]={style:"color:#666666"},children:$R[11174]=[$R[11175]={type:"text",value:"={"}]},$R[11176]={type:"element",tagName:"span",properties:$R[11177]={style:"color:#BD976A"},children:$R[11178]=[$R[11179]={type:"text",value:"UserScope"}]},$R[11180]={type:"element",tagName:"span",properties:$R[11181]={style:"color:#666666"},children:$R[11182]=[$R[11183]={type:"text",value:"}"}]},$R[11184]={type:"element",tagName:"span",properties:$R[11185]={style:"color:#BD976A"},children:$R[11186]=[$R[11187]={type:"text",value:" value"}]},$R[11188]={type:"element",tagName:"span",properties:$R[11189]={style:"color:#666666"},children:$R[11190]=[$R[11191]={type:"text",value:"="}]},$R[11192]={type:"element",tagName:"span",properties:$R[11193]={style:"color:#C98A7D77"},children:$R[11194]=[$R[11195]={type:"text",value:"\""}]},$R[11196]={type:"element",tagName:"span",properties:$R[11197]={style:"color:#C98A7D"},children:$R[11198]=[$R[11199]={type:"text",value:"bob@example.com"}]},$R[11200]={type:"element",tagName:"span",properties:$R[11201]={style:"color:#C98A7D77"},children:$R[11202]=[$R[11203]={type:"text",value:"\""}]},$R[11204]={type:"element",tagName:"span",properties:$R[11205]={style:"color:#666666"},children:$R[11206]=[$R[11207]={type:"text",value:">"}]}]},$R[11208]={type:"text",value:"\n"},$R[11209]={type:"element",tagName:"span",properties:$R[11210]={class:"line"},children:$R[11211]=[$R[11212]={type:"element",tagName:"span",properties:$R[11213]={style:"color:#666666"},children:$R[11214]=[$R[11215]={type:"text",value:"\t\t\t\x3C"}]},$R[11216]={type:"element",tagName:"span",properties:$R[11217]={style:"color:#B8A965"},children:$R[11218]=[$R[11219]={type:"text",value:"Counter"}]},$R[11220]={type:"element",tagName:"span",properties:$R[11221]={style:"color:#666666"},children:$R[11222]=[$R[11223]={type:"text",value:" />"}]}]},$R[11224]={type:"text",value:"\n"},$R[11225]={type:"element",tagName:"span",properties:$R[11226]={class:"line"},children:$R[11227]=[$R[11228]={type:"element",tagName:"span",properties:$R[11229]={style:"color:#666666"},children:$R[11230]=[$R[11231]={type:"text",value:"\t\t\x3C/"}]},$R[11232]={type:"element",tagName:"span",properties:$R[11233]={style:"color:#B8A965"},children:$R[11234]=[$R[11235]={type:"text",value:"ScopeProvider"}]},$R[11236]={type:"element",tagName:"span",properties:$R[11237]={style:"color:#666666"},children:$R[11238]=[$R[11239]={type:"text",value:">"}]}]},$R[11240]={type:"text",value:"\n"},$R[11241]={type:"element",tagName:"span",properties:$R[11242]={class:"line"},children:$R[11243]=[$R[11244]={type:"element",tagName:"span",properties:$R[11245]={style:"color:#666666"},children:$R[11246]=[$R[11247]={type:"text",value:"\t);"}]}]},$R[11248]={type:"text",value:"\n"},$R[11249]={type:"element",tagName:"span",properties:$R[11250]={class:"line"},children:$R[11251]=[$R[11252]={type:"element",tagName:"span",properties:$R[11253]={style:"color:#666666"},children:$R[11254]=[$R[11255]={type:"text",value:"}"}]}]}]}]}]}}],position:$R[11256]={end:$R[11257]={line:252,column:4,offset:6556},start:$R[11258]={line:174,column:1,offset:4855}},type:"section"},$R[11259]={children:$R[11260]=[$R[11261]={children:$R[11262]=[$R[11263]={position:$R[11264]={start:$R[11265]={line:254,column:4,offset:6561},end:$R[11266]={line:254,column:7,offset:6564}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[11267]={start:$R[11268]={line:254,column:1,offset:6558},end:$R[11269]={line:254,column:7,offset:6564}},type:"heading"},$R[11270]={children:$R[11271]=[$R[11272]={position:$R[11273]={start:$R[11274]={line:256,column:1,offset:6566},end:$R[11275]={line:256,column:5,offset:6570}},type:"text",value:"今回は "},$R[11276]={position:$R[11277]={start:$R[11278]={line:256,column:5,offset:6570},end:$R[11279]={line:256,column:13,offset:6578}},type:"inlineCode",value:"bunshi"},$R[11280]={position:$R[11281]={start:$R[11282]={line:256,column:13,offset:6578},end:$R[11283]={line:256,column:104,offset:6669}},type:"text",value:" というライブラリの基本概念からその魅力までを調べた。途中で実装の方を参照することが多々あったが、ほとんどテストされていてドキュメントも充実しているため、理解するのは難しくなかった。"}],position:$R[11284]={start:$R[11285]={line:256,column:1,offset:6566},end:$R[11286]={line:256,column:104,offset:6669}},type:"paragraph"},$R[11287]={children:$R[11288]=[$R[11289]={position:$R[11290]={start:$R[11291]={line:258,column:1,offset:6671},end:$R[11292]={line:258,column:9,offset:6679}},type:"inlineCode",value:"bunshi"},$R[11293]={position:$R[11294]={start:$R[11295]={line:258,column:9,offset:6679},end:$R[11296]={line:258,column:39,offset:6709}},type:"text",value:" を使って状態管理のベストプラクティスを追求したいと思った。"}],position:$R[11297]={start:$R[11298]={line:258,column:1,offset:6671},end:$R[11299]={line:258,column:39,offset:6709}},type:"paragraph"}],position:$R[11300]={end:$R[11301]={line:258,column:39,offset:6709},start:$R[11302]={line:254,column:1,offset:6558}},type:"section"}],footnotes:$R[11303]=[$R[11304]={children:$R[11305]=[$R[11306]={children:$R[11307]=[$R[11308]={position:$R[11309]={start:$R[11310]={line:25,column:7,offset:597},end:$R[11311]={line:25,column:14,offset:604}},type:"inlineCode",value:"React"},$R[11312]={position:$R[11313]={start:$R[11314]={line:25,column:14,offset:604},end:$R[11315]={line:25,column:17,offset:607}},type:"text",value:" と "},$R[11316]={position:$R[11317]={start:$R[11318]={line:25,column:17,offset:607},end:$R[11319]={line:25,column:22,offset:612}},type:"inlineCode",value:"Vue"},$R[11320]={position:$R[11321]={start:$R[11322]={line:25,column:22,offset:612},end:$R[11323]={line:25,column:52,offset:642}},type:"text",value:" は専用の API が用意されている。詳しくはこちらを参照。"},$R[11324]={children:$R[11325]=[$R[11326]={position:$R[11327]={start:$R[11328]={line:25,column:53,offset:643},end:$R[11329]={line:25,column:58,offset:648}},type:"text",value:"React"}],position:$R[11330]={start:$R[11331]={line:25,column:52,offset:642},end:$R[11332]={line:25,column:103,offset:693}},title:void 0,type:"link",url:"https://www.bunshi.org/integrations/react/"},$R[11333]={position:$R[11334]={start:$R[11335]={line:25,column:103,offset:693},end:$R[11336]={line:25,column:104,offset:694}},type:"text",value:"、"},$R[11337]={children:$R[11338]=[$R[11339]={position:$R[11340]={start:$R[11341]={line:25,column:105,offset:695},end:$R[11342]={line:25,column:108,offset:698}},type:"text",value:"Vue"}],position:$R[11343]={start:$R[11344]={line:25,column:104,offset:694},end:$R[11345]={line:25,column:151,offset:741}},title:void 0,type:"link",url:"https://www.bunshi.org/integrations/vue/"}],position:$R[11346]={start:$R[11347]={line:25,column:7,offset:597},end:$R[11348]={line:25,column:151,offset:741}},type:"paragraph"}],count:1,index:0,position:$R[11349]={start:$R[11350]={line:25,column:1,offset:591},end:$R[11351]={line:25,column:151,offset:741}},type:"footnoteDefinition"},$R[11352]={children:$R[11353]=[$R[11354]={children:$R[11355]=[$R[11356]={children:$R[11357]=[$R[11358]={position:$R[11359]={start:$R[11360]={line:31,column:8,offset:865},end:$R[11361]={line:31,column:20,offset:877}},type:"text",value:"Why WeakMap?"}],position:$R[11362]={start:$R[11363]={line:31,column:7,offset:864},end:$R[11364]={line:31,column:123,offset:980}},title:void 0,type:"link",url:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap#why_weakmap"}],position:$R[11365]={start:$R[11366]={line:31,column:7,offset:864},end:$R[11367]={line:31,column:123,offset:980}},type:"paragraph"}],count:1,index:1,position:$R[11368]={start:$R[11369]={line:31,column:1,offset:858},end:$R[11370]={line:31,column:123,offset:980}},type:"footnoteDefinition"},$R[11371]={children:$R[11372]=[$R[11373]={children:$R[11374]=[$R[11375]={position:$R[11376]={start:$R[11377]={line:172,column:7,offset:4799},end:$R[11378]={line:172,column:25,offset:4817}},type:"inlineCode",value:"reflect-metadata"},$R[11379]={position:$R[11380]={start:$R[11381]={line:172,column:25,offset:4817},end:$R[11382]={line:172,column:61,offset:4853}},type:"text",value:" はバンドルに含めるとサイズが大きくなるため、筆者はあまり使いたくない。"}],position:$R[11383]={start:$R[11384]={line:172,column:7,offset:4799},end:$R[11385]={line:172,column:61,offset:4853}},type:"paragraph"}],count:1,index:2,position:$R[11386]={start:$R[11387]={line:172,column:1,offset:4793},end:$R[11388]={line:172,column:61,offset:4853}},type:"footnoteDefinition"}],title:$R[11389]={children:$R[11390]=[$R[11391]={position:$R[11392]={start:$R[11393]={line:1,column:3,offset:2},end:$R[11394]={line:1,column:14,offset:13}},type:"text",value:"bunshiを理解する"}],id:"bunshiを理解する",level:1,plain:"bunshiを理解する",position:$R[11395]={start:$R[11396]={line:1,column:1,offset:0},end:$R[11397]={line:1,column:14,offset:13}},type:"heading"},toc:$R[11398]=[$R[11399]={children:$R[11400]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[11401]={children:$R[11402]=[$R[11403]={children:$R[11404]=[],id:"バンドルサイズが小さい",plain:"バンドルサイズが小さい",type:"toc"},$R[11405]={children:$R[11406]=[],id:"framework-agnosticである",plain:"framework agnosticである",type:"toc"},$R[11407]={children:$R[11408]=[],id:"パフォーマンスに配慮されている",plain:"パフォーマンスに配慮されている",type:"toc"}],id:"bunshiの特徴",plain:"bunshiの特徴",type:"toc"},$R[11409]={children:$R[11410]=[$R[11411]={children:$R[11412]=[],id:"molecule",plain:"molecule",type:"toc"},$R[11413]={children:$R[11414]=[],id:"scope",plain:"scope",type:"toc"},$R[11415]={children:$R[11416]=[$R[11417]={children:$R[11418]=[],id:"created",plain:"Created",type:"toc"},$R[11419]={children:$R[11420]=[],id:"mounted",plain:"Mounted",type:"toc"},$R[11421]={children:$R[11422]=[],id:"unmounted",plain:"Unmounted",type:"toc"}],id:"lifecycle",plain:"lifecycle",type:"toc"}],id:"bunshiの基本概念",plain:"bunshiの基本概念",type:"toc"},$R[11423]={children:$R[11424]=[],id:"個人的に面白いと思ったポイント",plain:"個人的に面白いと思ったポイント",type:"toc"},$R[11425]={children:$R[11426]=[],id:"結局何が嬉しい",plain:"結局何が嬉しい?",type:"toc"},$R[11427]={children:$R[11428]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[11429]={content:"# eslintSuppressionRules を考察してみる\n\n## はじめに\n\n先日 React Compiler が OSS になった。React のベータ版を使うことで今すぐ使うことができる。\n\n> React Compiler is a new experimental compiler that we’ve open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production.\n>\n> React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the Working Group. However, please note that this is not recommended and you should upgrade to React 19 when possible.\n>\n> --- https://react.dev/learn/react-compiler\n\nとある通り、まだ本番環境での使用は推奨されていない。\n\n先日公開された [React Compiler Code reading #1](https://youtu.be/PqPgr_hlVKM?si=OIgDQWxUwbV3se-A) の中で `eslintSuppressionRules` という設定を見つけた。この設定の想定されるであろう使い方について考えてみた。\n\nこの記事で参照するコードの commit は [113c8e7](https://github.com/facebook/react/tree/113c8e7f72bcf5d3bc285546da1508b45da3cf53) である。\n\n## React Compiler とは\n\n詳しくはドキュメント[^1]を読むことをおすすめする。簡潔に説明すると、React Compiler は `React.memo` や `useMemo` を始めとしたメモ化を自動で行い不要な再レンダリングを防ぐコンパイラである。\n\n現在は `babel` のプラグインとして提供されており、eslint のルールと React Compiler の実行時のエラーで React Compiler のルールに従わせている。\n\n[^1]: https://react.dev/learn/react-compiler\n\n## eslintSuppressionRules\n\n結論から言うと `eslintSuppressionRules` は、登録された ESLint ルールが無効化された場合に React Compiler が例外をスローするようにする設定である。\n\n```ts:Options.ts\nexport type PluginOptions = {\n // ...some options\n\n /**\n * By default React Compiler will skip compilation of code that suppresses the default\n * React ESLint rules, since this is a strong indication that the code may be breaking React rules\n * in some way.\n *\n * Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the\n * provided rules will skip compilation. To disable this feature (never bailout of compilation\n * even if the default ESLint is suppressed), pass an empty array.\n */\n eslintSuppressionRules?: Array\x3Cstring> | null | undefined;\n};\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L96-L105\n\n### 必要性\n\n`eslintSuppressionRules` はデフォルトで次の 2 つのルールが登録されている\n\n```ts:Program.ts\nconst DEFAULT_ESLINT_SUPPRESSIONS = [\n\t\"react-hooks/exhaustive-deps\",\n\t\"react-hooks/rules-of-hooks\",\n];\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L194-L197\n\nこれらのルールが無効化された場合、React Compiler は例外をスローする。これらのルールは React の基本的なルール[^2]であり、無効化されることは React のルールに違反している可能性が高い。おさらいだが、React Compiler は React のルールに従ったコードのみを解析して最適化する。そのため `eslintSuppressionRules` は React のルールに違反しているコードを見つけ、例外をスローすることで React Compiler が正しく動作することを保証する。\n\n[^2]: https://react.dev/reference/rules/rules-of-hooks にある通り hoosk はコンポーネントのトップレベルもしくはカスタムフック内でのみ呼び出すべきであるなど。\n\n(2024/06/11 追記) ただし、 `\"use no memo\"` ディレクティブを書いた場合は、React Compiler は例外をスローしない。\n\n```ts:Program.ts\n // Top level \"use no forget\", skip this file entirely\n if (\n findDirectiveDisablingMemoization(program.node.directives, options) != null\n ) {\n return;\n }\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L243-L248\n\n```ts:Program.ts\n const useNoForget = findDirectiveDisablingMemoization(\n fn.node.body.directives,\n pass.opts\n );\n if (useNoForget != null) {\n pass.opts.logger?.logEvent(pass.filename, {\n kind: \"CompileError\",\n fnLoc: fn.node.body.loc ?? null,\n detail: {\n severity: ErrorSeverity.Todo,\n reason: 'Skipped due to \"use no forget\" directive.',\n loc: useNoForget.loc ?? null,\n suggestions: null,\n },\n });\n return null;\n }\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L478-L493\n\n### ESLint v9との関係と使い方\n\n前項で `eslintSuppressionRules` は React Compiler が正しく動作するための設定であることを述べた。他にも `eslintSuppressionRules` が必要な理由が無いか考えてると、次のような理由があることに気づいた。\n\nそれは、ESLint v9 から stable となった flat config の仕様に関係している。flat config では次のようにプラグインを設定する。\n\n```js:eslint.config.js\n// @ts-check\n\nimport qwikPlugin from \"eslint-plugin-qwik\";\n\nexport default [\n\t{\n\t\tfiles: [\"src/**/*.tsx\"],\n\t\tplugins: {\n\t\t\tqwik: qwikPlugin,\n\t\t},\n\t\tlanguageOptions: {\n\t\t\tparserOptions: {\n\t\t\t\tproject: [\"./tsconfig.json\"],\n\t\t\t},\n\t\t},\n\t\trules: {\n\t\t\t...qwikPlugin.configs.recommended.rules,\n\t\t},\n\t}\n];\n```\n\n注目してほしいのは `plugins` の部分である。ここで各ユーザーがプラグインのプレフィックスを設定している。つまり以下のような設定が可能である。\n\n```js:eslint.config.js\n// @ts-check\n\nimport reactHooks from \"eslint-plugin-react-hooks\";\nimport globals from \"globals\";\n\nexport default [\n\t// ... some settings\n\n\t{\n\t\tfiles: [\"**/*.{js,jsx,mjs,cjs,ts,tsx}\"],\n\t\tplugins: {\n\t\t\tr: reactHooks,\n\t\t},\n\t\tlanguageOptions: {\n\t\t\tparserOptions: {\n\t\t\t\tecmaFeatures: {\n\t\t\t\t\tjsx: true,\n\t\t\t\t},\n\t\t\t},\n\t\t\tglobals: {\n\t\t\t\t...globals.browser,\n\t\t\t},\n\t\t},\n\t\trules: {\n\t\t\t// ... any rules you want\n\t\t\t\"r/exhaustive-deps\": \"error\",\n\t\t\t\"r/rules-of-hooks\": \"error\",\n\t\t},\n\t\t// ... others are omitted for brevity\n\t}\n];\n```\n\n上のような設定をしたプロジェクトで React Copiler を使おうとするとある問題が発生する。前項にて述べたように、`eslintSuppressionRules` はデフォルトで `react-hooks/exhaustive-deps` と `react-hooks/rules-of-hooks` が登録されている。ユーザーは ESLint の設定で `reac-hooks` プラグインのプレフィックスを `r` に設定している。するとユーザーはあるタイミングで eslint を無効化させる時に次のようなコードを書く。\n\n```tsx:sample.tsx\n// eslint-disable-next-line r/exhaustive-deps\nuseEffect(() => {\n\t// some code\n}, []);\n```\n\nこのコードを含んだアプリケーションを React Compiler に食べさせると、本来は例外をスローされるべきコードがコンパイルされてしまい、挙動が変わってしまう恐れがある。プレイグラウンド[^3]で試してみると一目瞭然だが、React Compiler はかなり元のコードを変更して最適化を行う。もちろん React のルールに則ったコードであれば正しく動作するが、そうでないコードは正しく動作する保証がない。\n\n[^3]: https://playground.react.dev/\n\nこの問題を解決するために `eslintSuppressionRules` がある。ユーザーは次のように設定することで、`eslintSuppressionRules` に `r/exhaustive-deps` と `r/rules-of-hooks` を登録することで、上記の問題を解決できる。\n\n```ts:vite.config.ts\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig(() => {\n\treturn {\n\t\tplugins: [\n\t\t\treact({\n\t\t\t\tbabel: {\n\t\t\t\t\tplugins: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\"babel-plugin-react-compiler\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\teslintSuppressionRules: [\"r/exhaustive-deps\", \"r/rules-of-hooks\"],\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t}),\n\t\t],\n\t\t// ...\n\t};\n});\n```\n\nこのように設定することで、`eslintSuppressionRules` に登録されたルールが無効化された場合に例外をスローするようになる。これにより、React Compiler は正しく動作することが保証される。\n\n## まとめ\n\n`eslintSuppressionRules` は React Compiler が正しく動作するための設定である。デフォルトで `react-hooks/exhaustive-deps` と `react-hooks/rules-of-hooks` が登録されており、これらのルールが無効化された場合に例外をスローする。また flat config との相性も良いため、React Compiler を使う際には `eslintSuppressionRules` の設定することをおすすめする。\n\n引き続き React Compiler のコードを読んで、使い方を考えていきたい。\n\nReact Compiler の中身を [@yossydev](https://twitter.com/yossydev)、[@shun_shobon](https://twitter.com/shun_shobon) と読んでいるので、興味がある方はぜひ見てみてほしい。\n\nhttps://www.youtube.com/watch?v=PqPgr_hlVKM",description:"React Compiler における eslintSuppressionRules の使い方について考察してみる",published:!0,publishedAt:"2024-06-02T20:07:36.528+09:00[Asia/Tokyo]",tags:$R[11430]=["React","React Compiler"],title:"React CompilerのeslintSuppressionRules を考察してみる",updatedAt:"2024-06-11T16:21:21.528+09:00[Asia/Tokyo]",_meta:$R[11431]={filePath:"01HZCA49PAZZ1RKK05NV4XZATQ/slug.md",fileName:"slug.md",directory:"01HZCA49PAZZ1RKK05NV4XZATQ",extension:"md",path:"01HZCA49PAZZ1RKK05NV4XZATQ/slug"},abstract:"eslintSuppressionRules を考察してみるはじめに先日 React Compiler が OSS になった。React のベータ版を使うことで今すぐ使うことができる。React Compiler is a new experimental compiler that we’ve open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production.React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cach",mdast:$R[11432]={children:$R[11433]=[$R[11434]={children:$R[11435]=[$R[11436]={children:$R[11437]=[$R[11438]={position:$R[11439]={start:$R[11440]={line:3,column:4,offset:37},end:$R[11441]={line:3,column:8,offset:41}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[11442]={start:$R[11443]={line:3,column:1,offset:34},end:$R[11444]={line:3,column:8,offset:41}},type:"heading"},$R[11445]={children:$R[11446]=[$R[11447]={position:$R[11448]={start:$R[11449]={line:5,column:1,offset:43},end:$R[11450]={line:5,column:59,offset:101}},type:"text",value:"先日 React Compiler が OSS になった。React のベータ版を使うことで今すぐ使うことができる。"}],position:$R[11451]={start:$R[11452]={line:5,column:1,offset:43},end:$R[11453]={line:5,column:59,offset:101}},type:"paragraph"},$R[11454]={children:$R[11455]=[$R[11456]={children:$R[11457]=[$R[11458]={position:$R[11459]={start:$R[11460]={line:7,column:3,offset:105},end:$R[11461]={line:7,column:182,offset:284}},type:"text",value:"React Compiler is a new experimental compiler that we’ve open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production."}],position:$R[11462]={start:$R[11463]={line:7,column:3,offset:105},end:$R[11464]={line:7,column:182,offset:284}},type:"paragraph"},$R[11465]={children:$R[11466]=[$R[11467]={position:$R[11468]={start:$R[11469]={line:9,column:3,offset:289},end:$R[11470]={line:9,column:277,offset:563}},type:"text",value:"React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the Working Group. However, please note that this is not recommended and you should upgrade to React 19 when possible."}],position:$R[11471]={start:$R[11472]={line:9,column:3,offset:289},end:$R[11473]={line:9,column:277,offset:563}},type:"paragraph"},$R[11474]={children:$R[11475]=[$R[11476]={position:$R[11477]={start:$R[11478]={line:11,column:3,offset:568},end:$R[11479]={line:11,column:7,offset:572}},type:"text",value:"--- "},$R[11480]={children:$R[11481]=[$R[11482]={position:$R[11483]={start:$R[11484]={line:11,column:7,offset:572},end:$R[11485]={line:11,column:45,offset:610}},type:"text",value:"https://react.dev/learn/react-compiler"}],position:$R[11486]={start:$R[11487]={line:11,column:7,offset:572},end:$R[11488]={line:11,column:45,offset:610}},title:void 0,type:"link",url:"https://react.dev/learn/react-compiler"}],position:$R[11489]={start:$R[11490]={line:11,column:3,offset:568},end:$R[11491]={line:11,column:45,offset:610}},type:"paragraph"}],position:$R[11492]={start:$R[11493]={line:7,column:1,offset:103},end:$R[11494]={line:11,column:45,offset:610}},type:"blockquote"},$R[11495]={children:$R[11496]=[$R[11497]={position:$R[11498]={start:$R[11499]={line:13,column:1,offset:612},end:$R[11500]={line:13,column:27,offset:638}},type:"text",value:"とある通り、まだ本番環境での使用は推奨されていない。"}],position:$R[11501]={start:$R[11502]={line:13,column:1,offset:612},end:$R[11503]={line:13,column:27,offset:638}},type:"paragraph"},$R[11504]={children:$R[11505]=[$R[11506]={position:$R[11507]={start:$R[11508]={line:15,column:1,offset:640},end:$R[11509]={line:15,column:9,offset:648}},type:"text",value:"先日公開された "},$R[11510]={children:$R[11511]=[$R[11512]={position:$R[11513]={start:$R[11514]={line:15,column:10,offset:649},end:$R[11515]={line:15,column:40,offset:679}},type:"text",value:"React Compiler Code reading #1"}],position:$R[11516]={start:$R[11517]={line:15,column:9,offset:648},end:$R[11518]={line:15,column:91,offset:730}},title:void 0,type:"link",url:"https://youtu.be/PqPgr_hlVKM?si=OIgDQWxUwbV3se-A"},$R[11519]={position:$R[11520]={start:$R[11521]={line:15,column:91,offset:730},end:$R[11522]={line:15,column:96,offset:735}},type:"text",value:" の中で "},$R[11523]={position:$R[11524]={start:$R[11525]={line:15,column:96,offset:735},end:$R[11526]={line:15,column:120,offset:759}},type:"inlineCode",value:"eslintSuppressionRules"},$R[11527]={position:$R[11528]={start:$R[11529]={line:15,column:120,offset:759},end:$R[11530]={line:15,column:159,offset:798}},type:"text",value:" という設定を見つけた。この設定の想定されるであろう使い方について考えてみた。"}],position:$R[11531]={start:$R[11532]={line:15,column:1,offset:640},end:$R[11533]={line:15,column:159,offset:798}},type:"paragraph"},$R[11534]={children:$R[11535]=[$R[11536]={position:$R[11537]={start:$R[11538]={line:17,column:1,offset:800},end:$R[11539]={line:17,column:24,offset:823}},type:"text",value:"この記事で参照するコードの commit は "},$R[11540]={children:$R[11541]=[$R[11542]={position:$R[11543]={start:$R[11544]={line:17,column:25,offset:824},end:$R[11545]={line:17,column:32,offset:831}},type:"text",value:"113c8e7"}],position:$R[11546]={start:$R[11547]={line:17,column:24,offset:823},end:$R[11548]={line:17,column:114,offset:913}},title:void 0,type:"link",url:"https://github.com/facebook/react/tree/113c8e7f72bcf5d3bc285546da1508b45da3cf53"},$R[11549]={position:$R[11550]={start:$R[11551]={line:17,column:114,offset:913},end:$R[11552]={line:17,column:119,offset:918}},type:"text",value:" である。"}],position:$R[11553]={start:$R[11554]={line:17,column:1,offset:800},end:$R[11555]={line:17,column:119,offset:918}},type:"paragraph"}],position:$R[11556]={end:$R[11557]={line:17,column:119,offset:918},start:$R[11558]={line:3,column:1,offset:34}},type:"section"},$R[11559]={children:$R[11560]=[$R[11561]={children:$R[11562]=[$R[11563]={position:$R[11564]={start:$R[11565]={line:19,column:4,offset:923},end:$R[11566]={line:19,column:21,offset:940}},type:"text",value:"React Compiler とは"}],id:"react-compiler-とは",level:2,plain:"React Compiler とは",position:$R[11567]={start:$R[11568]={line:19,column:1,offset:920},end:$R[11569]={line:19,column:21,offset:940}},type:"heading"},$R[11570]={children:$R[11571]=[$R[11572]={position:$R[11573]={start:$R[11574]={line:21,column:1,offset:942},end:$R[11575]={line:21,column:11,offset:952}},type:"text",value:"詳しくはドキュメント"},$R[11576]={footnoteIndex:0,position:$R[11577]={start:$R[11578]={line:21,column:11,offset:952},end:$R[11579]={line:21,column:15,offset:956}},referenceIndex:1,type:"footnoteReference"},$R[11580]={position:$R[11581]={start:$R[11582]={line:21,column:15,offset:956},end:$R[11583]={line:21,column:54,offset:995}},type:"text",value:"を読むことをおすすめする。簡潔に説明すると、React Compiler は "},$R[11584]={position:$R[11585]={start:$R[11586]={line:21,column:54,offset:995},end:$R[11587]={line:21,column:66,offset:1007}},type:"inlineCode",value:"React.memo"},$R[11588]={position:$R[11589]={start:$R[11590]={line:21,column:66,offset:1007},end:$R[11591]={line:21,column:69,offset:1010}},type:"text",value:" や "},$R[11592]={position:$R[11593]={start:$R[11594]={line:21,column:69,offset:1010},end:$R[11595]={line:21,column:78,offset:1019}},type:"inlineCode",value:"useMemo"},$R[11596]={position:$R[11597]={start:$R[11598]={line:21,column:78,offset:1019},end:$R[11599]={line:21,column:116,offset:1057}},type:"text",value:" を始めとしたメモ化を自動で行い不要な再レンダリングを防ぐコンパイラである。"}],position:$R[11600]={start:$R[11601]={line:21,column:1,offset:942},end:$R[11602]={line:21,column:116,offset:1057}},type:"paragraph"},$R[11603]={children:$R[11604]=[$R[11605]={position:$R[11606]={start:$R[11607]={line:23,column:1,offset:1059},end:$R[11608]={line:23,column:5,offset:1063}},type:"text",value:"現在は "},$R[11609]={position:$R[11610]={start:$R[11611]={line:23,column:5,offset:1063},end:$R[11612]={line:23,column:12,offset:1070}},type:"inlineCode",value:"babel"},$R[11613]={position:$R[11614]={start:$R[11615]={line:23,column:12,offset:1070},end:$R[11616]={line:23,column:95,offset:1153}},type:"text",value:" のプラグインとして提供されており、eslint のルールと React Compiler の実行時のエラーで React Compiler のルールに従わせている。"}],position:$R[11617]={start:$R[11618]={line:23,column:1,offset:1059},end:$R[11619]={line:23,column:95,offset:1153}},type:"paragraph"}],position:$R[11620]={end:$R[11621]={line:23,column:95,offset:1153},start:$R[11622]={line:19,column:1,offset:920}},type:"section"},$R[11623]={children:$R[11624]=[$R[11625]={children:$R[11626]=[$R[11627]={position:$R[11628]={start:$R[11629]={line:27,column:4,offset:1204},end:$R[11630]={line:27,column:26,offset:1226}},type:"text",value:"eslintSuppressionRules"}],id:"eslintsuppressionrules",level:2,plain:"eslintSuppressionRules",position:$R[11631]={start:$R[11632]={line:27,column:1,offset:1201},end:$R[11633]={line:27,column:26,offset:1226}},type:"heading"},$R[11634]={children:$R[11635]=[$R[11636]={position:$R[11637]={start:$R[11638]={line:29,column:1,offset:1228},end:$R[11639]={line:29,column:9,offset:1236}},type:"text",value:"結論から言うと "},$R[11640]={position:$R[11641]={start:$R[11642]={line:29,column:9,offset:1236},end:$R[11643]={line:29,column:33,offset:1260}},type:"inlineCode",value:"eslintSuppressionRules"},$R[11644]={position:$R[11645]={start:$R[11646]={line:29,column:33,offset:1260},end:$R[11647]={line:29,column:98,offset:1325}},type:"text",value:" は、登録された ESLint ルールが無効化された場合に React Compiler が例外をスローするようにする設定である。"}],position:$R[11648]={start:$R[11649]={line:29,column:1,offset:1228},end:$R[11650]={line:29,column:98,offset:1325}},type:"paragraph"},$R[11651]={filename:"Options.ts ts",lang:"ts",position:$R[11652]={start:$R[11653]={line:31,column:1,offset:1327},end:$R[11654]={line:46,column:4,offset:1952}},type:"code",value:"export type PluginOptions = {\n // ...some options\n\n /**\n * By default React Compiler will skip compilation of code that suppresses the default\n * React ESLint rules, since this is a strong indication that the code may be breaking React rules\n * in some way.\n *\n * Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the\n * provided rules will skip compilation. To disable this feature (never bailout of compilation\n * even if the default ESLint is suppressed), pass an empty array.\n */\n eslintSuppressionRules?: Array\x3Cstring> | null | undefined;\n};",hast:$R[11655]={type:"root",children:$R[11656]=[$R[11657]={type:"element",tagName:"pre",properties:$R[11658]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[11659]=[$R[11660]={type:"element",tagName:"code",properties:$R[11661]={},children:$R[11662]=[$R[11663]={type:"element",tagName:"span",properties:$R[11664]={class:"line"},children:$R[11665]=[$R[11666]={type:"element",tagName:"span",properties:$R[11667]={style:"color:#4D9375"},children:$R[11668]=[$R[11669]={type:"text",value:"export"}]},$R[11670]={type:"element",tagName:"span",properties:$R[11671]={style:"color:#CB7676"},children:$R[11672]=[$R[11673]={type:"text",value:" type"}]},$R[11674]={type:"element",tagName:"span",properties:$R[11675]={style:"color:#5DA994"},children:$R[11676]=[$R[11677]={type:"text",value:" PluginOptions"}]},$R[11678]={type:"element",tagName:"span",properties:$R[11679]={style:"color:#666666"},children:$R[11680]=[$R[11681]={type:"text",value:" ="}]},$R[11682]={type:"element",tagName:"span",properties:$R[11683]={style:"color:#666666"},children:$R[11684]=[$R[11685]={type:"text",value:" {"}]}]},$R[11686]={type:"text",value:"\n"},$R[11687]={type:"element",tagName:"span",properties:$R[11688]={class:"line"},children:$R[11689]=[$R[11690]={type:"element",tagName:"span",properties:$R[11691]={style:"color:#758575DD"},children:$R[11692]=[$R[11693]={type:"text",value:" // ...some options"}]}]},$R[11694]={type:"text",value:"\n"},$R[11695]={type:"element",tagName:"span",properties:$R[11696]={class:"line"},children:$R[11697]=[]},$R[11698]={type:"text",value:"\n"},$R[11699]={type:"element",tagName:"span",properties:$R[11700]={class:"line"},children:$R[11701]=[$R[11702]={type:"element",tagName:"span",properties:$R[11703]={style:"color:#758575DD"},children:$R[11704]=[$R[11705]={type:"text",value:" /**"}]}]},$R[11706]={type:"text",value:"\n"},$R[11707]={type:"element",tagName:"span",properties:$R[11708]={class:"line"},children:$R[11709]=[$R[11710]={type:"element",tagName:"span",properties:$R[11711]={style:"color:#758575DD"},children:$R[11712]=[$R[11713]={type:"text",value:" * By default React Compiler will skip compilation of code that suppresses the default"}]}]},$R[11714]={type:"text",value:"\n"},$R[11715]={type:"element",tagName:"span",properties:$R[11716]={class:"line"},children:$R[11717]=[$R[11718]={type:"element",tagName:"span",properties:$R[11719]={style:"color:#758575DD"},children:$R[11720]=[$R[11721]={type:"text",value:" * React ESLint rules, since this is a strong indication that the code may be breaking React rules"}]}]},$R[11722]={type:"text",value:"\n"},$R[11723]={type:"element",tagName:"span",properties:$R[11724]={class:"line"},children:$R[11725]=[$R[11726]={type:"element",tagName:"span",properties:$R[11727]={style:"color:#758575DD"},children:$R[11728]=[$R[11729]={type:"text",value:" * in some way."}]}]},$R[11730]={type:"text",value:"\n"},$R[11731]={type:"element",tagName:"span",properties:$R[11732]={class:"line"},children:$R[11733]=[$R[11734]={type:"element",tagName:"span",properties:$R[11735]={style:"color:#758575DD"},children:$R[11736]=[$R[11737]={type:"text",value:" *"}]}]},$R[11738]={type:"text",value:"\n"},$R[11739]={type:"element",tagName:"span",properties:$R[11740]={class:"line"},children:$R[11741]=[$R[11742]={type:"element",tagName:"span",properties:$R[11743]={style:"color:#758575DD"},children:$R[11744]=[$R[11745]={type:"text",value:" * Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the"}]}]},$R[11746]={type:"text",value:"\n"},$R[11747]={type:"element",tagName:"span",properties:$R[11748]={class:"line"},children:$R[11749]=[$R[11750]={type:"element",tagName:"span",properties:$R[11751]={style:"color:#758575DD"},children:$R[11752]=[$R[11753]={type:"text",value:" * provided rules will skip compilation. To disable this feature (never bailout of compilation"}]}]},$R[11754]={type:"text",value:"\n"},$R[11755]={type:"element",tagName:"span",properties:$R[11756]={class:"line"},children:$R[11757]=[$R[11758]={type:"element",tagName:"span",properties:$R[11759]={style:"color:#758575DD"},children:$R[11760]=[$R[11761]={type:"text",value:" * even if the default ESLint is suppressed), pass an empty array."}]}]},$R[11762]={type:"text",value:"\n"},$R[11763]={type:"element",tagName:"span",properties:$R[11764]={class:"line"},children:$R[11765]=[$R[11766]={type:"element",tagName:"span",properties:$R[11767]={style:"color:#758575DD"},children:$R[11768]=[$R[11769]={type:"text",value:" */"}]}]},$R[11770]={type:"text",value:"\n"},$R[11771]={type:"element",tagName:"span",properties:$R[11772]={class:"line"},children:$R[11773]=[$R[11774]={type:"element",tagName:"span",properties:$R[11775]={style:"color:#BD976A"},children:$R[11776]=[$R[11777]={type:"text",value:" eslintSuppressionRules"}]},$R[11778]={type:"element",tagName:"span",properties:$R[11779]={style:"color:#CB7676"},children:$R[11780]=[$R[11781]={type:"text",value:"?"}]},$R[11782]={type:"element",tagName:"span",properties:$R[11783]={style:"color:#666666"},children:$R[11784]=[$R[11785]={type:"text",value:": "}]},$R[11786]={type:"element",tagName:"span",properties:$R[11787]={style:"color:#5DA994"},children:$R[11788]=[$R[11789]={type:"text",value:"Array"}]},$R[11790]={type:"element",tagName:"span",properties:$R[11791]={style:"color:#666666"},children:$R[11792]=[$R[11793]={type:"text",value:"\x3C"}]},$R[11794]={type:"element",tagName:"span",properties:$R[11795]={style:"color:#5DA994"},children:$R[11796]=[$R[11797]={type:"text",value:"string"}]},$R[11798]={type:"element",tagName:"span",properties:$R[11799]={style:"color:#666666"},children:$R[11800]=[$R[11801]={type:"text",value:"> | "}]},$R[11802]={type:"element",tagName:"span",properties:$R[11803]={style:"color:#CB7676"},children:$R[11804]=[$R[11805]={type:"text",value:"null"}]},$R[11806]={type:"element",tagName:"span",properties:$R[11807]={style:"color:#666666"},children:$R[11808]=[$R[11809]={type:"text",value:" | "}]},$R[11810]={type:"element",tagName:"span",properties:$R[11811]={style:"color:#CB7676"},children:$R[11812]=[$R[11813]={type:"text",value:"undefined"}]},$R[11814]={type:"element",tagName:"span",properties:$R[11815]={style:"color:#666666"},children:$R[11816]=[$R[11817]={type:"text",value:";"}]}]},$R[11818]={type:"text",value:"\n"},$R[11819]={type:"element",tagName:"span",properties:$R[11820]={class:"line"},children:$R[11821]=[$R[11822]={type:"element",tagName:"span",properties:$R[11823]={style:"color:#666666"},children:$R[11824]=[$R[11825]={type:"text",value:"};"}]}]}]}]}]}},$R[11826]={meta:$R[11827]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[11828]={images:$R[11829]=[$R[11830]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[11831]={images:$R[11832]=[$R[11833]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[11834]={start:$R[11835]={line:48,column:1,offset:1954},end:$R[11836]={line:48,column:161,offset:2114}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L96-L105",type:"embed"},$R[11837]={children:$R[11838]=[$R[11839]={children:$R[11840]=[$R[11841]={position:$R[11842]={start:$R[11843]={line:50,column:5,offset:2120},end:$R[11844]={line:50,column:8,offset:2123}},type:"text",value:"必要性"}],id:"必要性",level:3,plain:"必要性",position:$R[11845]={start:$R[11846]={line:50,column:1,offset:2116},end:$R[11847]={line:50,column:8,offset:2123}},type:"heading"},$R[11848]={children:$R[11849]=[$R[11850]={position:$R[11851]={start:$R[11852]={line:52,column:1,offset:2125},end:$R[11853]={line:52,column:25,offset:2149}},type:"inlineCode",value:"eslintSuppressionRules"},$R[11854]={position:$R[11855]={start:$R[11856]={line:52,column:25,offset:2149},end:$R[11857]={line:52,column:51,offset:2175}},type:"text",value:" はデフォルトで次の 2 つのルールが登録されている"}],position:$R[11858]={start:$R[11859]={line:52,column:1,offset:2125},end:$R[11860]={line:52,column:51,offset:2175}},type:"paragraph"},$R[11861]={filename:"Program.ts ts",lang:"ts",position:$R[11862]={start:$R[11863]={line:54,column:1,offset:2177},end:$R[11864]={line:59,column:4,offset:2301}},type:"code",value:"const DEFAULT_ESLINT_SUPPRESSIONS = [\n\t\"react-hooks/exhaustive-deps\",\n\t\"react-hooks/rules-of-hooks\",\n];",hast:$R[11865]={type:"root",children:$R[11866]=[$R[11867]={type:"element",tagName:"pre",properties:$R[11868]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[11869]=[$R[11870]={type:"element",tagName:"code",properties:$R[11871]={},children:$R[11872]=[$R[11873]={type:"element",tagName:"span",properties:$R[11874]={class:"line"},children:$R[11875]=[$R[11876]={type:"element",tagName:"span",properties:$R[11877]={style:"color:#CB7676"},children:$R[11878]=[$R[11879]={type:"text",value:"const "}]},$R[11880]={type:"element",tagName:"span",properties:$R[11881]={style:"color:#BD976A"},children:$R[11882]=[$R[11883]={type:"text",value:"DEFAULT_ESLINT_SUPPRESSIONS"}]},$R[11884]={type:"element",tagName:"span",properties:$R[11885]={style:"color:#666666"},children:$R[11886]=[$R[11887]={type:"text",value:" ="}]},$R[11888]={type:"element",tagName:"span",properties:$R[11889]={style:"color:#666666"},children:$R[11890]=[$R[11891]={type:"text",value:" ["}]}]},$R[11892]={type:"text",value:"\n"},$R[11893]={type:"element",tagName:"span",properties:$R[11894]={class:"line"},children:$R[11895]=[$R[11896]={type:"element",tagName:"span",properties:$R[11897]={style:"color:#C98A7D77"},children:$R[11898]=[$R[11899]={type:"text",value:"\t\""}]},$R[11900]={type:"element",tagName:"span",properties:$R[11901]={style:"color:#C98A7D"},children:$R[11902]=[$R[11903]={type:"text",value:"react-hooks/exhaustive-deps"}]},$R[11904]={type:"element",tagName:"span",properties:$R[11905]={style:"color:#C98A7D77"},children:$R[11906]=[$R[11907]={type:"text",value:"\""}]},$R[11908]={type:"element",tagName:"span",properties:$R[11909]={style:"color:#666666"},children:$R[11910]=[$R[11911]={type:"text",value:","}]}]},$R[11912]={type:"text",value:"\n"},$R[11913]={type:"element",tagName:"span",properties:$R[11914]={class:"line"},children:$R[11915]=[$R[11916]={type:"element",tagName:"span",properties:$R[11917]={style:"color:#C98A7D77"},children:$R[11918]=[$R[11919]={type:"text",value:"\t\""}]},$R[11920]={type:"element",tagName:"span",properties:$R[11921]={style:"color:#C98A7D"},children:$R[11922]=[$R[11923]={type:"text",value:"react-hooks/rules-of-hooks"}]},$R[11924]={type:"element",tagName:"span",properties:$R[11925]={style:"color:#C98A7D77"},children:$R[11926]=[$R[11927]={type:"text",value:"\""}]},$R[11928]={type:"element",tagName:"span",properties:$R[11929]={style:"color:#666666"},children:$R[11930]=[$R[11931]={type:"text",value:","}]}]},$R[11932]={type:"text",value:"\n"},$R[11933]={type:"element",tagName:"span",properties:$R[11934]={class:"line"},children:$R[11935]=[$R[11936]={type:"element",tagName:"span",properties:$R[11937]={style:"color:#666666"},children:$R[11938]=[$R[11939]={type:"text",value:"];"}]}]}]}]}]}},$R[11940]={meta:$R[11941]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[11942]={images:$R[11943]=[$R[11944]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[11945]={images:$R[11946]=[$R[11947]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[11948]={start:$R[11949]={line:61,column:1,offset:2303},end:$R[11950]={line:61,column:162,offset:2464}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L194-L197",type:"embed"},$R[11951]={children:$R[11952]=[$R[11953]={position:$R[11954]={start:$R[11955]={line:63,column:1,offset:2466},end:$R[11956]={line:63,column:66,offset:2531}},type:"text",value:"これらのルールが無効化された場合、React Compiler は例外をスローする。これらのルールは React の基本的なルール"},$R[11957]={footnoteIndex:1,position:$R[11958]={start:$R[11959]={line:63,column:66,offset:2531},end:$R[11960]={line:63,column:70,offset:2535}},referenceIndex:1,type:"footnoteReference"},$R[11961]={position:$R[11962]={start:$R[11963]={line:63,column:70,offset:2535},end:$R[11964]={line:63,column:167,offset:2632}},type:"text",value:"であり、無効化されることは React のルールに違反している可能性が高い。おさらいだが、React Compiler は React のルールに従ったコードのみを解析して最適化する。そのため "},$R[11965]={position:$R[11966]={start:$R[11967]={line:63,column:167,offset:2632},end:$R[11968]={line:63,column:191,offset:2656}},type:"inlineCode",value:"eslintSuppressionRules"},$R[11969]={position:$R[11970]={start:$R[11971]={line:63,column:191,offset:2656},end:$R[11972]={line:63,column:262,offset:2727}},type:"text",value:" は React のルールに違反しているコードを見つけ、例外をスローすることで React Compiler が正しく動作することを保証する。"}],position:$R[11973]={start:$R[11974]={line:63,column:1,offset:2466},end:$R[11975]={line:63,column:262,offset:2727}},type:"paragraph"},$R[11976]={children:$R[11977]=[$R[11978]={position:$R[11979]={start:$R[11980]={line:67,column:1,offset:2840},end:$R[11981]={line:67,column:22,offset:2861}},type:"text",value:"(2024/06/11 追記) ただし、 "},$R[11982]={position:$R[11983]={start:$R[11984]={line:67,column:22,offset:2861},end:$R[11985]={line:67,column:37,offset:2876}},type:"inlineCode",value:"\"use no memo\""},$R[11986]={position:$R[11987]={start:$R[11988]={line:67,column:37,offset:2876},end:$R[11989]={line:67,column:79,offset:2918}},type:"text",value:" ディレクティブを書いた場合は、React Compiler は例外をスローしない。"}],position:$R[11990]={start:$R[11991]={line:67,column:1,offset:2840},end:$R[11992]={line:67,column:79,offset:2918}},type:"paragraph"},$R[11993]={filename:"Program.ts ts",lang:"ts",position:$R[11994]={start:$R[11995]={line:69,column:1,offset:2920},end:$R[11996]={line:76,column:4,offset:3105}},type:"code",value:" // Top level \"use no forget\", skip this file entirely\n if (\n findDirectiveDisablingMemoization(program.node.directives, options) != null\n ) {\n return;\n }",hast:$R[11997]={type:"root",children:$R[11998]=[$R[11999]={type:"element",tagName:"pre",properties:$R[12000]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[12001]=[$R[12002]={type:"element",tagName:"code",properties:$R[12003]={},children:$R[12004]=[$R[12005]={type:"element",tagName:"span",properties:$R[12006]={class:"line"},children:$R[12007]=[$R[12008]={type:"element",tagName:"span",properties:$R[12009]={style:"color:#758575DD"},children:$R[12010]=[$R[12011]={type:"text",value:" // Top level \"use no forget\", skip this file entirely"}]}]},$R[12012]={type:"text",value:"\n"},$R[12013]={type:"element",tagName:"span",properties:$R[12014]={class:"line"},children:$R[12015]=[$R[12016]={type:"element",tagName:"span",properties:$R[12017]={style:"color:#4D9375"},children:$R[12018]=[$R[12019]={type:"text",value:" if"}]},$R[12020]={type:"element",tagName:"span",properties:$R[12021]={style:"color:#666666"},children:$R[12022]=[$R[12023]={type:"text",value:" ("}]}]},$R[12024]={type:"text",value:"\n"},$R[12025]={type:"element",tagName:"span",properties:$R[12026]={class:"line"},children:$R[12027]=[$R[12028]={type:"element",tagName:"span",properties:$R[12029]={style:"color:#80A665"},children:$R[12030]=[$R[12031]={type:"text",value:" findDirectiveDisablingMemoization"}]},$R[12032]={type:"element",tagName:"span",properties:$R[12033]={style:"color:#666666"},children:$R[12034]=[$R[12035]={type:"text",value:"("}]},$R[12036]={type:"element",tagName:"span",properties:$R[12037]={style:"color:#BD976A"},children:$R[12038]=[$R[12039]={type:"text",value:"program"}]},$R[12040]={type:"element",tagName:"span",properties:$R[12041]={style:"color:#666666"},children:$R[12042]=[$R[12043]={type:"text",value:"."}]},$R[12044]={type:"element",tagName:"span",properties:$R[12045]={style:"color:#BD976A"},children:$R[12046]=[$R[12047]={type:"text",value:"node"}]},$R[12048]={type:"element",tagName:"span",properties:$R[12049]={style:"color:#666666"},children:$R[12050]=[$R[12051]={type:"text",value:"."}]},$R[12052]={type:"element",tagName:"span",properties:$R[12053]={style:"color:#BD976A"},children:$R[12054]=[$R[12055]={type:"text",value:"directives"}]},$R[12056]={type:"element",tagName:"span",properties:$R[12057]={style:"color:#666666"},children:$R[12058]=[$R[12059]={type:"text",value:","}]},$R[12060]={type:"element",tagName:"span",properties:$R[12061]={style:"color:#BD976A"},children:$R[12062]=[$R[12063]={type:"text",value:" options"}]},$R[12064]={type:"element",tagName:"span",properties:$R[12065]={style:"color:#666666"},children:$R[12066]=[$R[12067]={type:"text",value:")"}]},$R[12068]={type:"element",tagName:"span",properties:$R[12069]={style:"color:#CB7676"},children:$R[12070]=[$R[12071]={type:"text",value:" !="}]},$R[12072]={type:"element",tagName:"span",properties:$R[12073]={style:"color:#CB7676"},children:$R[12074]=[$R[12075]={type:"text",value:" null"}]}]},$R[12076]={type:"text",value:"\n"},$R[12077]={type:"element",tagName:"span",properties:$R[12078]={class:"line"},children:$R[12079]=[$R[12080]={type:"element",tagName:"span",properties:$R[12081]={style:"color:#666666"},children:$R[12082]=[$R[12083]={type:"text",value:" )"}]},$R[12084]={type:"element",tagName:"span",properties:$R[12085]={style:"color:#666666"},children:$R[12086]=[$R[12087]={type:"text",value:" {"}]}]},$R[12088]={type:"text",value:"\n"},$R[12089]={type:"element",tagName:"span",properties:$R[12090]={class:"line"},children:$R[12091]=[$R[12092]={type:"element",tagName:"span",properties:$R[12093]={style:"color:#4D9375"},children:$R[12094]=[$R[12095]={type:"text",value:" return"}]},$R[12096]={type:"element",tagName:"span",properties:$R[12097]={style:"color:#666666"},children:$R[12098]=[$R[12099]={type:"text",value:";"}]}]},$R[12100]={type:"text",value:"\n"},$R[12101]={type:"element",tagName:"span",properties:$R[12102]={class:"line"},children:$R[12103]=[$R[12104]={type:"element",tagName:"span",properties:$R[12105]={style:"color:#666666"},children:$R[12106]=[$R[12107]={type:"text",value:" }"}]}]}]}]}]}},$R[12108]={meta:$R[12109]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[12110]={images:$R[12111]=[$R[12112]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[12113]={images:$R[12114]=[$R[12115]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[12116]={start:$R[12117]={line:78,column:1,offset:3107},end:$R[12118]={line:78,column:162,offset:3268}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L243-L248",type:"embed"},$R[12119]={filename:"Program.ts ts",lang:"ts",position:$R[12120]={start:$R[12121]={line:80,column:1,offset:3270},end:$R[12122]={line:98,column:4,offset:3791}},type:"code",value:" const useNoForget = findDirectiveDisablingMemoization(\n fn.node.body.directives,\n pass.opts\n );\n if (useNoForget != null) {\n pass.opts.logger?.logEvent(pass.filename, {\n kind: \"CompileError\",\n fnLoc: fn.node.body.loc ?? null,\n detail: {\n severity: ErrorSeverity.Todo,\n reason: 'Skipped due to \"use no forget\" directive.',\n loc: useNoForget.loc ?? null,\n suggestions: null,\n },\n });\n return null;\n }",hast:$R[12123]={type:"root",children:$R[12124]=[$R[12125]={type:"element",tagName:"pre",properties:$R[12126]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[12127]=[$R[12128]={type:"element",tagName:"code",properties:$R[12129]={},children:$R[12130]=[$R[12131]={type:"element",tagName:"span",properties:$R[12132]={class:"line"},children:$R[12133]=[$R[12134]={type:"element",tagName:"span",properties:$R[12135]={style:"color:#CB7676"},children:$R[12136]=[$R[12137]={type:"text",value:" const "}]},$R[12138]={type:"element",tagName:"span",properties:$R[12139]={style:"color:#BD976A"},children:$R[12140]=[$R[12141]={type:"text",value:"useNoForget"}]},$R[12142]={type:"element",tagName:"span",properties:$R[12143]={style:"color:#666666"},children:$R[12144]=[$R[12145]={type:"text",value:" ="}]},$R[12146]={type:"element",tagName:"span",properties:$R[12147]={style:"color:#80A665"},children:$R[12148]=[$R[12149]={type:"text",value:" findDirectiveDisablingMemoization"}]},$R[12150]={type:"element",tagName:"span",properties:$R[12151]={style:"color:#666666"},children:$R[12152]=[$R[12153]={type:"text",value:"("}]}]},$R[12154]={type:"text",value:"\n"},$R[12155]={type:"element",tagName:"span",properties:$R[12156]={class:"line"},children:$R[12157]=[$R[12158]={type:"element",tagName:"span",properties:$R[12159]={style:"color:#BD976A"},children:$R[12160]=[$R[12161]={type:"text",value:" fn"}]},$R[12162]={type:"element",tagName:"span",properties:$R[12163]={style:"color:#666666"},children:$R[12164]=[$R[12165]={type:"text",value:"."}]},$R[12166]={type:"element",tagName:"span",properties:$R[12167]={style:"color:#BD976A"},children:$R[12168]=[$R[12169]={type:"text",value:"node"}]},$R[12170]={type:"element",tagName:"span",properties:$R[12171]={style:"color:#666666"},children:$R[12172]=[$R[12173]={type:"text",value:"."}]},$R[12174]={type:"element",tagName:"span",properties:$R[12175]={style:"color:#BD976A"},children:$R[12176]=[$R[12177]={type:"text",value:"body"}]},$R[12178]={type:"element",tagName:"span",properties:$R[12179]={style:"color:#666666"},children:$R[12180]=[$R[12181]={type:"text",value:"."}]},$R[12182]={type:"element",tagName:"span",properties:$R[12183]={style:"color:#BD976A"},children:$R[12184]=[$R[12185]={type:"text",value:"directives"}]},$R[12186]={type:"element",tagName:"span",properties:$R[12187]={style:"color:#666666"},children:$R[12188]=[$R[12189]={type:"text",value:","}]}]},$R[12190]={type:"text",value:"\n"},$R[12191]={type:"element",tagName:"span",properties:$R[12192]={class:"line"},children:$R[12193]=[$R[12194]={type:"element",tagName:"span",properties:$R[12195]={style:"color:#BD976A"},children:$R[12196]=[$R[12197]={type:"text",value:" pass"}]},$R[12198]={type:"element",tagName:"span",properties:$R[12199]={style:"color:#666666"},children:$R[12200]=[$R[12201]={type:"text",value:"."}]},$R[12202]={type:"element",tagName:"span",properties:$R[12203]={style:"color:#BD976A"},children:$R[12204]=[$R[12205]={type:"text",value:"opts"}]}]},$R[12206]={type:"text",value:"\n"},$R[12207]={type:"element",tagName:"span",properties:$R[12208]={class:"line"},children:$R[12209]=[$R[12210]={type:"element",tagName:"span",properties:$R[12211]={style:"color:#666666"},children:$R[12212]=[$R[12213]={type:"text",value:" );"}]}]},$R[12214]={type:"text",value:"\n"},$R[12215]={type:"element",tagName:"span",properties:$R[12216]={class:"line"},children:$R[12217]=[$R[12218]={type:"element",tagName:"span",properties:$R[12219]={style:"color:#4D9375"},children:$R[12220]=[$R[12221]={type:"text",value:" if"}]},$R[12222]={type:"element",tagName:"span",properties:$R[12223]={style:"color:#666666"},children:$R[12224]=[$R[12225]={type:"text",value:" ("}]},$R[12226]={type:"element",tagName:"span",properties:$R[12227]={style:"color:#BD976A"},children:$R[12228]=[$R[12229]={type:"text",value:"useNoForget"}]},$R[12230]={type:"element",tagName:"span",properties:$R[12231]={style:"color:#CB7676"},children:$R[12232]=[$R[12233]={type:"text",value:" !="}]},$R[12234]={type:"element",tagName:"span",properties:$R[12235]={style:"color:#CB7676"},children:$R[12236]=[$R[12237]={type:"text",value:" null"}]},$R[12238]={type:"element",tagName:"span",properties:$R[12239]={style:"color:#666666"},children:$R[12240]=[$R[12241]={type:"text",value:")"}]},$R[12242]={type:"element",tagName:"span",properties:$R[12243]={style:"color:#666666"},children:$R[12244]=[$R[12245]={type:"text",value:" {"}]}]},$R[12246]={type:"text",value:"\n"},$R[12247]={type:"element",tagName:"span",properties:$R[12248]={class:"line"},children:$R[12249]=[$R[12250]={type:"element",tagName:"span",properties:$R[12251]={style:"color:#BD976A"},children:$R[12252]=[$R[12253]={type:"text",value:" pass"}]},$R[12254]={type:"element",tagName:"span",properties:$R[12255]={style:"color:#666666"},children:$R[12256]=[$R[12257]={type:"text",value:"."}]},$R[12258]={type:"element",tagName:"span",properties:$R[12259]={style:"color:#BD976A"},children:$R[12260]=[$R[12261]={type:"text",value:"opts"}]},$R[12262]={type:"element",tagName:"span",properties:$R[12263]={style:"color:#666666"},children:$R[12264]=[$R[12265]={type:"text",value:"."}]},$R[12266]={type:"element",tagName:"span",properties:$R[12267]={style:"color:#BD976A"},children:$R[12268]=[$R[12269]={type:"text",value:"logger"}]},$R[12270]={type:"element",tagName:"span",properties:$R[12271]={style:"color:#666666"},children:$R[12272]=[$R[12273]={type:"text",value:"?."}]},$R[12274]={type:"element",tagName:"span",properties:$R[12275]={style:"color:#80A665"},children:$R[12276]=[$R[12277]={type:"text",value:"logEvent"}]},$R[12278]={type:"element",tagName:"span",properties:$R[12279]={style:"color:#666666"},children:$R[12280]=[$R[12281]={type:"text",value:"("}]},$R[12282]={type:"element",tagName:"span",properties:$R[12283]={style:"color:#BD976A"},children:$R[12284]=[$R[12285]={type:"text",value:"pass"}]},$R[12286]={type:"element",tagName:"span",properties:$R[12287]={style:"color:#666666"},children:$R[12288]=[$R[12289]={type:"text",value:"."}]},$R[12290]={type:"element",tagName:"span",properties:$R[12291]={style:"color:#BD976A"},children:$R[12292]=[$R[12293]={type:"text",value:"filename"}]},$R[12294]={type:"element",tagName:"span",properties:$R[12295]={style:"color:#666666"},children:$R[12296]=[$R[12297]={type:"text",value:","}]},$R[12298]={type:"element",tagName:"span",properties:$R[12299]={style:"color:#666666"},children:$R[12300]=[$R[12301]={type:"text",value:" {"}]}]},$R[12302]={type:"text",value:"\n"},$R[12303]={type:"element",tagName:"span",properties:$R[12304]={class:"line"},children:$R[12305]=[$R[12306]={type:"element",tagName:"span",properties:$R[12307]={style:"color:#B8A965"},children:$R[12308]=[$R[12309]={type:"text",value:" kind"}]},$R[12310]={type:"element",tagName:"span",properties:$R[12311]={style:"color:#666666"},children:$R[12312]=[$R[12313]={type:"text",value:": "}]},$R[12314]={type:"element",tagName:"span",properties:$R[12315]={style:"color:#C98A7D77"},children:$R[12316]=[$R[12317]={type:"text",value:"\""}]},$R[12318]={type:"element",tagName:"span",properties:$R[12319]={style:"color:#C98A7D"},children:$R[12320]=[$R[12321]={type:"text",value:"CompileError"}]},$R[12322]={type:"element",tagName:"span",properties:$R[12323]={style:"color:#C98A7D77"},children:$R[12324]=[$R[12325]={type:"text",value:"\""}]},$R[12326]={type:"element",tagName:"span",properties:$R[12327]={style:"color:#666666"},children:$R[12328]=[$R[12329]={type:"text",value:","}]}]},$R[12330]={type:"text",value:"\n"},$R[12331]={type:"element",tagName:"span",properties:$R[12332]={class:"line"},children:$R[12333]=[$R[12334]={type:"element",tagName:"span",properties:$R[12335]={style:"color:#B8A965"},children:$R[12336]=[$R[12337]={type:"text",value:" fnLoc"}]},$R[12338]={type:"element",tagName:"span",properties:$R[12339]={style:"color:#666666"},children:$R[12340]=[$R[12341]={type:"text",value:": "}]},$R[12342]={type:"element",tagName:"span",properties:$R[12343]={style:"color:#BD976A"},children:$R[12344]=[$R[12345]={type:"text",value:"fn"}]},$R[12346]={type:"element",tagName:"span",properties:$R[12347]={style:"color:#666666"},children:$R[12348]=[$R[12349]={type:"text",value:"."}]},$R[12350]={type:"element",tagName:"span",properties:$R[12351]={style:"color:#BD976A"},children:$R[12352]=[$R[12353]={type:"text",value:"node"}]},$R[12354]={type:"element",tagName:"span",properties:$R[12355]={style:"color:#666666"},children:$R[12356]=[$R[12357]={type:"text",value:"."}]},$R[12358]={type:"element",tagName:"span",properties:$R[12359]={style:"color:#BD976A"},children:$R[12360]=[$R[12361]={type:"text",value:"body"}]},$R[12362]={type:"element",tagName:"span",properties:$R[12363]={style:"color:#666666"},children:$R[12364]=[$R[12365]={type:"text",value:"."}]},$R[12366]={type:"element",tagName:"span",properties:$R[12367]={style:"color:#BD976A"},children:$R[12368]=[$R[12369]={type:"text",value:"loc"}]},$R[12370]={type:"element",tagName:"span",properties:$R[12371]={style:"color:#CB7676"},children:$R[12372]=[$R[12373]={type:"text",value:" ??"}]},$R[12374]={type:"element",tagName:"span",properties:$R[12375]={style:"color:#CB7676"},children:$R[12376]=[$R[12377]={type:"text",value:" null"}]},$R[12378]={type:"element",tagName:"span",properties:$R[12379]={style:"color:#666666"},children:$R[12380]=[$R[12381]={type:"text",value:","}]}]},$R[12382]={type:"text",value:"\n"},$R[12383]={type:"element",tagName:"span",properties:$R[12384]={class:"line"},children:$R[12385]=[$R[12386]={type:"element",tagName:"span",properties:$R[12387]={style:"color:#B8A965"},children:$R[12388]=[$R[12389]={type:"text",value:" detail"}]},$R[12390]={type:"element",tagName:"span",properties:$R[12391]={style:"color:#666666"},children:$R[12392]=[$R[12393]={type:"text",value:": {"}]}]},$R[12394]={type:"text",value:"\n"},$R[12395]={type:"element",tagName:"span",properties:$R[12396]={class:"line"},children:$R[12397]=[$R[12398]={type:"element",tagName:"span",properties:$R[12399]={style:"color:#B8A965"},children:$R[12400]=[$R[12401]={type:"text",value:" severity"}]},$R[12402]={type:"element",tagName:"span",properties:$R[12403]={style:"color:#666666"},children:$R[12404]=[$R[12405]={type:"text",value:": "}]},$R[12406]={type:"element",tagName:"span",properties:$R[12407]={style:"color:#BD976A"},children:$R[12408]=[$R[12409]={type:"text",value:"ErrorSeverity"}]},$R[12410]={type:"element",tagName:"span",properties:$R[12411]={style:"color:#666666"},children:$R[12412]=[$R[12413]={type:"text",value:"."}]},$R[12414]={type:"element",tagName:"span",properties:$R[12415]={style:"color:#BD976A"},children:$R[12416]=[$R[12417]={type:"text",value:"Todo"}]},$R[12418]={type:"element",tagName:"span",properties:$R[12419]={style:"color:#666666"},children:$R[12420]=[$R[12421]={type:"text",value:","}]}]},$R[12422]={type:"text",value:"\n"},$R[12423]={type:"element",tagName:"span",properties:$R[12424]={class:"line"},children:$R[12425]=[$R[12426]={type:"element",tagName:"span",properties:$R[12427]={style:"color:#B8A965"},children:$R[12428]=[$R[12429]={type:"text",value:" reason"}]},$R[12430]={type:"element",tagName:"span",properties:$R[12431]={style:"color:#666666"},children:$R[12432]=[$R[12433]={type:"text",value:": "}]},$R[12434]={type:"element",tagName:"span",properties:$R[12435]={style:"color:#C98A7D77"},children:$R[12436]=[$R[12437]={type:"text",value:"'"}]},$R[12438]={type:"element",tagName:"span",properties:$R[12439]={style:"color:#C98A7D"},children:$R[12440]=[$R[12441]={type:"text",value:"Skipped due to \"use no forget\" directive."}]},$R[12442]={type:"element",tagName:"span",properties:$R[12443]={style:"color:#C98A7D77"},children:$R[12444]=[$R[12445]={type:"text",value:"'"}]},$R[12446]={type:"element",tagName:"span",properties:$R[12447]={style:"color:#666666"},children:$R[12448]=[$R[12449]={type:"text",value:","}]}]},$R[12450]={type:"text",value:"\n"},$R[12451]={type:"element",tagName:"span",properties:$R[12452]={class:"line"},children:$R[12453]=[$R[12454]={type:"element",tagName:"span",properties:$R[12455]={style:"color:#B8A965"},children:$R[12456]=[$R[12457]={type:"text",value:" loc"}]},$R[12458]={type:"element",tagName:"span",properties:$R[12459]={style:"color:#666666"},children:$R[12460]=[$R[12461]={type:"text",value:": "}]},$R[12462]={type:"element",tagName:"span",properties:$R[12463]={style:"color:#BD976A"},children:$R[12464]=[$R[12465]={type:"text",value:"useNoForget"}]},$R[12466]={type:"element",tagName:"span",properties:$R[12467]={style:"color:#666666"},children:$R[12468]=[$R[12469]={type:"text",value:"."}]},$R[12470]={type:"element",tagName:"span",properties:$R[12471]={style:"color:#BD976A"},children:$R[12472]=[$R[12473]={type:"text",value:"loc"}]},$R[12474]={type:"element",tagName:"span",properties:$R[12475]={style:"color:#CB7676"},children:$R[12476]=[$R[12477]={type:"text",value:" ??"}]},$R[12478]={type:"element",tagName:"span",properties:$R[12479]={style:"color:#CB7676"},children:$R[12480]=[$R[12481]={type:"text",value:" null"}]},$R[12482]={type:"element",tagName:"span",properties:$R[12483]={style:"color:#666666"},children:$R[12484]=[$R[12485]={type:"text",value:","}]}]},$R[12486]={type:"text",value:"\n"},$R[12487]={type:"element",tagName:"span",properties:$R[12488]={class:"line"},children:$R[12489]=[$R[12490]={type:"element",tagName:"span",properties:$R[12491]={style:"color:#B8A965"},children:$R[12492]=[$R[12493]={type:"text",value:" suggestions"}]},$R[12494]={type:"element",tagName:"span",properties:$R[12495]={style:"color:#666666"},children:$R[12496]=[$R[12497]={type:"text",value:": "}]},$R[12498]={type:"element",tagName:"span",properties:$R[12499]={style:"color:#CB7676"},children:$R[12500]=[$R[12501]={type:"text",value:"null"}]},$R[12502]={type:"element",tagName:"span",properties:$R[12503]={style:"color:#666666"},children:$R[12504]=[$R[12505]={type:"text",value:","}]}]},$R[12506]={type:"text",value:"\n"},$R[12507]={type:"element",tagName:"span",properties:$R[12508]={class:"line"},children:$R[12509]=[$R[12510]={type:"element",tagName:"span",properties:$R[12511]={style:"color:#666666"},children:$R[12512]=[$R[12513]={type:"text",value:" },"}]}]},$R[12514]={type:"text",value:"\n"},$R[12515]={type:"element",tagName:"span",properties:$R[12516]={class:"line"},children:$R[12517]=[$R[12518]={type:"element",tagName:"span",properties:$R[12519]={style:"color:#666666"},children:$R[12520]=[$R[12521]={type:"text",value:" });"}]}]},$R[12522]={type:"text",value:"\n"},$R[12523]={type:"element",tagName:"span",properties:$R[12524]={class:"line"},children:$R[12525]=[$R[12526]={type:"element",tagName:"span",properties:$R[12527]={style:"color:#4D9375"},children:$R[12528]=[$R[12529]={type:"text",value:" return"}]},$R[12530]={type:"element",tagName:"span",properties:$R[12531]={style:"color:#CB7676"},children:$R[12532]=[$R[12533]={type:"text",value:" null"}]},$R[12534]={type:"element",tagName:"span",properties:$R[12535]={style:"color:#666666"},children:$R[12536]=[$R[12537]={type:"text",value:";"}]}]},$R[12538]={type:"text",value:"\n"},$R[12539]={type:"element",tagName:"span",properties:$R[12540]={class:"line"},children:$R[12541]=[$R[12542]={type:"element",tagName:"span",properties:$R[12543]={style:"color:#666666"},children:$R[12544]=[$R[12545]={type:"text",value:" }"}]}]}]}]}]}},$R[12546]={meta:$R[12547]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[12548]={images:$R[12549]=[$R[12550]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[12551]={images:$R[12552]=[$R[12553]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[12554]={start:$R[12555]={line:100,column:1,offset:3793},end:$R[12556]={line:100,column:162,offset:3954}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L478-L493",type:"embed"}],position:$R[12557]={end:$R[12558]={line:100,column:162,offset:3954},start:$R[12559]={line:50,column:1,offset:2116}},type:"section"},$R[12560]={children:$R[12561]=[$R[12562]={children:$R[12563]=[$R[12564]={position:$R[12565]={start:$R[12566]={line:102,column:5,offset:3960},end:$R[12567]={line:102,column:22,offset:3977}},type:"text",value:"ESLint v9との関係と使い方"}],id:"eslint-v9との関係と使い方",level:3,plain:"ESLint v9との関係と使い方",position:$R[12568]={start:$R[12569]={line:102,column:1,offset:3956},end:$R[12570]={line:102,column:22,offset:3977}},type:"heading"},$R[12571]={children:$R[12572]=[$R[12573]={position:$R[12574]={start:$R[12575]={line:104,column:1,offset:3979},end:$R[12576]={line:104,column:5,offset:3983}},type:"text",value:"前項で "},$R[12577]={position:$R[12578]={start:$R[12579]={line:104,column:5,offset:3983},end:$R[12580]={line:104,column:29,offset:4007}},type:"inlineCode",value:"eslintSuppressionRules"},$R[12581]={position:$R[12582]={start:$R[12583]={line:104,column:29,offset:4007},end:$R[12584]={line:104,column:74,offset:4052}},type:"text",value:" は React Compiler が正しく動作するための設定であることを述べた。他にも "},$R[12585]={position:$R[12586]={start:$R[12587]={line:104,column:74,offset:4052},end:$R[12588]={line:104,column:98,offset:4076}},type:"inlineCode",value:"eslintSuppressionRules"},$R[12589]={position:$R[12590]={start:$R[12591]={line:104,column:98,offset:4076},end:$R[12592]={line:104,column:133,offset:4111}},type:"text",value:" が必要な理由が無いか考えてると、次のような理由があることに気づいた。"}],position:$R[12593]={start:$R[12594]={line:104,column:1,offset:3979},end:$R[12595]={line:104,column:133,offset:4111}},type:"paragraph"},$R[12596]={children:$R[12597]=[$R[12598]={position:$R[12599]={start:$R[12600]={line:106,column:1,offset:4113},end:$R[12601]={line:106,column:83,offset:4195}},type:"text",value:"それは、ESLint v9 から stable となった flat config の仕様に関係している。flat config では次のようにプラグインを設定する。"}],position:$R[12602]={start:$R[12603]={line:106,column:1,offset:4113},end:$R[12604]={line:106,column:83,offset:4195}},type:"paragraph"},$R[12605]={filename:"eslint.config.js js",lang:"js",position:$R[12606]={start:$R[12607]={line:108,column:1,offset:4197},end:$R[12608]={line:129,column:4,offset:4521}},type:"code",value:"// @ts-check\n\nimport qwikPlugin from \"eslint-plugin-qwik\";\n\nexport default [\n\t{\n\t\tfiles: [\"src/**/*.tsx\"],\n\t\tplugins: {\n\t\t\tqwik: qwikPlugin,\n\t\t},\n\t\tlanguageOptions: {\n\t\t\tparserOptions: {\n\t\t\t\tproject: [\"./tsconfig.json\"],\n\t\t\t},\n\t\t},\n\t\trules: {\n\t\t\t...qwikPlugin.configs.recommended.rules,\n\t\t},\n\t}\n];",hast:$R[12609]={type:"root",children:$R[12610]=[$R[12611]={type:"element",tagName:"pre",properties:$R[12612]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[12613]=[$R[12614]={type:"element",tagName:"code",properties:$R[12615]={},children:$R[12616]=[$R[12617]={type:"element",tagName:"span",properties:$R[12618]={class:"line"},children:$R[12619]=[$R[12620]={type:"element",tagName:"span",properties:$R[12621]={style:"color:#758575DD"},children:$R[12622]=[$R[12623]={type:"text",value:"// @ts-check"}]}]},$R[12624]={type:"text",value:"\n"},$R[12625]={type:"element",tagName:"span",properties:$R[12626]={class:"line"},children:$R[12627]=[]},$R[12628]={type:"text",value:"\n"},$R[12629]={type:"element",tagName:"span",properties:$R[12630]={class:"line"},children:$R[12631]=[$R[12632]={type:"element",tagName:"span",properties:$R[12633]={style:"color:#4D9375"},children:$R[12634]=[$R[12635]={type:"text",value:"import"}]},$R[12636]={type:"element",tagName:"span",properties:$R[12637]={style:"color:#BD976A"},children:$R[12638]=[$R[12639]={type:"text",value:" qwikPlugin"}]},$R[12640]={type:"element",tagName:"span",properties:$R[12641]={style:"color:#4D9375"},children:$R[12642]=[$R[12643]={type:"text",value:" from"}]},$R[12644]={type:"element",tagName:"span",properties:$R[12645]={style:"color:#C98A7D77"},children:$R[12646]=[$R[12647]={type:"text",value:" \""}]},$R[12648]={type:"element",tagName:"span",properties:$R[12649]={style:"color:#C98A7D"},children:$R[12650]=[$R[12651]={type:"text",value:"eslint-plugin-qwik"}]},$R[12652]={type:"element",tagName:"span",properties:$R[12653]={style:"color:#C98A7D77"},children:$R[12654]=[$R[12655]={type:"text",value:"\""}]},$R[12656]={type:"element",tagName:"span",properties:$R[12657]={style:"color:#666666"},children:$R[12658]=[$R[12659]={type:"text",value:";"}]}]},$R[12660]={type:"text",value:"\n"},$R[12661]={type:"element",tagName:"span",properties:$R[12662]={class:"line"},children:$R[12663]=[]},$R[12664]={type:"text",value:"\n"},$R[12665]={type:"element",tagName:"span",properties:$R[12666]={class:"line"},children:$R[12667]=[$R[12668]={type:"element",tagName:"span",properties:$R[12669]={style:"color:#4D9375"},children:$R[12670]=[$R[12671]={type:"text",value:"export"}]},$R[12672]={type:"element",tagName:"span",properties:$R[12673]={style:"color:#4D9375"},children:$R[12674]=[$R[12675]={type:"text",value:" default"}]},$R[12676]={type:"element",tagName:"span",properties:$R[12677]={style:"color:#666666"},children:$R[12678]=[$R[12679]={type:"text",value:" ["}]}]},$R[12680]={type:"text",value:"\n"},$R[12681]={type:"element",tagName:"span",properties:$R[12682]={class:"line"},children:$R[12683]=[$R[12684]={type:"element",tagName:"span",properties:$R[12685]={style:"color:#666666"},children:$R[12686]=[$R[12687]={type:"text",value:"\t{"}]}]},$R[12688]={type:"text",value:"\n"},$R[12689]={type:"element",tagName:"span",properties:$R[12690]={class:"line"},children:$R[12691]=[$R[12692]={type:"element",tagName:"span",properties:$R[12693]={style:"color:#B8A965"},children:$R[12694]=[$R[12695]={type:"text",value:"\t\tfiles"}]},$R[12696]={type:"element",tagName:"span",properties:$R[12697]={style:"color:#666666"},children:$R[12698]=[$R[12699]={type:"text",value:":"}]},$R[12700]={type:"element",tagName:"span",properties:$R[12701]={style:"color:#666666"},children:$R[12702]=[$R[12703]={type:"text",value:" ["}]},$R[12704]={type:"element",tagName:"span",properties:$R[12705]={style:"color:#C98A7D77"},children:$R[12706]=[$R[12707]={type:"text",value:"\""}]},$R[12708]={type:"element",tagName:"span",properties:$R[12709]={style:"color:#C98A7D"},children:$R[12710]=[$R[12711]={type:"text",value:"src/**/*.tsx"}]},$R[12712]={type:"element",tagName:"span",properties:$R[12713]={style:"color:#C98A7D77"},children:$R[12714]=[$R[12715]={type:"text",value:"\""}]},$R[12716]={type:"element",tagName:"span",properties:$R[12717]={style:"color:#666666"},children:$R[12718]=[$R[12719]={type:"text",value:"],"}]}]},$R[12720]={type:"text",value:"\n"},$R[12721]={type:"element",tagName:"span",properties:$R[12722]={class:"line"},children:$R[12723]=[$R[12724]={type:"element",tagName:"span",properties:$R[12725]={style:"color:#B8A965"},children:$R[12726]=[$R[12727]={type:"text",value:"\t\tplugins"}]},$R[12728]={type:"element",tagName:"span",properties:$R[12729]={style:"color:#666666"},children:$R[12730]=[$R[12731]={type:"text",value:":"}]},$R[12732]={type:"element",tagName:"span",properties:$R[12733]={style:"color:#666666"},children:$R[12734]=[$R[12735]={type:"text",value:" {"}]}]},$R[12736]={type:"text",value:"\n"},$R[12737]={type:"element",tagName:"span",properties:$R[12738]={class:"line"},children:$R[12739]=[$R[12740]={type:"element",tagName:"span",properties:$R[12741]={style:"color:#B8A965"},children:$R[12742]=[$R[12743]={type:"text",value:"\t\t\tqwik"}]},$R[12744]={type:"element",tagName:"span",properties:$R[12745]={style:"color:#666666"},children:$R[12746]=[$R[12747]={type:"text",value:":"}]},$R[12748]={type:"element",tagName:"span",properties:$R[12749]={style:"color:#BD976A"},children:$R[12750]=[$R[12751]={type:"text",value:" qwikPlugin"}]},$R[12752]={type:"element",tagName:"span",properties:$R[12753]={style:"color:#666666"},children:$R[12754]=[$R[12755]={type:"text",value:","}]}]},$R[12756]={type:"text",value:"\n"},$R[12757]={type:"element",tagName:"span",properties:$R[12758]={class:"line"},children:$R[12759]=[$R[12760]={type:"element",tagName:"span",properties:$R[12761]={style:"color:#666666"},children:$R[12762]=[$R[12763]={type:"text",value:"\t\t},"}]}]},$R[12764]={type:"text",value:"\n"},$R[12765]={type:"element",tagName:"span",properties:$R[12766]={class:"line"},children:$R[12767]=[$R[12768]={type:"element",tagName:"span",properties:$R[12769]={style:"color:#B8A965"},children:$R[12770]=[$R[12771]={type:"text",value:"\t\tlanguageOptions"}]},$R[12772]={type:"element",tagName:"span",properties:$R[12773]={style:"color:#666666"},children:$R[12774]=[$R[12775]={type:"text",value:":"}]},$R[12776]={type:"element",tagName:"span",properties:$R[12777]={style:"color:#666666"},children:$R[12778]=[$R[12779]={type:"text",value:" {"}]}]},$R[12780]={type:"text",value:"\n"},$R[12781]={type:"element",tagName:"span",properties:$R[12782]={class:"line"},children:$R[12783]=[$R[12784]={type:"element",tagName:"span",properties:$R[12785]={style:"color:#B8A965"},children:$R[12786]=[$R[12787]={type:"text",value:"\t\t\tparserOptions"}]},$R[12788]={type:"element",tagName:"span",properties:$R[12789]={style:"color:#666666"},children:$R[12790]=[$R[12791]={type:"text",value:":"}]},$R[12792]={type:"element",tagName:"span",properties:$R[12793]={style:"color:#666666"},children:$R[12794]=[$R[12795]={type:"text",value:" {"}]}]},$R[12796]={type:"text",value:"\n"},$R[12797]={type:"element",tagName:"span",properties:$R[12798]={class:"line"},children:$R[12799]=[$R[12800]={type:"element",tagName:"span",properties:$R[12801]={style:"color:#B8A965"},children:$R[12802]=[$R[12803]={type:"text",value:"\t\t\t\tproject"}]},$R[12804]={type:"element",tagName:"span",properties:$R[12805]={style:"color:#666666"},children:$R[12806]=[$R[12807]={type:"text",value:":"}]},$R[12808]={type:"element",tagName:"span",properties:$R[12809]={style:"color:#666666"},children:$R[12810]=[$R[12811]={type:"text",value:" ["}]},$R[12812]={type:"element",tagName:"span",properties:$R[12813]={style:"color:#C98A7D77"},children:$R[12814]=[$R[12815]={type:"text",value:"\""}]},$R[12816]={type:"element",tagName:"span",properties:$R[12817]={style:"color:#C98A7D"},children:$R[12818]=[$R[12819]={type:"text",value:"./tsconfig.json"}]},$R[12820]={type:"element",tagName:"span",properties:$R[12821]={style:"color:#C98A7D77"},children:$R[12822]=[$R[12823]={type:"text",value:"\""}]},$R[12824]={type:"element",tagName:"span",properties:$R[12825]={style:"color:#666666"},children:$R[12826]=[$R[12827]={type:"text",value:"],"}]}]},$R[12828]={type:"text",value:"\n"},$R[12829]={type:"element",tagName:"span",properties:$R[12830]={class:"line"},children:$R[12831]=[$R[12832]={type:"element",tagName:"span",properties:$R[12833]={style:"color:#666666"},children:$R[12834]=[$R[12835]={type:"text",value:"\t\t\t},"}]}]},$R[12836]={type:"text",value:"\n"},$R[12837]={type:"element",tagName:"span",properties:$R[12838]={class:"line"},children:$R[12839]=[$R[12840]={type:"element",tagName:"span",properties:$R[12841]={style:"color:#666666"},children:$R[12842]=[$R[12843]={type:"text",value:"\t\t},"}]}]},$R[12844]={type:"text",value:"\n"},$R[12845]={type:"element",tagName:"span",properties:$R[12846]={class:"line"},children:$R[12847]=[$R[12848]={type:"element",tagName:"span",properties:$R[12849]={style:"color:#B8A965"},children:$R[12850]=[$R[12851]={type:"text",value:"\t\trules"}]},$R[12852]={type:"element",tagName:"span",properties:$R[12853]={style:"color:#666666"},children:$R[12854]=[$R[12855]={type:"text",value:":"}]},$R[12856]={type:"element",tagName:"span",properties:$R[12857]={style:"color:#666666"},children:$R[12858]=[$R[12859]={type:"text",value:" {"}]}]},$R[12860]={type:"text",value:"\n"},$R[12861]={type:"element",tagName:"span",properties:$R[12862]={class:"line"},children:$R[12863]=[$R[12864]={type:"element",tagName:"span",properties:$R[12865]={style:"color:#666666"},children:$R[12866]=[$R[12867]={type:"text",value:"\t\t\t..."}]},$R[12868]={type:"element",tagName:"span",properties:$R[12869]={style:"color:#BD976A"},children:$R[12870]=[$R[12871]={type:"text",value:"qwikPlugin"}]},$R[12872]={type:"element",tagName:"span",properties:$R[12873]={style:"color:#666666"},children:$R[12874]=[$R[12875]={type:"text",value:"."}]},$R[12876]={type:"element",tagName:"span",properties:$R[12877]={style:"color:#BD976A"},children:$R[12878]=[$R[12879]={type:"text",value:"configs"}]},$R[12880]={type:"element",tagName:"span",properties:$R[12881]={style:"color:#666666"},children:$R[12882]=[$R[12883]={type:"text",value:"."}]},$R[12884]={type:"element",tagName:"span",properties:$R[12885]={style:"color:#BD976A"},children:$R[12886]=[$R[12887]={type:"text",value:"recommended"}]},$R[12888]={type:"element",tagName:"span",properties:$R[12889]={style:"color:#666666"},children:$R[12890]=[$R[12891]={type:"text",value:"."}]},$R[12892]={type:"element",tagName:"span",properties:$R[12893]={style:"color:#BD976A"},children:$R[12894]=[$R[12895]={type:"text",value:"rules"}]},$R[12896]={type:"element",tagName:"span",properties:$R[12897]={style:"color:#666666"},children:$R[12898]=[$R[12899]={type:"text",value:","}]}]},$R[12900]={type:"text",value:"\n"},$R[12901]={type:"element",tagName:"span",properties:$R[12902]={class:"line"},children:$R[12903]=[$R[12904]={type:"element",tagName:"span",properties:$R[12905]={style:"color:#666666"},children:$R[12906]=[$R[12907]={type:"text",value:"\t\t},"}]}]},$R[12908]={type:"text",value:"\n"},$R[12909]={type:"element",tagName:"span",properties:$R[12910]={class:"line"},children:$R[12911]=[$R[12912]={type:"element",tagName:"span",properties:$R[12913]={style:"color:#666666"},children:$R[12914]=[$R[12915]={type:"text",value:"\t}"}]}]},$R[12916]={type:"text",value:"\n"},$R[12917]={type:"element",tagName:"span",properties:$R[12918]={class:"line"},children:$R[12919]=[$R[12920]={type:"element",tagName:"span",properties:$R[12921]={style:"color:#666666"},children:$R[12922]=[$R[12923]={type:"text",value:"];"}]}]}]}]}]}},$R[12924]={children:$R[12925]=[$R[12926]={position:$R[12927]={start:$R[12928]={line:131,column:1,offset:4523},end:$R[12929]={line:131,column:11,offset:4533}},type:"text",value:"注目してほしいのは "},$R[12930]={position:$R[12931]={start:$R[12932]={line:131,column:11,offset:4533},end:$R[12933]={line:131,column:20,offset:4542}},type:"inlineCode",value:"plugins"},$R[12934]={position:$R[12935]={start:$R[12936]={line:131,column:20,offset:4542},end:$R[12937]={line:131,column:76,offset:4598}},type:"text",value:" の部分である。ここで各ユーザーがプラグインのプレフィックスを設定している。つまり以下のような設定が可能である。"}],position:$R[12938]={start:$R[12939]={line:131,column:1,offset:4523},end:$R[12940]={line:131,column:76,offset:4598}},type:"paragraph"},$R[12941]={filename:"eslint.config.js js",lang:"js",position:$R[12942]={start:$R[12943]={line:133,column:1,offset:4600},end:$R[12944]={line:165,column:4,offset:5141}},type:"code",value:"// @ts-check\n\nimport reactHooks from \"eslint-plugin-react-hooks\";\nimport globals from \"globals\";\n\nexport default [\n\t// ... some settings\n\n\t{\n\t\tfiles: [\"**/*.{js,jsx,mjs,cjs,ts,tsx}\"],\n\t\tplugins: {\n\t\t\tr: reactHooks,\n\t\t},\n\t\tlanguageOptions: {\n\t\t\tparserOptions: {\n\t\t\t\tecmaFeatures: {\n\t\t\t\t\tjsx: true,\n\t\t\t\t},\n\t\t\t},\n\t\t\tglobals: {\n\t\t\t\t...globals.browser,\n\t\t\t},\n\t\t},\n\t\trules: {\n\t\t\t// ... any rules you want\n\t\t\t\"r/exhaustive-deps\": \"error\",\n\t\t\t\"r/rules-of-hooks\": \"error\",\n\t\t},\n\t\t// ... others are omitted for brevity\n\t}\n];",hast:$R[12945]={type:"root",children:$R[12946]=[$R[12947]={type:"element",tagName:"pre",properties:$R[12948]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[12949]=[$R[12950]={type:"element",tagName:"code",properties:$R[12951]={},children:$R[12952]=[$R[12953]={type:"element",tagName:"span",properties:$R[12954]={class:"line"},children:$R[12955]=[$R[12956]={type:"element",tagName:"span",properties:$R[12957]={style:"color:#758575DD"},children:$R[12958]=[$R[12959]={type:"text",value:"// @ts-check"}]}]},$R[12960]={type:"text",value:"\n"},$R[12961]={type:"element",tagName:"span",properties:$R[12962]={class:"line"},children:$R[12963]=[]},$R[12964]={type:"text",value:"\n"},$R[12965]={type:"element",tagName:"span",properties:$R[12966]={class:"line"},children:$R[12967]=[$R[12968]={type:"element",tagName:"span",properties:$R[12969]={style:"color:#4D9375"},children:$R[12970]=[$R[12971]={type:"text",value:"import"}]},$R[12972]={type:"element",tagName:"span",properties:$R[12973]={style:"color:#BD976A"},children:$R[12974]=[$R[12975]={type:"text",value:" reactHooks"}]},$R[12976]={type:"element",tagName:"span",properties:$R[12977]={style:"color:#4D9375"},children:$R[12978]=[$R[12979]={type:"text",value:" from"}]},$R[12980]={type:"element",tagName:"span",properties:$R[12981]={style:"color:#C98A7D77"},children:$R[12982]=[$R[12983]={type:"text",value:" \""}]},$R[12984]={type:"element",tagName:"span",properties:$R[12985]={style:"color:#C98A7D"},children:$R[12986]=[$R[12987]={type:"text",value:"eslint-plugin-react-hooks"}]},$R[12988]={type:"element",tagName:"span",properties:$R[12989]={style:"color:#C98A7D77"},children:$R[12990]=[$R[12991]={type:"text",value:"\""}]},$R[12992]={type:"element",tagName:"span",properties:$R[12993]={style:"color:#666666"},children:$R[12994]=[$R[12995]={type:"text",value:";"}]}]},$R[12996]={type:"text",value:"\n"},$R[12997]={type:"element",tagName:"span",properties:$R[12998]={class:"line"},children:$R[12999]=[$R[13000]={type:"element",tagName:"span",properties:$R[13001]={style:"color:#4D9375"},children:$R[13002]=[$R[13003]={type:"text",value:"import"}]},$R[13004]={type:"element",tagName:"span",properties:$R[13005]={style:"color:#BD976A"},children:$R[13006]=[$R[13007]={type:"text",value:" globals"}]},$R[13008]={type:"element",tagName:"span",properties:$R[13009]={style:"color:#4D9375"},children:$R[13010]=[$R[13011]={type:"text",value:" from"}]},$R[13012]={type:"element",tagName:"span",properties:$R[13013]={style:"color:#C98A7D77"},children:$R[13014]=[$R[13015]={type:"text",value:" \""}]},$R[13016]={type:"element",tagName:"span",properties:$R[13017]={style:"color:#C98A7D"},children:$R[13018]=[$R[13019]={type:"text",value:"globals"}]},$R[13020]={type:"element",tagName:"span",properties:$R[13021]={style:"color:#C98A7D77"},children:$R[13022]=[$R[13023]={type:"text",value:"\""}]},$R[13024]={type:"element",tagName:"span",properties:$R[13025]={style:"color:#666666"},children:$R[13026]=[$R[13027]={type:"text",value:";"}]}]},$R[13028]={type:"text",value:"\n"},$R[13029]={type:"element",tagName:"span",properties:$R[13030]={class:"line"},children:$R[13031]=[]},$R[13032]={type:"text",value:"\n"},$R[13033]={type:"element",tagName:"span",properties:$R[13034]={class:"line"},children:$R[13035]=[$R[13036]={type:"element",tagName:"span",properties:$R[13037]={style:"color:#4D9375"},children:$R[13038]=[$R[13039]={type:"text",value:"export"}]},$R[13040]={type:"element",tagName:"span",properties:$R[13041]={style:"color:#4D9375"},children:$R[13042]=[$R[13043]={type:"text",value:" default"}]},$R[13044]={type:"element",tagName:"span",properties:$R[13045]={style:"color:#666666"},children:$R[13046]=[$R[13047]={type:"text",value:" ["}]}]},$R[13048]={type:"text",value:"\n"},$R[13049]={type:"element",tagName:"span",properties:$R[13050]={class:"line"},children:$R[13051]=[$R[13052]={type:"element",tagName:"span",properties:$R[13053]={style:"color:#758575DD"},children:$R[13054]=[$R[13055]={type:"text",value:"\t// ... some settings"}]}]},$R[13056]={type:"text",value:"\n"},$R[13057]={type:"element",tagName:"span",properties:$R[13058]={class:"line"},children:$R[13059]=[]},$R[13060]={type:"text",value:"\n"},$R[13061]={type:"element",tagName:"span",properties:$R[13062]={class:"line"},children:$R[13063]=[$R[13064]={type:"element",tagName:"span",properties:$R[13065]={style:"color:#666666"},children:$R[13066]=[$R[13067]={type:"text",value:"\t{"}]}]},$R[13068]={type:"text",value:"\n"},$R[13069]={type:"element",tagName:"span",properties:$R[13070]={class:"line"},children:$R[13071]=[$R[13072]={type:"element",tagName:"span",properties:$R[13073]={style:"color:#B8A965"},children:$R[13074]=[$R[13075]={type:"text",value:"\t\tfiles"}]},$R[13076]={type:"element",tagName:"span",properties:$R[13077]={style:"color:#666666"},children:$R[13078]=[$R[13079]={type:"text",value:":"}]},$R[13080]={type:"element",tagName:"span",properties:$R[13081]={style:"color:#666666"},children:$R[13082]=[$R[13083]={type:"text",value:" ["}]},$R[13084]={type:"element",tagName:"span",properties:$R[13085]={style:"color:#C98A7D77"},children:$R[13086]=[$R[13087]={type:"text",value:"\""}]},$R[13088]={type:"element",tagName:"span",properties:$R[13089]={style:"color:#C98A7D"},children:$R[13090]=[$R[13091]={type:"text",value:"**/*.{js,jsx,mjs,cjs,ts,tsx}"}]},$R[13092]={type:"element",tagName:"span",properties:$R[13093]={style:"color:#C98A7D77"},children:$R[13094]=[$R[13095]={type:"text",value:"\""}]},$R[13096]={type:"element",tagName:"span",properties:$R[13097]={style:"color:#666666"},children:$R[13098]=[$R[13099]={type:"text",value:"],"}]}]},$R[13100]={type:"text",value:"\n"},$R[13101]={type:"element",tagName:"span",properties:$R[13102]={class:"line"},children:$R[13103]=[$R[13104]={type:"element",tagName:"span",properties:$R[13105]={style:"color:#B8A965"},children:$R[13106]=[$R[13107]={type:"text",value:"\t\tplugins"}]},$R[13108]={type:"element",tagName:"span",properties:$R[13109]={style:"color:#666666"},children:$R[13110]=[$R[13111]={type:"text",value:":"}]},$R[13112]={type:"element",tagName:"span",properties:$R[13113]={style:"color:#666666"},children:$R[13114]=[$R[13115]={type:"text",value:" {"}]}]},$R[13116]={type:"text",value:"\n"},$R[13117]={type:"element",tagName:"span",properties:$R[13118]={class:"line"},children:$R[13119]=[$R[13120]={type:"element",tagName:"span",properties:$R[13121]={style:"color:#B8A965"},children:$R[13122]=[$R[13123]={type:"text",value:"\t\t\tr"}]},$R[13124]={type:"element",tagName:"span",properties:$R[13125]={style:"color:#666666"},children:$R[13126]=[$R[13127]={type:"text",value:":"}]},$R[13128]={type:"element",tagName:"span",properties:$R[13129]={style:"color:#BD976A"},children:$R[13130]=[$R[13131]={type:"text",value:" reactHooks"}]},$R[13132]={type:"element",tagName:"span",properties:$R[13133]={style:"color:#666666"},children:$R[13134]=[$R[13135]={type:"text",value:","}]}]},$R[13136]={type:"text",value:"\n"},$R[13137]={type:"element",tagName:"span",properties:$R[13138]={class:"line"},children:$R[13139]=[$R[13140]={type:"element",tagName:"span",properties:$R[13141]={style:"color:#666666"},children:$R[13142]=[$R[13143]={type:"text",value:"\t\t},"}]}]},$R[13144]={type:"text",value:"\n"},$R[13145]={type:"element",tagName:"span",properties:$R[13146]={class:"line"},children:$R[13147]=[$R[13148]={type:"element",tagName:"span",properties:$R[13149]={style:"color:#B8A965"},children:$R[13150]=[$R[13151]={type:"text",value:"\t\tlanguageOptions"}]},$R[13152]={type:"element",tagName:"span",properties:$R[13153]={style:"color:#666666"},children:$R[13154]=[$R[13155]={type:"text",value:":"}]},$R[13156]={type:"element",tagName:"span",properties:$R[13157]={style:"color:#666666"},children:$R[13158]=[$R[13159]={type:"text",value:" {"}]}]},$R[13160]={type:"text",value:"\n"},$R[13161]={type:"element",tagName:"span",properties:$R[13162]={class:"line"},children:$R[13163]=[$R[13164]={type:"element",tagName:"span",properties:$R[13165]={style:"color:#B8A965"},children:$R[13166]=[$R[13167]={type:"text",value:"\t\t\tparserOptions"}]},$R[13168]={type:"element",tagName:"span",properties:$R[13169]={style:"color:#666666"},children:$R[13170]=[$R[13171]={type:"text",value:":"}]},$R[13172]={type:"element",tagName:"span",properties:$R[13173]={style:"color:#666666"},children:$R[13174]=[$R[13175]={type:"text",value:" {"}]}]},$R[13176]={type:"text",value:"\n"},$R[13177]={type:"element",tagName:"span",properties:$R[13178]={class:"line"},children:$R[13179]=[$R[13180]={type:"element",tagName:"span",properties:$R[13181]={style:"color:#B8A965"},children:$R[13182]=[$R[13183]={type:"text",value:"\t\t\t\tecmaFeatures"}]},$R[13184]={type:"element",tagName:"span",properties:$R[13185]={style:"color:#666666"},children:$R[13186]=[$R[13187]={type:"text",value:":"}]},$R[13188]={type:"element",tagName:"span",properties:$R[13189]={style:"color:#666666"},children:$R[13190]=[$R[13191]={type:"text",value:" {"}]}]},$R[13192]={type:"text",value:"\n"},$R[13193]={type:"element",tagName:"span",properties:$R[13194]={class:"line"},children:$R[13195]=[$R[13196]={type:"element",tagName:"span",properties:$R[13197]={style:"color:#B8A965"},children:$R[13198]=[$R[13199]={type:"text",value:"\t\t\t\t\tjsx"}]},$R[13200]={type:"element",tagName:"span",properties:$R[13201]={style:"color:#666666"},children:$R[13202]=[$R[13203]={type:"text",value:":"}]},$R[13204]={type:"element",tagName:"span",properties:$R[13205]={style:"color:#4D9375"},children:$R[13206]=[$R[13207]={type:"text",value:" true"}]},$R[13208]={type:"element",tagName:"span",properties:$R[13209]={style:"color:#666666"},children:$R[13210]=[$R[13211]={type:"text",value:","}]}]},$R[13212]={type:"text",value:"\n"},$R[13213]={type:"element",tagName:"span",properties:$R[13214]={class:"line"},children:$R[13215]=[$R[13216]={type:"element",tagName:"span",properties:$R[13217]={style:"color:#666666"},children:$R[13218]=[$R[13219]={type:"text",value:"\t\t\t\t},"}]}]},$R[13220]={type:"text",value:"\n"},$R[13221]={type:"element",tagName:"span",properties:$R[13222]={class:"line"},children:$R[13223]=[$R[13224]={type:"element",tagName:"span",properties:$R[13225]={style:"color:#666666"},children:$R[13226]=[$R[13227]={type:"text",value:"\t\t\t},"}]}]},$R[13228]={type:"text",value:"\n"},$R[13229]={type:"element",tagName:"span",properties:$R[13230]={class:"line"},children:$R[13231]=[$R[13232]={type:"element",tagName:"span",properties:$R[13233]={style:"color:#B8A965"},children:$R[13234]=[$R[13235]={type:"text",value:"\t\t\tglobals"}]},$R[13236]={type:"element",tagName:"span",properties:$R[13237]={style:"color:#666666"},children:$R[13238]=[$R[13239]={type:"text",value:":"}]},$R[13240]={type:"element",tagName:"span",properties:$R[13241]={style:"color:#666666"},children:$R[13242]=[$R[13243]={type:"text",value:" {"}]}]},$R[13244]={type:"text",value:"\n"},$R[13245]={type:"element",tagName:"span",properties:$R[13246]={class:"line"},children:$R[13247]=[$R[13248]={type:"element",tagName:"span",properties:$R[13249]={style:"color:#666666"},children:$R[13250]=[$R[13251]={type:"text",value:"\t\t\t\t..."}]},$R[13252]={type:"element",tagName:"span",properties:$R[13253]={style:"color:#BD976A"},children:$R[13254]=[$R[13255]={type:"text",value:"globals"}]},$R[13256]={type:"element",tagName:"span",properties:$R[13257]={style:"color:#666666"},children:$R[13258]=[$R[13259]={type:"text",value:"."}]},$R[13260]={type:"element",tagName:"span",properties:$R[13261]={style:"color:#BD976A"},children:$R[13262]=[$R[13263]={type:"text",value:"browser"}]},$R[13264]={type:"element",tagName:"span",properties:$R[13265]={style:"color:#666666"},children:$R[13266]=[$R[13267]={type:"text",value:","}]}]},$R[13268]={type:"text",value:"\n"},$R[13269]={type:"element",tagName:"span",properties:$R[13270]={class:"line"},children:$R[13271]=[$R[13272]={type:"element",tagName:"span",properties:$R[13273]={style:"color:#666666"},children:$R[13274]=[$R[13275]={type:"text",value:"\t\t\t},"}]}]},$R[13276]={type:"text",value:"\n"},$R[13277]={type:"element",tagName:"span",properties:$R[13278]={class:"line"},children:$R[13279]=[$R[13280]={type:"element",tagName:"span",properties:$R[13281]={style:"color:#666666"},children:$R[13282]=[$R[13283]={type:"text",value:"\t\t},"}]}]},$R[13284]={type:"text",value:"\n"},$R[13285]={type:"element",tagName:"span",properties:$R[13286]={class:"line"},children:$R[13287]=[$R[13288]={type:"element",tagName:"span",properties:$R[13289]={style:"color:#B8A965"},children:$R[13290]=[$R[13291]={type:"text",value:"\t\trules"}]},$R[13292]={type:"element",tagName:"span",properties:$R[13293]={style:"color:#666666"},children:$R[13294]=[$R[13295]={type:"text",value:":"}]},$R[13296]={type:"element",tagName:"span",properties:$R[13297]={style:"color:#666666"},children:$R[13298]=[$R[13299]={type:"text",value:" {"}]}]},$R[13300]={type:"text",value:"\n"},$R[13301]={type:"element",tagName:"span",properties:$R[13302]={class:"line"},children:$R[13303]=[$R[13304]={type:"element",tagName:"span",properties:$R[13305]={style:"color:#758575DD"},children:$R[13306]=[$R[13307]={type:"text",value:"\t\t\t// ... any rules you want"}]}]},$R[13308]={type:"text",value:"\n"},$R[13309]={type:"element",tagName:"span",properties:$R[13310]={class:"line"},children:$R[13311]=[$R[13312]={type:"element",tagName:"span",properties:$R[13313]={style:"color:#C98A7D77"},children:$R[13314]=[$R[13315]={type:"text",value:"\t\t\t\""}]},$R[13316]={type:"element",tagName:"span",properties:$R[13317]={style:"color:#C98A7D"},children:$R[13318]=[$R[13319]={type:"text",value:"r/exhaustive-deps"}]},$R[13320]={type:"element",tagName:"span",properties:$R[13321]={style:"color:#C98A7D77"},children:$R[13322]=[$R[13323]={type:"text",value:"\""}]},$R[13324]={type:"element",tagName:"span",properties:$R[13325]={style:"color:#666666"},children:$R[13326]=[$R[13327]={type:"text",value:":"}]},$R[13328]={type:"element",tagName:"span",properties:$R[13329]={style:"color:#C98A7D77"},children:$R[13330]=[$R[13331]={type:"text",value:" \""}]},$R[13332]={type:"element",tagName:"span",properties:$R[13333]={style:"color:#C98A7D"},children:$R[13334]=[$R[13335]={type:"text",value:"error"}]},$R[13336]={type:"element",tagName:"span",properties:$R[13337]={style:"color:#C98A7D77"},children:$R[13338]=[$R[13339]={type:"text",value:"\""}]},$R[13340]={type:"element",tagName:"span",properties:$R[13341]={style:"color:#666666"},children:$R[13342]=[$R[13343]={type:"text",value:","}]}]},$R[13344]={type:"text",value:"\n"},$R[13345]={type:"element",tagName:"span",properties:$R[13346]={class:"line"},children:$R[13347]=[$R[13348]={type:"element",tagName:"span",properties:$R[13349]={style:"color:#C98A7D77"},children:$R[13350]=[$R[13351]={type:"text",value:"\t\t\t\""}]},$R[13352]={type:"element",tagName:"span",properties:$R[13353]={style:"color:#C98A7D"},children:$R[13354]=[$R[13355]={type:"text",value:"r/rules-of-hooks"}]},$R[13356]={type:"element",tagName:"span",properties:$R[13357]={style:"color:#C98A7D77"},children:$R[13358]=[$R[13359]={type:"text",value:"\""}]},$R[13360]={type:"element",tagName:"span",properties:$R[13361]={style:"color:#666666"},children:$R[13362]=[$R[13363]={type:"text",value:":"}]},$R[13364]={type:"element",tagName:"span",properties:$R[13365]={style:"color:#C98A7D77"},children:$R[13366]=[$R[13367]={type:"text",value:" \""}]},$R[13368]={type:"element",tagName:"span",properties:$R[13369]={style:"color:#C98A7D"},children:$R[13370]=[$R[13371]={type:"text",value:"error"}]},$R[13372]={type:"element",tagName:"span",properties:$R[13373]={style:"color:#C98A7D77"},children:$R[13374]=[$R[13375]={type:"text",value:"\""}]},$R[13376]={type:"element",tagName:"span",properties:$R[13377]={style:"color:#666666"},children:$R[13378]=[$R[13379]={type:"text",value:","}]}]},$R[13380]={type:"text",value:"\n"},$R[13381]={type:"element",tagName:"span",properties:$R[13382]={class:"line"},children:$R[13383]=[$R[13384]={type:"element",tagName:"span",properties:$R[13385]={style:"color:#666666"},children:$R[13386]=[$R[13387]={type:"text",value:"\t\t},"}]}]},$R[13388]={type:"text",value:"\n"},$R[13389]={type:"element",tagName:"span",properties:$R[13390]={class:"line"},children:$R[13391]=[$R[13392]={type:"element",tagName:"span",properties:$R[13393]={style:"color:#758575DD"},children:$R[13394]=[$R[13395]={type:"text",value:"\t\t// ... others are omitted for brevity"}]}]},$R[13396]={type:"text",value:"\n"},$R[13397]={type:"element",tagName:"span",properties:$R[13398]={class:"line"},children:$R[13399]=[$R[13400]={type:"element",tagName:"span",properties:$R[13401]={style:"color:#666666"},children:$R[13402]=[$R[13403]={type:"text",value:"\t}"}]}]},$R[13404]={type:"text",value:"\n"},$R[13405]={type:"element",tagName:"span",properties:$R[13406]={class:"line"},children:$R[13407]=[$R[13408]={type:"element",tagName:"span",properties:$R[13409]={style:"color:#666666"},children:$R[13410]=[$R[13411]={type:"text",value:"];"}]}]}]}]}]}},$R[13412]={children:$R[13413]=[$R[13414]={position:$R[13415]={start:$R[13416]={line:167,column:1,offset:5143},end:$R[13417]={line:167,column:62,offset:5204}},type:"text",value:"上のような設定をしたプロジェクトで React Copiler を使おうとするとある問題が発生する。前項にて述べたように、"},$R[13418]={position:$R[13419]={start:$R[13420]={line:167,column:62,offset:5204},end:$R[13421]={line:167,column:86,offset:5228}},type:"inlineCode",value:"eslintSuppressionRules"},$R[13422]={position:$R[13423]={start:$R[13424]={line:167,column:86,offset:5228},end:$R[13425]={line:167,column:95,offset:5237}},type:"text",value:" はデフォルトで "},$R[13426]={position:$R[13427]={start:$R[13428]={line:167,column:95,offset:5237},end:$R[13429]={line:167,column:124,offset:5266}},type:"inlineCode",value:"react-hooks/exhaustive-deps"},$R[13430]={position:$R[13431]={start:$R[13432]={line:167,column:124,offset:5266},end:$R[13433]={line:167,column:127,offset:5269}},type:"text",value:" と "},$R[13434]={position:$R[13435]={start:$R[13436]={line:167,column:127,offset:5269},end:$R[13437]={line:167,column:155,offset:5297}},type:"inlineCode",value:"react-hooks/rules-of-hooks"},$R[13438]={position:$R[13439]={start:$R[13440]={line:167,column:155,offset:5297},end:$R[13441]={line:167,column:183,offset:5325}},type:"text",value:" が登録されている。ユーザーは ESLint の設定で "},$R[13442]={position:$R[13443]={start:$R[13444]={line:167,column:183,offset:5325},end:$R[13445]={line:167,column:195,offset:5337}},type:"inlineCode",value:"reac-hooks"},$R[13446]={position:$R[13447]={start:$R[13448]={line:167,column:195,offset:5337},end:$R[13449]={line:167,column:211,offset:5353}},type:"text",value:" プラグインのプレフィックスを "},$R[13450]={position:$R[13451]={start:$R[13452]={line:167,column:211,offset:5353},end:$R[13453]={line:167,column:214,offset:5356}},type:"inlineCode",value:"r"},$R[13454]={position:$R[13455]={start:$R[13456]={line:167,column:214,offset:5356},end:$R[13457]={line:167,column:268,offset:5410}},type:"text",value:" に設定している。するとユーザーはあるタイミングで eslint を無効化させる時に次のようなコードを書く。"}],position:$R[13458]={start:$R[13459]={line:167,column:1,offset:5143},end:$R[13460]={line:167,column:268,offset:5410}},type:"paragraph"},$R[13461]={filename:"sample.tsx tsx",lang:"tsx",position:$R[13462]={start:$R[13463]={line:169,column:1,offset:5412},end:$R[13464]={line:174,column:4,offset:5519}},type:"code",value:"// eslint-disable-next-line r/exhaustive-deps\nuseEffect(() => {\n\t// some code\n}, []);",hast:$R[13465]={type:"root",children:$R[13466]=[$R[13467]={type:"element",tagName:"pre",properties:$R[13468]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[13469]=[$R[13470]={type:"element",tagName:"code",properties:$R[13471]={},children:$R[13472]=[$R[13473]={type:"element",tagName:"span",properties:$R[13474]={class:"line"},children:$R[13475]=[$R[13476]={type:"element",tagName:"span",properties:$R[13477]={style:"color:#758575DD"},children:$R[13478]=[$R[13479]={type:"text",value:"// eslint-disable-next-line r/exhaustive-deps"}]}]},$R[13480]={type:"text",value:"\n"},$R[13481]={type:"element",tagName:"span",properties:$R[13482]={class:"line"},children:$R[13483]=[$R[13484]={type:"element",tagName:"span",properties:$R[13485]={style:"color:#80A665"},children:$R[13486]=[$R[13487]={type:"text",value:"useEffect"}]},$R[13488]={type:"element",tagName:"span",properties:$R[13489]={style:"color:#666666"},children:$R[13490]=[$R[13491]={type:"text",value:"(()"}]},$R[13492]={type:"element",tagName:"span",properties:$R[13493]={style:"color:#666666"},children:$R[13494]=[$R[13495]={type:"text",value:" =>"}]},$R[13496]={type:"element",tagName:"span",properties:$R[13497]={style:"color:#666666"},children:$R[13498]=[$R[13499]={type:"text",value:" {"}]}]},$R[13500]={type:"text",value:"\n"},$R[13501]={type:"element",tagName:"span",properties:$R[13502]={class:"line"},children:$R[13503]=[$R[13504]={type:"element",tagName:"span",properties:$R[13505]={style:"color:#758575DD"},children:$R[13506]=[$R[13507]={type:"text",value:"\t// some code"}]}]},$R[13508]={type:"text",value:"\n"},$R[13509]={type:"element",tagName:"span",properties:$R[13510]={class:"line"},children:$R[13511]=[$R[13512]={type:"element",tagName:"span",properties:$R[13513]={style:"color:#666666"},children:$R[13514]=[$R[13515]={type:"text",value:"},"}]},$R[13516]={type:"element",tagName:"span",properties:$R[13517]={style:"color:#666666"},children:$R[13518]=[$R[13519]={type:"text",value:" []);"}]}]}]}]}]}},$R[13520]={children:$R[13521]=[$R[13522]={position:$R[13523]={start:$R[13524]={line:176,column:1,offset:5521},end:$R[13525]={line:176,column:97,offset:5617}},type:"text",value:"このコードを含んだアプリケーションを React Compiler に食べさせると、本来は例外をスローされるべきコードがコンパイルされてしまい、挙動が変わってしまう恐れがある。プレイグラウンド"},$R[13526]={footnoteIndex:2,position:$R[13527]={start:$R[13528]={line:176,column:97,offset:5617},end:$R[13529]={line:176,column:101,offset:5621}},referenceIndex:1,type:"footnoteReference"},$R[13530]={position:$R[13531]={start:$R[13532]={line:176,column:101,offset:5621},end:$R[13533]={line:176,column:208,offset:5728}},type:"text",value:"で試してみると一目瞭然だが、React Compiler はかなり元のコードを変更して最適化を行う。もちろん React のルールに則ったコードであれば正しく動作するが、そうでないコードは正しく動作する保証がない。"}],position:$R[13534]={start:$R[13535]={line:176,column:1,offset:5521},end:$R[13536]={line:176,column:208,offset:5728}},type:"paragraph"},$R[13537]={children:$R[13538]=[$R[13539]={position:$R[13540]={start:$R[13541]={line:180,column:1,offset:5767},end:$R[13542]={line:180,column:14,offset:5780}},type:"text",value:"この問題を解決するために "},$R[13543]={position:$R[13544]={start:$R[13545]={line:180,column:14,offset:5780},end:$R[13546]={line:180,column:38,offset:5804}},type:"inlineCode",value:"eslintSuppressionRules"},$R[13547]={position:$R[13548]={start:$R[13549]={line:180,column:38,offset:5804},end:$R[13550]={line:180,column:61,offset:5827}},type:"text",value:" がある。ユーザーは次のように設定することで、"},$R[13551]={position:$R[13552]={start:$R[13553]={line:180,column:61,offset:5827},end:$R[13554]={line:180,column:85,offset:5851}},type:"inlineCode",value:"eslintSuppressionRules"},$R[13555]={position:$R[13556]={start:$R[13557]={line:180,column:85,offset:5851},end:$R[13558]={line:180,column:88,offset:5854}},type:"text",value:" に "},$R[13559]={position:$R[13560]={start:$R[13561]={line:180,column:88,offset:5854},end:$R[13562]={line:180,column:107,offset:5873}},type:"inlineCode",value:"r/exhaustive-deps"},$R[13563]={position:$R[13564]={start:$R[13565]={line:180,column:107,offset:5873},end:$R[13566]={line:180,column:110,offset:5876}},type:"text",value:" と "},$R[13567]={position:$R[13568]={start:$R[13569]={line:180,column:110,offset:5876},end:$R[13570]={line:180,column:128,offset:5894}},type:"inlineCode",value:"r/rules-of-hooks"},$R[13571]={position:$R[13572]={start:$R[13573]={line:180,column:128,offset:5894},end:$R[13574]={line:180,column:150,offset:5916}},type:"text",value:" を登録することで、上記の問題を解決できる。"}],position:$R[13575]={start:$R[13576]={line:180,column:1,offset:5767},end:$R[13577]={line:180,column:150,offset:5916}},type:"paragraph"},$R[13578]={filename:"vite.config.ts ts",lang:"ts",position:$R[13579]={start:$R[13580]={line:182,column:1,offset:5918},end:$R[13581]={line:204,column:4,offset:6271}},type:"code",value:"import { defineConfig } from \"vite\";\n\nexport default defineConfig(() => {\n\treturn {\n\t\tplugins: [\n\t\t\treact({\n\t\t\t\tbabel: {\n\t\t\t\t\tplugins: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\"babel-plugin-react-compiler\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\teslintSuppressionRules: [\"r/exhaustive-deps\", \"r/rules-of-hooks\"],\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t}),\n\t\t],\n\t\t// ...\n\t};\n});",hast:$R[13582]={type:"root",children:$R[13583]=[$R[13584]={type:"element",tagName:"pre",properties:$R[13585]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[13586]=[$R[13587]={type:"element",tagName:"code",properties:$R[13588]={},children:$R[13589]=[$R[13590]={type:"element",tagName:"span",properties:$R[13591]={class:"line"},children:$R[13592]=[$R[13593]={type:"element",tagName:"span",properties:$R[13594]={style:"color:#4D9375"},children:$R[13595]=[$R[13596]={type:"text",value:"import"}]},$R[13597]={type:"element",tagName:"span",properties:$R[13598]={style:"color:#666666"},children:$R[13599]=[$R[13600]={type:"text",value:" {"}]},$R[13601]={type:"element",tagName:"span",properties:$R[13602]={style:"color:#BD976A"},children:$R[13603]=[$R[13604]={type:"text",value:" defineConfig"}]},$R[13605]={type:"element",tagName:"span",properties:$R[13606]={style:"color:#666666"},children:$R[13607]=[$R[13608]={type:"text",value:" }"}]},$R[13609]={type:"element",tagName:"span",properties:$R[13610]={style:"color:#4D9375"},children:$R[13611]=[$R[13612]={type:"text",value:" from"}]},$R[13613]={type:"element",tagName:"span",properties:$R[13614]={style:"color:#C98A7D77"},children:$R[13615]=[$R[13616]={type:"text",value:" \""}]},$R[13617]={type:"element",tagName:"span",properties:$R[13618]={style:"color:#C98A7D"},children:$R[13619]=[$R[13620]={type:"text",value:"vite"}]},$R[13621]={type:"element",tagName:"span",properties:$R[13622]={style:"color:#C98A7D77"},children:$R[13623]=[$R[13624]={type:"text",value:"\""}]},$R[13625]={type:"element",tagName:"span",properties:$R[13626]={style:"color:#666666"},children:$R[13627]=[$R[13628]={type:"text",value:";"}]}]},$R[13629]={type:"text",value:"\n"},$R[13630]={type:"element",tagName:"span",properties:$R[13631]={class:"line"},children:$R[13632]=[]},$R[13633]={type:"text",value:"\n"},$R[13634]={type:"element",tagName:"span",properties:$R[13635]={class:"line"},children:$R[13636]=[$R[13637]={type:"element",tagName:"span",properties:$R[13638]={style:"color:#4D9375"},children:$R[13639]=[$R[13640]={type:"text",value:"export"}]},$R[13641]={type:"element",tagName:"span",properties:$R[13642]={style:"color:#4D9375"},children:$R[13643]=[$R[13644]={type:"text",value:" default"}]},$R[13645]={type:"element",tagName:"span",properties:$R[13646]={style:"color:#80A665"},children:$R[13647]=[$R[13648]={type:"text",value:" defineConfig"}]},$R[13649]={type:"element",tagName:"span",properties:$R[13650]={style:"color:#666666"},children:$R[13651]=[$R[13652]={type:"text",value:"(()"}]},$R[13653]={type:"element",tagName:"span",properties:$R[13654]={style:"color:#666666"},children:$R[13655]=[$R[13656]={type:"text",value:" =>"}]},$R[13657]={type:"element",tagName:"span",properties:$R[13658]={style:"color:#666666"},children:$R[13659]=[$R[13660]={type:"text",value:" {"}]}]},$R[13661]={type:"text",value:"\n"},$R[13662]={type:"element",tagName:"span",properties:$R[13663]={class:"line"},children:$R[13664]=[$R[13665]={type:"element",tagName:"span",properties:$R[13666]={style:"color:#4D9375"},children:$R[13667]=[$R[13668]={type:"text",value:"\treturn"}]},$R[13669]={type:"element",tagName:"span",properties:$R[13670]={style:"color:#666666"},children:$R[13671]=[$R[13672]={type:"text",value:" {"}]}]},$R[13673]={type:"text",value:"\n"},$R[13674]={type:"element",tagName:"span",properties:$R[13675]={class:"line"},children:$R[13676]=[$R[13677]={type:"element",tagName:"span",properties:$R[13678]={style:"color:#B8A965"},children:$R[13679]=[$R[13680]={type:"text",value:"\t\tplugins"}]},$R[13681]={type:"element",tagName:"span",properties:$R[13682]={style:"color:#666666"},children:$R[13683]=[$R[13684]={type:"text",value:": ["}]}]},$R[13685]={type:"text",value:"\n"},$R[13686]={type:"element",tagName:"span",properties:$R[13687]={class:"line"},children:$R[13688]=[$R[13689]={type:"element",tagName:"span",properties:$R[13690]={style:"color:#80A665"},children:$R[13691]=[$R[13692]={type:"text",value:"\t\t\treact"}]},$R[13693]={type:"element",tagName:"span",properties:$R[13694]={style:"color:#666666"},children:$R[13695]=[$R[13696]={type:"text",value:"({"}]}]},$R[13697]={type:"text",value:"\n"},$R[13698]={type:"element",tagName:"span",properties:$R[13699]={class:"line"},children:$R[13700]=[$R[13701]={type:"element",tagName:"span",properties:$R[13702]={style:"color:#B8A965"},children:$R[13703]=[$R[13704]={type:"text",value:"\t\t\t\tbabel"}]},$R[13705]={type:"element",tagName:"span",properties:$R[13706]={style:"color:#666666"},children:$R[13707]=[$R[13708]={type:"text",value:": {"}]}]},$R[13709]={type:"text",value:"\n"},$R[13710]={type:"element",tagName:"span",properties:$R[13711]={class:"line"},children:$R[13712]=[$R[13713]={type:"element",tagName:"span",properties:$R[13714]={style:"color:#B8A965"},children:$R[13715]=[$R[13716]={type:"text",value:"\t\t\t\t\tplugins"}]},$R[13717]={type:"element",tagName:"span",properties:$R[13718]={style:"color:#666666"},children:$R[13719]=[$R[13720]={type:"text",value:": ["}]}]},$R[13721]={type:"text",value:"\n"},$R[13722]={type:"element",tagName:"span",properties:$R[13723]={class:"line"},children:$R[13724]=[$R[13725]={type:"element",tagName:"span",properties:$R[13726]={style:"color:#666666"},children:$R[13727]=[$R[13728]={type:"text",value:"\t\t\t\t\t\t["}]}]},$R[13729]={type:"text",value:"\n"},$R[13730]={type:"element",tagName:"span",properties:$R[13731]={class:"line"},children:$R[13732]=[$R[13733]={type:"element",tagName:"span",properties:$R[13734]={style:"color:#C98A7D77"},children:$R[13735]=[$R[13736]={type:"text",value:"\t\t\t\t\t\t\t\""}]},$R[13737]={type:"element",tagName:"span",properties:$R[13738]={style:"color:#C98A7D"},children:$R[13739]=[$R[13740]={type:"text",value:"babel-plugin-react-compiler"}]},$R[13741]={type:"element",tagName:"span",properties:$R[13742]={style:"color:#C98A7D77"},children:$R[13743]=[$R[13744]={type:"text",value:"\""}]},$R[13745]={type:"element",tagName:"span",properties:$R[13746]={style:"color:#666666"},children:$R[13747]=[$R[13748]={type:"text",value:","}]}]},$R[13749]={type:"text",value:"\n"},$R[13750]={type:"element",tagName:"span",properties:$R[13751]={class:"line"},children:$R[13752]=[$R[13753]={type:"element",tagName:"span",properties:$R[13754]={style:"color:#666666"},children:$R[13755]=[$R[13756]={type:"text",value:"\t\t\t\t\t\t\t{"}]}]},$R[13757]={type:"text",value:"\n"},$R[13758]={type:"element",tagName:"span",properties:$R[13759]={class:"line"},children:$R[13760]=[$R[13761]={type:"element",tagName:"span",properties:$R[13762]={style:"color:#B8A965"},children:$R[13763]=[$R[13764]={type:"text",value:"\t\t\t\t\t\t\t\teslintSuppressionRules"}]},$R[13765]={type:"element",tagName:"span",properties:$R[13766]={style:"color:#666666"},children:$R[13767]=[$R[13768]={type:"text",value:": ["}]},$R[13769]={type:"element",tagName:"span",properties:$R[13770]={style:"color:#C98A7D77"},children:$R[13771]=[$R[13772]={type:"text",value:"\""}]},$R[13773]={type:"element",tagName:"span",properties:$R[13774]={style:"color:#C98A7D"},children:$R[13775]=[$R[13776]={type:"text",value:"r/exhaustive-deps"}]},$R[13777]={type:"element",tagName:"span",properties:$R[13778]={style:"color:#C98A7D77"},children:$R[13779]=[$R[13780]={type:"text",value:"\""}]},$R[13781]={type:"element",tagName:"span",properties:$R[13782]={style:"color:#666666"},children:$R[13783]=[$R[13784]={type:"text",value:", "}]},$R[13785]={type:"element",tagName:"span",properties:$R[13786]={style:"color:#C98A7D77"},children:$R[13787]=[$R[13788]={type:"text",value:"\""}]},$R[13789]={type:"element",tagName:"span",properties:$R[13790]={style:"color:#C98A7D"},children:$R[13791]=[$R[13792]={type:"text",value:"r/rules-of-hooks"}]},$R[13793]={type:"element",tagName:"span",properties:$R[13794]={style:"color:#C98A7D77"},children:$R[13795]=[$R[13796]={type:"text",value:"\""}]},$R[13797]={type:"element",tagName:"span",properties:$R[13798]={style:"color:#666666"},children:$R[13799]=[$R[13800]={type:"text",value:"],"}]}]},$R[13801]={type:"text",value:"\n"},$R[13802]={type:"element",tagName:"span",properties:$R[13803]={class:"line"},children:$R[13804]=[$R[13805]={type:"element",tagName:"span",properties:$R[13806]={style:"color:#666666"},children:$R[13807]=[$R[13808]={type:"text",value:"\t\t\t\t\t\t\t}"}]}]},$R[13809]={type:"text",value:"\n"},$R[13810]={type:"element",tagName:"span",properties:$R[13811]={class:"line"},children:$R[13812]=[$R[13813]={type:"element",tagName:"span",properties:$R[13814]={style:"color:#666666"},children:$R[13815]=[$R[13816]={type:"text",value:"\t\t\t\t\t\t],"}]}]},$R[13817]={type:"text",value:"\n"},$R[13818]={type:"element",tagName:"span",properties:$R[13819]={class:"line"},children:$R[13820]=[$R[13821]={type:"element",tagName:"span",properties:$R[13822]={style:"color:#666666"},children:$R[13823]=[$R[13824]={type:"text",value:"\t\t\t\t\t],"}]}]},$R[13825]={type:"text",value:"\n"},$R[13826]={type:"element",tagName:"span",properties:$R[13827]={class:"line"},children:$R[13828]=[$R[13829]={type:"element",tagName:"span",properties:$R[13830]={style:"color:#666666"},children:$R[13831]=[$R[13832]={type:"text",value:"\t\t\t\t},"}]}]},$R[13833]={type:"text",value:"\n"},$R[13834]={type:"element",tagName:"span",properties:$R[13835]={class:"line"},children:$R[13836]=[$R[13837]={type:"element",tagName:"span",properties:$R[13838]={style:"color:#666666"},children:$R[13839]=[$R[13840]={type:"text",value:"\t\t\t}),"}]}]},$R[13841]={type:"text",value:"\n"},$R[13842]={type:"element",tagName:"span",properties:$R[13843]={class:"line"},children:$R[13844]=[$R[13845]={type:"element",tagName:"span",properties:$R[13846]={style:"color:#666666"},children:$R[13847]=[$R[13848]={type:"text",value:"\t\t],"}]}]},$R[13849]={type:"text",value:"\n"},$R[13850]={type:"element",tagName:"span",properties:$R[13851]={class:"line"},children:$R[13852]=[$R[13853]={type:"element",tagName:"span",properties:$R[13854]={style:"color:#758575DD"},children:$R[13855]=[$R[13856]={type:"text",value:"\t\t// ..."}]}]},$R[13857]={type:"text",value:"\n"},$R[13858]={type:"element",tagName:"span",properties:$R[13859]={class:"line"},children:$R[13860]=[$R[13861]={type:"element",tagName:"span",properties:$R[13862]={style:"color:#666666"},children:$R[13863]=[$R[13864]={type:"text",value:"\t};"}]}]},$R[13865]={type:"text",value:"\n"},$R[13866]={type:"element",tagName:"span",properties:$R[13867]={class:"line"},children:$R[13868]=[$R[13869]={type:"element",tagName:"span",properties:$R[13870]={style:"color:#666666"},children:$R[13871]=[$R[13872]={type:"text",value:"});"}]}]}]}]}]}},$R[13873]={children:$R[13874]=[$R[13875]={position:$R[13876]={start:$R[13877]={line:206,column:1,offset:6273},end:$R[13878]={line:206,column:14,offset:6286}},type:"text",value:"このように設定することで、"},$R[13879]={position:$R[13880]={start:$R[13881]={line:206,column:14,offset:6286},end:$R[13882]={line:206,column:38,offset:6310}},type:"inlineCode",value:"eslintSuppressionRules"},$R[13883]={position:$R[13884]={start:$R[13885]={line:206,column:38,offset:6310},end:$R[13886]={line:206,column:110,offset:6382}},type:"text",value:" に登録されたルールが無効化された場合に例外をスローするようになる。これにより、React Compiler は正しく動作することが保証される。"}],position:$R[13887]={start:$R[13888]={line:206,column:1,offset:6273},end:$R[13889]={line:206,column:110,offset:6382}},type:"paragraph"}],position:$R[13890]={end:$R[13891]={line:206,column:110,offset:6382},start:$R[13892]={line:102,column:1,offset:3956}},type:"section"}],position:$R[13893]={end:$R[13894]={line:206,column:110,offset:6382},start:$R[13895]={line:27,column:1,offset:1201}},type:"section"},$R[13896]={children:$R[13897]=[$R[13898]={children:$R[13899]=[$R[13900]={position:$R[13901]={start:$R[13902]={line:208,column:4,offset:6387},end:$R[13903]={line:208,column:7,offset:6390}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[13904]={start:$R[13905]={line:208,column:1,offset:6384},end:$R[13906]={line:208,column:7,offset:6390}},type:"heading"},$R[13907]={children:$R[13908]=[$R[13909]={position:$R[13910]={start:$R[13911]={line:210,column:1,offset:6392},end:$R[13912]={line:210,column:25,offset:6416}},type:"inlineCode",value:"eslintSuppressionRules"},$R[13913]={position:$R[13914]={start:$R[13915]={line:210,column:25,offset:6416},end:$R[13916]={line:210,column:67,offset:6458}},type:"text",value:" は React Compiler が正しく動作するための設定である。デフォルトで "},$R[13917]={position:$R[13918]={start:$R[13919]={line:210,column:67,offset:6458},end:$R[13920]={line:210,column:96,offset:6487}},type:"inlineCode",value:"react-hooks/exhaustive-deps"},$R[13921]={position:$R[13922]={start:$R[13923]={line:210,column:96,offset:6487},end:$R[13924]={line:210,column:99,offset:6490}},type:"text",value:" と "},$R[13925]={position:$R[13926]={start:$R[13927]={line:210,column:99,offset:6490},end:$R[13928]={line:210,column:127,offset:6518}},type:"inlineCode",value:"react-hooks/rules-of-hooks"},$R[13929]={position:$R[13930]={start:$R[13931]={line:210,column:127,offset:6518},end:$R[13932]={line:210,column:210,offset:6601}},type:"text",value:" が登録されており、これらのルールが無効化された場合に例外をスローする。また flat config との相性も良いため、React Compiler を使う際には "},$R[13933]={position:$R[13934]={start:$R[13935]={line:210,column:210,offset:6601},end:$R[13936]={line:210,column:234,offset:6625}},type:"inlineCode",value:"eslintSuppressionRules"},$R[13937]={position:$R[13938]={start:$R[13939]={line:210,column:234,offset:6625},end:$R[13940]={line:210,column:250,offset:6641}},type:"text",value:" の設定することをおすすめする。"}],position:$R[13941]={start:$R[13942]={line:210,column:1,offset:6392},end:$R[13943]={line:210,column:250,offset:6641}},type:"paragraph"},$R[13944]={children:$R[13945]=[$R[13946]={position:$R[13947]={start:$R[13948]={line:212,column:1,offset:6643},end:$R[13949]={line:212,column:42,offset:6684}},type:"text",value:"引き続き React Compiler のコードを読んで、使い方を考えていきたい。"}],position:$R[13950]={start:$R[13951]={line:212,column:1,offset:6643},end:$R[13952]={line:212,column:42,offset:6684}},type:"paragraph"},$R[13953]={children:$R[13954]=[$R[13955]={position:$R[13956]={start:$R[13957]={line:214,column:1,offset:6686},end:$R[13958]={line:214,column:21,offset:6706}},type:"text",value:"React Compiler の中身を "},$R[13959]={children:$R[13960]=[$R[13961]={position:$R[13962]={start:$R[13963]={line:214,column:22,offset:6707},end:$R[13964]={line:214,column:31,offset:6716}},type:"text",value:"@yossydev"}],position:$R[13965]={start:$R[13966]={line:214,column:21,offset:6706},end:$R[13967]={line:214,column:62,offset:6747}},title:void 0,type:"link",url:"https://twitter.com/yossydev"},$R[13968]={position:$R[13969]={start:$R[13970]={line:214,column:62,offset:6747},end:$R[13971]={line:214,column:63,offset:6748}},type:"text",value:"、"},$R[13972]={children:$R[13973]=[$R[13974]={position:$R[13975]={start:$R[13976]={line:214,column:64,offset:6749},end:$R[13977]={line:214,column:76,offset:6761}},type:"text",value:"@shun_shobon"}],position:$R[13978]={start:$R[13979]={line:214,column:63,offset:6748},end:$R[13980]={line:214,column:110,offset:6795}},title:void 0,type:"link",url:"https://twitter.com/shun_shobon"},$R[13981]={position:$R[13982]={start:$R[13983]={line:214,column:110,offset:6795},end:$R[13984]={line:214,column:137,offset:6822}},type:"text",value:" と読んでいるので、興味がある方はぜひ見てみてほしい。"}],position:$R[13985]={start:$R[13986]={line:214,column:1,offset:6686},end:$R[13987]={line:214,column:137,offset:6822}},type:"paragraph"},$R[13988]={allowFullScreen:void 0,height:"360",position:$R[13989]={start:$R[13990]={line:216,column:1,offset:6824},end:$R[13991]={line:216,column:44,offset:6867}},src:"https://www.youtube.com/embed/PqPgr_hlVKM",type:"embed",width:"100%"}],position:$R[13992]={end:$R[13993]={line:216,column:44,offset:6867},start:$R[13994]={line:208,column:1,offset:6384}},type:"section"}],footnotes:$R[13995]=[$R[13996]={children:$R[13997]=[$R[13998]={children:$R[13999]=[$R[14000]={children:$R[14001]=[$R[14002]={position:$R[14003]={start:$R[14004]={line:25,column:7,offset:1161},end:$R[14005]={line:25,column:45,offset:1199}},type:"text",value:"https://react.dev/learn/react-compiler"}],position:$R[14006]={start:$R[14007]={line:25,column:7,offset:1161},end:$R[14008]={line:25,column:45,offset:1199}},title:void 0,type:"link",url:"https://react.dev/learn/react-compiler"}],position:$R[14009]={start:$R[14010]={line:25,column:7,offset:1161},end:$R[14011]={line:25,column:45,offset:1199}},type:"paragraph"}],count:1,index:0,position:$R[14012]={start:$R[14013]={line:25,column:1,offset:1155},end:$R[14014]={line:25,column:45,offset:1199}},type:"footnoteDefinition"},$R[14015]={children:$R[14016]=[$R[14017]={children:$R[14018]=[$R[14019]={children:$R[14020]=[$R[14021]={position:$R[14022]={start:$R[14023]={line:65,column:7,offset:2735},end:$R[14024]={line:65,column:55,offset:2783}},type:"text",value:"https://react.dev/reference/rules/rules-of-hooks"}],position:$R[14025]={start:$R[14026]={line:65,column:7,offset:2735},end:$R[14027]={line:65,column:55,offset:2783}},title:void 0,type:"link",url:"https://react.dev/reference/rules/rules-of-hooks"},$R[14028]={position:$R[14029]={start:$R[14030]={line:65,column:55,offset:2783},end:$R[14031]={line:65,column:110,offset:2838}},type:"text",value:" にある通り hoosk はコンポーネントのトップレベルもしくはカスタムフック内でのみ呼び出すべきであるなど。"}],position:$R[14032]={start:$R[14033]={line:65,column:7,offset:2735},end:$R[14034]={line:65,column:110,offset:2838}},type:"paragraph"}],count:1,index:1,position:$R[14035]={start:$R[14036]={line:65,column:1,offset:2729},end:$R[14037]={line:65,column:110,offset:2838}},type:"footnoteDefinition"},$R[14038]={children:$R[14039]=[$R[14040]={children:$R[14041]=[$R[14042]={children:$R[14043]=[$R[14044]={position:$R[14045]={start:$R[14046]={line:178,column:7,offset:5736},end:$R[14047]={line:178,column:36,offset:5765}},type:"text",value:"https://playground.react.dev/"}],position:$R[14048]={start:$R[14049]={line:178,column:7,offset:5736},end:$R[14050]={line:178,column:36,offset:5765}},title:void 0,type:"link",url:"https://playground.react.dev/"}],position:$R[14051]={start:$R[14052]={line:178,column:7,offset:5736},end:$R[14053]={line:178,column:36,offset:5765}},type:"paragraph"}],count:1,index:2,position:$R[14054]={start:$R[14055]={line:178,column:1,offset:5730},end:$R[14056]={line:178,column:36,offset:5765}},type:"footnoteDefinition"}],title:$R[14057]={children:$R[14058]=[$R[14059]={position:$R[14060]={start:$R[14061]={line:1,column:3,offset:2},end:$R[14062]={line:1,column:33,offset:32}},type:"text",value:"eslintSuppressionRules を考察してみる"}],id:"eslintsuppressionrules-を考察してみる",level:1,plain:"eslintSuppressionRules を考察してみる",position:$R[14063]={start:$R[14064]={line:1,column:1,offset:0},end:$R[14065]={line:1,column:33,offset:32}},type:"heading"},toc:$R[14066]=[$R[14067]={children:$R[14068]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[14069]={children:$R[14070]=[],id:"react-compiler-とは",plain:"React Compiler とは",type:"toc"},$R[14071]={children:$R[14072]=[$R[14073]={children:$R[14074]=[],id:"必要性",plain:"必要性",type:"toc"},$R[14075]={children:$R[14076]=[],id:"eslint-v9との関係と使い方",plain:"ESLint v9との関係と使い方",type:"toc"}],id:"eslintsuppressionrules",plain:"eslintSuppressionRules",type:"toc"},$R[14077]={children:$R[14078]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[14079]={content:"# React Compiler の opt-in と opt-out を整理する\n\n## はじめに\n\n先日に引き続き React Compiler のコードを読んでいる中で、opt-in と opt-out についての挙動がややこしいと感じたので整理してみた。\n\nこの記事で参照するコードの commit は [c015abd](https://github.com/facebook/react/commit/c015abd9dc32e9604e992cf351f1e130fd2a0de0) である。\n\n## opt-in と opt-out\n\nReact Compiler の設定に、`compilationMode` というものがある。これは次のように定義されている。\n\n```ts:Options.ts\nconst CompilationModeSchema = z.enum([\n /*\n * Compiles functions annotated with \"use forget\" or component/hook-like functions.\n * This latter includes:\n * * Components declared with component syntax.\n * * Functions which can be inferred to be a component or hook:\n * - Be named like a hook or component. This logic matches the ESLint rule.\n * - *and* create JSX and/or call a hook. This is an additional check to help prevent\n * false positives, since compilation has a greater impact than linting.\n * This is the default mode\n */\n \"infer\",\n // Compile only functions which are explicitly annotated with \"use forget\"\n \"annotation\",\n // Compile all top-level functions\n \"all\",\n]);\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L116-L132\n\n### opt-out\n\n`opt-out` はそもそも公式で明言された呼び方ではないということに留意しておく。`opt-in` の逆なんだから `opt-out` やろ!というのが私の勝手な解釈である。\n\nデフォルトでは `infer` となっている。これは、コンポーネントやフックのような関数をコンパイルする。後者は、次の条件を満たす関数をコンパイルする。\n\n- `component` や `hook` で定義された関数\n - Flow のシンタックス\n - https://medium.com/flow-type/announcing-component-syntax-b6c5285660d0\n- コンポーネントやフックのような関数であると推測される関数\n - フックやコンポーネントのような名前が付けられている\n - JSX を生成するか、フックを呼び出す\n - `eslint-plugin-react` のルールに一致する\n\n> - フックやコンポーネントのような名前が付けられている\n> - JSXを生成するか、フックを呼び出す\n\nこれらは [ここ](https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L566-L787) で実装されている。なかなか味わいのあるコードだ。\n\n`infer` モードの嬉しさは、自動的にコンパイルされる関数を選択してくれることだ。\n\n私が `infer` モードを `opt-out` と読んでいるのは後で詳しく説明する `\"use no memo\"` というディレクティブでコンパイル対象から外すことができるからだ。\n\n### opt-in\n\n`annotation` モードは、`\"use memo\"` というディレクティブが付与された関数のみをコンパイルする。\n\nドキュメントでも言及されている通り、`opt-in` はあくまで既に存在する React のプロジェクトに対して段階的に React Compoler を導入するための仕組みだ。\n\n> In rare cases, you can also configure the compiler to run in “opt-in” mode using the compilationMode: \"annotation\" option. This makes it so the compiler will only compile components and hooks annotated with a \"use memo\" directive. Please note that the annotation mode is a temporary one to aid early adopters, and that we don’t intend for the \"use memo\" directive to be used for the long term.\n>\n> When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app.\n>\n> --- https://react.dev/learn/react-compiler#existing-projects\n\n## ややこしいディレクティブの挙動\n\nさて、本題だ(?)。`use memo` と `use no memo` というディレクティブがある。これらはどちらも関数やファイルの行頭に付与することでコンパイルの挙動を変更する。\n\n混乱するのは `compilationMode` の値とその時の挙動である。例えば...\n\n- `infer` の時に `\"use memo\"` を付与した時\n- `annotation` の時に `\"use no memo\"` を付与した時\n\nなど、挙動はどうなるのだろうか?\n\n解答はコードに隠されていた。\n\n```ts:Program.ts\nfunction getReactFunctionType(\n fn: BabelFn,\n pass: CompilerPass\n): ReactFunctionType | null {\n const hookPattern = pass.opts.environment?.hookPattern ?? null;\n if (fn.node.body.type === \"BlockStatement\") {\n // Opt-outs disable compilation regardless of mode\n const useNoForget = findDirectiveDisablingMemoization(\n fn.node.body.directives,\n pass.opts\n );\n if (useNoForget != null) {\n pass.opts.logger?.logEvent(pass.filename, {\n kind: \"CompileError\",\n fnLoc: fn.node.body.loc ?? null,\n detail: {\n severity: ErrorSeverity.Todo,\n reason: 'Skipped due to \"use no forget\" directive.',\n loc: useNoForget.loc ?? null,\n suggestions: null,\n },\n });\n return null;\n }\n // Otherwise opt-ins enable compilation regardless of mode\n if (findDirectiveEnablingMemoization(fn.node.body.directives) != null) {\n return getComponentOrHookLike(fn, hookPattern) ?? \"Other\";\n }\n }\n switch (pass.opts.compilationMode) {\n case \"annotation\": {\n // opt-ins are checked above\n return null;\n }\n case \"infer\": {\n // Component and hook declarations are known components/hooks\n if (fn.isFunctionDeclaration()) {\n if (isComponentDeclaration(fn.node)) {\n return \"Component\";\n } else if (isHookDeclaration(fn.node)) {\n return \"Hook\";\n }\n }\n\n // Otherwise check if this is a component or hook-like function\n return getComponentOrHookLike(fn, hookPattern);\n }\n case \"all\": {\n // Compile only top level functions\n if (fn.scope.getProgramParent() !== fn.scope.parent) {\n return null;\n }\n\n return getComponentOrHookLike(fn, hookPattern) ?? \"Other\";\n }\n default: {\n assertExhaustive(\n pass.opts.compilationMode,\n `Unexpected compilationMode \\`${pass.opts.compilationMode}\\``\n );\n }\n }\n}\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L471-L533\n\n上記のコードコメントにある通り、ディレクティブが見つかった場合、`compilationMode` の値に関係なくディレクティブの指示に従う。つまり、`\"use no memo\"` が見つかった場合はコンパイルをスキップするし、`\"use memo\"` が見つかった場合はコンパイルを実行する。\n\n## まとめ\n\nReact Compiler の opt-in と opt-out について整理してみた。`compilationMode` は opt-in と opt-out の挙動を制御する。`\"use memo\"` と `\"use no memo\"` はどちらもコンパイルの挙動を変更するディレクティブで、`compilationMode` の値に関係なく挙動を変更する。\n\nReact Compiler の中身を [@yossydev](https://twitter.com/yossydev)、[@shun_shobon](https://twitter.com/shun_shobon) と読んでいるので、興味がある方はぜひ見てみてほしい。\n\nhttps://www.youtube.com/watch?v=PqPgr_hlVKM",description:"ややこしすぎるopt-inとopt-outの挙動を整理する。",published:!0,publishedAt:"2024-06-11T15:42:49.854+09:00[Asia/Tokyo]",tags:$R[14080]=["React","React Compiler"],title:"React Compilerのopt-inとopt-outを整理する",_meta:$R[14081]={filePath:"01J030HYBQ9T8NW4Q1GYH6NHHV/slug.md",fileName:"slug.md",directory:"01J030HYBQ9T8NW4Q1GYH6NHHV",extension:"md",path:"01J030HYBQ9T8NW4Q1GYH6NHHV/slug"},abstract:"React Compiler の opt-in と opt-out を整理するはじめに先日に引き続き React Compiler のコードを読んでいる中で、opt-in と opt-out についての挙動がややこしいと感じたので整理してみた。この記事で参照するコードの commit は c015abd である。opt-in と opt-outReact Compiler の設定に、compilationMode というものがある。これは次のように定義されている。const CompilationModeSchema = z.enum([\n /*\n * Compiles functions annotated with \"use forget\" or component/hook-like functions.\n * This latter includes:\n * * Co",mdast:$R[14082]={children:$R[14083]=[$R[14084]={children:$R[14085]=[$R[14086]={children:$R[14087]=[$R[14088]={position:$R[14089]={start:$R[14090]={line:3,column:4,offset:46},end:$R[14091]={line:3,column:8,offset:50}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[14092]={start:$R[14093]={line:3,column:1,offset:43},end:$R[14094]={line:3,column:8,offset:50}},type:"heading"},$R[14095]={children:$R[14096]=[$R[14097]={position:$R[14098]={start:$R[14099]={line:5,column:1,offset:52},end:$R[14100]={line:5,column:80,offset:131}},type:"text",value:"先日に引き続き React Compiler のコードを読んでいる中で、opt-in と opt-out についての挙動がややこしいと感じたので整理してみた。"}],position:$R[14101]={start:$R[14102]={line:5,column:1,offset:52},end:$R[14103]={line:5,column:80,offset:131}},type:"paragraph"},$R[14104]={children:$R[14105]=[$R[14106]={position:$R[14107]={start:$R[14108]={line:7,column:1,offset:133},end:$R[14109]={line:7,column:24,offset:156}},type:"text",value:"この記事で参照するコードの commit は "},$R[14110]={children:$R[14111]=[$R[14112]={position:$R[14113]={start:$R[14114]={line:7,column:25,offset:157},end:$R[14115]={line:7,column:32,offset:164}},type:"text",value:"c015abd"}],position:$R[14116]={start:$R[14117]={line:7,column:24,offset:156},end:$R[14118]={line:7,column:116,offset:248}},title:void 0,type:"link",url:"https://github.com/facebook/react/commit/c015abd9dc32e9604e992cf351f1e130fd2a0de0"},$R[14119]={position:$R[14120]={start:$R[14121]={line:7,column:116,offset:248},end:$R[14122]={line:7,column:121,offset:253}},type:"text",value:" である。"}],position:$R[14123]={start:$R[14124]={line:7,column:1,offset:133},end:$R[14125]={line:7,column:121,offset:253}},type:"paragraph"}],position:$R[14126]={end:$R[14127]={line:7,column:121,offset:253},start:$R[14128]={line:3,column:1,offset:43}},type:"section"},$R[14129]={children:$R[14130]=[$R[14131]={children:$R[14132]=[$R[14133]={position:$R[14134]={start:$R[14135]={line:9,column:4,offset:258},end:$R[14136]={line:9,column:20,offset:274}},type:"text",value:"opt-in と opt-out"}],id:"opt-in-と-opt-out",level:2,plain:"opt-in と opt-out",position:$R[14137]={start:$R[14138]={line:9,column:1,offset:255},end:$R[14139]={line:9,column:20,offset:274}},type:"heading"},$R[14140]={children:$R[14141]=[$R[14142]={position:$R[14143]={start:$R[14144]={line:11,column:1,offset:276},end:$R[14145]={line:11,column:21,offset:296}},type:"text",value:"React Compiler の設定に、"},$R[14146]={position:$R[14147]={start:$R[14148]={line:11,column:21,offset:296},end:$R[14149]={line:11,column:38,offset:313}},type:"inlineCode",value:"compilationMode"},$R[14150]={position:$R[14151]={start:$R[14152]={line:11,column:38,offset:313},end:$R[14153]={line:11,column:64,offset:339}},type:"text",value:" というものがある。これは次のように定義されている。"}],position:$R[14154]={start:$R[14155]={line:11,column:1,offset:276},end:$R[14156]={line:11,column:64,offset:339}},type:"paragraph"},$R[14157]={filename:"Options.ts ts",lang:"ts",position:$R[14158]={start:$R[14159]={line:13,column:1,offset:341},end:$R[14160]={line:31,column:4,offset:1073}},type:"code",value:"const CompilationModeSchema = z.enum([\n /*\n * Compiles functions annotated with \"use forget\" or component/hook-like functions.\n * This latter includes:\n * * Components declared with component syntax.\n * * Functions which can be inferred to be a component or hook:\n * - Be named like a hook or component. This logic matches the ESLint rule.\n * - *and* create JSX and/or call a hook. This is an additional check to help prevent\n * false positives, since compilation has a greater impact than linting.\n * This is the default mode\n */\n \"infer\",\n // Compile only functions which are explicitly annotated with \"use forget\"\n \"annotation\",\n // Compile all top-level functions\n \"all\",\n]);",hast:$R[14161]={type:"root",children:$R[14162]=[$R[14163]={type:"element",tagName:"pre",properties:$R[14164]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[14165]=[$R[14166]={type:"element",tagName:"code",properties:$R[14167]={},children:$R[14168]=[$R[14169]={type:"element",tagName:"span",properties:$R[14170]={class:"line"},children:$R[14171]=[$R[14172]={type:"element",tagName:"span",properties:$R[14173]={style:"color:#CB7676"},children:$R[14174]=[$R[14175]={type:"text",value:"const "}]},$R[14176]={type:"element",tagName:"span",properties:$R[14177]={style:"color:#BD976A"},children:$R[14178]=[$R[14179]={type:"text",value:"CompilationModeSchema"}]},$R[14180]={type:"element",tagName:"span",properties:$R[14181]={style:"color:#666666"},children:$R[14182]=[$R[14183]={type:"text",value:" ="}]},$R[14184]={type:"element",tagName:"span",properties:$R[14185]={style:"color:#BD976A"},children:$R[14186]=[$R[14187]={type:"text",value:" z"}]},$R[14188]={type:"element",tagName:"span",properties:$R[14189]={style:"color:#666666"},children:$R[14190]=[$R[14191]={type:"text",value:"."}]},$R[14192]={type:"element",tagName:"span",properties:$R[14193]={style:"color:#80A665"},children:$R[14194]=[$R[14195]={type:"text",value:"enum"}]},$R[14196]={type:"element",tagName:"span",properties:$R[14197]={style:"color:#666666"},children:$R[14198]=[$R[14199]={type:"text",value:"(["}]}]},$R[14200]={type:"text",value:"\n"},$R[14201]={type:"element",tagName:"span",properties:$R[14202]={class:"line"},children:$R[14203]=[$R[14204]={type:"element",tagName:"span",properties:$R[14205]={style:"color:#758575DD"},children:$R[14206]=[$R[14207]={type:"text",value:" /*"}]}]},$R[14208]={type:"text",value:"\n"},$R[14209]={type:"element",tagName:"span",properties:$R[14210]={class:"line"},children:$R[14211]=[$R[14212]={type:"element",tagName:"span",properties:$R[14213]={style:"color:#758575DD"},children:$R[14214]=[$R[14215]={type:"text",value:" * Compiles functions annotated with \"use forget\" or component/hook-like functions."}]}]},$R[14216]={type:"text",value:"\n"},$R[14217]={type:"element",tagName:"span",properties:$R[14218]={class:"line"},children:$R[14219]=[$R[14220]={type:"element",tagName:"span",properties:$R[14221]={style:"color:#758575DD"},children:$R[14222]=[$R[14223]={type:"text",value:" * This latter includes:"}]}]},$R[14224]={type:"text",value:"\n"},$R[14225]={type:"element",tagName:"span",properties:$R[14226]={class:"line"},children:$R[14227]=[$R[14228]={type:"element",tagName:"span",properties:$R[14229]={style:"color:#758575DD"},children:$R[14230]=[$R[14231]={type:"text",value:" * * Components declared with component syntax."}]}]},$R[14232]={type:"text",value:"\n"},$R[14233]={type:"element",tagName:"span",properties:$R[14234]={class:"line"},children:$R[14235]=[$R[14236]={type:"element",tagName:"span",properties:$R[14237]={style:"color:#758575DD"},children:$R[14238]=[$R[14239]={type:"text",value:" * * Functions which can be inferred to be a component or hook:"}]}]},$R[14240]={type:"text",value:"\n"},$R[14241]={type:"element",tagName:"span",properties:$R[14242]={class:"line"},children:$R[14243]=[$R[14244]={type:"element",tagName:"span",properties:$R[14245]={style:"color:#758575DD"},children:$R[14246]=[$R[14247]={type:"text",value:" * - Be named like a hook or component. This logic matches the ESLint rule."}]}]},$R[14248]={type:"text",value:"\n"},$R[14249]={type:"element",tagName:"span",properties:$R[14250]={class:"line"},children:$R[14251]=[$R[14252]={type:"element",tagName:"span",properties:$R[14253]={style:"color:#758575DD"},children:$R[14254]=[$R[14255]={type:"text",value:" * - *and* create JSX and/or call a hook. This is an additional check to help prevent"}]}]},$R[14256]={type:"text",value:"\n"},$R[14257]={type:"element",tagName:"span",properties:$R[14258]={class:"line"},children:$R[14259]=[$R[14260]={type:"element",tagName:"span",properties:$R[14261]={style:"color:#758575DD"},children:$R[14262]=[$R[14263]={type:"text",value:" * false positives, since compilation has a greater impact than linting."}]}]},$R[14264]={type:"text",value:"\n"},$R[14265]={type:"element",tagName:"span",properties:$R[14266]={class:"line"},children:$R[14267]=[$R[14268]={type:"element",tagName:"span",properties:$R[14269]={style:"color:#758575DD"},children:$R[14270]=[$R[14271]={type:"text",value:" * This is the default mode"}]}]},$R[14272]={type:"text",value:"\n"},$R[14273]={type:"element",tagName:"span",properties:$R[14274]={class:"line"},children:$R[14275]=[$R[14276]={type:"element",tagName:"span",properties:$R[14277]={style:"color:#758575DD"},children:$R[14278]=[$R[14279]={type:"text",value:" */"}]}]},$R[14280]={type:"text",value:"\n"},$R[14281]={type:"element",tagName:"span",properties:$R[14282]={class:"line"},children:$R[14283]=[$R[14284]={type:"element",tagName:"span",properties:$R[14285]={style:"color:#C98A7D77"},children:$R[14286]=[$R[14287]={type:"text",value:" \""}]},$R[14288]={type:"element",tagName:"span",properties:$R[14289]={style:"color:#C98A7D"},children:$R[14290]=[$R[14291]={type:"text",value:"infer"}]},$R[14292]={type:"element",tagName:"span",properties:$R[14293]={style:"color:#C98A7D77"},children:$R[14294]=[$R[14295]={type:"text",value:"\""}]},$R[14296]={type:"element",tagName:"span",properties:$R[14297]={style:"color:#666666"},children:$R[14298]=[$R[14299]={type:"text",value:","}]}]},$R[14300]={type:"text",value:"\n"},$R[14301]={type:"element",tagName:"span",properties:$R[14302]={class:"line"},children:$R[14303]=[$R[14304]={type:"element",tagName:"span",properties:$R[14305]={style:"color:#758575DD"},children:$R[14306]=[$R[14307]={type:"text",value:" // Compile only functions which are explicitly annotated with \"use forget\""}]}]},$R[14308]={type:"text",value:"\n"},$R[14309]={type:"element",tagName:"span",properties:$R[14310]={class:"line"},children:$R[14311]=[$R[14312]={type:"element",tagName:"span",properties:$R[14313]={style:"color:#C98A7D77"},children:$R[14314]=[$R[14315]={type:"text",value:" \""}]},$R[14316]={type:"element",tagName:"span",properties:$R[14317]={style:"color:#C98A7D"},children:$R[14318]=[$R[14319]={type:"text",value:"annotation"}]},$R[14320]={type:"element",tagName:"span",properties:$R[14321]={style:"color:#C98A7D77"},children:$R[14322]=[$R[14323]={type:"text",value:"\""}]},$R[14324]={type:"element",tagName:"span",properties:$R[14325]={style:"color:#666666"},children:$R[14326]=[$R[14327]={type:"text",value:","}]}]},$R[14328]={type:"text",value:"\n"},$R[14329]={type:"element",tagName:"span",properties:$R[14330]={class:"line"},children:$R[14331]=[$R[14332]={type:"element",tagName:"span",properties:$R[14333]={style:"color:#758575DD"},children:$R[14334]=[$R[14335]={type:"text",value:" // Compile all top-level functions"}]}]},$R[14336]={type:"text",value:"\n"},$R[14337]={type:"element",tagName:"span",properties:$R[14338]={class:"line"},children:$R[14339]=[$R[14340]={type:"element",tagName:"span",properties:$R[14341]={style:"color:#C98A7D77"},children:$R[14342]=[$R[14343]={type:"text",value:" \""}]},$R[14344]={type:"element",tagName:"span",properties:$R[14345]={style:"color:#C98A7D"},children:$R[14346]=[$R[14347]={type:"text",value:"all"}]},$R[14348]={type:"element",tagName:"span",properties:$R[14349]={style:"color:#C98A7D77"},children:$R[14350]=[$R[14351]={type:"text",value:"\""}]},$R[14352]={type:"element",tagName:"span",properties:$R[14353]={style:"color:#666666"},children:$R[14354]=[$R[14355]={type:"text",value:","}]}]},$R[14356]={type:"text",value:"\n"},$R[14357]={type:"element",tagName:"span",properties:$R[14358]={class:"line"},children:$R[14359]=[$R[14360]={type:"element",tagName:"span",properties:$R[14361]={style:"color:#666666"},children:$R[14362]=[$R[14363]={type:"text",value:"]);"}]}]}]}]}]}},$R[14364]={meta:$R[14365]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[14366]={images:$R[14367]=[$R[14368]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[14369]={images:$R[14370]=[$R[14371]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[14372]={start:$R[14373]={line:33,column:1,offset:1075},end:$R[14374]={line:33,column:162,offset:1236}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L116-L132",type:"embed"},$R[14375]={children:$R[14376]=[$R[14377]={children:$R[14378]=[$R[14379]={position:$R[14380]={start:$R[14381]={line:35,column:5,offset:1242},end:$R[14382]={line:35,column:12,offset:1249}},type:"text",value:"opt-out"}],id:"opt-out",level:3,plain:"opt-out",position:$R[14383]={start:$R[14384]={line:35,column:1,offset:1238},end:$R[14385]={line:35,column:12,offset:1249}},type:"heading"},$R[14386]={children:$R[14387]=[$R[14388]={position:$R[14389]={start:$R[14390]={line:37,column:1,offset:1251},end:$R[14391]={line:37,column:10,offset:1260}},type:"inlineCode",value:"opt-out"},$R[14392]={position:$R[14393]={start:$R[14394]={line:37,column:10,offset:1260},end:$R[14395]={line:37,column:44,offset:1294}},type:"text",value:" はそもそも公式で明言された呼び方ではないということに留意しておく。"},$R[14396]={position:$R[14397]={start:$R[14398]={line:37,column:44,offset:1294},end:$R[14399]={line:37,column:52,offset:1302}},type:"inlineCode",value:"opt-in"},$R[14400]={position:$R[14401]={start:$R[14402]={line:37,column:52,offset:1302},end:$R[14403]={line:37,column:61,offset:1311}},type:"text",value:" の逆なんだから "},$R[14404]={position:$R[14405]={start:$R[14406]={line:37,column:61,offset:1311},end:$R[14407]={line:37,column:70,offset:1320}},type:"inlineCode",value:"opt-out"},$R[14408]={position:$R[14409]={start:$R[14410]={line:37,column:70,offset:1320},end:$R[14411]={line:37,column:90,offset:1340}},type:"text",value:" やろ!というのが私の勝手な解釈である。"}],position:$R[14412]={start:$R[14413]={line:37,column:1,offset:1251},end:$R[14414]={line:37,column:90,offset:1340}},type:"paragraph"},$R[14415]={children:$R[14416]=[$R[14417]={position:$R[14418]={start:$R[14419]={line:39,column:1,offset:1342},end:$R[14420]={line:39,column:9,offset:1350}},type:"text",value:"デフォルトでは "},$R[14421]={position:$R[14422]={start:$R[14423]={line:39,column:9,offset:1350},end:$R[14424]={line:39,column:16,offset:1357}},type:"inlineCode",value:"infer"},$R[14425]={position:$R[14426]={start:$R[14427]={line:39,column:16,offset:1357},end:$R[14428]={line:39,column:77,offset:1418}},type:"text",value:" となっている。これは、コンポーネントやフックのような関数をコンパイルする。後者は、次の条件を満たす関数をコンパイルする。"}],position:$R[14429]={start:$R[14430]={line:39,column:1,offset:1342},end:$R[14431]={line:39,column:77,offset:1418}},type:"paragraph"},$R[14432]={children:$R[14433]=[$R[14434]={children:$R[14435]=[$R[14436]={children:$R[14437]=[$R[14438]={position:$R[14439]={start:$R[14440]={line:41,column:3,offset:1422},end:$R[14441]={line:41,column:14,offset:1433}},type:"inlineCode",value:"component"},$R[14442]={position:$R[14443]={start:$R[14444]={line:41,column:14,offset:1433},end:$R[14445]={line:41,column:17,offset:1436}},type:"text",value:" や "},$R[14446]={position:$R[14447]={start:$R[14448]={line:41,column:17,offset:1436},end:$R[14449]={line:41,column:23,offset:1442}},type:"inlineCode",value:"hook"},$R[14450]={position:$R[14451]={start:$R[14452]={line:41,column:23,offset:1442},end:$R[14453]={line:41,column:32,offset:1451}},type:"text",value:" で定義された関数"}],position:$R[14454]={start:$R[14455]={line:41,column:3,offset:1422},end:$R[14456]={line:41,column:32,offset:1451}},type:"paragraph"},$R[14457]={children:$R[14458]=[$R[14459]={children:$R[14460]=[$R[14461]={children:$R[14462]=[$R[14463]={position:$R[14464]={start:$R[14465]={line:42,column:5,offset:1456},end:$R[14466]={line:42,column:17,offset:1468}},type:"text",value:"Flow のシンタックス"}],position:$R[14467]={start:$R[14468]={line:42,column:5,offset:1456},end:$R[14469]={line:42,column:17,offset:1468}},type:"paragraph"}],position:$R[14470]={start:$R[14471]={line:42,column:3,offset:1454},end:$R[14472]={line:42,column:17,offset:1468}},type:"listItem"},$R[14473]={children:$R[14474]=[$R[14475]={children:$R[14476]=[$R[14477]={children:$R[14478]=[$R[14479]={position:$R[14480]={start:$R[14481]={line:43,column:5,offset:1473},end:$R[14482]={line:43,column:74,offset:1542}},type:"text",value:"https://medium.com/flow-type/announcing-component-syntax-b6c5285660d0"}],position:$R[14483]={start:$R[14484]={line:43,column:5,offset:1473},end:$R[14485]={line:43,column:74,offset:1542}},title:void 0,type:"link",url:"https://medium.com/flow-type/announcing-component-syntax-b6c5285660d0"}],position:$R[14486]={start:$R[14487]={line:43,column:5,offset:1473},end:$R[14488]={line:43,column:74,offset:1542}},type:"paragraph"}],position:$R[14489]={start:$R[14490]={line:43,column:3,offset:1471},end:$R[14491]={line:43,column:74,offset:1542}},type:"listItem"}],position:$R[14492]={start:$R[14493]={line:42,column:3,offset:1454},end:$R[14494]={line:43,column:74,offset:1542}},type:"unorderedList"}],position:$R[14495]={start:$R[14496]={line:41,column:1,offset:1420},end:$R[14497]={line:43,column:74,offset:1542}},type:"listItem"},$R[14498]={children:$R[14499]=[$R[14500]={children:$R[14501]=[$R[14502]={position:$R[14503]={start:$R[14504]={line:44,column:3,offset:1545},end:$R[14505]={line:44,column:31,offset:1573}},type:"text",value:"コンポーネントやフックのような関数であると推測される関数"}],position:$R[14506]={start:$R[14507]={line:44,column:3,offset:1545},end:$R[14508]={line:44,column:31,offset:1573}},type:"paragraph"},$R[14509]={children:$R[14510]=[$R[14511]={children:$R[14512]=[$R[14513]={children:$R[14514]=[$R[14515]={position:$R[14516]={start:$R[14517]={line:45,column:5,offset:1578},end:$R[14518]={line:45,column:30,offset:1603}},type:"text",value:"フックやコンポーネントのような名前が付けられている"}],position:$R[14519]={start:$R[14520]={line:45,column:5,offset:1578},end:$R[14521]={line:45,column:30,offset:1603}},type:"paragraph"}],position:$R[14522]={start:$R[14523]={line:45,column:3,offset:1576},end:$R[14524]={line:45,column:30,offset:1603}},type:"listItem"},$R[14525]={children:$R[14526]=[$R[14527]={children:$R[14528]=[$R[14529]={position:$R[14530]={start:$R[14531]={line:46,column:5,offset:1608},end:$R[14532]={line:46,column:24,offset:1627}},type:"text",value:"JSX を生成するか、フックを呼び出す"}],position:$R[14533]={start:$R[14534]={line:46,column:5,offset:1608},end:$R[14535]={line:46,column:24,offset:1627}},type:"paragraph"}],position:$R[14536]={start:$R[14537]={line:46,column:3,offset:1606},end:$R[14538]={line:46,column:24,offset:1627}},type:"listItem"},$R[14539]={children:$R[14540]=[$R[14541]={children:$R[14542]=[$R[14543]={position:$R[14544]={start:$R[14545]={line:47,column:5,offset:1632},end:$R[14546]={line:47,column:26,offset:1653}},type:"inlineCode",value:"eslint-plugin-react"},$R[14547]={position:$R[14548]={start:$R[14549]={line:47,column:26,offset:1653},end:$R[14550]={line:47,column:36,offset:1663}},type:"text",value:" のルールに一致する"}],position:$R[14551]={start:$R[14552]={line:47,column:5,offset:1632},end:$R[14553]={line:47,column:36,offset:1663}},type:"paragraph"}],position:$R[14554]={start:$R[14555]={line:47,column:3,offset:1630},end:$R[14556]={line:47,column:36,offset:1663}},type:"listItem"}],position:$R[14557]={start:$R[14558]={line:45,column:3,offset:1576},end:$R[14559]={line:47,column:36,offset:1663}},type:"unorderedList"}],position:$R[14560]={start:$R[14561]={line:44,column:1,offset:1543},end:$R[14562]={line:47,column:36,offset:1663}},type:"listItem"}],position:$R[14563]={start:$R[14564]={line:41,column:1,offset:1420},end:$R[14565]={line:47,column:36,offset:1663}},type:"unorderedList"},$R[14566]={children:$R[14567]=[$R[14568]={children:$R[14569]=[$R[14570]={children:$R[14571]=[$R[14572]={children:$R[14573]=[$R[14574]={position:$R[14575]={start:$R[14576]={line:49,column:5,offset:1669},end:$R[14577]={line:49,column:30,offset:1694}},type:"text",value:"フックやコンポーネントのような名前が付けられている"}],position:$R[14578]={start:$R[14579]={line:49,column:5,offset:1669},end:$R[14580]={line:49,column:30,offset:1694}},type:"paragraph"}],position:$R[14581]={start:$R[14582]={line:49,column:3,offset:1667},end:$R[14583]={line:49,column:30,offset:1694}},type:"listItem"},$R[14584]={children:$R[14585]=[$R[14586]={children:$R[14587]=[$R[14588]={position:$R[14589]={start:$R[14590]={line:50,column:5,offset:1699},end:$R[14591]={line:50,column:23,offset:1717}},type:"text",value:"JSXを生成するか、フックを呼び出す"}],position:$R[14592]={start:$R[14593]={line:50,column:5,offset:1699},end:$R[14594]={line:50,column:23,offset:1717}},type:"paragraph"}],position:$R[14595]={start:$R[14596]={line:50,column:3,offset:1697},end:$R[14597]={line:50,column:23,offset:1717}},type:"listItem"}],position:$R[14598]={start:$R[14599]={line:49,column:3,offset:1667},end:$R[14600]={line:50,column:23,offset:1717}},type:"unorderedList"}],position:$R[14601]={start:$R[14602]={line:49,column:1,offset:1665},end:$R[14603]={line:50,column:23,offset:1717}},type:"blockquote"},$R[14604]={children:$R[14605]=[$R[14606]={position:$R[14607]={start:$R[14608]={line:52,column:1,offset:1719},end:$R[14609]={line:52,column:6,offset:1724}},type:"text",value:"これらは "},$R[14610]={children:$R[14611]=[$R[14612]={position:$R[14613]={start:$R[14614]={line:52,column:7,offset:1725},end:$R[14615]={line:52,column:9,offset:1727}},type:"text",value:"ここ"}],position:$R[14616]={start:$R[14617]={line:52,column:6,offset:1724},end:$R[14618]={line:52,column:173,offset:1891}},title:void 0,type:"link",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L566-L787"},$R[14619]={position:$R[14620]={start:$R[14621]={line:52,column:173,offset:1891},end:$R[14622]={line:52,column:198,offset:1916}},type:"text",value:" で実装されている。なかなか味わいのあるコードだ。"}],position:$R[14623]={start:$R[14624]={line:52,column:1,offset:1719},end:$R[14625]={line:52,column:198,offset:1916}},type:"paragraph"},$R[14626]={children:$R[14627]=[$R[14628]={position:$R[14629]={start:$R[14630]={line:54,column:1,offset:1918},end:$R[14631]={line:54,column:8,offset:1925}},type:"inlineCode",value:"infer"},$R[14632]={position:$R[14633]={start:$R[14634]={line:54,column:8,offset:1925},end:$R[14635]={line:54,column:44,offset:1961}},type:"text",value:" モードの嬉しさは、自動的にコンパイルされる関数を選択してくれることだ。"}],position:$R[14636]={start:$R[14637]={line:54,column:1,offset:1918},end:$R[14638]={line:54,column:44,offset:1961}},type:"paragraph"},$R[14639]={children:$R[14640]=[$R[14641]={position:$R[14642]={start:$R[14643]={line:56,column:1,offset:1963},end:$R[14644]={line:56,column:4,offset:1966}},type:"text",value:"私が "},$R[14645]={position:$R[14646]={start:$R[14647]={line:56,column:4,offset:1966},end:$R[14648]={line:56,column:11,offset:1973}},type:"inlineCode",value:"infer"},$R[14649]={position:$R[14650]={start:$R[14651]={line:56,column:11,offset:1973},end:$R[14652]={line:56,column:17,offset:1979}},type:"text",value:" モードを "},$R[14653]={position:$R[14654]={start:$R[14655]={line:56,column:17,offset:1979},end:$R[14656]={line:56,column:26,offset:1988}},type:"inlineCode",value:"opt-out"},$R[14657]={position:$R[14658]={start:$R[14659]={line:56,column:26,offset:1988},end:$R[14660]={line:56,column:45,offset:2007}},type:"text",value:" と読んでいるのは後で詳しく説明する "},$R[14661]={position:$R[14662]={start:$R[14663]={line:56,column:45,offset:2007},end:$R[14664]={line:56,column:60,offset:2022}},type:"inlineCode",value:"\"use no memo\""},$R[14665]={position:$R[14666]={start:$R[14667]={line:56,column:60,offset:2022},end:$R[14668]={line:56,column:93,offset:2055}},type:"text",value:" というディレクティブでコンパイル対象から外すことができるからだ。"}],position:$R[14669]={start:$R[14670]={line:56,column:1,offset:1963},end:$R[14671]={line:56,column:93,offset:2055}},type:"paragraph"}],position:$R[14672]={end:$R[14673]={line:56,column:93,offset:2055},start:$R[14674]={line:35,column:1,offset:1238}},type:"section"},$R[14675]={children:$R[14676]=[$R[14677]={children:$R[14678]=[$R[14679]={position:$R[14680]={start:$R[14681]={line:58,column:5,offset:2061},end:$R[14682]={line:58,column:11,offset:2067}},type:"text",value:"opt-in"}],id:"opt-in",level:3,plain:"opt-in",position:$R[14683]={start:$R[14684]={line:58,column:1,offset:2057},end:$R[14685]={line:58,column:11,offset:2067}},type:"heading"},$R[14686]={children:$R[14687]=[$R[14688]={position:$R[14689]={start:$R[14690]={line:60,column:1,offset:2069},end:$R[14691]={line:60,column:13,offset:2081}},type:"inlineCode",value:"annotation"},$R[14692]={position:$R[14693]={start:$R[14694]={line:60,column:13,offset:2081},end:$R[14695]={line:60,column:19,offset:2087}},type:"text",value:" モードは、"},$R[14696]={position:$R[14697]={start:$R[14698]={line:60,column:19,offset:2087},end:$R[14699]={line:60,column:31,offset:2099}},type:"inlineCode",value:"\"use memo\""},$R[14700]={position:$R[14701]={start:$R[14702]={line:60,column:31,offset:2099},end:$R[14703]={line:60,column:61,offset:2129}},type:"text",value:" というディレクティブが付与された関数のみをコンパイルする。"}],position:$R[14704]={start:$R[14705]={line:60,column:1,offset:2069},end:$R[14706]={line:60,column:61,offset:2129}},type:"paragraph"},$R[14707]={children:$R[14708]=[$R[14709]={position:$R[14710]={start:$R[14711]={line:62,column:1,offset:2131},end:$R[14712]={line:62,column:19,offset:2149}},type:"text",value:"ドキュメントでも言及されている通り、"},$R[14713]={position:$R[14714]={start:$R[14715]={line:62,column:19,offset:2149},end:$R[14716]={line:62,column:27,offset:2157}},type:"inlineCode",value:"opt-in"},$R[14717]={position:$R[14718]={start:$R[14719]={line:62,column:27,offset:2157},end:$R[14720]={line:62,column:90,offset:2220}},type:"text",value:" はあくまで既に存在する React のプロジェクトに対して段階的に React Compoler を導入するための仕組みだ。"}],position:$R[14721]={start:$R[14722]={line:62,column:1,offset:2131},end:$R[14723]={line:62,column:90,offset:2220}},type:"paragraph"},$R[14724]={children:$R[14725]=[$R[14726]={children:$R[14727]=[$R[14728]={position:$R[14729]={start:$R[14730]={line:64,column:3,offset:2224},end:$R[14731]={line:64,column:396,offset:2617}},type:"text",value:"In rare cases, you can also configure the compiler to run in “opt-in” mode using the compilationMode: \"annotation\" option. This makes it so the compiler will only compile components and hooks annotated with a \"use memo\" directive. Please note that the annotation mode is a temporary one to aid early adopters, and that we don’t intend for the \"use memo\" directive to be used for the long term."}],position:$R[14732]={start:$R[14733]={line:64,column:3,offset:2224},end:$R[14734]={line:64,column:396,offset:2617}},type:"paragraph"},$R[14735]={children:$R[14736]=[$R[14737]={position:$R[14738]={start:$R[14739]={line:66,column:3,offset:2622},end:$R[14740]={line:66,column:158,offset:2777}},type:"text",value:"When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app."}],position:$R[14741]={start:$R[14742]={line:66,column:3,offset:2622},end:$R[14743]={line:66,column:158,offset:2777}},type:"paragraph"},$R[14744]={children:$R[14745]=[$R[14746]={position:$R[14747]={start:$R[14748]={line:68,column:3,offset:2782},end:$R[14749]={line:68,column:7,offset:2786}},type:"text",value:"--- "},$R[14750]={children:$R[14751]=[$R[14752]={position:$R[14753]={start:$R[14754]={line:68,column:7,offset:2786},end:$R[14755]={line:68,column:63,offset:2842}},type:"text",value:"https://react.dev/learn/react-compiler#existing-projects"}],position:$R[14756]={start:$R[14757]={line:68,column:7,offset:2786},end:$R[14758]={line:68,column:63,offset:2842}},title:void 0,type:"link",url:"https://react.dev/learn/react-compiler#existing-projects"}],position:$R[14759]={start:$R[14760]={line:68,column:3,offset:2782},end:$R[14761]={line:68,column:63,offset:2842}},type:"paragraph"}],position:$R[14762]={start:$R[14763]={line:64,column:1,offset:2222},end:$R[14764]={line:68,column:63,offset:2842}},type:"blockquote"}],position:$R[14765]={end:$R[14766]={line:68,column:63,offset:2842},start:$R[14767]={line:58,column:1,offset:2057}},type:"section"}],position:$R[14768]={end:$R[14769]={line:68,column:63,offset:2842},start:$R[14770]={line:9,column:1,offset:255}},type:"section"},$R[14771]={children:$R[14772]=[$R[14773]={children:$R[14774]=[$R[14775]={position:$R[14776]={start:$R[14777]={line:70,column:4,offset:2847},end:$R[14778]={line:70,column:19,offset:2862}},type:"text",value:"ややこしいディレクティブの挙動"}],id:"ややこしいディレクティブの挙動",level:2,plain:"ややこしいディレクティブの挙動",position:$R[14779]={start:$R[14780]={line:70,column:1,offset:2844},end:$R[14781]={line:70,column:19,offset:2862}},type:"heading"},$R[14782]={children:$R[14783]=[$R[14784]={position:$R[14785]={start:$R[14786]={line:72,column:1,offset:2864},end:$R[14787]={line:72,column:11,offset:2874}},type:"text",value:"さて、本題だ(?)。"},$R[14788]={position:$R[14789]={start:$R[14790]={line:72,column:11,offset:2874},end:$R[14791]={line:72,column:21,offset:2884}},type:"inlineCode",value:"use memo"},$R[14792]={position:$R[14793]={start:$R[14794]={line:72,column:21,offset:2884},end:$R[14795]={line:72,column:24,offset:2887}},type:"text",value:" と "},$R[14796]={position:$R[14797]={start:$R[14798]={line:72,column:24,offset:2887},end:$R[14799]={line:72,column:37,offset:2900}},type:"inlineCode",value:"use no memo"},$R[14800]={position:$R[14801]={start:$R[14802]={line:72,column:37,offset:2900},end:$R[14803]={line:72,column:92,offset:2955}},type:"text",value:" というディレクティブがある。これらはどちらも関数やファイルの行頭に付与することでコンパイルの挙動を変更する。"}],position:$R[14804]={start:$R[14805]={line:72,column:1,offset:2864},end:$R[14806]={line:72,column:92,offset:2955}},type:"paragraph"},$R[14807]={children:$R[14808]=[$R[14809]={position:$R[14810]={start:$R[14811]={line:74,column:1,offset:2957},end:$R[14812]={line:74,column:8,offset:2964}},type:"text",value:"混乱するのは "},$R[14813]={position:$R[14814]={start:$R[14815]={line:74,column:8,offset:2964},end:$R[14816]={line:74,column:25,offset:2981}},type:"inlineCode",value:"compilationMode"},$R[14817]={position:$R[14818]={start:$R[14819]={line:74,column:25,offset:2981},end:$R[14820]={line:74,column:45,offset:3001}},type:"text",value:" の値とその時の挙動である。例えば..."}],position:$R[14821]={start:$R[14822]={line:74,column:1,offset:2957},end:$R[14823]={line:74,column:45,offset:3001}},type:"paragraph"},$R[14824]={children:$R[14825]=[$R[14826]={children:$R[14827]=[$R[14828]={children:$R[14829]=[$R[14830]={position:$R[14831]={start:$R[14832]={line:76,column:3,offset:3005},end:$R[14833]={line:76,column:10,offset:3012}},type:"inlineCode",value:"infer"},$R[14834]={position:$R[14835]={start:$R[14836]={line:76,column:10,offset:3012},end:$R[14837]={line:76,column:15,offset:3017}},type:"text",value:" の時に "},$R[14838]={position:$R[14839]={start:$R[14840]={line:76,column:15,offset:3017},end:$R[14841]={line:76,column:27,offset:3029}},type:"inlineCode",value:"\"use memo\""},$R[14842]={position:$R[14843]={start:$R[14844]={line:76,column:27,offset:3029},end:$R[14845]={line:76,column:34,offset:3036}},type:"text",value:" を付与した時"}],position:$R[14846]={start:$R[14847]={line:76,column:3,offset:3005},end:$R[14848]={line:76,column:34,offset:3036}},type:"paragraph"}],position:$R[14849]={start:$R[14850]={line:76,column:1,offset:3003},end:$R[14851]={line:76,column:34,offset:3036}},type:"listItem"},$R[14852]={children:$R[14853]=[$R[14854]={children:$R[14855]=[$R[14856]={position:$R[14857]={start:$R[14858]={line:77,column:3,offset:3039},end:$R[14859]={line:77,column:15,offset:3051}},type:"inlineCode",value:"annotation"},$R[14860]={position:$R[14861]={start:$R[14862]={line:77,column:15,offset:3051},end:$R[14863]={line:77,column:20,offset:3056}},type:"text",value:" の時に "},$R[14864]={position:$R[14865]={start:$R[14866]={line:77,column:20,offset:3056},end:$R[14867]={line:77,column:35,offset:3071}},type:"inlineCode",value:"\"use no memo\""},$R[14868]={position:$R[14869]={start:$R[14870]={line:77,column:35,offset:3071},end:$R[14871]={line:77,column:42,offset:3078}},type:"text",value:" を付与した時"}],position:$R[14872]={start:$R[14873]={line:77,column:3,offset:3039},end:$R[14874]={line:77,column:42,offset:3078}},type:"paragraph"}],position:$R[14875]={start:$R[14876]={line:77,column:1,offset:3037},end:$R[14877]={line:77,column:42,offset:3078}},type:"listItem"}],position:$R[14878]={start:$R[14879]={line:76,column:1,offset:3003},end:$R[14880]={line:77,column:42,offset:3078}},type:"unorderedList"},$R[14881]={children:$R[14882]=[$R[14883]={position:$R[14884]={start:$R[14885]={line:79,column:1,offset:3080},end:$R[14886]={line:79,column:17,offset:3096}},type:"text",value:"など、挙動はどうなるのだろうか?"}],position:$R[14887]={start:$R[14888]={line:79,column:1,offset:3080},end:$R[14889]={line:79,column:17,offset:3096}},type:"paragraph"},$R[14890]={children:$R[14891]=[$R[14892]={position:$R[14893]={start:$R[14894]={line:81,column:1,offset:3098},end:$R[14895]={line:81,column:15,offset:3112}},type:"text",value:"解答はコードに隠されていた。"}],position:$R[14896]={start:$R[14897]={line:81,column:1,offset:3098},end:$R[14898]={line:81,column:15,offset:3112}},type:"paragraph"},$R[14899]={filename:"Program.ts ts",lang:"ts",position:$R[14900]={start:$R[14901]={line:83,column:1,offset:3114},end:$R[14902]={line:147,column:4,offset:5055}},type:"code",value:"function getReactFunctionType(\n fn: BabelFn,\n pass: CompilerPass\n): ReactFunctionType | null {\n const hookPattern = pass.opts.environment?.hookPattern ?? null;\n if (fn.node.body.type === \"BlockStatement\") {\n // Opt-outs disable compilation regardless of mode\n const useNoForget = findDirectiveDisablingMemoization(\n fn.node.body.directives,\n pass.opts\n );\n if (useNoForget != null) {\n pass.opts.logger?.logEvent(pass.filename, {\n kind: \"CompileError\",\n fnLoc: fn.node.body.loc ?? null,\n detail: {\n severity: ErrorSeverity.Todo,\n reason: 'Skipped due to \"use no forget\" directive.',\n loc: useNoForget.loc ?? null,\n suggestions: null,\n },\n });\n return null;\n }\n // Otherwise opt-ins enable compilation regardless of mode\n if (findDirectiveEnablingMemoization(fn.node.body.directives) != null) {\n return getComponentOrHookLike(fn, hookPattern) ?? \"Other\";\n }\n }\n switch (pass.opts.compilationMode) {\n case \"annotation\": {\n // opt-ins are checked above\n return null;\n }\n case \"infer\": {\n // Component and hook declarations are known components/hooks\n if (fn.isFunctionDeclaration()) {\n if (isComponentDeclaration(fn.node)) {\n return \"Component\";\n } else if (isHookDeclaration(fn.node)) {\n return \"Hook\";\n }\n }\n\n // Otherwise check if this is a component or hook-like function\n return getComponentOrHookLike(fn, hookPattern);\n }\n case \"all\": {\n // Compile only top level functions\n if (fn.scope.getProgramParent() !== fn.scope.parent) {\n return null;\n }\n\n return getComponentOrHookLike(fn, hookPattern) ?? \"Other\";\n }\n default: {\n assertExhaustive(\n pass.opts.compilationMode,\n `Unexpected compilationMode \\`${pass.opts.compilationMode}\\``\n );\n }\n }\n}",hast:$R[14903]={type:"root",children:$R[14904]=[$R[14905]={type:"element",tagName:"pre",properties:$R[14906]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[14907]=[$R[14908]={type:"element",tagName:"code",properties:$R[14909]={},children:$R[14910]=[$R[14911]={type:"element",tagName:"span",properties:$R[14912]={class:"line"},children:$R[14913]=[$R[14914]={type:"element",tagName:"span",properties:$R[14915]={style:"color:#CB7676"},children:$R[14916]=[$R[14917]={type:"text",value:"function"}]},$R[14918]={type:"element",tagName:"span",properties:$R[14919]={style:"color:#80A665"},children:$R[14920]=[$R[14921]={type:"text",value:" getReactFunctionType"}]},$R[14922]={type:"element",tagName:"span",properties:$R[14923]={style:"color:#666666"},children:$R[14924]=[$R[14925]={type:"text",value:"("}]}]},$R[14926]={type:"text",value:"\n"},$R[14927]={type:"element",tagName:"span",properties:$R[14928]={class:"line"},children:$R[14929]=[$R[14930]={type:"element",tagName:"span",properties:$R[14931]={style:"color:#BD976A"},children:$R[14932]=[$R[14933]={type:"text",value:" fn"}]},$R[14934]={type:"element",tagName:"span",properties:$R[14935]={style:"color:#666666"},children:$R[14936]=[$R[14937]={type:"text",value:": "}]},$R[14938]={type:"element",tagName:"span",properties:$R[14939]={style:"color:#5DA994"},children:$R[14940]=[$R[14941]={type:"text",value:"BabelFn"}]},$R[14942]={type:"element",tagName:"span",properties:$R[14943]={style:"color:#666666"},children:$R[14944]=[$R[14945]={type:"text",value:","}]}]},$R[14946]={type:"text",value:"\n"},$R[14947]={type:"element",tagName:"span",properties:$R[14948]={class:"line"},children:$R[14949]=[$R[14950]={type:"element",tagName:"span",properties:$R[14951]={style:"color:#BD976A"},children:$R[14952]=[$R[14953]={type:"text",value:" pass"}]},$R[14954]={type:"element",tagName:"span",properties:$R[14955]={style:"color:#666666"},children:$R[14956]=[$R[14957]={type:"text",value:": "}]},$R[14958]={type:"element",tagName:"span",properties:$R[14959]={style:"color:#5DA994"},children:$R[14960]=[$R[14961]={type:"text",value:"CompilerPass"}]}]},$R[14962]={type:"text",value:"\n"},$R[14963]={type:"element",tagName:"span",properties:$R[14964]={class:"line"},children:$R[14965]=[$R[14966]={type:"element",tagName:"span",properties:$R[14967]={style:"color:#666666"},children:$R[14968]=[$R[14969]={type:"text",value:"):"}]},$R[14970]={type:"element",tagName:"span",properties:$R[14971]={style:"color:#5DA994"},children:$R[14972]=[$R[14973]={type:"text",value:" ReactFunctionType"}]},$R[14974]={type:"element",tagName:"span",properties:$R[14975]={style:"color:#666666"},children:$R[14976]=[$R[14977]={type:"text",value:" |"}]},$R[14978]={type:"element",tagName:"span",properties:$R[14979]={style:"color:#CB7676"},children:$R[14980]=[$R[14981]={type:"text",value:" null"}]},$R[14982]={type:"element",tagName:"span",properties:$R[14983]={style:"color:#666666"},children:$R[14984]=[$R[14985]={type:"text",value:" {"}]}]},$R[14986]={type:"text",value:"\n"},$R[14987]={type:"element",tagName:"span",properties:$R[14988]={class:"line"},children:$R[14989]=[$R[14990]={type:"element",tagName:"span",properties:$R[14991]={style:"color:#CB7676"},children:$R[14992]=[$R[14993]={type:"text",value:" const "}]},$R[14994]={type:"element",tagName:"span",properties:$R[14995]={style:"color:#BD976A"},children:$R[14996]=[$R[14997]={type:"text",value:"hookPattern"}]},$R[14998]={type:"element",tagName:"span",properties:$R[14999]={style:"color:#666666"},children:$R[15000]=[$R[15001]={type:"text",value:" ="}]},$R[15002]={type:"element",tagName:"span",properties:$R[15003]={style:"color:#BD976A"},children:$R[15004]=[$R[15005]={type:"text",value:" pass"}]},$R[15006]={type:"element",tagName:"span",properties:$R[15007]={style:"color:#666666"},children:$R[15008]=[$R[15009]={type:"text",value:"."}]},$R[15010]={type:"element",tagName:"span",properties:$R[15011]={style:"color:#BD976A"},children:$R[15012]=[$R[15013]={type:"text",value:"opts"}]},$R[15014]={type:"element",tagName:"span",properties:$R[15015]={style:"color:#666666"},children:$R[15016]=[$R[15017]={type:"text",value:"."}]},$R[15018]={type:"element",tagName:"span",properties:$R[15019]={style:"color:#BD976A"},children:$R[15020]=[$R[15021]={type:"text",value:"environment"}]},$R[15022]={type:"element",tagName:"span",properties:$R[15023]={style:"color:#666666"},children:$R[15024]=[$R[15025]={type:"text",value:"?."}]},$R[15026]={type:"element",tagName:"span",properties:$R[15027]={style:"color:#BD976A"},children:$R[15028]=[$R[15029]={type:"text",value:"hookPattern"}]},$R[15030]={type:"element",tagName:"span",properties:$R[15031]={style:"color:#CB7676"},children:$R[15032]=[$R[15033]={type:"text",value:" ?? null"}]},$R[15034]={type:"element",tagName:"span",properties:$R[15035]={style:"color:#666666"},children:$R[15036]=[$R[15037]={type:"text",value:";"}]}]},$R[15038]={type:"text",value:"\n"},$R[15039]={type:"element",tagName:"span",properties:$R[15040]={class:"line"},children:$R[15041]=[$R[15042]={type:"element",tagName:"span",properties:$R[15043]={style:"color:#4D9375"},children:$R[15044]=[$R[15045]={type:"text",value:" if"}]},$R[15046]={type:"element",tagName:"span",properties:$R[15047]={style:"color:#666666"},children:$R[15048]=[$R[15049]={type:"text",value:" ("}]},$R[15050]={type:"element",tagName:"span",properties:$R[15051]={style:"color:#BD976A"},children:$R[15052]=[$R[15053]={type:"text",value:"fn"}]},$R[15054]={type:"element",tagName:"span",properties:$R[15055]={style:"color:#666666"},children:$R[15056]=[$R[15057]={type:"text",value:"."}]},$R[15058]={type:"element",tagName:"span",properties:$R[15059]={style:"color:#BD976A"},children:$R[15060]=[$R[15061]={type:"text",value:"node"}]},$R[15062]={type:"element",tagName:"span",properties:$R[15063]={style:"color:#666666"},children:$R[15064]=[$R[15065]={type:"text",value:"."}]},$R[15066]={type:"element",tagName:"span",properties:$R[15067]={style:"color:#BD976A"},children:$R[15068]=[$R[15069]={type:"text",value:"body"}]},$R[15070]={type:"element",tagName:"span",properties:$R[15071]={style:"color:#666666"},children:$R[15072]=[$R[15073]={type:"text",value:"."}]},$R[15074]={type:"element",tagName:"span",properties:$R[15075]={style:"color:#BD976A"},children:$R[15076]=[$R[15077]={type:"text",value:"type"}]},$R[15078]={type:"element",tagName:"span",properties:$R[15079]={style:"color:#CB7676"},children:$R[15080]=[$R[15081]={type:"text",value:" ==="}]},$R[15082]={type:"element",tagName:"span",properties:$R[15083]={style:"color:#C98A7D77"},children:$R[15084]=[$R[15085]={type:"text",value:" \""}]},$R[15086]={type:"element",tagName:"span",properties:$R[15087]={style:"color:#C98A7D"},children:$R[15088]=[$R[15089]={type:"text",value:"BlockStatement"}]},$R[15090]={type:"element",tagName:"span",properties:$R[15091]={style:"color:#C98A7D77"},children:$R[15092]=[$R[15093]={type:"text",value:"\""}]},$R[15094]={type:"element",tagName:"span",properties:$R[15095]={style:"color:#666666"},children:$R[15096]=[$R[15097]={type:"text",value:")"}]},$R[15098]={type:"element",tagName:"span",properties:$R[15099]={style:"color:#666666"},children:$R[15100]=[$R[15101]={type:"text",value:" {"}]}]},$R[15102]={type:"text",value:"\n"},$R[15103]={type:"element",tagName:"span",properties:$R[15104]={class:"line"},children:$R[15105]=[$R[15106]={type:"element",tagName:"span",properties:$R[15107]={style:"color:#758575DD"},children:$R[15108]=[$R[15109]={type:"text",value:" // Opt-outs disable compilation regardless of mode"}]}]},$R[15110]={type:"text",value:"\n"},$R[15111]={type:"element",tagName:"span",properties:$R[15112]={class:"line"},children:$R[15113]=[$R[15114]={type:"element",tagName:"span",properties:$R[15115]={style:"color:#CB7676"},children:$R[15116]=[$R[15117]={type:"text",value:" const "}]},$R[15118]={type:"element",tagName:"span",properties:$R[15119]={style:"color:#BD976A"},children:$R[15120]=[$R[15121]={type:"text",value:"useNoForget"}]},$R[15122]={type:"element",tagName:"span",properties:$R[15123]={style:"color:#666666"},children:$R[15124]=[$R[15125]={type:"text",value:" ="}]},$R[15126]={type:"element",tagName:"span",properties:$R[15127]={style:"color:#80A665"},children:$R[15128]=[$R[15129]={type:"text",value:" findDirectiveDisablingMemoization"}]},$R[15130]={type:"element",tagName:"span",properties:$R[15131]={style:"color:#666666"},children:$R[15132]=[$R[15133]={type:"text",value:"("}]}]},$R[15134]={type:"text",value:"\n"},$R[15135]={type:"element",tagName:"span",properties:$R[15136]={class:"line"},children:$R[15137]=[$R[15138]={type:"element",tagName:"span",properties:$R[15139]={style:"color:#BD976A"},children:$R[15140]=[$R[15141]={type:"text",value:" fn"}]},$R[15142]={type:"element",tagName:"span",properties:$R[15143]={style:"color:#666666"},children:$R[15144]=[$R[15145]={type:"text",value:"."}]},$R[15146]={type:"element",tagName:"span",properties:$R[15147]={style:"color:#BD976A"},children:$R[15148]=[$R[15149]={type:"text",value:"node"}]},$R[15150]={type:"element",tagName:"span",properties:$R[15151]={style:"color:#666666"},children:$R[15152]=[$R[15153]={type:"text",value:"."}]},$R[15154]={type:"element",tagName:"span",properties:$R[15155]={style:"color:#BD976A"},children:$R[15156]=[$R[15157]={type:"text",value:"body"}]},$R[15158]={type:"element",tagName:"span",properties:$R[15159]={style:"color:#666666"},children:$R[15160]=[$R[15161]={type:"text",value:"."}]},$R[15162]={type:"element",tagName:"span",properties:$R[15163]={style:"color:#BD976A"},children:$R[15164]=[$R[15165]={type:"text",value:"directives"}]},$R[15166]={type:"element",tagName:"span",properties:$R[15167]={style:"color:#666666"},children:$R[15168]=[$R[15169]={type:"text",value:","}]}]},$R[15170]={type:"text",value:"\n"},$R[15171]={type:"element",tagName:"span",properties:$R[15172]={class:"line"},children:$R[15173]=[$R[15174]={type:"element",tagName:"span",properties:$R[15175]={style:"color:#BD976A"},children:$R[15176]=[$R[15177]={type:"text",value:" pass"}]},$R[15178]={type:"element",tagName:"span",properties:$R[15179]={style:"color:#666666"},children:$R[15180]=[$R[15181]={type:"text",value:"."}]},$R[15182]={type:"element",tagName:"span",properties:$R[15183]={style:"color:#BD976A"},children:$R[15184]=[$R[15185]={type:"text",value:"opts"}]}]},$R[15186]={type:"text",value:"\n"},$R[15187]={type:"element",tagName:"span",properties:$R[15188]={class:"line"},children:$R[15189]=[$R[15190]={type:"element",tagName:"span",properties:$R[15191]={style:"color:#666666"},children:$R[15192]=[$R[15193]={type:"text",value:" );"}]}]},$R[15194]={type:"text",value:"\n"},$R[15195]={type:"element",tagName:"span",properties:$R[15196]={class:"line"},children:$R[15197]=[$R[15198]={type:"element",tagName:"span",properties:$R[15199]={style:"color:#4D9375"},children:$R[15200]=[$R[15201]={type:"text",value:" if"}]},$R[15202]={type:"element",tagName:"span",properties:$R[15203]={style:"color:#666666"},children:$R[15204]=[$R[15205]={type:"text",value:" ("}]},$R[15206]={type:"element",tagName:"span",properties:$R[15207]={style:"color:#BD976A"},children:$R[15208]=[$R[15209]={type:"text",value:"useNoForget"}]},$R[15210]={type:"element",tagName:"span",properties:$R[15211]={style:"color:#CB7676"},children:$R[15212]=[$R[15213]={type:"text",value:" !="}]},$R[15214]={type:"element",tagName:"span",properties:$R[15215]={style:"color:#CB7676"},children:$R[15216]=[$R[15217]={type:"text",value:" null"}]},$R[15218]={type:"element",tagName:"span",properties:$R[15219]={style:"color:#666666"},children:$R[15220]=[$R[15221]={type:"text",value:")"}]},$R[15222]={type:"element",tagName:"span",properties:$R[15223]={style:"color:#666666"},children:$R[15224]=[$R[15225]={type:"text",value:" {"}]}]},$R[15226]={type:"text",value:"\n"},$R[15227]={type:"element",tagName:"span",properties:$R[15228]={class:"line"},children:$R[15229]=[$R[15230]={type:"element",tagName:"span",properties:$R[15231]={style:"color:#BD976A"},children:$R[15232]=[$R[15233]={type:"text",value:" pass"}]},$R[15234]={type:"element",tagName:"span",properties:$R[15235]={style:"color:#666666"},children:$R[15236]=[$R[15237]={type:"text",value:"."}]},$R[15238]={type:"element",tagName:"span",properties:$R[15239]={style:"color:#BD976A"},children:$R[15240]=[$R[15241]={type:"text",value:"opts"}]},$R[15242]={type:"element",tagName:"span",properties:$R[15243]={style:"color:#666666"},children:$R[15244]=[$R[15245]={type:"text",value:"."}]},$R[15246]={type:"element",tagName:"span",properties:$R[15247]={style:"color:#BD976A"},children:$R[15248]=[$R[15249]={type:"text",value:"logger"}]},$R[15250]={type:"element",tagName:"span",properties:$R[15251]={style:"color:#666666"},children:$R[15252]=[$R[15253]={type:"text",value:"?."}]},$R[15254]={type:"element",tagName:"span",properties:$R[15255]={style:"color:#80A665"},children:$R[15256]=[$R[15257]={type:"text",value:"logEvent"}]},$R[15258]={type:"element",tagName:"span",properties:$R[15259]={style:"color:#666666"},children:$R[15260]=[$R[15261]={type:"text",value:"("}]},$R[15262]={type:"element",tagName:"span",properties:$R[15263]={style:"color:#BD976A"},children:$R[15264]=[$R[15265]={type:"text",value:"pass"}]},$R[15266]={type:"element",tagName:"span",properties:$R[15267]={style:"color:#666666"},children:$R[15268]=[$R[15269]={type:"text",value:"."}]},$R[15270]={type:"element",tagName:"span",properties:$R[15271]={style:"color:#BD976A"},children:$R[15272]=[$R[15273]={type:"text",value:"filename"}]},$R[15274]={type:"element",tagName:"span",properties:$R[15275]={style:"color:#666666"},children:$R[15276]=[$R[15277]={type:"text",value:","}]},$R[15278]={type:"element",tagName:"span",properties:$R[15279]={style:"color:#666666"},children:$R[15280]=[$R[15281]={type:"text",value:" {"}]}]},$R[15282]={type:"text",value:"\n"},$R[15283]={type:"element",tagName:"span",properties:$R[15284]={class:"line"},children:$R[15285]=[$R[15286]={type:"element",tagName:"span",properties:$R[15287]={style:"color:#B8A965"},children:$R[15288]=[$R[15289]={type:"text",value:" kind"}]},$R[15290]={type:"element",tagName:"span",properties:$R[15291]={style:"color:#666666"},children:$R[15292]=[$R[15293]={type:"text",value:": "}]},$R[15294]={type:"element",tagName:"span",properties:$R[15295]={style:"color:#C98A7D77"},children:$R[15296]=[$R[15297]={type:"text",value:"\""}]},$R[15298]={type:"element",tagName:"span",properties:$R[15299]={style:"color:#C98A7D"},children:$R[15300]=[$R[15301]={type:"text",value:"CompileError"}]},$R[15302]={type:"element",tagName:"span",properties:$R[15303]={style:"color:#C98A7D77"},children:$R[15304]=[$R[15305]={type:"text",value:"\""}]},$R[15306]={type:"element",tagName:"span",properties:$R[15307]={style:"color:#666666"},children:$R[15308]=[$R[15309]={type:"text",value:","}]}]},$R[15310]={type:"text",value:"\n"},$R[15311]={type:"element",tagName:"span",properties:$R[15312]={class:"line"},children:$R[15313]=[$R[15314]={type:"element",tagName:"span",properties:$R[15315]={style:"color:#B8A965"},children:$R[15316]=[$R[15317]={type:"text",value:" fnLoc"}]},$R[15318]={type:"element",tagName:"span",properties:$R[15319]={style:"color:#666666"},children:$R[15320]=[$R[15321]={type:"text",value:": "}]},$R[15322]={type:"element",tagName:"span",properties:$R[15323]={style:"color:#BD976A"},children:$R[15324]=[$R[15325]={type:"text",value:"fn"}]},$R[15326]={type:"element",tagName:"span",properties:$R[15327]={style:"color:#666666"},children:$R[15328]=[$R[15329]={type:"text",value:"."}]},$R[15330]={type:"element",tagName:"span",properties:$R[15331]={style:"color:#BD976A"},children:$R[15332]=[$R[15333]={type:"text",value:"node"}]},$R[15334]={type:"element",tagName:"span",properties:$R[15335]={style:"color:#666666"},children:$R[15336]=[$R[15337]={type:"text",value:"."}]},$R[15338]={type:"element",tagName:"span",properties:$R[15339]={style:"color:#BD976A"},children:$R[15340]=[$R[15341]={type:"text",value:"body"}]},$R[15342]={type:"element",tagName:"span",properties:$R[15343]={style:"color:#666666"},children:$R[15344]=[$R[15345]={type:"text",value:"."}]},$R[15346]={type:"element",tagName:"span",properties:$R[15347]={style:"color:#BD976A"},children:$R[15348]=[$R[15349]={type:"text",value:"loc"}]},$R[15350]={type:"element",tagName:"span",properties:$R[15351]={style:"color:#CB7676"},children:$R[15352]=[$R[15353]={type:"text",value:" ??"}]},$R[15354]={type:"element",tagName:"span",properties:$R[15355]={style:"color:#CB7676"},children:$R[15356]=[$R[15357]={type:"text",value:" null"}]},$R[15358]={type:"element",tagName:"span",properties:$R[15359]={style:"color:#666666"},children:$R[15360]=[$R[15361]={type:"text",value:","}]}]},$R[15362]={type:"text",value:"\n"},$R[15363]={type:"element",tagName:"span",properties:$R[15364]={class:"line"},children:$R[15365]=[$R[15366]={type:"element",tagName:"span",properties:$R[15367]={style:"color:#B8A965"},children:$R[15368]=[$R[15369]={type:"text",value:" detail"}]},$R[15370]={type:"element",tagName:"span",properties:$R[15371]={style:"color:#666666"},children:$R[15372]=[$R[15373]={type:"text",value:": {"}]}]},$R[15374]={type:"text",value:"\n"},$R[15375]={type:"element",tagName:"span",properties:$R[15376]={class:"line"},children:$R[15377]=[$R[15378]={type:"element",tagName:"span",properties:$R[15379]={style:"color:#B8A965"},children:$R[15380]=[$R[15381]={type:"text",value:" severity"}]},$R[15382]={type:"element",tagName:"span",properties:$R[15383]={style:"color:#666666"},children:$R[15384]=[$R[15385]={type:"text",value:": "}]},$R[15386]={type:"element",tagName:"span",properties:$R[15387]={style:"color:#BD976A"},children:$R[15388]=[$R[15389]={type:"text",value:"ErrorSeverity"}]},$R[15390]={type:"element",tagName:"span",properties:$R[15391]={style:"color:#666666"},children:$R[15392]=[$R[15393]={type:"text",value:"."}]},$R[15394]={type:"element",tagName:"span",properties:$R[15395]={style:"color:#BD976A"},children:$R[15396]=[$R[15397]={type:"text",value:"Todo"}]},$R[15398]={type:"element",tagName:"span",properties:$R[15399]={style:"color:#666666"},children:$R[15400]=[$R[15401]={type:"text",value:","}]}]},$R[15402]={type:"text",value:"\n"},$R[15403]={type:"element",tagName:"span",properties:$R[15404]={class:"line"},children:$R[15405]=[$R[15406]={type:"element",tagName:"span",properties:$R[15407]={style:"color:#B8A965"},children:$R[15408]=[$R[15409]={type:"text",value:" reason"}]},$R[15410]={type:"element",tagName:"span",properties:$R[15411]={style:"color:#666666"},children:$R[15412]=[$R[15413]={type:"text",value:": "}]},$R[15414]={type:"element",tagName:"span",properties:$R[15415]={style:"color:#C98A7D77"},children:$R[15416]=[$R[15417]={type:"text",value:"'"}]},$R[15418]={type:"element",tagName:"span",properties:$R[15419]={style:"color:#C98A7D"},children:$R[15420]=[$R[15421]={type:"text",value:"Skipped due to \"use no forget\" directive."}]},$R[15422]={type:"element",tagName:"span",properties:$R[15423]={style:"color:#C98A7D77"},children:$R[15424]=[$R[15425]={type:"text",value:"'"}]},$R[15426]={type:"element",tagName:"span",properties:$R[15427]={style:"color:#666666"},children:$R[15428]=[$R[15429]={type:"text",value:","}]}]},$R[15430]={type:"text",value:"\n"},$R[15431]={type:"element",tagName:"span",properties:$R[15432]={class:"line"},children:$R[15433]=[$R[15434]={type:"element",tagName:"span",properties:$R[15435]={style:"color:#B8A965"},children:$R[15436]=[$R[15437]={type:"text",value:" loc"}]},$R[15438]={type:"element",tagName:"span",properties:$R[15439]={style:"color:#666666"},children:$R[15440]=[$R[15441]={type:"text",value:": "}]},$R[15442]={type:"element",tagName:"span",properties:$R[15443]={style:"color:#BD976A"},children:$R[15444]=[$R[15445]={type:"text",value:"useNoForget"}]},$R[15446]={type:"element",tagName:"span",properties:$R[15447]={style:"color:#666666"},children:$R[15448]=[$R[15449]={type:"text",value:"."}]},$R[15450]={type:"element",tagName:"span",properties:$R[15451]={style:"color:#BD976A"},children:$R[15452]=[$R[15453]={type:"text",value:"loc"}]},$R[15454]={type:"element",tagName:"span",properties:$R[15455]={style:"color:#CB7676"},children:$R[15456]=[$R[15457]={type:"text",value:" ??"}]},$R[15458]={type:"element",tagName:"span",properties:$R[15459]={style:"color:#CB7676"},children:$R[15460]=[$R[15461]={type:"text",value:" null"}]},$R[15462]={type:"element",tagName:"span",properties:$R[15463]={style:"color:#666666"},children:$R[15464]=[$R[15465]={type:"text",value:","}]}]},$R[15466]={type:"text",value:"\n"},$R[15467]={type:"element",tagName:"span",properties:$R[15468]={class:"line"},children:$R[15469]=[$R[15470]={type:"element",tagName:"span",properties:$R[15471]={style:"color:#B8A965"},children:$R[15472]=[$R[15473]={type:"text",value:" suggestions"}]},$R[15474]={type:"element",tagName:"span",properties:$R[15475]={style:"color:#666666"},children:$R[15476]=[$R[15477]={type:"text",value:": "}]},$R[15478]={type:"element",tagName:"span",properties:$R[15479]={style:"color:#CB7676"},children:$R[15480]=[$R[15481]={type:"text",value:"null"}]},$R[15482]={type:"element",tagName:"span",properties:$R[15483]={style:"color:#666666"},children:$R[15484]=[$R[15485]={type:"text",value:","}]}]},$R[15486]={type:"text",value:"\n"},$R[15487]={type:"element",tagName:"span",properties:$R[15488]={class:"line"},children:$R[15489]=[$R[15490]={type:"element",tagName:"span",properties:$R[15491]={style:"color:#666666"},children:$R[15492]=[$R[15493]={type:"text",value:" },"}]}]},$R[15494]={type:"text",value:"\n"},$R[15495]={type:"element",tagName:"span",properties:$R[15496]={class:"line"},children:$R[15497]=[$R[15498]={type:"element",tagName:"span",properties:$R[15499]={style:"color:#666666"},children:$R[15500]=[$R[15501]={type:"text",value:" });"}]}]},$R[15502]={type:"text",value:"\n"},$R[15503]={type:"element",tagName:"span",properties:$R[15504]={class:"line"},children:$R[15505]=[$R[15506]={type:"element",tagName:"span",properties:$R[15507]={style:"color:#4D9375"},children:$R[15508]=[$R[15509]={type:"text",value:" return"}]},$R[15510]={type:"element",tagName:"span",properties:$R[15511]={style:"color:#CB7676"},children:$R[15512]=[$R[15513]={type:"text",value:" null"}]},$R[15514]={type:"element",tagName:"span",properties:$R[15515]={style:"color:#666666"},children:$R[15516]=[$R[15517]={type:"text",value:";"}]}]},$R[15518]={type:"text",value:"\n"},$R[15519]={type:"element",tagName:"span",properties:$R[15520]={class:"line"},children:$R[15521]=[$R[15522]={type:"element",tagName:"span",properties:$R[15523]={style:"color:#666666"},children:$R[15524]=[$R[15525]={type:"text",value:" }"}]}]},$R[15526]={type:"text",value:"\n"},$R[15527]={type:"element",tagName:"span",properties:$R[15528]={class:"line"},children:$R[15529]=[$R[15530]={type:"element",tagName:"span",properties:$R[15531]={style:"color:#758575DD"},children:$R[15532]=[$R[15533]={type:"text",value:" // Otherwise opt-ins enable compilation regardless of mode"}]}]},$R[15534]={type:"text",value:"\n"},$R[15535]={type:"element",tagName:"span",properties:$R[15536]={class:"line"},children:$R[15537]=[$R[15538]={type:"element",tagName:"span",properties:$R[15539]={style:"color:#4D9375"},children:$R[15540]=[$R[15541]={type:"text",value:" if"}]},$R[15542]={type:"element",tagName:"span",properties:$R[15543]={style:"color:#666666"},children:$R[15544]=[$R[15545]={type:"text",value:" ("}]},$R[15546]={type:"element",tagName:"span",properties:$R[15547]={style:"color:#80A665"},children:$R[15548]=[$R[15549]={type:"text",value:"findDirectiveEnablingMemoization"}]},$R[15550]={type:"element",tagName:"span",properties:$R[15551]={style:"color:#666666"},children:$R[15552]=[$R[15553]={type:"text",value:"("}]},$R[15554]={type:"element",tagName:"span",properties:$R[15555]={style:"color:#BD976A"},children:$R[15556]=[$R[15557]={type:"text",value:"fn"}]},$R[15558]={type:"element",tagName:"span",properties:$R[15559]={style:"color:#666666"},children:$R[15560]=[$R[15561]={type:"text",value:"."}]},$R[15562]={type:"element",tagName:"span",properties:$R[15563]={style:"color:#BD976A"},children:$R[15564]=[$R[15565]={type:"text",value:"node"}]},$R[15566]={type:"element",tagName:"span",properties:$R[15567]={style:"color:#666666"},children:$R[15568]=[$R[15569]={type:"text",value:"."}]},$R[15570]={type:"element",tagName:"span",properties:$R[15571]={style:"color:#BD976A"},children:$R[15572]=[$R[15573]={type:"text",value:"body"}]},$R[15574]={type:"element",tagName:"span",properties:$R[15575]={style:"color:#666666"},children:$R[15576]=[$R[15577]={type:"text",value:"."}]},$R[15578]={type:"element",tagName:"span",properties:$R[15579]={style:"color:#BD976A"},children:$R[15580]=[$R[15581]={type:"text",value:"directives"}]},$R[15582]={type:"element",tagName:"span",properties:$R[15583]={style:"color:#666666"},children:$R[15584]=[$R[15585]={type:"text",value:")"}]},$R[15586]={type:"element",tagName:"span",properties:$R[15587]={style:"color:#CB7676"},children:$R[15588]=[$R[15589]={type:"text",value:" !="}]},$R[15590]={type:"element",tagName:"span",properties:$R[15591]={style:"color:#CB7676"},children:$R[15592]=[$R[15593]={type:"text",value:" null"}]},$R[15594]={type:"element",tagName:"span",properties:$R[15595]={style:"color:#666666"},children:$R[15596]=[$R[15597]={type:"text",value:")"}]},$R[15598]={type:"element",tagName:"span",properties:$R[15599]={style:"color:#666666"},children:$R[15600]=[$R[15601]={type:"text",value:" {"}]}]},$R[15602]={type:"text",value:"\n"},$R[15603]={type:"element",tagName:"span",properties:$R[15604]={class:"line"},children:$R[15605]=[$R[15606]={type:"element",tagName:"span",properties:$R[15607]={style:"color:#4D9375"},children:$R[15608]=[$R[15609]={type:"text",value:" return"}]},$R[15610]={type:"element",tagName:"span",properties:$R[15611]={style:"color:#80A665"},children:$R[15612]=[$R[15613]={type:"text",value:" getComponentOrHookLike"}]},$R[15614]={type:"element",tagName:"span",properties:$R[15615]={style:"color:#666666"},children:$R[15616]=[$R[15617]={type:"text",value:"("}]},$R[15618]={type:"element",tagName:"span",properties:$R[15619]={style:"color:#BD976A"},children:$R[15620]=[$R[15621]={type:"text",value:"fn"}]},$R[15622]={type:"element",tagName:"span",properties:$R[15623]={style:"color:#666666"},children:$R[15624]=[$R[15625]={type:"text",value:","}]},$R[15626]={type:"element",tagName:"span",properties:$R[15627]={style:"color:#BD976A"},children:$R[15628]=[$R[15629]={type:"text",value:" hookPattern"}]},$R[15630]={type:"element",tagName:"span",properties:$R[15631]={style:"color:#666666"},children:$R[15632]=[$R[15633]={type:"text",value:")"}]},$R[15634]={type:"element",tagName:"span",properties:$R[15635]={style:"color:#CB7676"},children:$R[15636]=[$R[15637]={type:"text",value:" ??"}]},$R[15638]={type:"element",tagName:"span",properties:$R[15639]={style:"color:#C98A7D77"},children:$R[15640]=[$R[15641]={type:"text",value:" \""}]},$R[15642]={type:"element",tagName:"span",properties:$R[15643]={style:"color:#C98A7D"},children:$R[15644]=[$R[15645]={type:"text",value:"Other"}]},$R[15646]={type:"element",tagName:"span",properties:$R[15647]={style:"color:#C98A7D77"},children:$R[15648]=[$R[15649]={type:"text",value:"\""}]},$R[15650]={type:"element",tagName:"span",properties:$R[15651]={style:"color:#666666"},children:$R[15652]=[$R[15653]={type:"text",value:";"}]}]},$R[15654]={type:"text",value:"\n"},$R[15655]={type:"element",tagName:"span",properties:$R[15656]={class:"line"},children:$R[15657]=[$R[15658]={type:"element",tagName:"span",properties:$R[15659]={style:"color:#666666"},children:$R[15660]=[$R[15661]={type:"text",value:" }"}]}]},$R[15662]={type:"text",value:"\n"},$R[15663]={type:"element",tagName:"span",properties:$R[15664]={class:"line"},children:$R[15665]=[$R[15666]={type:"element",tagName:"span",properties:$R[15667]={style:"color:#666666"},children:$R[15668]=[$R[15669]={type:"text",value:" }"}]}]},$R[15670]={type:"text",value:"\n"},$R[15671]={type:"element",tagName:"span",properties:$R[15672]={class:"line"},children:$R[15673]=[$R[15674]={type:"element",tagName:"span",properties:$R[15675]={style:"color:#4D9375"},children:$R[15676]=[$R[15677]={type:"text",value:" switch"}]},$R[15678]={type:"element",tagName:"span",properties:$R[15679]={style:"color:#666666"},children:$R[15680]=[$R[15681]={type:"text",value:" ("}]},$R[15682]={type:"element",tagName:"span",properties:$R[15683]={style:"color:#BD976A"},children:$R[15684]=[$R[15685]={type:"text",value:"pass"}]},$R[15686]={type:"element",tagName:"span",properties:$R[15687]={style:"color:#666666"},children:$R[15688]=[$R[15689]={type:"text",value:"."}]},$R[15690]={type:"element",tagName:"span",properties:$R[15691]={style:"color:#BD976A"},children:$R[15692]=[$R[15693]={type:"text",value:"opts"}]},$R[15694]={type:"element",tagName:"span",properties:$R[15695]={style:"color:#666666"},children:$R[15696]=[$R[15697]={type:"text",value:"."}]},$R[15698]={type:"element",tagName:"span",properties:$R[15699]={style:"color:#BD976A"},children:$R[15700]=[$R[15701]={type:"text",value:"compilationMode"}]},$R[15702]={type:"element",tagName:"span",properties:$R[15703]={style:"color:#666666"},children:$R[15704]=[$R[15705]={type:"text",value:")"}]},$R[15706]={type:"element",tagName:"span",properties:$R[15707]={style:"color:#666666"},children:$R[15708]=[$R[15709]={type:"text",value:" {"}]}]},$R[15710]={type:"text",value:"\n"},$R[15711]={type:"element",tagName:"span",properties:$R[15712]={class:"line"},children:$R[15713]=[$R[15714]={type:"element",tagName:"span",properties:$R[15715]={style:"color:#4D9375"},children:$R[15716]=[$R[15717]={type:"text",value:" case"}]},$R[15718]={type:"element",tagName:"span",properties:$R[15719]={style:"color:#C98A7D77"},children:$R[15720]=[$R[15721]={type:"text",value:" \""}]},$R[15722]={type:"element",tagName:"span",properties:$R[15723]={style:"color:#C98A7D"},children:$R[15724]=[$R[15725]={type:"text",value:"annotation"}]},$R[15726]={type:"element",tagName:"span",properties:$R[15727]={style:"color:#C98A7D77"},children:$R[15728]=[$R[15729]={type:"text",value:"\""}]},$R[15730]={type:"element",tagName:"span",properties:$R[15731]={style:"color:#666666"},children:$R[15732]=[$R[15733]={type:"text",value:":"}]},$R[15734]={type:"element",tagName:"span",properties:$R[15735]={style:"color:#666666"},children:$R[15736]=[$R[15737]={type:"text",value:" {"}]}]},$R[15738]={type:"text",value:"\n"},$R[15739]={type:"element",tagName:"span",properties:$R[15740]={class:"line"},children:$R[15741]=[$R[15742]={type:"element",tagName:"span",properties:$R[15743]={style:"color:#758575DD"},children:$R[15744]=[$R[15745]={type:"text",value:" // opt-ins are checked above"}]}]},$R[15746]={type:"text",value:"\n"},$R[15747]={type:"element",tagName:"span",properties:$R[15748]={class:"line"},children:$R[15749]=[$R[15750]={type:"element",tagName:"span",properties:$R[15751]={style:"color:#4D9375"},children:$R[15752]=[$R[15753]={type:"text",value:" return"}]},$R[15754]={type:"element",tagName:"span",properties:$R[15755]={style:"color:#CB7676"},children:$R[15756]=[$R[15757]={type:"text",value:" null"}]},$R[15758]={type:"element",tagName:"span",properties:$R[15759]={style:"color:#666666"},children:$R[15760]=[$R[15761]={type:"text",value:";"}]}]},$R[15762]={type:"text",value:"\n"},$R[15763]={type:"element",tagName:"span",properties:$R[15764]={class:"line"},children:$R[15765]=[$R[15766]={type:"element",tagName:"span",properties:$R[15767]={style:"color:#666666"},children:$R[15768]=[$R[15769]={type:"text",value:" }"}]}]},$R[15770]={type:"text",value:"\n"},$R[15771]={type:"element",tagName:"span",properties:$R[15772]={class:"line"},children:$R[15773]=[$R[15774]={type:"element",tagName:"span",properties:$R[15775]={style:"color:#4D9375"},children:$R[15776]=[$R[15777]={type:"text",value:" case"}]},$R[15778]={type:"element",tagName:"span",properties:$R[15779]={style:"color:#C98A7D77"},children:$R[15780]=[$R[15781]={type:"text",value:" \""}]},$R[15782]={type:"element",tagName:"span",properties:$R[15783]={style:"color:#C98A7D"},children:$R[15784]=[$R[15785]={type:"text",value:"infer"}]},$R[15786]={type:"element",tagName:"span",properties:$R[15787]={style:"color:#C98A7D77"},children:$R[15788]=[$R[15789]={type:"text",value:"\""}]},$R[15790]={type:"element",tagName:"span",properties:$R[15791]={style:"color:#666666"},children:$R[15792]=[$R[15793]={type:"text",value:":"}]},$R[15794]={type:"element",tagName:"span",properties:$R[15795]={style:"color:#666666"},children:$R[15796]=[$R[15797]={type:"text",value:" {"}]}]},$R[15798]={type:"text",value:"\n"},$R[15799]={type:"element",tagName:"span",properties:$R[15800]={class:"line"},children:$R[15801]=[$R[15802]={type:"element",tagName:"span",properties:$R[15803]={style:"color:#758575DD"},children:$R[15804]=[$R[15805]={type:"text",value:" // Component and hook declarations are known components/hooks"}]}]},$R[15806]={type:"text",value:"\n"},$R[15807]={type:"element",tagName:"span",properties:$R[15808]={class:"line"},children:$R[15809]=[$R[15810]={type:"element",tagName:"span",properties:$R[15811]={style:"color:#4D9375"},children:$R[15812]=[$R[15813]={type:"text",value:" if"}]},$R[15814]={type:"element",tagName:"span",properties:$R[15815]={style:"color:#666666"},children:$R[15816]=[$R[15817]={type:"text",value:" ("}]},$R[15818]={type:"element",tagName:"span",properties:$R[15819]={style:"color:#BD976A"},children:$R[15820]=[$R[15821]={type:"text",value:"fn"}]},$R[15822]={type:"element",tagName:"span",properties:$R[15823]={style:"color:#666666"},children:$R[15824]=[$R[15825]={type:"text",value:"."}]},$R[15826]={type:"element",tagName:"span",properties:$R[15827]={style:"color:#80A665"},children:$R[15828]=[$R[15829]={type:"text",value:"isFunctionDeclaration"}]},$R[15830]={type:"element",tagName:"span",properties:$R[15831]={style:"color:#666666"},children:$R[15832]=[$R[15833]={type:"text",value:"())"}]},$R[15834]={type:"element",tagName:"span",properties:$R[15835]={style:"color:#666666"},children:$R[15836]=[$R[15837]={type:"text",value:" {"}]}]},$R[15838]={type:"text",value:"\n"},$R[15839]={type:"element",tagName:"span",properties:$R[15840]={class:"line"},children:$R[15841]=[$R[15842]={type:"element",tagName:"span",properties:$R[15843]={style:"color:#4D9375"},children:$R[15844]=[$R[15845]={type:"text",value:" if"}]},$R[15846]={type:"element",tagName:"span",properties:$R[15847]={style:"color:#666666"},children:$R[15848]=[$R[15849]={type:"text",value:" ("}]},$R[15850]={type:"element",tagName:"span",properties:$R[15851]={style:"color:#80A665"},children:$R[15852]=[$R[15853]={type:"text",value:"isComponentDeclaration"}]},$R[15854]={type:"element",tagName:"span",properties:$R[15855]={style:"color:#666666"},children:$R[15856]=[$R[15857]={type:"text",value:"("}]},$R[15858]={type:"element",tagName:"span",properties:$R[15859]={style:"color:#BD976A"},children:$R[15860]=[$R[15861]={type:"text",value:"fn"}]},$R[15862]={type:"element",tagName:"span",properties:$R[15863]={style:"color:#666666"},children:$R[15864]=[$R[15865]={type:"text",value:"."}]},$R[15866]={type:"element",tagName:"span",properties:$R[15867]={style:"color:#BD976A"},children:$R[15868]=[$R[15869]={type:"text",value:"node"}]},$R[15870]={type:"element",tagName:"span",properties:$R[15871]={style:"color:#666666"},children:$R[15872]=[$R[15873]={type:"text",value:"))"}]},$R[15874]={type:"element",tagName:"span",properties:$R[15875]={style:"color:#666666"},children:$R[15876]=[$R[15877]={type:"text",value:" {"}]}]},$R[15878]={type:"text",value:"\n"},$R[15879]={type:"element",tagName:"span",properties:$R[15880]={class:"line"},children:$R[15881]=[$R[15882]={type:"element",tagName:"span",properties:$R[15883]={style:"color:#4D9375"},children:$R[15884]=[$R[15885]={type:"text",value:" return"}]},$R[15886]={type:"element",tagName:"span",properties:$R[15887]={style:"color:#C98A7D77"},children:$R[15888]=[$R[15889]={type:"text",value:" \""}]},$R[15890]={type:"element",tagName:"span",properties:$R[15891]={style:"color:#C98A7D"},children:$R[15892]=[$R[15893]={type:"text",value:"Component"}]},$R[15894]={type:"element",tagName:"span",properties:$R[15895]={style:"color:#C98A7D77"},children:$R[15896]=[$R[15897]={type:"text",value:"\""}]},$R[15898]={type:"element",tagName:"span",properties:$R[15899]={style:"color:#666666"},children:$R[15900]=[$R[15901]={type:"text",value:";"}]}]},$R[15902]={type:"text",value:"\n"},$R[15903]={type:"element",tagName:"span",properties:$R[15904]={class:"line"},children:$R[15905]=[$R[15906]={type:"element",tagName:"span",properties:$R[15907]={style:"color:#666666"},children:$R[15908]=[$R[15909]={type:"text",value:" }"}]},$R[15910]={type:"element",tagName:"span",properties:$R[15911]={style:"color:#4D9375"},children:$R[15912]=[$R[15913]={type:"text",value:" else"}]},$R[15914]={type:"element",tagName:"span",properties:$R[15915]={style:"color:#4D9375"},children:$R[15916]=[$R[15917]={type:"text",value:" if"}]},$R[15918]={type:"element",tagName:"span",properties:$R[15919]={style:"color:#666666"},children:$R[15920]=[$R[15921]={type:"text",value:" ("}]},$R[15922]={type:"element",tagName:"span",properties:$R[15923]={style:"color:#80A665"},children:$R[15924]=[$R[15925]={type:"text",value:"isHookDeclaration"}]},$R[15926]={type:"element",tagName:"span",properties:$R[15927]={style:"color:#666666"},children:$R[15928]=[$R[15929]={type:"text",value:"("}]},$R[15930]={type:"element",tagName:"span",properties:$R[15931]={style:"color:#BD976A"},children:$R[15932]=[$R[15933]={type:"text",value:"fn"}]},$R[15934]={type:"element",tagName:"span",properties:$R[15935]={style:"color:#666666"},children:$R[15936]=[$R[15937]={type:"text",value:"."}]},$R[15938]={type:"element",tagName:"span",properties:$R[15939]={style:"color:#BD976A"},children:$R[15940]=[$R[15941]={type:"text",value:"node"}]},$R[15942]={type:"element",tagName:"span",properties:$R[15943]={style:"color:#666666"},children:$R[15944]=[$R[15945]={type:"text",value:"))"}]},$R[15946]={type:"element",tagName:"span",properties:$R[15947]={style:"color:#666666"},children:$R[15948]=[$R[15949]={type:"text",value:" {"}]}]},$R[15950]={type:"text",value:"\n"},$R[15951]={type:"element",tagName:"span",properties:$R[15952]={class:"line"},children:$R[15953]=[$R[15954]={type:"element",tagName:"span",properties:$R[15955]={style:"color:#4D9375"},children:$R[15956]=[$R[15957]={type:"text",value:" return"}]},$R[15958]={type:"element",tagName:"span",properties:$R[15959]={style:"color:#C98A7D77"},children:$R[15960]=[$R[15961]={type:"text",value:" \""}]},$R[15962]={type:"element",tagName:"span",properties:$R[15963]={style:"color:#C98A7D"},children:$R[15964]=[$R[15965]={type:"text",value:"Hook"}]},$R[15966]={type:"element",tagName:"span",properties:$R[15967]={style:"color:#C98A7D77"},children:$R[15968]=[$R[15969]={type:"text",value:"\""}]},$R[15970]={type:"element",tagName:"span",properties:$R[15971]={style:"color:#666666"},children:$R[15972]=[$R[15973]={type:"text",value:";"}]}]},$R[15974]={type:"text",value:"\n"},$R[15975]={type:"element",tagName:"span",properties:$R[15976]={class:"line"},children:$R[15977]=[$R[15978]={type:"element",tagName:"span",properties:$R[15979]={style:"color:#666666"},children:$R[15980]=[$R[15981]={type:"text",value:" }"}]}]},$R[15982]={type:"text",value:"\n"},$R[15983]={type:"element",tagName:"span",properties:$R[15984]={class:"line"},children:$R[15985]=[$R[15986]={type:"element",tagName:"span",properties:$R[15987]={style:"color:#666666"},children:$R[15988]=[$R[15989]={type:"text",value:" }"}]}]},$R[15990]={type:"text",value:"\n"},$R[15991]={type:"element",tagName:"span",properties:$R[15992]={class:"line"},children:$R[15993]=[]},$R[15994]={type:"text",value:"\n"},$R[15995]={type:"element",tagName:"span",properties:$R[15996]={class:"line"},children:$R[15997]=[$R[15998]={type:"element",tagName:"span",properties:$R[15999]={style:"color:#758575DD"},children:$R[16000]=[$R[16001]={type:"text",value:" // Otherwise check if this is a component or hook-like function"}]}]},$R[16002]={type:"text",value:"\n"},$R[16003]={type:"element",tagName:"span",properties:$R[16004]={class:"line"},children:$R[16005]=[$R[16006]={type:"element",tagName:"span",properties:$R[16007]={style:"color:#4D9375"},children:$R[16008]=[$R[16009]={type:"text",value:" return"}]},$R[16010]={type:"element",tagName:"span",properties:$R[16011]={style:"color:#80A665"},children:$R[16012]=[$R[16013]={type:"text",value:" getComponentOrHookLike"}]},$R[16014]={type:"element",tagName:"span",properties:$R[16015]={style:"color:#666666"},children:$R[16016]=[$R[16017]={type:"text",value:"("}]},$R[16018]={type:"element",tagName:"span",properties:$R[16019]={style:"color:#BD976A"},children:$R[16020]=[$R[16021]={type:"text",value:"fn"}]},$R[16022]={type:"element",tagName:"span",properties:$R[16023]={style:"color:#666666"},children:$R[16024]=[$R[16025]={type:"text",value:","}]},$R[16026]={type:"element",tagName:"span",properties:$R[16027]={style:"color:#BD976A"},children:$R[16028]=[$R[16029]={type:"text",value:" hookPattern"}]},$R[16030]={type:"element",tagName:"span",properties:$R[16031]={style:"color:#666666"},children:$R[16032]=[$R[16033]={type:"text",value:");"}]}]},$R[16034]={type:"text",value:"\n"},$R[16035]={type:"element",tagName:"span",properties:$R[16036]={class:"line"},children:$R[16037]=[$R[16038]={type:"element",tagName:"span",properties:$R[16039]={style:"color:#666666"},children:$R[16040]=[$R[16041]={type:"text",value:" }"}]}]},$R[16042]={type:"text",value:"\n"},$R[16043]={type:"element",tagName:"span",properties:$R[16044]={class:"line"},children:$R[16045]=[$R[16046]={type:"element",tagName:"span",properties:$R[16047]={style:"color:#4D9375"},children:$R[16048]=[$R[16049]={type:"text",value:" case"}]},$R[16050]={type:"element",tagName:"span",properties:$R[16051]={style:"color:#C98A7D77"},children:$R[16052]=[$R[16053]={type:"text",value:" \""}]},$R[16054]={type:"element",tagName:"span",properties:$R[16055]={style:"color:#C98A7D"},children:$R[16056]=[$R[16057]={type:"text",value:"all"}]},$R[16058]={type:"element",tagName:"span",properties:$R[16059]={style:"color:#C98A7D77"},children:$R[16060]=[$R[16061]={type:"text",value:"\""}]},$R[16062]={type:"element",tagName:"span",properties:$R[16063]={style:"color:#666666"},children:$R[16064]=[$R[16065]={type:"text",value:":"}]},$R[16066]={type:"element",tagName:"span",properties:$R[16067]={style:"color:#666666"},children:$R[16068]=[$R[16069]={type:"text",value:" {"}]}]},$R[16070]={type:"text",value:"\n"},$R[16071]={type:"element",tagName:"span",properties:$R[16072]={class:"line"},children:$R[16073]=[$R[16074]={type:"element",tagName:"span",properties:$R[16075]={style:"color:#758575DD"},children:$R[16076]=[$R[16077]={type:"text",value:" // Compile only top level functions"}]}]},$R[16078]={type:"text",value:"\n"},$R[16079]={type:"element",tagName:"span",properties:$R[16080]={class:"line"},children:$R[16081]=[$R[16082]={type:"element",tagName:"span",properties:$R[16083]={style:"color:#4D9375"},children:$R[16084]=[$R[16085]={type:"text",value:" if"}]},$R[16086]={type:"element",tagName:"span",properties:$R[16087]={style:"color:#666666"},children:$R[16088]=[$R[16089]={type:"text",value:" ("}]},$R[16090]={type:"element",tagName:"span",properties:$R[16091]={style:"color:#BD976A"},children:$R[16092]=[$R[16093]={type:"text",value:"fn"}]},$R[16094]={type:"element",tagName:"span",properties:$R[16095]={style:"color:#666666"},children:$R[16096]=[$R[16097]={type:"text",value:"."}]},$R[16098]={type:"element",tagName:"span",properties:$R[16099]={style:"color:#BD976A"},children:$R[16100]=[$R[16101]={type:"text",value:"scope"}]},$R[16102]={type:"element",tagName:"span",properties:$R[16103]={style:"color:#666666"},children:$R[16104]=[$R[16105]={type:"text",value:"."}]},$R[16106]={type:"element",tagName:"span",properties:$R[16107]={style:"color:#80A665"},children:$R[16108]=[$R[16109]={type:"text",value:"getProgramParent"}]},$R[16110]={type:"element",tagName:"span",properties:$R[16111]={style:"color:#666666"},children:$R[16112]=[$R[16113]={type:"text",value:"()"}]},$R[16114]={type:"element",tagName:"span",properties:$R[16115]={style:"color:#CB7676"},children:$R[16116]=[$R[16117]={type:"text",value:" !=="}]},$R[16118]={type:"element",tagName:"span",properties:$R[16119]={style:"color:#BD976A"},children:$R[16120]=[$R[16121]={type:"text",value:" fn"}]},$R[16122]={type:"element",tagName:"span",properties:$R[16123]={style:"color:#666666"},children:$R[16124]=[$R[16125]={type:"text",value:"."}]},$R[16126]={type:"element",tagName:"span",properties:$R[16127]={style:"color:#BD976A"},children:$R[16128]=[$R[16129]={type:"text",value:"scope"}]},$R[16130]={type:"element",tagName:"span",properties:$R[16131]={style:"color:#666666"},children:$R[16132]=[$R[16133]={type:"text",value:"."}]},$R[16134]={type:"element",tagName:"span",properties:$R[16135]={style:"color:#BD976A"},children:$R[16136]=[$R[16137]={type:"text",value:"parent"}]},$R[16138]={type:"element",tagName:"span",properties:$R[16139]={style:"color:#666666"},children:$R[16140]=[$R[16141]={type:"text",value:")"}]},$R[16142]={type:"element",tagName:"span",properties:$R[16143]={style:"color:#666666"},children:$R[16144]=[$R[16145]={type:"text",value:" {"}]}]},$R[16146]={type:"text",value:"\n"},$R[16147]={type:"element",tagName:"span",properties:$R[16148]={class:"line"},children:$R[16149]=[$R[16150]={type:"element",tagName:"span",properties:$R[16151]={style:"color:#4D9375"},children:$R[16152]=[$R[16153]={type:"text",value:" return"}]},$R[16154]={type:"element",tagName:"span",properties:$R[16155]={style:"color:#CB7676"},children:$R[16156]=[$R[16157]={type:"text",value:" null"}]},$R[16158]={type:"element",tagName:"span",properties:$R[16159]={style:"color:#666666"},children:$R[16160]=[$R[16161]={type:"text",value:";"}]}]},$R[16162]={type:"text",value:"\n"},$R[16163]={type:"element",tagName:"span",properties:$R[16164]={class:"line"},children:$R[16165]=[$R[16166]={type:"element",tagName:"span",properties:$R[16167]={style:"color:#666666"},children:$R[16168]=[$R[16169]={type:"text",value:" }"}]}]},$R[16170]={type:"text",value:"\n"},$R[16171]={type:"element",tagName:"span",properties:$R[16172]={class:"line"},children:$R[16173]=[]},$R[16174]={type:"text",value:"\n"},$R[16175]={type:"element",tagName:"span",properties:$R[16176]={class:"line"},children:$R[16177]=[$R[16178]={type:"element",tagName:"span",properties:$R[16179]={style:"color:#4D9375"},children:$R[16180]=[$R[16181]={type:"text",value:" return"}]},$R[16182]={type:"element",tagName:"span",properties:$R[16183]={style:"color:#80A665"},children:$R[16184]=[$R[16185]={type:"text",value:" getComponentOrHookLike"}]},$R[16186]={type:"element",tagName:"span",properties:$R[16187]={style:"color:#666666"},children:$R[16188]=[$R[16189]={type:"text",value:"("}]},$R[16190]={type:"element",tagName:"span",properties:$R[16191]={style:"color:#BD976A"},children:$R[16192]=[$R[16193]={type:"text",value:"fn"}]},$R[16194]={type:"element",tagName:"span",properties:$R[16195]={style:"color:#666666"},children:$R[16196]=[$R[16197]={type:"text",value:","}]},$R[16198]={type:"element",tagName:"span",properties:$R[16199]={style:"color:#BD976A"},children:$R[16200]=[$R[16201]={type:"text",value:" hookPattern"}]},$R[16202]={type:"element",tagName:"span",properties:$R[16203]={style:"color:#666666"},children:$R[16204]=[$R[16205]={type:"text",value:")"}]},$R[16206]={type:"element",tagName:"span",properties:$R[16207]={style:"color:#CB7676"},children:$R[16208]=[$R[16209]={type:"text",value:" ??"}]},$R[16210]={type:"element",tagName:"span",properties:$R[16211]={style:"color:#C98A7D77"},children:$R[16212]=[$R[16213]={type:"text",value:" \""}]},$R[16214]={type:"element",tagName:"span",properties:$R[16215]={style:"color:#C98A7D"},children:$R[16216]=[$R[16217]={type:"text",value:"Other"}]},$R[16218]={type:"element",tagName:"span",properties:$R[16219]={style:"color:#C98A7D77"},children:$R[16220]=[$R[16221]={type:"text",value:"\""}]},$R[16222]={type:"element",tagName:"span",properties:$R[16223]={style:"color:#666666"},children:$R[16224]=[$R[16225]={type:"text",value:";"}]}]},$R[16226]={type:"text",value:"\n"},$R[16227]={type:"element",tagName:"span",properties:$R[16228]={class:"line"},children:$R[16229]=[$R[16230]={type:"element",tagName:"span",properties:$R[16231]={style:"color:#666666"},children:$R[16232]=[$R[16233]={type:"text",value:" }"}]}]},$R[16234]={type:"text",value:"\n"},$R[16235]={type:"element",tagName:"span",properties:$R[16236]={class:"line"},children:$R[16237]=[$R[16238]={type:"element",tagName:"span",properties:$R[16239]={style:"color:#4D9375"},children:$R[16240]=[$R[16241]={type:"text",value:" default"}]},$R[16242]={type:"element",tagName:"span",properties:$R[16243]={style:"color:#666666"},children:$R[16244]=[$R[16245]={type:"text",value:":"}]},$R[16246]={type:"element",tagName:"span",properties:$R[16247]={style:"color:#666666"},children:$R[16248]=[$R[16249]={type:"text",value:" {"}]}]},$R[16250]={type:"text",value:"\n"},$R[16251]={type:"element",tagName:"span",properties:$R[16252]={class:"line"},children:$R[16253]=[$R[16254]={type:"element",tagName:"span",properties:$R[16255]={style:"color:#80A665"},children:$R[16256]=[$R[16257]={type:"text",value:" assertExhaustive"}]},$R[16258]={type:"element",tagName:"span",properties:$R[16259]={style:"color:#666666"},children:$R[16260]=[$R[16261]={type:"text",value:"("}]}]},$R[16262]={type:"text",value:"\n"},$R[16263]={type:"element",tagName:"span",properties:$R[16264]={class:"line"},children:$R[16265]=[$R[16266]={type:"element",tagName:"span",properties:$R[16267]={style:"color:#BD976A"},children:$R[16268]=[$R[16269]={type:"text",value:" pass"}]},$R[16270]={type:"element",tagName:"span",properties:$R[16271]={style:"color:#666666"},children:$R[16272]=[$R[16273]={type:"text",value:"."}]},$R[16274]={type:"element",tagName:"span",properties:$R[16275]={style:"color:#BD976A"},children:$R[16276]=[$R[16277]={type:"text",value:"opts"}]},$R[16278]={type:"element",tagName:"span",properties:$R[16279]={style:"color:#666666"},children:$R[16280]=[$R[16281]={type:"text",value:"."}]},$R[16282]={type:"element",tagName:"span",properties:$R[16283]={style:"color:#BD976A"},children:$R[16284]=[$R[16285]={type:"text",value:"compilationMode"}]},$R[16286]={type:"element",tagName:"span",properties:$R[16287]={style:"color:#666666"},children:$R[16288]=[$R[16289]={type:"text",value:","}]}]},$R[16290]={type:"text",value:"\n"},$R[16291]={type:"element",tagName:"span",properties:$R[16292]={class:"line"},children:$R[16293]=[$R[16294]={type:"element",tagName:"span",properties:$R[16295]={style:"color:#C98A7D77"},children:$R[16296]=[$R[16297]={type:"text",value:" `"}]},$R[16298]={type:"element",tagName:"span",properties:$R[16299]={style:"color:#C98A7D"},children:$R[16300]=[$R[16301]={type:"text",value:"Unexpected compilationMode "}]},$R[16302]={type:"element",tagName:"span",properties:$R[16303]={style:"color:#C99076"},children:$R[16304]=[$R[16305]={type:"text",value:"\\`"}]},$R[16306]={type:"element",tagName:"span",properties:$R[16307]={style:"color:#4D9375"},children:$R[16308]=[$R[16309]={type:"text",value:"${"}]},$R[16310]={type:"element",tagName:"span",properties:$R[16311]={style:"color:#C98A7D"},children:$R[16312]=[$R[16313]={type:"text",value:"pass"}]},$R[16314]={type:"element",tagName:"span",properties:$R[16315]={style:"color:#666666"},children:$R[16316]=[$R[16317]={type:"text",value:"."}]},$R[16318]={type:"element",tagName:"span",properties:$R[16319]={style:"color:#C98A7D"},children:$R[16320]=[$R[16321]={type:"text",value:"opts"}]},$R[16322]={type:"element",tagName:"span",properties:$R[16323]={style:"color:#666666"},children:$R[16324]=[$R[16325]={type:"text",value:"."}]},$R[16326]={type:"element",tagName:"span",properties:$R[16327]={style:"color:#C98A7D"},children:$R[16328]=[$R[16329]={type:"text",value:"compilationMode"}]},$R[16330]={type:"element",tagName:"span",properties:$R[16331]={style:"color:#4D9375"},children:$R[16332]=[$R[16333]={type:"text",value:"}"}]},$R[16334]={type:"element",tagName:"span",properties:$R[16335]={style:"color:#C99076"},children:$R[16336]=[$R[16337]={type:"text",value:"\\`"}]},$R[16338]={type:"element",tagName:"span",properties:$R[16339]={style:"color:#C98A7D77"},children:$R[16340]=[$R[16341]={type:"text",value:"`"}]}]},$R[16342]={type:"text",value:"\n"},$R[16343]={type:"element",tagName:"span",properties:$R[16344]={class:"line"},children:$R[16345]=[$R[16346]={type:"element",tagName:"span",properties:$R[16347]={style:"color:#666666"},children:$R[16348]=[$R[16349]={type:"text",value:" );"}]}]},$R[16350]={type:"text",value:"\n"},$R[16351]={type:"element",tagName:"span",properties:$R[16352]={class:"line"},children:$R[16353]=[$R[16354]={type:"element",tagName:"span",properties:$R[16355]={style:"color:#666666"},children:$R[16356]=[$R[16357]={type:"text",value:" }"}]}]},$R[16358]={type:"text",value:"\n"},$R[16359]={type:"element",tagName:"span",properties:$R[16360]={class:"line"},children:$R[16361]=[$R[16362]={type:"element",tagName:"span",properties:$R[16363]={style:"color:#666666"},children:$R[16364]=[$R[16365]={type:"text",value:" }"}]}]},$R[16366]={type:"text",value:"\n"},$R[16367]={type:"element",tagName:"span",properties:$R[16368]={class:"line"},children:$R[16369]=[$R[16370]={type:"element",tagName:"span",properties:$R[16371]={style:"color:#666666"},children:$R[16372]=[$R[16373]={type:"text",value:"}"}]}]}]}]}]}},$R[16374]={meta:$R[16375]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[16376]={images:$R[16377]=[$R[16378]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[16379]={images:$R[16380]=[$R[16381]={url:"https://opengraph.githubassets.com/9c89b6c4a2146563487935ec6d7bec51754954760f7826c76f322c041a8f1785/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[16382]={start:$R[16383]={line:149,column:1,offset:5057},end:$R[16384]={line:149,column:162,offset:5218}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L471-L533",type:"embed"},$R[16385]={children:$R[16386]=[$R[16387]={position:$R[16388]={start:$R[16389]={line:151,column:1,offset:5220},end:$R[16390]={line:151,column:33,offset:5252}},type:"text",value:"上記のコードコメントにある通り、ディレクティブが見つかった場合、"},$R[16391]={position:$R[16392]={start:$R[16393]={line:151,column:33,offset:5252},end:$R[16394]={line:151,column:50,offset:5269}},type:"inlineCode",value:"compilationMode"},$R[16395]={position:$R[16396]={start:$R[16397]={line:151,column:50,offset:5269},end:$R[16398]={line:151,column:76,offset:5295}},type:"text",value:" の値に関係なくディレクティブの指示に従う。つまり、"},$R[16399]={position:$R[16400]={start:$R[16401]={line:151,column:76,offset:5295},end:$R[16402]={line:151,column:91,offset:5310}},type:"inlineCode",value:"\"use no memo\""},$R[16403]={position:$R[16404]={start:$R[16405]={line:151,column:91,offset:5310},end:$R[16406]={line:151,column:115,offset:5334}},type:"text",value:" が見つかった場合はコンパイルをスキップするし、"},$R[16407]={position:$R[16408]={start:$R[16409]={line:151,column:115,offset:5334},end:$R[16410]={line:151,column:127,offset:5346}},type:"inlineCode",value:"\"use memo\""},$R[16411]={position:$R[16412]={start:$R[16413]={line:151,column:127,offset:5346},end:$R[16414]={line:151,column:148,offset:5367}},type:"text",value:" が見つかった場合はコンパイルを実行する。"}],position:$R[16415]={start:$R[16416]={line:151,column:1,offset:5220},end:$R[16417]={line:151,column:148,offset:5367}},type:"paragraph"}],position:$R[16418]={end:$R[16419]={line:151,column:148,offset:5367},start:$R[16420]={line:70,column:1,offset:2844}},type:"section"},$R[16421]={children:$R[16422]=[$R[16423]={children:$R[16424]=[$R[16425]={position:$R[16426]={start:$R[16427]={line:153,column:4,offset:5372},end:$R[16428]={line:153,column:7,offset:5375}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[16429]={start:$R[16430]={line:153,column:1,offset:5369},end:$R[16431]={line:153,column:7,offset:5375}},type:"heading"},$R[16432]={children:$R[16433]=[$R[16434]={position:$R[16435]={start:$R[16436]={line:155,column:1,offset:5377},end:$R[16437]={line:155,column:46,offset:5422}},type:"text",value:"React Compiler の opt-in と opt-out について整理してみた。"},$R[16438]={position:$R[16439]={start:$R[16440]={line:155,column:46,offset:5422},end:$R[16441]={line:155,column:63,offset:5439}},type:"inlineCode",value:"compilationMode"},$R[16442]={position:$R[16443]={start:$R[16444]={line:155,column:63,offset:5439},end:$R[16445]={line:155,column:92,offset:5468}},type:"text",value:" は opt-in と opt-out の挙動を制御する。"},$R[16446]={position:$R[16447]={start:$R[16448]={line:155,column:92,offset:5468},end:$R[16449]={line:155,column:104,offset:5480}},type:"inlineCode",value:"\"use memo\""},$R[16450]={position:$R[16451]={start:$R[16452]={line:155,column:104,offset:5480},end:$R[16453]={line:155,column:107,offset:5483}},type:"text",value:" と "},$R[16454]={position:$R[16455]={start:$R[16456]={line:155,column:107,offset:5483},end:$R[16457]={line:155,column:122,offset:5498}},type:"inlineCode",value:"\"use no memo\""},$R[16458]={position:$R[16459]={start:$R[16460]={line:155,column:122,offset:5498},end:$R[16461]={line:155,column:150,offset:5526}},type:"text",value:" はどちらもコンパイルの挙動を変更するディレクティブで、"},$R[16462]={position:$R[16463]={start:$R[16464]={line:155,column:150,offset:5526},end:$R[16465]={line:155,column:167,offset:5543}},type:"inlineCode",value:"compilationMode"},$R[16466]={position:$R[16467]={start:$R[16468]={line:155,column:167,offset:5543},end:$R[16469]={line:155,column:183,offset:5559}},type:"text",value:" の値に関係なく挙動を変更する。"}],position:$R[16470]={start:$R[16471]={line:155,column:1,offset:5377},end:$R[16472]={line:155,column:183,offset:5559}},type:"paragraph"},$R[16473]={children:$R[16474]=[$R[16475]={position:$R[16476]={start:$R[16477]={line:157,column:1,offset:5561},end:$R[16478]={line:157,column:21,offset:5581}},type:"text",value:"React Compiler の中身を "},$R[16479]={children:$R[16480]=[$R[16481]={position:$R[16482]={start:$R[16483]={line:157,column:22,offset:5582},end:$R[16484]={line:157,column:31,offset:5591}},type:"text",value:"@yossydev"}],position:$R[16485]={start:$R[16486]={line:157,column:21,offset:5581},end:$R[16487]={line:157,column:62,offset:5622}},title:void 0,type:"link",url:"https://twitter.com/yossydev"},$R[16488]={position:$R[16489]={start:$R[16490]={line:157,column:62,offset:5622},end:$R[16491]={line:157,column:63,offset:5623}},type:"text",value:"、"},$R[16492]={children:$R[16493]=[$R[16494]={position:$R[16495]={start:$R[16496]={line:157,column:64,offset:5624},end:$R[16497]={line:157,column:76,offset:5636}},type:"text",value:"@shun_shobon"}],position:$R[16498]={start:$R[16499]={line:157,column:63,offset:5623},end:$R[16500]={line:157,column:110,offset:5670}},title:void 0,type:"link",url:"https://twitter.com/shun_shobon"},$R[16501]={position:$R[16502]={start:$R[16503]={line:157,column:110,offset:5670},end:$R[16504]={line:157,column:137,offset:5697}},type:"text",value:" と読んでいるので、興味がある方はぜひ見てみてほしい。"}],position:$R[16505]={start:$R[16506]={line:157,column:1,offset:5561},end:$R[16507]={line:157,column:137,offset:5697}},type:"paragraph"},$R[16508]={allowFullScreen:void 0,height:"360",position:$R[16509]={start:$R[16510]={line:159,column:1,offset:5699},end:$R[16511]={line:159,column:44,offset:5742}},src:"https://www.youtube.com/embed/PqPgr_hlVKM",type:"embed",width:"100%"}],position:$R[16512]={end:$R[16513]={line:159,column:44,offset:5742},start:$R[16514]={line:153,column:1,offset:5369}},type:"section"}],footnotes:$R[16515]=[],title:$R[16516]={children:$R[16517]=[$R[16518]={position:$R[16519]={start:$R[16520]={line:1,column:3,offset:2},end:$R[16521]={line:1,column:42,offset:41}},type:"text",value:"React Compiler の opt-in と opt-out を整理する"}],id:"react-compiler-の-opt-in-と-opt-out-を整理する",level:1,plain:"React Compiler の opt-in と opt-out を整理する",position:$R[16522]={start:$R[16523]={line:1,column:1,offset:0},end:$R[16524]={line:1,column:42,offset:41}},type:"heading"},toc:$R[16525]=[$R[16526]={children:$R[16527]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[16528]={children:$R[16529]=[$R[16530]={children:$R[16531]=[],id:"opt-out",plain:"opt-out",type:"toc"},$R[16532]={children:$R[16533]=[],id:"opt-in",plain:"opt-in",type:"toc"}],id:"opt-in-と-opt-out",plain:"opt-in と opt-out",type:"toc"},$R[16534]={children:$R[16535]=[],id:"ややこしいディレクティブの挙動",plain:"ややこしいディレクティブの挙動",type:"toc"},$R[16536]={children:$R[16537]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[16538]={content:"# EventListener のオプションメモ\n\n## はじめに\n\n`addEventListener` は DOM イベントを登録するためのメソッドである。このメソッドにはオプションを指定できる。このオプションについて調べてみた。\n\n## オプション\n\n`addEventListener` には以下のオプションを指定できる。\n\n```ts:sample.ts\ninterface EventListenerOptions {\n capture?: boolean;\n}\n\ninterface AddEventListenerOptions extends EventListenerOptions {\n once?: boolean;\n passive?: boolean;\n signal?: AbortSignal;\n}\n```\n\nそれぞれのオプションについて調べてみた。\n\n### capture\n\n`capture` オプションは、イベントの伝播をキャプチャリングフェーズで処理するかどうかを指定する。デフォルトは `false` である。Event Listener Options 対応以前の、 useCapture フラグ相当である。\n\n#### イベントの伝播順\n\nイベントの伝播順序を理解していなかったのでついでに調べてみた。[^1] [^2]\n\n- キャプチャリングフェーズ\n\n `window` から event target まで、DOM ツリーを下りるフェーズ。親要素から子要素に向かってイベントが伝播する。\n\n このフェーズで登録されている event listener は、event target の event listener よりも先に実行される。\n\n- ターゲットフェーズ\n\n event target に登録された event listener が実行される。\n\n- バブリングフェーズ\n\n event target から `window` まで、DOM ツリーを上りるフェーズ。子要素から親要素に向かってイベントが伝播する。\n\n このフェーズで登録されている event listener は、event target の event listener よりも後に実行される。\n\n例として次の HTML と JS を考える。\n\n```html:sample.html\n\x3Cbutton id=\"button\">foo\x3C/button>\n```\n\n```js:sample.js\nconst elm = document.getElementById('button');\n\ndocument.addEventListener('click', () => {\n console.log('document');\n}, { capture: false });\n\nelm.addEventListener('click', () => {\n console.log('button');\n}, { capture: false });\n```\n\nこの場合、ボタンをクリックしたとき、コンソールには次のように表示される。\n\n```log:console.log\nbutton\ndocument\n```\n\n`capture` オプションを `true` にすると、次のように表示される。\n\n```log:console.log\ndocument\nbutton\n```\n\n[^1]: [JavaScript Event order](https://www.quirksmode.org/js/events_order.html#link4)\n\n[^2]: [Event order](https://javascript.info/bubbling-and-capturing)\n\n### once\n\n`once` オプションは、event listener を一度だけ実行し削除するかどうかを指定する。デフォルトは `false` である。\n\n通常 event listner 及びそのスコープ変数は登録されている限り参照を保持するため、GC の対象にならず、メモリリークの原因になることがある。明示的に `removeEventListener` を呼び出すことで解決できるが、`once` オプションはより簡単に GC のケアができる。\n\n例外として useEffect で event listner を登録する処理を書く場合は、必ず useEffect のクリーンアップ関数で `removeEventListener` を呼び出すこと。`once` オプションはその event listner が実行されたときに自動的に削除されるだけなので、event listenr を持つ component を mount しただけで listner が発火しなかった場合、クリーンアップ関数が無い場合はメモリリークの原因になる。\n\n```tsx:sample.tsx\nconst Component: FC = () => {\n const ref = useRef\x3CHTMLButtonElement>(null);\n\n useEffect(() => {\n const handleClick = () => {\n console.log('click');\n };\n const button = ref.current;\n\n button?.addEventListener('click', handleClick, { once: true });\n\n return () => {\n button?.removeEventListener('click', handleClick);\n };\n }, []);\n\n return \x3Cbutton ref={ref}>click me\x3C/button>;\n}\n```\n\n### passive\n\nブラウザは通常ドキュメントのスクロール体験を最適化する。しかし scroll event に event listner が登録された場合、event listener 内で `preventDefault()` が呼ばれる場合はスクロールを止めなくてはならない。\n\nしかしブラウザは event listener 内で `preventDefault()` が呼ばれるかどうかを事前に判断できないため、scroll event に event listener が登録された場合はスクロールを止めるためにスクロールを待つ。これによりスクロール体験が悪くなる。\n\nこの問題は `passive` オプションを `true` にすることで解決できる。`passive` オプションを `true` にすると、event listener 内で `preventDefault()` を呼ばれないことが保証されるため、ブラウザは listener の完了を待たずにスクロールできる。\n\nどの程度ユーザー操作が改善されるかは以下記事内の動画が参考になる。\n\nhttps://developer.chrome.com/blog/passive-event-listeners?hl=ja\n\n### signal\n\n`signal` オプションは AbortSignal を指定する。AbortSignal は AbortController を通じて生成される。AbortSignal が abort されると、event listener は削除される。\n\n一見とても便利なオプションだが罠がある。Abort すればもちろん event listener が削除されるが、正常処理された場合を Signal だけからは判断できないため、event listener が削除されずメモリリークの原因になる可能性がある。\n\nこれらに対する対策は [@jxck](https://jxck.io/) さんのこの記事が参考になるのでそちらを参考にしてほしい。\n\nhttps://blog.jxck.io/entries/2023-06-01/abort-signal-any.html\n\n## まとめ\n\nこれらの提案は 2016 年〜 2020 年には既に提案 / 実装されていたが、なかなか使う機会がなかったので調べてみた。特に `once` オプションと `passive` オプション、`signal` オプションは今後の開発で使う機会があるかもしれないので、覚えておくと便利かもしれない。",description:"Event Listener Options について調べたのでまとめた。",published:!0,publishedAt:"2024-07-06T01:32:43.557+09:00[Asia/Tokyo]",tags:$R[16539]=["web","performance"],title:"EventListener のオプションメモ",_meta:$R[16540]={filePath:"01J21VVAH0AW64ZS4SGGE83R0C/slug.md",fileName:"slug.md",directory:"01J21VVAH0AW64ZS4SGGE83R0C",extension:"md",path:"01J21VVAH0AW64ZS4SGGE83R0C/slug"},abstract:"EventListener のオプションメモはじめにaddEventListener は DOM イベントを登録するためのメソッドである。このメソッドにはオプションを指定できる。このオプションについて調べてみた。オプションaddEventListener には以下のオプションを指定できる。interface EventListenerOptions {\n capture?: boolean;\n}\n\ninterface AddEventListenerOptions extends EventListenerOptions {\n once?: boolean;\n passive?: boolean;\n signal?: AbortSignal;\n}それぞれのオプションについて調べてみた。capturecapture オプションは、イベントの伝播をキャプチャリングフェー",mdast:$R[16541]={children:$R[16542]=[$R[16543]={children:$R[16544]=[$R[16545]={children:$R[16546]=[$R[16547]={position:$R[16548]={start:$R[16549]={line:3,column:4,offset:29},end:$R[16550]={line:3,column:8,offset:33}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[16551]={start:$R[16552]={line:3,column:1,offset:26},end:$R[16553]={line:3,column:8,offset:33}},type:"heading"},$R[16554]={children:$R[16555]=[$R[16556]={position:$R[16557]={start:$R[16558]={line:5,column:1,offset:35},end:$R[16559]={line:5,column:19,offset:53}},type:"inlineCode",value:"addEventListener"},$R[16560]={position:$R[16561]={start:$R[16562]={line:5,column:19,offset:53},end:$R[16563]={line:5,column:83,offset:117}},type:"text",value:" は DOM イベントを登録するためのメソッドである。このメソッドにはオプションを指定できる。このオプションについて調べてみた。"}],position:$R[16564]={start:$R[16565]={line:5,column:1,offset:35},end:$R[16566]={line:5,column:83,offset:117}},type:"paragraph"}],position:$R[16567]={end:$R[16568]={line:5,column:83,offset:117},start:$R[16569]={line:3,column:1,offset:26}},type:"section"},$R[16570]={children:$R[16571]=[$R[16572]={children:$R[16573]=[$R[16574]={position:$R[16575]={start:$R[16576]={line:7,column:4,offset:122},end:$R[16577]={line:7,column:9,offset:127}},type:"text",value:"オプション"}],id:"オプション",level:2,plain:"オプション",position:$R[16578]={start:$R[16579]={line:7,column:1,offset:119},end:$R[16580]={line:7,column:9,offset:127}},type:"heading"},$R[16581]={children:$R[16582]=[$R[16583]={position:$R[16584]={start:$R[16585]={line:9,column:1,offset:129},end:$R[16586]={line:9,column:19,offset:147}},type:"inlineCode",value:"addEventListener"},$R[16587]={position:$R[16588]={start:$R[16589]={line:9,column:19,offset:147},end:$R[16590]={line:9,column:37,offset:165}},type:"text",value:" には以下のオプションを指定できる。"}],position:$R[16591]={start:$R[16592]={line:9,column:1,offset:129},end:$R[16593]={line:9,column:37,offset:165}},type:"paragraph"},$R[16594]={filename:"sample.ts ts",lang:"ts",position:$R[16595]={start:$R[16596]={line:11,column:1,offset:167},end:$R[16597]={line:21,column:4,offset:381}},type:"code",value:"interface EventListenerOptions {\n capture?: boolean;\n}\n\ninterface AddEventListenerOptions extends EventListenerOptions {\n once?: boolean;\n passive?: boolean;\n signal?: AbortSignal;\n}",hast:$R[16598]={type:"root",children:$R[16599]=[$R[16600]={type:"element",tagName:"pre",properties:$R[16601]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[16602]=[$R[16603]={type:"element",tagName:"code",properties:$R[16604]={},children:$R[16605]=[$R[16606]={type:"element",tagName:"span",properties:$R[16607]={class:"line"},children:$R[16608]=[$R[16609]={type:"element",tagName:"span",properties:$R[16610]={style:"color:#CB7676"},children:$R[16611]=[$R[16612]={type:"text",value:"interface"}]},$R[16613]={type:"element",tagName:"span",properties:$R[16614]={style:"color:#5DA994"},children:$R[16615]=[$R[16616]={type:"text",value:" EventListenerOptions"}]},$R[16617]={type:"element",tagName:"span",properties:$R[16618]={style:"color:#666666"},children:$R[16619]=[$R[16620]={type:"text",value:" {"}]}]},$R[16621]={type:"text",value:"\n"},$R[16622]={type:"element",tagName:"span",properties:$R[16623]={class:"line"},children:$R[16624]=[$R[16625]={type:"element",tagName:"span",properties:$R[16626]={style:"color:#BD976A"},children:$R[16627]=[$R[16628]={type:"text",value:" capture"}]},$R[16629]={type:"element",tagName:"span",properties:$R[16630]={style:"color:#CB7676"},children:$R[16631]=[$R[16632]={type:"text",value:"?"}]},$R[16633]={type:"element",tagName:"span",properties:$R[16634]={style:"color:#666666"},children:$R[16635]=[$R[16636]={type:"text",value:": "}]},$R[16637]={type:"element",tagName:"span",properties:$R[16638]={style:"color:#5DA994"},children:$R[16639]=[$R[16640]={type:"text",value:"boolean"}]},$R[16641]={type:"element",tagName:"span",properties:$R[16642]={style:"color:#666666"},children:$R[16643]=[$R[16644]={type:"text",value:";"}]}]},$R[16645]={type:"text",value:"\n"},$R[16646]={type:"element",tagName:"span",properties:$R[16647]={class:"line"},children:$R[16648]=[$R[16649]={type:"element",tagName:"span",properties:$R[16650]={style:"color:#666666"},children:$R[16651]=[$R[16652]={type:"text",value:"}"}]}]},$R[16653]={type:"text",value:"\n"},$R[16654]={type:"element",tagName:"span",properties:$R[16655]={class:"line"},children:$R[16656]=[]},$R[16657]={type:"text",value:"\n"},$R[16658]={type:"element",tagName:"span",properties:$R[16659]={class:"line"},children:$R[16660]=[$R[16661]={type:"element",tagName:"span",properties:$R[16662]={style:"color:#CB7676"},children:$R[16663]=[$R[16664]={type:"text",value:"interface"}]},$R[16665]={type:"element",tagName:"span",properties:$R[16666]={style:"color:#5DA994"},children:$R[16667]=[$R[16668]={type:"text",value:" AddEventListenerOptions"}]},$R[16669]={type:"element",tagName:"span",properties:$R[16670]={style:"color:#CB7676"},children:$R[16671]=[$R[16672]={type:"text",value:" extends"}]},$R[16673]={type:"element",tagName:"span",properties:$R[16674]={style:"color:#80A665"},children:$R[16675]=[$R[16676]={type:"text",value:" EventListenerOptions"}]},$R[16677]={type:"element",tagName:"span",properties:$R[16678]={style:"color:#666666"},children:$R[16679]=[$R[16680]={type:"text",value:" {"}]}]},$R[16681]={type:"text",value:"\n"},$R[16682]={type:"element",tagName:"span",properties:$R[16683]={class:"line"},children:$R[16684]=[$R[16685]={type:"element",tagName:"span",properties:$R[16686]={style:"color:#BD976A"},children:$R[16687]=[$R[16688]={type:"text",value:" once"}]},$R[16689]={type:"element",tagName:"span",properties:$R[16690]={style:"color:#CB7676"},children:$R[16691]=[$R[16692]={type:"text",value:"?"}]},$R[16693]={type:"element",tagName:"span",properties:$R[16694]={style:"color:#666666"},children:$R[16695]=[$R[16696]={type:"text",value:": "}]},$R[16697]={type:"element",tagName:"span",properties:$R[16698]={style:"color:#5DA994"},children:$R[16699]=[$R[16700]={type:"text",value:"boolean"}]},$R[16701]={type:"element",tagName:"span",properties:$R[16702]={style:"color:#666666"},children:$R[16703]=[$R[16704]={type:"text",value:";"}]}]},$R[16705]={type:"text",value:"\n"},$R[16706]={type:"element",tagName:"span",properties:$R[16707]={class:"line"},children:$R[16708]=[$R[16709]={type:"element",tagName:"span",properties:$R[16710]={style:"color:#BD976A"},children:$R[16711]=[$R[16712]={type:"text",value:" passive"}]},$R[16713]={type:"element",tagName:"span",properties:$R[16714]={style:"color:#CB7676"},children:$R[16715]=[$R[16716]={type:"text",value:"?"}]},$R[16717]={type:"element",tagName:"span",properties:$R[16718]={style:"color:#666666"},children:$R[16719]=[$R[16720]={type:"text",value:": "}]},$R[16721]={type:"element",tagName:"span",properties:$R[16722]={style:"color:#5DA994"},children:$R[16723]=[$R[16724]={type:"text",value:"boolean"}]},$R[16725]={type:"element",tagName:"span",properties:$R[16726]={style:"color:#666666"},children:$R[16727]=[$R[16728]={type:"text",value:";"}]}]},$R[16729]={type:"text",value:"\n"},$R[16730]={type:"element",tagName:"span",properties:$R[16731]={class:"line"},children:$R[16732]=[$R[16733]={type:"element",tagName:"span",properties:$R[16734]={style:"color:#BD976A"},children:$R[16735]=[$R[16736]={type:"text",value:" signal"}]},$R[16737]={type:"element",tagName:"span",properties:$R[16738]={style:"color:#CB7676"},children:$R[16739]=[$R[16740]={type:"text",value:"?"}]},$R[16741]={type:"element",tagName:"span",properties:$R[16742]={style:"color:#666666"},children:$R[16743]=[$R[16744]={type:"text",value:": "}]},$R[16745]={type:"element",tagName:"span",properties:$R[16746]={style:"color:#5DA994"},children:$R[16747]=[$R[16748]={type:"text",value:"AbortSignal"}]},$R[16749]={type:"element",tagName:"span",properties:$R[16750]={style:"color:#666666"},children:$R[16751]=[$R[16752]={type:"text",value:";"}]}]},$R[16753]={type:"text",value:"\n"},$R[16754]={type:"element",tagName:"span",properties:$R[16755]={class:"line"},children:$R[16756]=[$R[16757]={type:"element",tagName:"span",properties:$R[16758]={style:"color:#666666"},children:$R[16759]=[$R[16760]={type:"text",value:"}"}]}]}]}]}]}},$R[16761]={children:$R[16762]=[$R[16763]={position:$R[16764]={start:$R[16765]={line:23,column:1,offset:383},end:$R[16766]={line:23,column:21,offset:403}},type:"text",value:"それぞれのオプションについて調べてみた。"}],position:$R[16767]={start:$R[16768]={line:23,column:1,offset:383},end:$R[16769]={line:23,column:21,offset:403}},type:"paragraph"},$R[16770]={children:$R[16771]=[$R[16772]={children:$R[16773]=[$R[16774]={position:$R[16775]={start:$R[16776]={line:25,column:5,offset:409},end:$R[16777]={line:25,column:12,offset:416}},type:"text",value:"capture"}],id:"capture",level:3,plain:"capture",position:$R[16778]={start:$R[16779]={line:25,column:1,offset:405},end:$R[16780]={line:25,column:12,offset:416}},type:"heading"},$R[16781]={children:$R[16782]=[$R[16783]={position:$R[16784]={start:$R[16785]={line:27,column:1,offset:418},end:$R[16786]={line:27,column:10,offset:427}},type:"inlineCode",value:"capture"},$R[16787]={position:$R[16788]={start:$R[16789]={line:27,column:10,offset:427},end:$R[16790]={line:27,column:60,offset:477}},type:"text",value:" オプションは、イベントの伝播をキャプチャリングフェーズで処理するかどうかを指定する。デフォルトは "},$R[16791]={position:$R[16792]={start:$R[16793]={line:27,column:60,offset:477},end:$R[16794]={line:27,column:67,offset:484}},type:"inlineCode",value:"false"},$R[16795]={position:$R[16796]={start:$R[16797]={line:27,column:67,offset:484},end:$R[16798]={line:27,column:122,offset:539}},type:"text",value:" である。Event Listener Options 対応以前の、 useCapture フラグ相当である。"}],position:$R[16799]={start:$R[16800]={line:27,column:1,offset:418},end:$R[16801]={line:27,column:122,offset:539}},type:"paragraph"},$R[16802]={children:$R[16803]=[$R[16804]={children:$R[16805]=[$R[16806]={position:$R[16807]={start:$R[16808]={line:29,column:6,offset:546},end:$R[16809]={line:29,column:14,offset:554}},type:"text",value:"イベントの伝播順"}],id:"イベントの伝播順",level:4,plain:"イベントの伝播順",position:$R[16810]={start:$R[16811]={line:29,column:1,offset:541},end:$R[16812]={line:29,column:14,offset:554}},type:"heading"},$R[16813]={children:$R[16814]=[$R[16815]={position:$R[16816]={start:$R[16817]={line:31,column:1,offset:556},end:$R[16818]={line:31,column:32,offset:587}},type:"text",value:"イベントの伝播順序を理解していなかったのでついでに調べてみた。"},$R[16819]={footnoteIndex:0,position:$R[16820]={start:$R[16821]={line:31,column:32,offset:587},end:$R[16822]={line:31,column:36,offset:591}},referenceIndex:1,type:"footnoteReference"},$R[16823]={position:$R[16824]={start:$R[16825]={line:31,column:36,offset:591},end:$R[16826]={line:31,column:37,offset:592}},type:"text",value:" "},$R[16827]={footnoteIndex:1,position:$R[16828]={start:$R[16829]={line:31,column:37,offset:592},end:$R[16830]={line:31,column:41,offset:596}},referenceIndex:1,type:"footnoteReference"}],position:$R[16831]={start:$R[16832]={line:31,column:1,offset:556},end:$R[16833]={line:31,column:41,offset:596}},type:"paragraph"},$R[16834]={children:$R[16835]=[$R[16836]={children:$R[16837]=[$R[16838]={children:$R[16839]=[$R[16840]={position:$R[16841]={start:$R[16842]={line:33,column:3,offset:600},end:$R[16843]={line:33,column:15,offset:612}},type:"text",value:"キャプチャリングフェーズ"}],position:$R[16844]={start:$R[16845]={line:33,column:3,offset:600},end:$R[16846]={line:33,column:15,offset:612}},type:"paragraph"},$R[16847]={children:$R[16848]=[$R[16849]={position:$R[16850]={start:$R[16851]={line:35,column:3,offset:616},end:$R[16852]={line:35,column:11,offset:624}},type:"inlineCode",value:"window"},$R[16853]={position:$R[16854]={start:$R[16855]={line:35,column:11,offset:624},end:$R[16856]={line:35,column:70,offset:683}},type:"text",value:" から event target まで、DOM ツリーを下りるフェーズ。親要素から子要素に向かってイベントが伝播する。"}],position:$R[16857]={start:$R[16858]={line:35,column:3,offset:616},end:$R[16859]={line:35,column:70,offset:683}},type:"paragraph"},$R[16860]={children:$R[16861]=[$R[16862]={position:$R[16863]={start:$R[16864]={line:37,column:3,offset:687},end:$R[16865]={line:37,column:76,offset:760}},type:"text",value:"このフェーズで登録されている event listener は、event target の event listener よりも先に実行される。"}],position:$R[16866]={start:$R[16867]={line:37,column:3,offset:687},end:$R[16868]={line:37,column:76,offset:760}},type:"paragraph"}],position:$R[16869]={start:$R[16870]={line:33,column:1,offset:598},end:$R[16871]={line:37,column:76,offset:760}},type:"listItem"},$R[16872]={children:$R[16873]=[$R[16874]={children:$R[16875]=[$R[16876]={position:$R[16877]={start:$R[16878]={line:39,column:3,offset:764},end:$R[16879]={line:39,column:12,offset:773}},type:"text",value:"ターゲットフェーズ"}],position:$R[16880]={start:$R[16881]={line:39,column:3,offset:764},end:$R[16882]={line:39,column:12,offset:773}},type:"paragraph"},$R[16883]={children:$R[16884]=[$R[16885]={position:$R[16886]={start:$R[16887]={line:41,column:3,offset:777},end:$R[16888]={line:41,column:45,offset:819}},type:"text",value:"event target に登録された event listener が実行される。"}],position:$R[16889]={start:$R[16890]={line:41,column:3,offset:777},end:$R[16891]={line:41,column:45,offset:819}},type:"paragraph"}],position:$R[16892]={start:$R[16893]={line:39,column:1,offset:762},end:$R[16894]={line:41,column:45,offset:819}},type:"listItem"},$R[16895]={children:$R[16896]=[$R[16897]={children:$R[16898]=[$R[16899]={position:$R[16900]={start:$R[16901]={line:43,column:3,offset:823},end:$R[16902]={line:43,column:12,offset:832}},type:"text",value:"バブリングフェーズ"}],position:$R[16903]={start:$R[16904]={line:43,column:3,offset:823},end:$R[16905]={line:43,column:12,offset:832}},type:"paragraph"},$R[16906]={children:$R[16907]=[$R[16908]={position:$R[16909]={start:$R[16910]={line:45,column:3,offset:836},end:$R[16911]={line:45,column:19,offset:852}},type:"text",value:"event target から "},$R[16912]={position:$R[16913]={start:$R[16914]={line:45,column:19,offset:852},end:$R[16915]={line:45,column:27,offset:860}},type:"inlineCode",value:"window"},$R[16916]={position:$R[16917]={start:$R[16918]={line:45,column:27,offset:860},end:$R[16919]={line:45,column:70,offset:903}},type:"text",value:" まで、DOM ツリーを上りるフェーズ。子要素から親要素に向かってイベントが伝播する。"}],position:$R[16920]={start:$R[16921]={line:45,column:3,offset:836},end:$R[16922]={line:45,column:70,offset:903}},type:"paragraph"},$R[16923]={children:$R[16924]=[$R[16925]={position:$R[16926]={start:$R[16927]={line:47,column:3,offset:907},end:$R[16928]={line:47,column:76,offset:980}},type:"text",value:"このフェーズで登録されている event listener は、event target の event listener よりも後に実行される。"}],position:$R[16929]={start:$R[16930]={line:47,column:3,offset:907},end:$R[16931]={line:47,column:76,offset:980}},type:"paragraph"}],position:$R[16932]={start:$R[16933]={line:43,column:1,offset:821},end:$R[16934]={line:47,column:76,offset:980}},type:"listItem"}],position:$R[16935]={start:$R[16936]={line:33,column:1,offset:598},end:$R[16937]={line:47,column:76,offset:980}},type:"unorderedList"},$R[16938]={children:$R[16939]=[$R[16940]={position:$R[16941]={start:$R[16942]={line:49,column:1,offset:982},end:$R[16943]={line:49,column:23,offset:1004}},type:"text",value:"例として次の HTML と JS を考える。"}],position:$R[16944]={start:$R[16945]={line:49,column:1,offset:982},end:$R[16946]={line:49,column:23,offset:1004}},type:"paragraph"},$R[16947]={filename:"sample.html html",lang:"html",position:$R[16948]={start:$R[16949]={line:51,column:1,offset:1006},end:$R[16950]={line:53,column:4,offset:1062}},type:"code",value:"\x3Cbutton id=\"button\">foo\x3C/button>",hast:$R[16951]={type:"root",children:$R[16952]=[$R[16953]={type:"element",tagName:"pre",properties:$R[16954]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[16955]=[$R[16956]={type:"element",tagName:"code",properties:$R[16957]={},children:$R[16958]=[$R[16959]={type:"element",tagName:"span",properties:$R[16960]={class:"line"},children:$R[16961]=[$R[16962]={type:"element",tagName:"span",properties:$R[16963]={style:"color:#666666"},children:$R[16964]=[$R[16965]={type:"text",value:"\x3C"}]},$R[16966]={type:"element",tagName:"span",properties:$R[16967]={style:"color:#4D9375"},children:$R[16968]=[$R[16969]={type:"text",value:"button"}]},$R[16970]={type:"element",tagName:"span",properties:$R[16971]={style:"color:#BD976A"},children:$R[16972]=[$R[16973]={type:"text",value:" id"}]},$R[16974]={type:"element",tagName:"span",properties:$R[16975]={style:"color:#666666"},children:$R[16976]=[$R[16977]={type:"text",value:"="}]},$R[16978]={type:"element",tagName:"span",properties:$R[16979]={style:"color:#C98A7D77"},children:$R[16980]=[$R[16981]={type:"text",value:"\""}]},$R[16982]={type:"element",tagName:"span",properties:$R[16983]={style:"color:#C98A7D"},children:$R[16984]=[$R[16985]={type:"text",value:"button"}]},$R[16986]={type:"element",tagName:"span",properties:$R[16987]={style:"color:#C98A7D77"},children:$R[16988]=[$R[16989]={type:"text",value:"\""}]},$R[16990]={type:"element",tagName:"span",properties:$R[16991]={style:"color:#666666"},children:$R[16992]=[$R[16993]={type:"text",value:">"}]},$R[16994]={type:"element",tagName:"span",properties:$R[16995]={style:"color:#DBD7CAEE"},children:$R[16996]=[$R[16997]={type:"text",value:"foo"}]},$R[16998]={type:"element",tagName:"span",properties:$R[16999]={style:"color:#666666"},children:$R[17000]=[$R[17001]={type:"text",value:"\x3C/"}]},$R[17002]={type:"element",tagName:"span",properties:$R[17003]={style:"color:#4D9375"},children:$R[17004]=[$R[17005]={type:"text",value:"button"}]},$R[17006]={type:"element",tagName:"span",properties:$R[17007]={style:"color:#666666"},children:$R[17008]=[$R[17009]={type:"text",value:">"}]}]}]}]}]}},$R[17010]={filename:"sample.js js",lang:"js",position:$R[17011]={start:$R[17012]={line:55,column:1,offset:1064},end:$R[17013]={line:65,column:4,offset:1317}},type:"code",value:"const elm = document.getElementById('button');\n\ndocument.addEventListener('click', () => {\n console.log('document');\n}, { capture: false });\n\nelm.addEventListener('click', () => {\n console.log('button');\n}, { capture: false });",hast:$R[17014]={type:"root",children:$R[17015]=[$R[17016]={type:"element",tagName:"pre",properties:$R[17017]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[17018]=[$R[17019]={type:"element",tagName:"code",properties:$R[17020]={},children:$R[17021]=[$R[17022]={type:"element",tagName:"span",properties:$R[17023]={class:"line"},children:$R[17024]=[$R[17025]={type:"element",tagName:"span",properties:$R[17026]={style:"color:#CB7676"},children:$R[17027]=[$R[17028]={type:"text",value:"const"}]},$R[17029]={type:"element",tagName:"span",properties:$R[17030]={style:"color:#BD976A"},children:$R[17031]=[$R[17032]={type:"text",value:" elm"}]},$R[17033]={type:"element",tagName:"span",properties:$R[17034]={style:"color:#666666"},children:$R[17035]=[$R[17036]={type:"text",value:" ="}]},$R[17037]={type:"element",tagName:"span",properties:$R[17038]={style:"color:#BD976A"},children:$R[17039]=[$R[17040]={type:"text",value:" document"}]},$R[17041]={type:"element",tagName:"span",properties:$R[17042]={style:"color:#666666"},children:$R[17043]=[$R[17044]={type:"text",value:"."}]},$R[17045]={type:"element",tagName:"span",properties:$R[17046]={style:"color:#80A665"},children:$R[17047]=[$R[17048]={type:"text",value:"getElementById"}]},$R[17049]={type:"element",tagName:"span",properties:$R[17050]={style:"color:#666666"},children:$R[17051]=[$R[17052]={type:"text",value:"("}]},$R[17053]={type:"element",tagName:"span",properties:$R[17054]={style:"color:#C98A7D77"},children:$R[17055]=[$R[17056]={type:"text",value:"'"}]},$R[17057]={type:"element",tagName:"span",properties:$R[17058]={style:"color:#C98A7D"},children:$R[17059]=[$R[17060]={type:"text",value:"button"}]},$R[17061]={type:"element",tagName:"span",properties:$R[17062]={style:"color:#C98A7D77"},children:$R[17063]=[$R[17064]={type:"text",value:"'"}]},$R[17065]={type:"element",tagName:"span",properties:$R[17066]={style:"color:#666666"},children:$R[17067]=[$R[17068]={type:"text",value:");"}]}]},$R[17069]={type:"text",value:"\n"},$R[17070]={type:"element",tagName:"span",properties:$R[17071]={class:"line"},children:$R[17072]=[]},$R[17073]={type:"text",value:"\n"},$R[17074]={type:"element",tagName:"span",properties:$R[17075]={class:"line"},children:$R[17076]=[$R[17077]={type:"element",tagName:"span",properties:$R[17078]={style:"color:#BD976A"},children:$R[17079]=[$R[17080]={type:"text",value:"document"}]},$R[17081]={type:"element",tagName:"span",properties:$R[17082]={style:"color:#666666"},children:$R[17083]=[$R[17084]={type:"text",value:"."}]},$R[17085]={type:"element",tagName:"span",properties:$R[17086]={style:"color:#80A665"},children:$R[17087]=[$R[17088]={type:"text",value:"addEventListener"}]},$R[17089]={type:"element",tagName:"span",properties:$R[17090]={style:"color:#666666"},children:$R[17091]=[$R[17092]={type:"text",value:"("}]},$R[17093]={type:"element",tagName:"span",properties:$R[17094]={style:"color:#C98A7D77"},children:$R[17095]=[$R[17096]={type:"text",value:"'"}]},$R[17097]={type:"element",tagName:"span",properties:$R[17098]={style:"color:#C98A7D"},children:$R[17099]=[$R[17100]={type:"text",value:"click"}]},$R[17101]={type:"element",tagName:"span",properties:$R[17102]={style:"color:#C98A7D77"},children:$R[17103]=[$R[17104]={type:"text",value:"'"}]},$R[17105]={type:"element",tagName:"span",properties:$R[17106]={style:"color:#666666"},children:$R[17107]=[$R[17108]={type:"text",value:","}]},$R[17109]={type:"element",tagName:"span",properties:$R[17110]={style:"color:#666666"},children:$R[17111]=[$R[17112]={type:"text",value:" ()"}]},$R[17113]={type:"element",tagName:"span",properties:$R[17114]={style:"color:#666666"},children:$R[17115]=[$R[17116]={type:"text",value:" =>"}]},$R[17117]={type:"element",tagName:"span",properties:$R[17118]={style:"color:#666666"},children:$R[17119]=[$R[17120]={type:"text",value:" {"}]}]},$R[17121]={type:"text",value:"\n"},$R[17122]={type:"element",tagName:"span",properties:$R[17123]={class:"line"},children:$R[17124]=[$R[17125]={type:"element",tagName:"span",properties:$R[17126]={style:"color:#BD976A"},children:$R[17127]=[$R[17128]={type:"text",value:" console"}]},$R[17129]={type:"element",tagName:"span",properties:$R[17130]={style:"color:#666666"},children:$R[17131]=[$R[17132]={type:"text",value:"."}]},$R[17133]={type:"element",tagName:"span",properties:$R[17134]={style:"color:#80A665"},children:$R[17135]=[$R[17136]={type:"text",value:"log"}]},$R[17137]={type:"element",tagName:"span",properties:$R[17138]={style:"color:#666666"},children:$R[17139]=[$R[17140]={type:"text",value:"("}]},$R[17141]={type:"element",tagName:"span",properties:$R[17142]={style:"color:#C98A7D77"},children:$R[17143]=[$R[17144]={type:"text",value:"'"}]},$R[17145]={type:"element",tagName:"span",properties:$R[17146]={style:"color:#C98A7D"},children:$R[17147]=[$R[17148]={type:"text",value:"document"}]},$R[17149]={type:"element",tagName:"span",properties:$R[17150]={style:"color:#C98A7D77"},children:$R[17151]=[$R[17152]={type:"text",value:"'"}]},$R[17153]={type:"element",tagName:"span",properties:$R[17154]={style:"color:#666666"},children:$R[17155]=[$R[17156]={type:"text",value:");"}]}]},$R[17157]={type:"text",value:"\n"},$R[17158]={type:"element",tagName:"span",properties:$R[17159]={class:"line"},children:$R[17160]=[$R[17161]={type:"element",tagName:"span",properties:$R[17162]={style:"color:#666666"},children:$R[17163]=[$R[17164]={type:"text",value:"},"}]},$R[17165]={type:"element",tagName:"span",properties:$R[17166]={style:"color:#666666"},children:$R[17167]=[$R[17168]={type:"text",value:" {"}]},$R[17169]={type:"element",tagName:"span",properties:$R[17170]={style:"color:#B8A965"},children:$R[17171]=[$R[17172]={type:"text",value:" capture"}]},$R[17173]={type:"element",tagName:"span",properties:$R[17174]={style:"color:#666666"},children:$R[17175]=[$R[17176]={type:"text",value:":"}]},$R[17177]={type:"element",tagName:"span",properties:$R[17178]={style:"color:#4D9375"},children:$R[17179]=[$R[17180]={type:"text",value:" false"}]},$R[17181]={type:"element",tagName:"span",properties:$R[17182]={style:"color:#666666"},children:$R[17183]=[$R[17184]={type:"text",value:" });"}]}]},$R[17185]={type:"text",value:"\n"},$R[17186]={type:"element",tagName:"span",properties:$R[17187]={class:"line"},children:$R[17188]=[]},$R[17189]={type:"text",value:"\n"},$R[17190]={type:"element",tagName:"span",properties:$R[17191]={class:"line"},children:$R[17192]=[$R[17193]={type:"element",tagName:"span",properties:$R[17194]={style:"color:#BD976A"},children:$R[17195]=[$R[17196]={type:"text",value:"elm"}]},$R[17197]={type:"element",tagName:"span",properties:$R[17198]={style:"color:#666666"},children:$R[17199]=[$R[17200]={type:"text",value:"."}]},$R[17201]={type:"element",tagName:"span",properties:$R[17202]={style:"color:#80A665"},children:$R[17203]=[$R[17204]={type:"text",value:"addEventListener"}]},$R[17205]={type:"element",tagName:"span",properties:$R[17206]={style:"color:#666666"},children:$R[17207]=[$R[17208]={type:"text",value:"("}]},$R[17209]={type:"element",tagName:"span",properties:$R[17210]={style:"color:#C98A7D77"},children:$R[17211]=[$R[17212]={type:"text",value:"'"}]},$R[17213]={type:"element",tagName:"span",properties:$R[17214]={style:"color:#C98A7D"},children:$R[17215]=[$R[17216]={type:"text",value:"click"}]},$R[17217]={type:"element",tagName:"span",properties:$R[17218]={style:"color:#C98A7D77"},children:$R[17219]=[$R[17220]={type:"text",value:"'"}]},$R[17221]={type:"element",tagName:"span",properties:$R[17222]={style:"color:#666666"},children:$R[17223]=[$R[17224]={type:"text",value:","}]},$R[17225]={type:"element",tagName:"span",properties:$R[17226]={style:"color:#666666"},children:$R[17227]=[$R[17228]={type:"text",value:" ()"}]},$R[17229]={type:"element",tagName:"span",properties:$R[17230]={style:"color:#666666"},children:$R[17231]=[$R[17232]={type:"text",value:" =>"}]},$R[17233]={type:"element",tagName:"span",properties:$R[17234]={style:"color:#666666"},children:$R[17235]=[$R[17236]={type:"text",value:" {"}]}]},$R[17237]={type:"text",value:"\n"},$R[17238]={type:"element",tagName:"span",properties:$R[17239]={class:"line"},children:$R[17240]=[$R[17241]={type:"element",tagName:"span",properties:$R[17242]={style:"color:#BD976A"},children:$R[17243]=[$R[17244]={type:"text",value:" console"}]},$R[17245]={type:"element",tagName:"span",properties:$R[17246]={style:"color:#666666"},children:$R[17247]=[$R[17248]={type:"text",value:"."}]},$R[17249]={type:"element",tagName:"span",properties:$R[17250]={style:"color:#80A665"},children:$R[17251]=[$R[17252]={type:"text",value:"log"}]},$R[17253]={type:"element",tagName:"span",properties:$R[17254]={style:"color:#666666"},children:$R[17255]=[$R[17256]={type:"text",value:"("}]},$R[17257]={type:"element",tagName:"span",properties:$R[17258]={style:"color:#C98A7D77"},children:$R[17259]=[$R[17260]={type:"text",value:"'"}]},$R[17261]={type:"element",tagName:"span",properties:$R[17262]={style:"color:#C98A7D"},children:$R[17263]=[$R[17264]={type:"text",value:"button"}]},$R[17265]={type:"element",tagName:"span",properties:$R[17266]={style:"color:#C98A7D77"},children:$R[17267]=[$R[17268]={type:"text",value:"'"}]},$R[17269]={type:"element",tagName:"span",properties:$R[17270]={style:"color:#666666"},children:$R[17271]=[$R[17272]={type:"text",value:");"}]}]},$R[17273]={type:"text",value:"\n"},$R[17274]={type:"element",tagName:"span",properties:$R[17275]={class:"line"},children:$R[17276]=[$R[17277]={type:"element",tagName:"span",properties:$R[17278]={style:"color:#666666"},children:$R[17279]=[$R[17280]={type:"text",value:"},"}]},$R[17281]={type:"element",tagName:"span",properties:$R[17282]={style:"color:#666666"},children:$R[17283]=[$R[17284]={type:"text",value:" {"}]},$R[17285]={type:"element",tagName:"span",properties:$R[17286]={style:"color:#B8A965"},children:$R[17287]=[$R[17288]={type:"text",value:" capture"}]},$R[17289]={type:"element",tagName:"span",properties:$R[17290]={style:"color:#666666"},children:$R[17291]=[$R[17292]={type:"text",value:":"}]},$R[17293]={type:"element",tagName:"span",properties:$R[17294]={style:"color:#4D9375"},children:$R[17295]=[$R[17296]={type:"text",value:" false"}]},$R[17297]={type:"element",tagName:"span",properties:$R[17298]={style:"color:#666666"},children:$R[17299]=[$R[17300]={type:"text",value:" });"}]}]}]}]}]}},$R[17301]={children:$R[17302]=[$R[17303]={position:$R[17304]={start:$R[17305]={line:67,column:1,offset:1319},end:$R[17306]={line:67,column:37,offset:1355}},type:"text",value:"この場合、ボタンをクリックしたとき、コンソールには次のように表示される。"}],position:$R[17307]={start:$R[17308]={line:67,column:1,offset:1319},end:$R[17309]={line:67,column:37,offset:1355}},type:"paragraph"},$R[17310]={filename:"console.log log",lang:"log",position:$R[17311]={start:$R[17312]={line:69,column:1,offset:1357},end:$R[17313]={line:72,column:4,offset:1395}},type:"code",value:"button\ndocument",hast:$R[17314]={type:"root",children:$R[17315]=[$R[17316]={type:"element",tagName:"pre",properties:$R[17317]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[17318]=[$R[17319]={type:"element",tagName:"code",properties:$R[17320]={},children:$R[17321]=[$R[17322]={type:"element",tagName:"span",properties:$R[17323]={class:"line"},children:$R[17324]=[$R[17325]={type:"element",tagName:"span",properties:$R[17326]={style:"color:#DBD7CAEE"},children:$R[17327]=[$R[17328]={type:"text",value:"button"}]}]},$R[17329]={type:"text",value:"\n"},$R[17330]={type:"element",tagName:"span",properties:$R[17331]={class:"line"},children:$R[17332]=[$R[17333]={type:"element",tagName:"span",properties:$R[17334]={style:"color:#DBD7CAEE"},children:$R[17335]=[$R[17336]={type:"text",value:"document"}]}]}]}]}]}},$R[17337]={children:$R[17338]=[$R[17339]={position:$R[17340]={start:$R[17341]={line:74,column:1,offset:1397},end:$R[17342]={line:74,column:10,offset:1406}},type:"inlineCode",value:"capture"},$R[17343]={position:$R[17344]={start:$R[17345]={line:74,column:10,offset:1406},end:$R[17346]={line:74,column:18,offset:1414}},type:"text",value:" オプションを "},$R[17347]={position:$R[17348]={start:$R[17349]={line:74,column:18,offset:1414},end:$R[17350]={line:74,column:24,offset:1420}},type:"inlineCode",value:"true"},$R[17351]={position:$R[17352]={start:$R[17353]={line:74,column:24,offset:1420},end:$R[17354]={line:74,column:41,offset:1437}},type:"text",value:" にすると、次のように表示される。"}],position:$R[17355]={start:$R[17356]={line:74,column:1,offset:1397},end:$R[17357]={line:74,column:41,offset:1437}},type:"paragraph"},$R[17358]={filename:"console.log log",lang:"log",position:$R[17359]={start:$R[17360]={line:76,column:1,offset:1439},end:$R[17361]={line:79,column:4,offset:1477}},type:"code",value:"document\nbutton",hast:$R[17362]={type:"root",children:$R[17363]=[$R[17364]={type:"element",tagName:"pre",properties:$R[17365]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[17366]=[$R[17367]={type:"element",tagName:"code",properties:$R[17368]={},children:$R[17369]=[$R[17370]={type:"element",tagName:"span",properties:$R[17371]={class:"line"},children:$R[17372]=[$R[17373]={type:"element",tagName:"span",properties:$R[17374]={style:"color:#DBD7CAEE"},children:$R[17375]=[$R[17376]={type:"text",value:"document"}]}]},$R[17377]={type:"text",value:"\n"},$R[17378]={type:"element",tagName:"span",properties:$R[17379]={class:"line"},children:$R[17380]=[$R[17381]={type:"element",tagName:"span",properties:$R[17382]={style:"color:#DBD7CAEE"},children:$R[17383]=[$R[17384]={type:"text",value:"button"}]}]}]}]}]}}],position:$R[17385]={end:$R[17386]={line:79,column:4,offset:1477},start:$R[17387]={line:29,column:1,offset:541}},type:"section"}],position:$R[17388]={end:$R[17389]={line:79,column:4,offset:1477},start:$R[17390]={line:25,column:1,offset:405}},type:"section"},$R[17391]={children:$R[17392]=[$R[17393]={children:$R[17394]=[$R[17395]={position:$R[17396]={start:$R[17397]={line:85,column:5,offset:1639},end:$R[17398]={line:85,column:9,offset:1643}},type:"text",value:"once"}],id:"once",level:3,plain:"once",position:$R[17399]={start:$R[17400]={line:85,column:1,offset:1635},end:$R[17401]={line:85,column:9,offset:1643}},type:"heading"},$R[17402]={children:$R[17403]=[$R[17404]={position:$R[17405]={start:$R[17406]={line:87,column:1,offset:1645},end:$R[17407]={line:87,column:7,offset:1651}},type:"inlineCode",value:"once"},$R[17408]={position:$R[17409]={start:$R[17410]={line:87,column:7,offset:1651},end:$R[17411]={line:87,column:59,offset:1703}},type:"text",value:" オプションは、event listener を一度だけ実行し削除するかどうかを指定する。デフォルトは "},$R[17412]={position:$R[17413]={start:$R[17414]={line:87,column:59,offset:1703},end:$R[17415]={line:87,column:66,offset:1710}},type:"inlineCode",value:"false"},$R[17416]={position:$R[17417]={start:$R[17418]={line:87,column:66,offset:1710},end:$R[17419]={line:87,column:71,offset:1715}},type:"text",value:" である。"}],position:$R[17420]={start:$R[17421]={line:87,column:1,offset:1645},end:$R[17422]={line:87,column:71,offset:1715}},type:"paragraph"},$R[17423]={children:$R[17424]=[$R[17425]={position:$R[17426]={start:$R[17427]={line:89,column:1,offset:1717},end:$R[17428]={line:89,column:82,offset:1798}},type:"text",value:"通常 event listner 及びそのスコープ変数は登録されている限り参照を保持するため、GC の対象にならず、メモリリークの原因になることがある。明示的に "},$R[17429]={position:$R[17430]={start:$R[17431]={line:89,column:82,offset:1798},end:$R[17432]={line:89,column:103,offset:1819}},type:"inlineCode",value:"removeEventListener"},$R[17433]={position:$R[17434]={start:$R[17435]={line:89,column:103,offset:1819},end:$R[17436]={line:89,column:119,offset:1835}},type:"text",value:" を呼び出すことで解決できるが、"},$R[17437]={position:$R[17438]={start:$R[17439]={line:89,column:119,offset:1835},end:$R[17440]={line:89,column:125,offset:1841}},type:"inlineCode",value:"once"},$R[17441]={position:$R[17442]={start:$R[17443]={line:89,column:125,offset:1841},end:$R[17444]={line:89,column:149,offset:1865}},type:"text",value:" オプションはより簡単に GC のケアができる。"}],position:$R[17445]={start:$R[17446]={line:89,column:1,offset:1717},end:$R[17447]={line:89,column:149,offset:1865}},type:"paragraph"},$R[17448]={children:$R[17449]=[$R[17450]={position:$R[17451]={start:$R[17452]={line:91,column:1,offset:1867},end:$R[17453]={line:91,column:72,offset:1938}},type:"text",value:"例外として useEffect で event listner を登録する処理を書く場合は、必ず useEffect のクリーンアップ関数で "},$R[17454]={position:$R[17455]={start:$R[17456]={line:91,column:72,offset:1938},end:$R[17457]={line:91,column:93,offset:1959}},type:"inlineCode",value:"removeEventListener"},$R[17458]={position:$R[17459]={start:$R[17460]={line:91,column:93,offset:1959},end:$R[17461]={line:91,column:102,offset:1968}},type:"text",value:" を呼び出すこと。"},$R[17462]={position:$R[17463]={start:$R[17464]={line:91,column:102,offset:1968},end:$R[17465]={line:91,column:108,offset:1974}},type:"inlineCode",value:"once"},$R[17466]={position:$R[17467]={start:$R[17468]={line:91,column:108,offset:1974},end:$R[17469]={line:91,column:245,offset:2111}},type:"text",value:" オプションはその event listner が実行されたときに自動的に削除されるだけなので、event listenr を持つ component を mount しただけで listner が発火しなかった場合、クリーンアップ関数が無い場合はメモリリークの原因になる。"}],position:$R[17470]={start:$R[17471]={line:91,column:1,offset:1867},end:$R[17472]={line:91,column:245,offset:2111}},type:"paragraph"},$R[17473]={filename:"sample.tsx tsx",lang:"tsx",position:$R[17474]={start:$R[17475]={line:93,column:1,offset:2113},end:$R[17476]={line:112,column:4,offset:2543}},type:"code",value:"const Component: FC = () => {\n const ref = useRef\x3CHTMLButtonElement>(null);\n\n useEffect(() => {\n const handleClick = () => {\n console.log('click');\n };\n const button = ref.current;\n\n button?.addEventListener('click', handleClick, { once: true });\n\n return () => {\n button?.removeEventListener('click', handleClick);\n };\n }, []);\n\n return \x3Cbutton ref={ref}>click me\x3C/button>;\n}",hast:$R[17477]={type:"root",children:$R[17478]=[$R[17479]={type:"element",tagName:"pre",properties:$R[17480]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[17481]=[$R[17482]={type:"element",tagName:"code",properties:$R[17483]={},children:$R[17484]=[$R[17485]={type:"element",tagName:"span",properties:$R[17486]={class:"line"},children:$R[17487]=[$R[17488]={type:"element",tagName:"span",properties:$R[17489]={style:"color:#CB7676"},children:$R[17490]=[$R[17491]={type:"text",value:"const"}]},$R[17492]={type:"element",tagName:"span",properties:$R[17493]={style:"color:#80A665"},children:$R[17494]=[$R[17495]={type:"text",value:" Component"}]},$R[17496]={type:"element",tagName:"span",properties:$R[17497]={style:"color:#666666"},children:$R[17498]=[$R[17499]={type:"text",value:": "}]},$R[17500]={type:"element",tagName:"span",properties:$R[17501]={style:"color:#5DA994"},children:$R[17502]=[$R[17503]={type:"text",value:"FC"}]},$R[17504]={type:"element",tagName:"span",properties:$R[17505]={style:"color:#666666"},children:$R[17506]=[$R[17507]={type:"text",value:" ="}]},$R[17508]={type:"element",tagName:"span",properties:$R[17509]={style:"color:#666666"},children:$R[17510]=[$R[17511]={type:"text",value:" ()"}]},$R[17512]={type:"element",tagName:"span",properties:$R[17513]={style:"color:#666666"},children:$R[17514]=[$R[17515]={type:"text",value:" =>"}]},$R[17516]={type:"element",tagName:"span",properties:$R[17517]={style:"color:#666666"},children:$R[17518]=[$R[17519]={type:"text",value:" {"}]}]},$R[17520]={type:"text",value:"\n"},$R[17521]={type:"element",tagName:"span",properties:$R[17522]={class:"line"},children:$R[17523]=[$R[17524]={type:"element",tagName:"span",properties:$R[17525]={style:"color:#CB7676"},children:$R[17526]=[$R[17527]={type:"text",value:" const"}]},$R[17528]={type:"element",tagName:"span",properties:$R[17529]={style:"color:#BD976A"},children:$R[17530]=[$R[17531]={type:"text",value:" ref"}]},$R[17532]={type:"element",tagName:"span",properties:$R[17533]={style:"color:#666666"},children:$R[17534]=[$R[17535]={type:"text",value:" ="}]},$R[17536]={type:"element",tagName:"span",properties:$R[17537]={style:"color:#80A665"},children:$R[17538]=[$R[17539]={type:"text",value:" useRef"}]},$R[17540]={type:"element",tagName:"span",properties:$R[17541]={style:"color:#666666"},children:$R[17542]=[$R[17543]={type:"text",value:"\x3C"}]},$R[17544]={type:"element",tagName:"span",properties:$R[17545]={style:"color:#5DA994"},children:$R[17546]=[$R[17547]={type:"text",value:"HTMLButtonElement"}]},$R[17548]={type:"element",tagName:"span",properties:$R[17549]={style:"color:#666666"},children:$R[17550]=[$R[17551]={type:"text",value:">("}]},$R[17552]={type:"element",tagName:"span",properties:$R[17553]={style:"color:#CB7676"},children:$R[17554]=[$R[17555]={type:"text",value:"null"}]},$R[17556]={type:"element",tagName:"span",properties:$R[17557]={style:"color:#666666"},children:$R[17558]=[$R[17559]={type:"text",value:");"}]}]},$R[17560]={type:"text",value:"\n"},$R[17561]={type:"element",tagName:"span",properties:$R[17562]={class:"line"},children:$R[17563]=[]},$R[17564]={type:"text",value:"\n"},$R[17565]={type:"element",tagName:"span",properties:$R[17566]={class:"line"},children:$R[17567]=[$R[17568]={type:"element",tagName:"span",properties:$R[17569]={style:"color:#80A665"},children:$R[17570]=[$R[17571]={type:"text",value:" useEffect"}]},$R[17572]={type:"element",tagName:"span",properties:$R[17573]={style:"color:#666666"},children:$R[17574]=[$R[17575]={type:"text",value:"(()"}]},$R[17576]={type:"element",tagName:"span",properties:$R[17577]={style:"color:#666666"},children:$R[17578]=[$R[17579]={type:"text",value:" =>"}]},$R[17580]={type:"element",tagName:"span",properties:$R[17581]={style:"color:#666666"},children:$R[17582]=[$R[17583]={type:"text",value:" {"}]}]},$R[17584]={type:"text",value:"\n"},$R[17585]={type:"element",tagName:"span",properties:$R[17586]={class:"line"},children:$R[17587]=[$R[17588]={type:"element",tagName:"span",properties:$R[17589]={style:"color:#CB7676"},children:$R[17590]=[$R[17591]={type:"text",value:" const"}]},$R[17592]={type:"element",tagName:"span",properties:$R[17593]={style:"color:#80A665"},children:$R[17594]=[$R[17595]={type:"text",value:" handleClick"}]},$R[17596]={type:"element",tagName:"span",properties:$R[17597]={style:"color:#666666"},children:$R[17598]=[$R[17599]={type:"text",value:" ="}]},$R[17600]={type:"element",tagName:"span",properties:$R[17601]={style:"color:#666666"},children:$R[17602]=[$R[17603]={type:"text",value:" ()"}]},$R[17604]={type:"element",tagName:"span",properties:$R[17605]={style:"color:#666666"},children:$R[17606]=[$R[17607]={type:"text",value:" =>"}]},$R[17608]={type:"element",tagName:"span",properties:$R[17609]={style:"color:#666666"},children:$R[17610]=[$R[17611]={type:"text",value:" {"}]}]},$R[17612]={type:"text",value:"\n"},$R[17613]={type:"element",tagName:"span",properties:$R[17614]={class:"line"},children:$R[17615]=[$R[17616]={type:"element",tagName:"span",properties:$R[17617]={style:"color:#BD976A"},children:$R[17618]=[$R[17619]={type:"text",value:" console"}]},$R[17620]={type:"element",tagName:"span",properties:$R[17621]={style:"color:#666666"},children:$R[17622]=[$R[17623]={type:"text",value:"."}]},$R[17624]={type:"element",tagName:"span",properties:$R[17625]={style:"color:#80A665"},children:$R[17626]=[$R[17627]={type:"text",value:"log"}]},$R[17628]={type:"element",tagName:"span",properties:$R[17629]={style:"color:#666666"},children:$R[17630]=[$R[17631]={type:"text",value:"("}]},$R[17632]={type:"element",tagName:"span",properties:$R[17633]={style:"color:#C98A7D77"},children:$R[17634]=[$R[17635]={type:"text",value:"'"}]},$R[17636]={type:"element",tagName:"span",properties:$R[17637]={style:"color:#C98A7D"},children:$R[17638]=[$R[17639]={type:"text",value:"click"}]},$R[17640]={type:"element",tagName:"span",properties:$R[17641]={style:"color:#C98A7D77"},children:$R[17642]=[$R[17643]={type:"text",value:"'"}]},$R[17644]={type:"element",tagName:"span",properties:$R[17645]={style:"color:#666666"},children:$R[17646]=[$R[17647]={type:"text",value:");"}]}]},$R[17648]={type:"text",value:"\n"},$R[17649]={type:"element",tagName:"span",properties:$R[17650]={class:"line"},children:$R[17651]=[$R[17652]={type:"element",tagName:"span",properties:$R[17653]={style:"color:#666666"},children:$R[17654]=[$R[17655]={type:"text",value:" };"}]}]},$R[17656]={type:"text",value:"\n"},$R[17657]={type:"element",tagName:"span",properties:$R[17658]={class:"line"},children:$R[17659]=[$R[17660]={type:"element",tagName:"span",properties:$R[17661]={style:"color:#CB7676"},children:$R[17662]=[$R[17663]={type:"text",value:" const"}]},$R[17664]={type:"element",tagName:"span",properties:$R[17665]={style:"color:#BD976A"},children:$R[17666]=[$R[17667]={type:"text",value:" button"}]},$R[17668]={type:"element",tagName:"span",properties:$R[17669]={style:"color:#666666"},children:$R[17670]=[$R[17671]={type:"text",value:" ="}]},$R[17672]={type:"element",tagName:"span",properties:$R[17673]={style:"color:#BD976A"},children:$R[17674]=[$R[17675]={type:"text",value:" ref"}]},$R[17676]={type:"element",tagName:"span",properties:$R[17677]={style:"color:#666666"},children:$R[17678]=[$R[17679]={type:"text",value:"."}]},$R[17680]={type:"element",tagName:"span",properties:$R[17681]={style:"color:#BD976A"},children:$R[17682]=[$R[17683]={type:"text",value:"current"}]},$R[17684]={type:"element",tagName:"span",properties:$R[17685]={style:"color:#666666"},children:$R[17686]=[$R[17687]={type:"text",value:";"}]}]},$R[17688]={type:"text",value:"\n"},$R[17689]={type:"element",tagName:"span",properties:$R[17690]={class:"line"},children:$R[17691]=[]},$R[17692]={type:"text",value:"\n"},$R[17693]={type:"element",tagName:"span",properties:$R[17694]={class:"line"},children:$R[17695]=[$R[17696]={type:"element",tagName:"span",properties:$R[17697]={style:"color:#BD976A"},children:$R[17698]=[$R[17699]={type:"text",value:" button"}]},$R[17700]={type:"element",tagName:"span",properties:$R[17701]={style:"color:#666666"},children:$R[17702]=[$R[17703]={type:"text",value:"?."}]},$R[17704]={type:"element",tagName:"span",properties:$R[17705]={style:"color:#80A665"},children:$R[17706]=[$R[17707]={type:"text",value:"addEventListener"}]},$R[17708]={type:"element",tagName:"span",properties:$R[17709]={style:"color:#666666"},children:$R[17710]=[$R[17711]={type:"text",value:"("}]},$R[17712]={type:"element",tagName:"span",properties:$R[17713]={style:"color:#C98A7D77"},children:$R[17714]=[$R[17715]={type:"text",value:"'"}]},$R[17716]={type:"element",tagName:"span",properties:$R[17717]={style:"color:#C98A7D"},children:$R[17718]=[$R[17719]={type:"text",value:"click"}]},$R[17720]={type:"element",tagName:"span",properties:$R[17721]={style:"color:#C98A7D77"},children:$R[17722]=[$R[17723]={type:"text",value:"'"}]},$R[17724]={type:"element",tagName:"span",properties:$R[17725]={style:"color:#666666"},children:$R[17726]=[$R[17727]={type:"text",value:","}]},$R[17728]={type:"element",tagName:"span",properties:$R[17729]={style:"color:#BD976A"},children:$R[17730]=[$R[17731]={type:"text",value:" handleClick"}]},$R[17732]={type:"element",tagName:"span",properties:$R[17733]={style:"color:#666666"},children:$R[17734]=[$R[17735]={type:"text",value:","}]},$R[17736]={type:"element",tagName:"span",properties:$R[17737]={style:"color:#666666"},children:$R[17738]=[$R[17739]={type:"text",value:" {"}]},$R[17740]={type:"element",tagName:"span",properties:$R[17741]={style:"color:#B8A965"},children:$R[17742]=[$R[17743]={type:"text",value:" once"}]},$R[17744]={type:"element",tagName:"span",properties:$R[17745]={style:"color:#666666"},children:$R[17746]=[$R[17747]={type:"text",value:":"}]},$R[17748]={type:"element",tagName:"span",properties:$R[17749]={style:"color:#4D9375"},children:$R[17750]=[$R[17751]={type:"text",value:" true"}]},$R[17752]={type:"element",tagName:"span",properties:$R[17753]={style:"color:#666666"},children:$R[17754]=[$R[17755]={type:"text",value:" });"}]}]},$R[17756]={type:"text",value:"\n"},$R[17757]={type:"element",tagName:"span",properties:$R[17758]={class:"line"},children:$R[17759]=[]},$R[17760]={type:"text",value:"\n"},$R[17761]={type:"element",tagName:"span",properties:$R[17762]={class:"line"},children:$R[17763]=[$R[17764]={type:"element",tagName:"span",properties:$R[17765]={style:"color:#4D9375"},children:$R[17766]=[$R[17767]={type:"text",value:" return"}]},$R[17768]={type:"element",tagName:"span",properties:$R[17769]={style:"color:#666666"},children:$R[17770]=[$R[17771]={type:"text",value:" ()"}]},$R[17772]={type:"element",tagName:"span",properties:$R[17773]={style:"color:#666666"},children:$R[17774]=[$R[17775]={type:"text",value:" =>"}]},$R[17776]={type:"element",tagName:"span",properties:$R[17777]={style:"color:#666666"},children:$R[17778]=[$R[17779]={type:"text",value:" {"}]}]},$R[17780]={type:"text",value:"\n"},$R[17781]={type:"element",tagName:"span",properties:$R[17782]={class:"line"},children:$R[17783]=[$R[17784]={type:"element",tagName:"span",properties:$R[17785]={style:"color:#BD976A"},children:$R[17786]=[$R[17787]={type:"text",value:" button"}]},$R[17788]={type:"element",tagName:"span",properties:$R[17789]={style:"color:#666666"},children:$R[17790]=[$R[17791]={type:"text",value:"?."}]},$R[17792]={type:"element",tagName:"span",properties:$R[17793]={style:"color:#80A665"},children:$R[17794]=[$R[17795]={type:"text",value:"removeEventListener"}]},$R[17796]={type:"element",tagName:"span",properties:$R[17797]={style:"color:#666666"},children:$R[17798]=[$R[17799]={type:"text",value:"("}]},$R[17800]={type:"element",tagName:"span",properties:$R[17801]={style:"color:#C98A7D77"},children:$R[17802]=[$R[17803]={type:"text",value:"'"}]},$R[17804]={type:"element",tagName:"span",properties:$R[17805]={style:"color:#C98A7D"},children:$R[17806]=[$R[17807]={type:"text",value:"click"}]},$R[17808]={type:"element",tagName:"span",properties:$R[17809]={style:"color:#C98A7D77"},children:$R[17810]=[$R[17811]={type:"text",value:"'"}]},$R[17812]={type:"element",tagName:"span",properties:$R[17813]={style:"color:#666666"},children:$R[17814]=[$R[17815]={type:"text",value:","}]},$R[17816]={type:"element",tagName:"span",properties:$R[17817]={style:"color:#BD976A"},children:$R[17818]=[$R[17819]={type:"text",value:" handleClick"}]},$R[17820]={type:"element",tagName:"span",properties:$R[17821]={style:"color:#666666"},children:$R[17822]=[$R[17823]={type:"text",value:");"}]}]},$R[17824]={type:"text",value:"\n"},$R[17825]={type:"element",tagName:"span",properties:$R[17826]={class:"line"},children:$R[17827]=[$R[17828]={type:"element",tagName:"span",properties:$R[17829]={style:"color:#666666"},children:$R[17830]=[$R[17831]={type:"text",value:" };"}]}]},$R[17832]={type:"text",value:"\n"},$R[17833]={type:"element",tagName:"span",properties:$R[17834]={class:"line"},children:$R[17835]=[$R[17836]={type:"element",tagName:"span",properties:$R[17837]={style:"color:#666666"},children:$R[17838]=[$R[17839]={type:"text",value:" },"}]},$R[17840]={type:"element",tagName:"span",properties:$R[17841]={style:"color:#666666"},children:$R[17842]=[$R[17843]={type:"text",value:" []);"}]}]},$R[17844]={type:"text",value:"\n"},$R[17845]={type:"element",tagName:"span",properties:$R[17846]={class:"line"},children:$R[17847]=[]},$R[17848]={type:"text",value:"\n"},$R[17849]={type:"element",tagName:"span",properties:$R[17850]={class:"line"},children:$R[17851]=[$R[17852]={type:"element",tagName:"span",properties:$R[17853]={style:"color:#4D9375"},children:$R[17854]=[$R[17855]={type:"text",value:" return"}]},$R[17856]={type:"element",tagName:"span",properties:$R[17857]={style:"color:#666666"},children:$R[17858]=[$R[17859]={type:"text",value:" \x3C"}]},$R[17860]={type:"element",tagName:"span",properties:$R[17861]={style:"color:#4D9375"},children:$R[17862]=[$R[17863]={type:"text",value:"button"}]},$R[17864]={type:"element",tagName:"span",properties:$R[17865]={style:"color:#BD976A"},children:$R[17866]=[$R[17867]={type:"text",value:" ref"}]},$R[17868]={type:"element",tagName:"span",properties:$R[17869]={style:"color:#666666"},children:$R[17870]=[$R[17871]={type:"text",value:"={"}]},$R[17872]={type:"element",tagName:"span",properties:$R[17873]={style:"color:#BD976A"},children:$R[17874]=[$R[17875]={type:"text",value:"ref"}]},$R[17876]={type:"element",tagName:"span",properties:$R[17877]={style:"color:#666666"},children:$R[17878]=[$R[17879]={type:"text",value:"}>"}]},$R[17880]={type:"element",tagName:"span",properties:$R[17881]={style:"color:#DBD7CAEE"},children:$R[17882]=[$R[17883]={type:"text",value:"click me"}]},$R[17884]={type:"element",tagName:"span",properties:$R[17885]={style:"color:#666666"},children:$R[17886]=[$R[17887]={type:"text",value:"\x3C/"}]},$R[17888]={type:"element",tagName:"span",properties:$R[17889]={style:"color:#4D9375"},children:$R[17890]=[$R[17891]={type:"text",value:"button"}]},$R[17892]={type:"element",tagName:"span",properties:$R[17893]={style:"color:#666666"},children:$R[17894]=[$R[17895]={type:"text",value:">;"}]}]},$R[17896]={type:"text",value:"\n"},$R[17897]={type:"element",tagName:"span",properties:$R[17898]={class:"line"},children:$R[17899]=[$R[17900]={type:"element",tagName:"span",properties:$R[17901]={style:"color:#666666"},children:$R[17902]=[$R[17903]={type:"text",value:"}"}]}]}]}]}]}}],position:$R[17904]={end:$R[17905]={line:112,column:4,offset:2543},start:$R[17906]={line:85,column:1,offset:1635}},type:"section"},$R[17907]={children:$R[17908]=[$R[17909]={children:$R[17910]=[$R[17911]={position:$R[17912]={start:$R[17913]={line:114,column:5,offset:2549},end:$R[17914]={line:114,column:12,offset:2556}},type:"text",value:"passive"}],id:"passive",level:3,plain:"passive",position:$R[17915]={start:$R[17916]={line:114,column:1,offset:2545},end:$R[17917]={line:114,column:12,offset:2556}},type:"heading"},$R[17918]={children:$R[17919]=[$R[17920]={position:$R[17921]={start:$R[17922]={line:116,column:1,offset:2558},end:$R[17923]={line:116,column:89,offset:2646}},type:"text",value:"ブラウザは通常ドキュメントのスクロール体験を最適化する。しかし scroll event に event listner が登録された場合、event listener 内で "},$R[17924]={position:$R[17925]={start:$R[17926]={line:116,column:89,offset:2646},end:$R[17927]={line:116,column:107,offset:2664}},type:"inlineCode",value:"preventDefault()"},$R[17928]={position:$R[17929]={start:$R[17930]={line:116,column:107,offset:2664},end:$R[17931]={line:116,column:133,offset:2690}},type:"text",value:" が呼ばれる場合はスクロールを止めなくてはならない。"}],position:$R[17932]={start:$R[17933]={line:116,column:1,offset:2558},end:$R[17934]={line:116,column:133,offset:2690}},type:"paragraph"},$R[17935]={children:$R[17936]=[$R[17937]={position:$R[17938]={start:$R[17939]={line:118,column:1,offset:2692},end:$R[17940]={line:118,column:28,offset:2719}},type:"text",value:"しかしブラウザは event listener 内で "},$R[17941]={position:$R[17942]={start:$R[17943]={line:118,column:28,offset:2719},end:$R[17944]={line:118,column:46,offset:2737}},type:"inlineCode",value:"preventDefault()"},$R[17945]={position:$R[17946]={start:$R[17947]={line:118,column:46,offset:2737},end:$R[17948]={line:118,column:147,offset:2838}},type:"text",value:" が呼ばれるかどうかを事前に判断できないため、scroll event に event listener が登録された場合はスクロールを止めるためにスクロールを待つ。これによりスクロール体験が悪くなる。"}],position:$R[17949]={start:$R[17950]={line:118,column:1,offset:2692},end:$R[17951]={line:118,column:147,offset:2838}},type:"paragraph"},$R[17952]={children:$R[17953]=[$R[17954]={position:$R[17955]={start:$R[17956]={line:120,column:1,offset:2840},end:$R[17957]={line:120,column:7,offset:2846}},type:"text",value:"この問題は "},$R[17958]={position:$R[17959]={start:$R[17960]={line:120,column:7,offset:2846},end:$R[17961]={line:120,column:16,offset:2855}},type:"inlineCode",value:"passive"},$R[17962]={position:$R[17963]={start:$R[17964]={line:120,column:16,offset:2855},end:$R[17965]={line:120,column:24,offset:2863}},type:"text",value:" オプションを "},$R[17966]={position:$R[17967]={start:$R[17968]={line:120,column:24,offset:2863},end:$R[17969]={line:120,column:30,offset:2869}},type:"inlineCode",value:"true"},$R[17970]={position:$R[17971]={start:$R[17972]={line:120,column:30,offset:2869},end:$R[17973]={line:120,column:43,offset:2882}},type:"text",value:" にすることで解決できる。"},$R[17974]={position:$R[17975]={start:$R[17976]={line:120,column:43,offset:2882},end:$R[17977]={line:120,column:52,offset:2891}},type:"inlineCode",value:"passive"},$R[17978]={position:$R[17979]={start:$R[17980]={line:120,column:52,offset:2891},end:$R[17981]={line:120,column:60,offset:2899}},type:"text",value:" オプションを "},$R[17982]={position:$R[17983]={start:$R[17984]={line:120,column:60,offset:2899},end:$R[17985]={line:120,column:66,offset:2905}},type:"inlineCode",value:"true"},$R[17986]={position:$R[17987]={start:$R[17988]={line:120,column:66,offset:2905},end:$R[17989]={line:120,column:90,offset:2929}},type:"text",value:" にすると、event listener 内で "},$R[17990]={position:$R[17991]={start:$R[17992]={line:120,column:90,offset:2929},end:$R[17993]={line:120,column:108,offset:2947}},type:"inlineCode",value:"preventDefault()"},$R[17994]={position:$R[17995]={start:$R[17996]={line:120,column:108,offset:2947},end:$R[17997]={line:120,column:158,offset:2997}},type:"text",value:" を呼ばれないことが保証されるため、ブラウザは listener の完了を待たずにスクロールできる。"}],position:$R[17998]={start:$R[17999]={line:120,column:1,offset:2840},end:$R[18000]={line:120,column:158,offset:2997}},type:"paragraph"},$R[18001]={children:$R[18002]=[$R[18003]={position:$R[18004]={start:$R[18005]={line:122,column:1,offset:2999},end:$R[18006]={line:122,column:34,offset:3032}},type:"text",value:"どの程度ユーザー操作が改善されるかは以下記事内の動画が参考になる。"}],position:$R[18007]={start:$R[18008]={line:122,column:1,offset:2999},end:$R[18009]={line:122,column:34,offset:3032}},type:"paragraph"},$R[18010]={meta:$R[18011]={open_graph:$R[18012]={site_name:"Chrome for Developers",type:"website",title:"パッシブ イベント リスナーによるスクロール パフォーマンスの改善 | Blog | Chrome for Developers",description:"Chrome 51 の新機能であるパッシブ イベント リスナーを使用すると、スクロールのパフォーマンスが大幅に向上する可能性があります。",url:"https://developer.chrome.com/blog/passive-event-listeners?hl=ja",locale:"ja"},theme_color:"#1a73e8",title:"パッシブ イベント リスナーによるスクロール パフォーマンスの改善 | Blog | Chrome for Developers",description:"Chrome 51 の新機能であるパッシブ イベント リスナーを使用すると、スクロールのパフォーマンスが大幅に向上する可能性があります。",favicon:"https://www.gstatic.com/devrel-devsite/prod/v6f23042ee535b54d461e0cc5c1cc12493e4d0aea4f2d54a7a63063da7859ead0/chrome/images/favicon.png",canonical_url:"https://developer.chrome.com/blog/passive-event-listeners?hl=ja"},oembed:void 0,position:$R[18013]={start:$R[18014]={line:124,column:1,offset:3034},end:$R[18015]={line:124,column:64,offset:3097}},src:"https://developer.chrome.com/blog/passive-event-listeners?hl=ja",type:"embed"}],position:$R[18016]={end:$R[18017]={line:124,column:64,offset:3097},start:$R[18018]={line:114,column:1,offset:2545}},type:"section"},$R[18019]={children:$R[18020]=[$R[18021]={children:$R[18022]=[$R[18023]={position:$R[18024]={start:$R[18025]={line:126,column:5,offset:3103},end:$R[18026]={line:126,column:11,offset:3109}},type:"text",value:"signal"}],id:"signal",level:3,plain:"signal",position:$R[18027]={start:$R[18028]={line:126,column:1,offset:3099},end:$R[18029]={line:126,column:11,offset:3109}},type:"heading"},$R[18030]={children:$R[18031]=[$R[18032]={position:$R[18033]={start:$R[18034]={line:128,column:1,offset:3111},end:$R[18035]={line:128,column:9,offset:3119}},type:"inlineCode",value:"signal"},$R[18036]={position:$R[18037]={start:$R[18038]={line:128,column:9,offset:3119},end:$R[18039]={line:128,column:122,offset:3232}},type:"text",value:" オプションは AbortSignal を指定する。AbortSignal は AbortController を通じて生成される。AbortSignal が abort されると、event listener は削除される。"}],position:$R[18040]={start:$R[18041]={line:128,column:1,offset:3111},end:$R[18042]={line:128,column:122,offset:3232}},type:"paragraph"},$R[18043]={children:$R[18044]=[$R[18045]={position:$R[18046]={start:$R[18047]={line:130,column:1,offset:3234},end:$R[18048]={line:130,column:130,offset:3363}},type:"text",value:"一見とても便利なオプションだが罠がある。Abort すればもちろん event listener が削除されるが、正常処理された場合を Signal だけからは判断できないため、event listener が削除されずメモリリークの原因になる可能性がある。"}],position:$R[18049]={start:$R[18050]={line:130,column:1,offset:3234},end:$R[18051]={line:130,column:130,offset:3363}},type:"paragraph"},$R[18052]={children:$R[18053]=[$R[18054]={position:$R[18055]={start:$R[18056]={line:132,column:1,offset:3365},end:$R[18057]={line:132,column:12,offset:3376}},type:"text",value:"これらに対する対策は "},$R[18058]={children:$R[18059]=[$R[18060]={position:$R[18061]={start:$R[18062]={line:132,column:13,offset:3377},end:$R[18063]={line:132,column:18,offset:3382}},type:"text",value:"@jxck"}],position:$R[18064]={start:$R[18065]={line:132,column:12,offset:3376},end:$R[18066]={line:132,column:37,offset:3401}},title:void 0,type:"link",url:"https://jxck.io/"},$R[18067]={position:$R[18068]={start:$R[18069]={line:132,column:37,offset:3401},end:$R[18070]={line:132,column:66,offset:3430}},type:"text",value:" さんのこの記事が参考になるのでそちらを参考にしてほしい。"}],position:$R[18071]={start:$R[18072]={line:132,column:1,offset:3365},end:$R[18073]={line:132,column:66,offset:3430}},type:"paragraph"},$R[18074]={meta:$R[18075]={author:"Jxck",description:"最近 AbortSignal.any() が提案され、急速に実装が進んでいる。すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装する際の API はかなり整備され...",keywords:$R[18076]=["timeout","abortsignal","promise"],theme_color:"#000000",open_graph:$R[18077]={type:"article",url:"https://blog.jxck.io/entries/2023-06-01/abort-signal-any.html",title:"AbortSignal.any(), AbortSignal.timeout(), そして addEventListener() の Signal | blog.jxck.io",site_name:"blog.jxck.io",description:"最近 AbortSignal.any() が提案され、急速に実装が進んでいる。すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装する際の API はかなり整備され...",images:$R[18078]=[$R[18079]={url:"https://blog.jxck.io/assets/img/jxck.600x600.png"}]},title:"AbortSignal.any(), AbortSignal.timeout(), そして addEventListener() の Signal | blog.jxck.io",favicon:"https://blog.jxck.io/assets/img/jxck.3000x3000.webp",canonical_url:"https://blog.jxck.io/entries/2023-06-01/abort-signal-any.html"},oembed:void 0,position:$R[18080]={start:$R[18081]={line:134,column:1,offset:3432},end:$R[18082]={line:134,column:62,offset:3493}},src:"https://blog.jxck.io/entries/2023-06-01/abort-signal-any.html",type:"embed"}],position:$R[18083]={end:$R[18084]={line:134,column:62,offset:3493},start:$R[18085]={line:126,column:1,offset:3099}},type:"section"}],position:$R[18086]={end:$R[18087]={line:134,column:62,offset:3493},start:$R[18088]={line:7,column:1,offset:119}},type:"section"},$R[18089]={children:$R[18090]=[$R[18091]={children:$R[18092]=[$R[18093]={position:$R[18094]={start:$R[18095]={line:136,column:4,offset:3498},end:$R[18096]={line:136,column:7,offset:3501}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[18097]={start:$R[18098]={line:136,column:1,offset:3495},end:$R[18099]={line:136,column:7,offset:3501}},type:"heading"},$R[18100]={children:$R[18101]=[$R[18102]={position:$R[18103]={start:$R[18104]={line:138,column:1,offset:3503},end:$R[18105]={line:138,column:65,offset:3567}},type:"text",value:"これらの提案は 2016 年〜 2020 年には既に提案 / 実装されていたが、なかなか使う機会がなかったので調べてみた。特に "},$R[18106]={position:$R[18107]={start:$R[18108]={line:138,column:65,offset:3567},end:$R[18109]={line:138,column:71,offset:3573}},type:"inlineCode",value:"once"},$R[18110]={position:$R[18111]={start:$R[18112]={line:138,column:71,offset:3573},end:$R[18113]={line:138,column:79,offset:3581}},type:"text",value:" オプションと "},$R[18114]={position:$R[18115]={start:$R[18116]={line:138,column:79,offset:3581},end:$R[18117]={line:138,column:88,offset:3590}},type:"inlineCode",value:"passive"},$R[18118]={position:$R[18119]={start:$R[18120]={line:138,column:88,offset:3590},end:$R[18121]={line:138,column:95,offset:3597}},type:"text",value:" オプション、"},$R[18122]={position:$R[18123]={start:$R[18124]={line:138,column:95,offset:3597},end:$R[18125]={line:138,column:103,offset:3605}},type:"inlineCode",value:"signal"},$R[18126]={position:$R[18127]={start:$R[18128]={line:138,column:103,offset:3605},end:$R[18129]={line:138,column:147,offset:3649}},type:"text",value:" オプションは今後の開発で使う機会があるかもしれないので、覚えておくと便利かもしれない。"}],position:$R[18130]={start:$R[18131]={line:138,column:1,offset:3503},end:$R[18132]={line:138,column:147,offset:3649}},type:"paragraph"}],position:$R[18133]={end:$R[18134]={line:138,column:147,offset:3649},start:$R[18135]={line:136,column:1,offset:3495}},type:"section"}],footnotes:$R[18136]=[$R[18137]={children:$R[18138]=[$R[18139]={children:$R[18140]=[$R[18141]={children:$R[18142]=[$R[18143]={position:$R[18144]={start:$R[18145]={line:81,column:8,offset:1486},end:$R[18146]={line:81,column:30,offset:1508}},type:"text",value:"JavaScript Event order"}],position:$R[18147]={start:$R[18148]={line:81,column:7,offset:1485},end:$R[18149]={line:81,column:86,offset:1564}},title:void 0,type:"link",url:"https://www.quirksmode.org/js/events_order.html#link4"}],position:$R[18150]={start:$R[18151]={line:81,column:7,offset:1485},end:$R[18152]={line:81,column:86,offset:1564}},type:"paragraph"}],count:1,index:0,position:$R[18153]={start:$R[18154]={line:81,column:1,offset:1479},end:$R[18155]={line:81,column:86,offset:1564}},type:"footnoteDefinition"},$R[18156]={children:$R[18157]=[$R[18158]={children:$R[18159]=[$R[18160]={children:$R[18161]=[$R[18162]={position:$R[18163]={start:$R[18164]={line:83,column:8,offset:1573},end:$R[18165]={line:83,column:19,offset:1584}},type:"text",value:"Event order"}],position:$R[18166]={start:$R[18167]={line:83,column:7,offset:1572},end:$R[18168]={line:83,column:68,offset:1633}},title:void 0,type:"link",url:"https://javascript.info/bubbling-and-capturing"}],position:$R[18169]={start:$R[18170]={line:83,column:7,offset:1572},end:$R[18171]={line:83,column:68,offset:1633}},type:"paragraph"}],count:1,index:1,position:$R[18172]={start:$R[18173]={line:83,column:1,offset:1566},end:$R[18174]={line:83,column:68,offset:1633}},type:"footnoteDefinition"}],title:$R[18175]={children:$R[18176]=[$R[18177]={position:$R[18178]={start:$R[18179]={line:1,column:3,offset:2},end:$R[18180]={line:1,column:25,offset:24}},type:"text",value:"EventListener のオプションメモ"}],id:"eventlistener-のオプションメモ",level:1,plain:"EventListener のオプションメモ",position:$R[18181]={start:$R[18182]={line:1,column:1,offset:0},end:$R[18183]={line:1,column:25,offset:24}},type:"heading"},toc:$R[18184]=[$R[18185]={children:$R[18186]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[18187]={children:$R[18188]=[$R[18189]={children:$R[18190]=[$R[18191]={children:$R[18192]=[],id:"イベントの伝播順",plain:"イベントの伝播順",type:"toc"}],id:"capture",plain:"capture",type:"toc"},$R[18193]={children:$R[18194]=[],id:"once",plain:"once",type:"toc"},$R[18195]={children:$R[18196]=[],id:"passive",plain:"passive",type:"toc"},$R[18197]={children:$R[18198]=[],id:"signal",plain:"signal",type:"toc"}],id:"オプション",plain:"オプション",type:"toc"},$R[18199]={children:$R[18200]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[18201]={content:"# Life Cycle Scripts を理解する\n\n## はじめに\n\nnpm scripts には、`pre` と `post` というプレフィックスのついたスクリプトがある。これは、スクリプトの前後に実行されるスクリプトを指定するものである。\n\nその中でも、特定の状況下で実行されるスクリプトがある。それらを Life Cycle Scripts と呼ぶ。この挙動が混乱しがちなので、整理してみた。\n\n## Life Cycle Scripts とは\n\nLife Cycle Scripts とは、`pre` や `post` のついたスクリプトの中でも、特定の状況下で実行されるスクリプトのことである。\n\n具体的には、以下のようなスクリプトが Life Cycle Scripts に該当する。\n\n### `prepublish`\n\n`npm install` や `npm ci` が実行されたときに実行されるスクリプトである。\n\n`npm publish` では実行されない。(ナント!!!)\n\nこのスクリプトは、名前と挙動の違いから混乱するという理由で非推奨[^1]であり、代わりに `prepare` スクリプトと `prepublishOnly` スクリプトを使うことが推奨されている。`prepublish` のユースケースを公式では以下のように説明されている。\n\n> If you need to perform operations on your package before it is used, in a way that is not dependent on the operating system or architecture of the target system, use a prepublish script. This includes tasks such as:\n>\n> - Compiling CoffeeScript source code into JavaScript.\n> - Creating minified versions of JavaScript source code.\n> - Fetching remote resources that your package will use.\n>\n> --- [Prepare and Prepublish](https://docs.npmjs.com/cli/v9/using-npm/scripts#prepare-and-prepublish)\n\n[^1]: https://github.com/npm/npm/issues/10074\n\n### `prepare`\n\n`prepare` スクリプトは、`npm install` や `npm publish` , `npm pack` が実行されたときに、実行されるスクリプトである。\n\n`prepublish` スクリプトの挙動の互換性の観点から、`prepare` スクリプトは `prepublishOnly` スクリプトの前に実行され、`prepublish` スクリプトの後に実行される。\n\n### `prepublishOnly`\n\n`prepublishOnly` スクリプトは、`npm publish` が実行されたときにのみ、実行されるスクリプトである。(シンプル!)\n\n### `prepack`\n\ntarball が作成される前に実行されるスクリプトである。tarball が作成されるタイミングは以下の通りである。\n\n- `npm pack`\n- `npm publish`\n- git URL でのインストール\n\nここで `npm run pack` と `npm pack` は別である。前者はユーザーが定義したスクリプトであり、`prepack` は実行されない。\n\n### `postpack`\n\ntarball が作成された後に実行されるスクリプトである。\n\n### `dependencies`\n\n`node_modules` ディレクトリが変更されたとき、変更の後に実行される。\n\n## Life Cycle Scripts が実行されるタイミング\n\n次に npm のコマンドが実行されたときに、どの Life Cycle Scripts がどの順番で実行されるかを整理する。\n\n| コマンド | 実行される Life Cycle Scripts の種類と順番 |\n| ----------------- | -------------------------------------------------------------------------------------------------------------- |\n| `npm cache add` | `prepare` |\n| `npm ci` | `preinstall` --> `install` --> `postinstall` --> `prepublish` --> `preprepare` --> `prepare` --> `postprepare` |\n| `npm diff` | `prepare` |\n| `npm install`[^2] | `preinstall` --> `install` --> `postinstall` --> `prepublish` --> `preprepare` --> `prepare` --> `postprepare` |\n| `npm pack` | `prepack` --> `pack` --> `postpack` |\n| `npm publish`[^3] | `prepublishOnly` --> `prepack` --> `prepare` --> `postpack` --> `publish` --> `postpublish` |\n| `npm rebuild`[^4] | `preinstall` --> `install` --> `postinstall` --> `prepare` |\n| `npm restart` | `prerestart` --> `restart` --> `postrestart` |\n| `npm start` | `prestart` --> `start` --> `poststart` |\n| `npm stop` | `prestop` --> `stop` --> `poststop` |\n| `npm test` | `pretest` --> `test` --> `posttest` |\n| `npm version` | `preversion` --> `version` --> `postversion` |\n\n[^2]: `binding.gyp` というファイルが存在する場合、`install` スクリプトは `node-gyp rebuild` が代わりに実行される。\n\n[^3]: `--dry-run` オプションを指定した場合、`prepare` は実行されない。\n\n[^4]: `prepare` はリンクされたパッケージなど、カレントディレクトリがシンボリックリンクの場合にのみ実行される。\n\n## npm 以外での挙動\n\n余談だが npm 以外のパッケージマネージャでは、原則 `pre` と `post` プレフィックスの付いたスクリプトは実行されない。これはワークフローの動作が複雑になることを避けるために設計されている。[^5][^6]\n\nまた yarn[^5] や pnpm[^7] では定義されている Life Cycle Scripts が npm と異なるので注意が必要である。\n\n---\n\n[@s6n_jp](https://twitter.com/s6n_jp) から指摘されて気づいたのだが、どうやら pnpm v9 以降では Life Cycle Scripts がサポートされるようになった[^8]ようだ。これにより、pnpm でも npm と同様に Life Cycle Scripts が実行されるようになった。\n\nTwitter で poll を取った結果[^9]入った変更のようで、多くの人がこの変更を望んでいたようだ。\n\n[^5]: https://yarnpkg.com/advanced/lifecycle-scripts\n\n[^6]: https://github.com/pnpm/pnpm/issues/2891\n\n[^7]: https://pnpm.io/scripts\n\n[^8]: https://github.com/pnpm/pnpm/pull/7634\n\n[^9]: https://twitter.com/pnpmjs/status/1755902257751605717\n\n## まとめ\n\n調べていくと、npm の Life Cycle Scripts は意外と複雑で、挙動が混乱しやすい。しかし、理解してしまえば、それほど難しいものではない。この記事が、少しでもその理解に役立てば幸いである。",description:"混乱しがちな Life Cycle Scripts の挙動を理解する",published:!0,publishedAt:"2024-11-08T21:04:11.79+09:00[Asia/Tokyo]",tags:$R[18202]=["npm scripts","package manager"],title:"Life Cycle Scripts を理解する",updatedAt:"2024-11-09T22:54:16.82+09:00[Asia/Tokyo]",_meta:$R[18203]={filePath:"01JC5CTQW9WVSPP08F4EB4GXF7/slug.md",fileName:"slug.md",directory:"01JC5CTQW9WVSPP08F4EB4GXF7",extension:"md",path:"01JC5CTQW9WVSPP08F4EB4GXF7/slug"},abstract:"Life Cycle Scripts を理解するはじめにnpm scripts には、pre と post というプレフィックスのついたスクリプトがある。これは、スクリプトの前後に実行されるスクリプトを指定するものである。その中でも、特定の状況下で実行されるスクリプトがある。それらを Life Cycle Scripts と呼ぶ。この挙動が混乱しがちなので、整理してみた。Life Cycle Scripts とはLife Cycle Scripts とは、pre や post のついたスクリプトの中でも、特定の状況下で実行されるスクリプトのことである。具体的には、以下のようなスクリプトが Life Cycle Scripts に該当する。prepublishnpm install や npm ci が実行されたときに実行されるスクリプトである。npm publish では実行されない。(ナ",mdast:$R[18204]={children:$R[18205]=[$R[18206]={children:$R[18207]=[$R[18208]={children:$R[18209]=[$R[18210]={position:$R[18211]={start:$R[18212]={line:3,column:4,offset:31},end:$R[18213]={line:3,column:8,offset:35}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[18214]={start:$R[18215]={line:3,column:1,offset:28},end:$R[18216]={line:3,column:8,offset:35}},type:"heading"},$R[18217]={children:$R[18218]=[$R[18219]={position:$R[18220]={start:$R[18221]={line:5,column:1,offset:37},end:$R[18222]={line:5,column:16,offset:52}},type:"text",value:"npm scripts には、"},$R[18223]={position:$R[18224]={start:$R[18225]={line:5,column:16,offset:52},end:$R[18226]={line:5,column:21,offset:57}},type:"inlineCode",value:"pre"},$R[18227]={position:$R[18228]={start:$R[18229]={line:5,column:21,offset:57},end:$R[18230]={line:5,column:24,offset:60}},type:"text",value:" と "},$R[18231]={position:$R[18232]={start:$R[18233]={line:5,column:24,offset:60},end:$R[18234]={line:5,column:30,offset:66}},type:"inlineCode",value:"post"},$R[18235]={position:$R[18236]={start:$R[18237]={line:5,column:30,offset:66},end:$R[18238]={line:5,column:88,offset:124}},type:"text",value:" というプレフィックスのついたスクリプトがある。これは、スクリプトの前後に実行されるスクリプトを指定するものである。"}],position:$R[18239]={start:$R[18240]={line:5,column:1,offset:37},end:$R[18241]={line:5,column:88,offset:124}},type:"paragraph"},$R[18242]={children:$R[18243]=[$R[18244]={position:$R[18245]={start:$R[18246]={line:7,column:1,offset:126},end:$R[18247]={line:7,column:77,offset:202}},type:"text",value:"その中でも、特定の状況下で実行されるスクリプトがある。それらを Life Cycle Scripts と呼ぶ。この挙動が混乱しがちなので、整理してみた。"}],position:$R[18248]={start:$R[18249]={line:7,column:1,offset:126},end:$R[18250]={line:7,column:77,offset:202}},type:"paragraph"}],position:$R[18251]={end:$R[18252]={line:7,column:77,offset:202},start:$R[18253]={line:3,column:1,offset:28}},type:"section"},$R[18254]={children:$R[18255]=[$R[18256]={children:$R[18257]=[$R[18258]={position:$R[18259]={start:$R[18260]={line:9,column:4,offset:207},end:$R[18261]={line:9,column:25,offset:228}},type:"text",value:"Life Cycle Scripts とは"}],id:"life-cycle-scripts-とは",level:2,plain:"Life Cycle Scripts とは",position:$R[18262]={start:$R[18263]={line:9,column:1,offset:204},end:$R[18264]={line:9,column:25,offset:228}},type:"heading"},$R[18265]={children:$R[18266]=[$R[18267]={position:$R[18268]={start:$R[18269]={line:11,column:1,offset:230},end:$R[18270]={line:11,column:23,offset:252}},type:"text",value:"Life Cycle Scripts とは、"},$R[18271]={position:$R[18272]={start:$R[18273]={line:11,column:23,offset:252},end:$R[18274]={line:11,column:28,offset:257}},type:"inlineCode",value:"pre"},$R[18275]={position:$R[18276]={start:$R[18277]={line:11,column:28,offset:257},end:$R[18278]={line:11,column:31,offset:260}},type:"text",value:" や "},$R[18279]={position:$R[18280]={start:$R[18281]={line:11,column:31,offset:260},end:$R[18282]={line:11,column:37,offset:266}},type:"inlineCode",value:"post"},$R[18283]={position:$R[18284]={start:$R[18285]={line:11,column:37,offset:266},end:$R[18286]={line:11,column:76,offset:305}},type:"text",value:" のついたスクリプトの中でも、特定の状況下で実行されるスクリプトのことである。"}],position:$R[18287]={start:$R[18288]={line:11,column:1,offset:230},end:$R[18289]={line:11,column:76,offset:305}},type:"paragraph"},$R[18290]={children:$R[18291]=[$R[18292]={position:$R[18293]={start:$R[18294]={line:13,column:1,offset:307},end:$R[18295]={line:13,column:45,offset:351}},type:"text",value:"具体的には、以下のようなスクリプトが Life Cycle Scripts に該当する。"}],position:$R[18296]={start:$R[18297]={line:13,column:1,offset:307},end:$R[18298]={line:13,column:45,offset:351}},type:"paragraph"},$R[18299]={children:$R[18300]=[$R[18301]={children:$R[18302]=[$R[18303]={position:$R[18304]={start:$R[18305]={line:15,column:5,offset:357},end:$R[18306]={line:15,column:17,offset:369}},type:"inlineCode",value:"prepublish"}],id:"prepublish",level:3,plain:"prepublish",position:$R[18307]={start:$R[18308]={line:15,column:1,offset:353},end:$R[18309]={line:15,column:17,offset:369}},type:"heading"},$R[18310]={children:$R[18311]=[$R[18312]={position:$R[18313]={start:$R[18314]={line:17,column:1,offset:371},end:$R[18315]={line:17,column:14,offset:384}},type:"inlineCode",value:"npm install"},$R[18316]={position:$R[18317]={start:$R[18318]={line:17,column:14,offset:384},end:$R[18319]={line:17,column:17,offset:387}},type:"text",value:" や "},$R[18320]={position:$R[18321]={start:$R[18322]={line:17,column:17,offset:387},end:$R[18323]={line:17,column:25,offset:395}},type:"inlineCode",value:"npm ci"},$R[18324]={position:$R[18325]={start:$R[18326]={line:17,column:25,offset:395},end:$R[18327]={line:17,column:49,offset:419}},type:"text",value:" が実行されたときに実行されるスクリプトである。"}],position:$R[18328]={start:$R[18329]={line:17,column:1,offset:371},end:$R[18330]={line:17,column:49,offset:419}},type:"paragraph"},$R[18331]={children:$R[18332]=[$R[18333]={position:$R[18334]={start:$R[18335]={line:19,column:1,offset:421},end:$R[18336]={line:19,column:14,offset:434}},type:"inlineCode",value:"npm publish"},$R[18337]={position:$R[18338]={start:$R[18339]={line:19,column:14,offset:434},end:$R[18340]={line:19,column:32,offset:452}},type:"text",value:" では実行されない。(ナント!!!)"}],position:$R[18341]={start:$R[18342]={line:19,column:1,offset:421},end:$R[18343]={line:19,column:32,offset:452}},type:"paragraph"},$R[18344]={children:$R[18345]=[$R[18346]={position:$R[18347]={start:$R[18348]={line:21,column:1,offset:454},end:$R[18349]={line:21,column:33,offset:486}},type:"text",value:"このスクリプトは、名前と挙動の違いから混乱するという理由で非推奨"},$R[18350]={footnoteIndex:0,position:$R[18351]={start:$R[18352]={line:21,column:33,offset:486},end:$R[18353]={line:21,column:37,offset:490}},referenceIndex:1,type:"footnoteReference"},$R[18354]={position:$R[18355]={start:$R[18356]={line:21,column:37,offset:490},end:$R[18357]={line:21,column:46,offset:499}},type:"text",value:"であり、代わりに "},$R[18358]={position:$R[18359]={start:$R[18360]={line:21,column:46,offset:499},end:$R[18361]={line:21,column:55,offset:508}},type:"inlineCode",value:"prepare"},$R[18362]={position:$R[18363]={start:$R[18364]={line:21,column:55,offset:508},end:$R[18365]={line:21,column:63,offset:516}},type:"text",value:" スクリプトと "},$R[18366]={position:$R[18367]={start:$R[18368]={line:21,column:63,offset:516},end:$R[18369]={line:21,column:79,offset:532}},type:"inlineCode",value:"prepublishOnly"},$R[18370]={position:$R[18371]={start:$R[18372]={line:21,column:79,offset:532},end:$R[18373]={line:21,column:99,offset:552}},type:"text",value:" スクリプトを使うことが推奨されている。"},$R[18374]={position:$R[18375]={start:$R[18376]={line:21,column:99,offset:552},end:$R[18377]={line:21,column:111,offset:564}},type:"inlineCode",value:"prepublish"},$R[18378]={position:$R[18379]={start:$R[18380]={line:21,column:111,offset:564},end:$R[18381]={line:21,column:138,offset:591}},type:"text",value:" のユースケースを公式では以下のように説明されている。"}],position:$R[18382]={start:$R[18383]={line:21,column:1,offset:454},end:$R[18384]={line:21,column:138,offset:591}},type:"paragraph"},$R[18385]={children:$R[18386]=[$R[18387]={children:$R[18388]=[$R[18389]={position:$R[18390]={start:$R[18391]={line:23,column:3,offset:595},end:$R[18392]={line:23,column:218,offset:810}},type:"text",value:"If you need to perform operations on your package before it is used, in a way that is not dependent on the operating system or architecture of the target system, use a prepublish script. This includes tasks such as:"}],position:$R[18393]={start:$R[18394]={line:23,column:3,offset:595},end:$R[18395]={line:23,column:218,offset:810}},type:"paragraph"},$R[18396]={children:$R[18397]=[$R[18398]={children:$R[18399]=[$R[18400]={children:$R[18401]=[$R[18402]={position:$R[18403]={start:$R[18404]={line:25,column:5,offset:817},end:$R[18405]={line:25,column:56,offset:868}},type:"text",value:"Compiling CoffeeScript source code into JavaScript."}],position:$R[18406]={start:$R[18407]={line:25,column:5,offset:817},end:$R[18408]={line:25,column:56,offset:868}},type:"paragraph"}],position:$R[18409]={start:$R[18410]={line:25,column:3,offset:815},end:$R[18411]={line:25,column:56,offset:868}},type:"listItem"},$R[18412]={children:$R[18413]=[$R[18414]={children:$R[18415]=[$R[18416]={position:$R[18417]={start:$R[18418]={line:26,column:5,offset:873},end:$R[18419]={line:26,column:58,offset:926}},type:"text",value:"Creating minified versions of JavaScript source code."}],position:$R[18420]={start:$R[18421]={line:26,column:5,offset:873},end:$R[18422]={line:26,column:58,offset:926}},type:"paragraph"}],position:$R[18423]={start:$R[18424]={line:26,column:3,offset:871},end:$R[18425]={line:26,column:58,offset:926}},type:"listItem"},$R[18426]={children:$R[18427]=[$R[18428]={children:$R[18429]=[$R[18430]={position:$R[18431]={start:$R[18432]={line:27,column:5,offset:931},end:$R[18433]={line:27,column:58,offset:984}},type:"text",value:"Fetching remote resources that your package will use."}],position:$R[18434]={start:$R[18435]={line:27,column:5,offset:931},end:$R[18436]={line:27,column:58,offset:984}},type:"paragraph"}],position:$R[18437]={start:$R[18438]={line:27,column:3,offset:929},end:$R[18439]={line:27,column:58,offset:984}},type:"listItem"}],position:$R[18440]={start:$R[18441]={line:25,column:3,offset:815},end:$R[18442]={line:28,column:2,offset:986}},type:"unorderedList"},$R[18443]={children:$R[18444]=[$R[18445]={position:$R[18446]={start:$R[18447]={line:29,column:3,offset:989},end:$R[18448]={line:29,column:7,offset:993}},type:"text",value:"--- "},$R[18449]={children:$R[18450]=[$R[18451]={position:$R[18452]={start:$R[18453]={line:29,column:8,offset:994},end:$R[18454]={line:29,column:30,offset:1016}},type:"text",value:"Prepare and Prepublish"}],position:$R[18455]={start:$R[18456]={line:29,column:7,offset:993},end:$R[18457]={line:29,column:103,offset:1089}},title:void 0,type:"link",url:"https://docs.npmjs.com/cli/v9/using-npm/scripts#prepare-and-prepublish"}],position:$R[18458]={start:$R[18459]={line:29,column:3,offset:989},end:$R[18460]={line:29,column:103,offset:1089}},type:"paragraph"}],position:$R[18461]={start:$R[18462]={line:23,column:1,offset:593},end:$R[18463]={line:29,column:103,offset:1089}},type:"blockquote"}],position:$R[18464]={end:$R[18465]={line:29,column:103,offset:1089},start:$R[18466]={line:15,column:1,offset:353}},type:"section"},$R[18467]={children:$R[18468]=[$R[18469]={children:$R[18470]=[$R[18471]={position:$R[18472]={start:$R[18473]={line:33,column:5,offset:1142},end:$R[18474]={line:33,column:14,offset:1151}},type:"inlineCode",value:"prepare"}],id:"prepare",level:3,plain:"prepare",position:$R[18475]={start:$R[18476]={line:33,column:1,offset:1138},end:$R[18477]={line:33,column:14,offset:1151}},type:"heading"},$R[18478]={children:$R[18479]=[$R[18480]={position:$R[18481]={start:$R[18482]={line:35,column:1,offset:1153},end:$R[18483]={line:35,column:10,offset:1162}},type:"inlineCode",value:"prepare"},$R[18484]={position:$R[18485]={start:$R[18486]={line:35,column:10,offset:1162},end:$R[18487]={line:35,column:18,offset:1170}},type:"text",value:" スクリプトは、"},$R[18488]={position:$R[18489]={start:$R[18490]={line:35,column:18,offset:1170},end:$R[18491]={line:35,column:31,offset:1183}},type:"inlineCode",value:"npm install"},$R[18492]={position:$R[18493]={start:$R[18494]={line:35,column:31,offset:1183},end:$R[18495]={line:35,column:34,offset:1186}},type:"text",value:" や "},$R[18496]={position:$R[18497]={start:$R[18498]={line:35,column:34,offset:1186},end:$R[18499]={line:35,column:47,offset:1199}},type:"inlineCode",value:"npm publish"},$R[18500]={position:$R[18501]={start:$R[18502]={line:35,column:47,offset:1199},end:$R[18503]={line:35,column:50,offset:1202}},type:"text",value:" , "},$R[18504]={position:$R[18505]={start:$R[18506]={line:35,column:50,offset:1202},end:$R[18507]={line:35,column:60,offset:1212}},type:"inlineCode",value:"npm pack"},$R[18508]={position:$R[18509]={start:$R[18510]={line:35,column:60,offset:1212},end:$R[18511]={line:35,column:85,offset:1237}},type:"text",value:" が実行されたときに、実行されるスクリプトである。"}],position:$R[18512]={start:$R[18513]={line:35,column:1,offset:1153},end:$R[18514]={line:35,column:85,offset:1237}},type:"paragraph"},$R[18515]={children:$R[18516]=[$R[18517]={position:$R[18518]={start:$R[18519]={line:37,column:1,offset:1239},end:$R[18520]={line:37,column:13,offset:1251}},type:"inlineCode",value:"prepublish"},$R[18521]={position:$R[18522]={start:$R[18523]={line:37,column:13,offset:1251},end:$R[18524]={line:37,column:32,offset:1270}},type:"text",value:" スクリプトの挙動の互換性の観点から、"},$R[18525]={position:$R[18526]={start:$R[18527]={line:37,column:32,offset:1270},end:$R[18528]={line:37,column:41,offset:1279}},type:"inlineCode",value:"prepare"},$R[18529]={position:$R[18530]={start:$R[18531]={line:37,column:41,offset:1279},end:$R[18532]={line:37,column:49,offset:1287}},type:"text",value:" スクリプトは "},$R[18533]={position:$R[18534]={start:$R[18535]={line:37,column:49,offset:1287},end:$R[18536]={line:37,column:65,offset:1303}},type:"inlineCode",value:"prepublishOnly"},$R[18537]={position:$R[18538]={start:$R[18539]={line:37,column:65,offset:1303},end:$R[18540]={line:37,column:79,offset:1317}},type:"text",value:" スクリプトの前に実行され、"},$R[18541]={position:$R[18542]={start:$R[18543]={line:37,column:79,offset:1317},end:$R[18544]={line:37,column:91,offset:1329}},type:"inlineCode",value:"prepublish"},$R[18545]={position:$R[18546]={start:$R[18547]={line:37,column:91,offset:1329},end:$R[18548]={line:37,column:106,offset:1344}},type:"text",value:" スクリプトの後に実行される。"}],position:$R[18549]={start:$R[18550]={line:37,column:1,offset:1239},end:$R[18551]={line:37,column:106,offset:1344}},type:"paragraph"}],position:$R[18552]={end:$R[18553]={line:37,column:106,offset:1344},start:$R[18554]={line:33,column:1,offset:1138}},type:"section"},$R[18555]={children:$R[18556]=[$R[18557]={children:$R[18558]=[$R[18559]={position:$R[18560]={start:$R[18561]={line:39,column:5,offset:1350},end:$R[18562]={line:39,column:21,offset:1366}},type:"inlineCode",value:"prepublishOnly"}],id:"prepublishonly",level:3,plain:"prepublishOnly",position:$R[18563]={start:$R[18564]={line:39,column:1,offset:1346},end:$R[18565]={line:39,column:21,offset:1366}},type:"heading"},$R[18566]={children:$R[18567]=[$R[18568]={position:$R[18569]={start:$R[18570]={line:41,column:1,offset:1368},end:$R[18571]={line:41,column:17,offset:1384}},type:"inlineCode",value:"prepublishOnly"},$R[18572]={position:$R[18573]={start:$R[18574]={line:41,column:17,offset:1384},end:$R[18575]={line:41,column:25,offset:1392}},type:"text",value:" スクリプトは、"},$R[18576]={position:$R[18577]={start:$R[18578]={line:41,column:25,offset:1392},end:$R[18579]={line:41,column:38,offset:1405}},type:"inlineCode",value:"npm publish"},$R[18580]={position:$R[18581]={start:$R[18582]={line:41,column:38,offset:1405},end:$R[18583]={line:41,column:72,offset:1439}},type:"text",value:" が実行されたときにのみ、実行されるスクリプトである。(シンプル!)"}],position:$R[18584]={start:$R[18585]={line:41,column:1,offset:1368},end:$R[18586]={line:41,column:72,offset:1439}},type:"paragraph"}],position:$R[18587]={end:$R[18588]={line:41,column:72,offset:1439},start:$R[18589]={line:39,column:1,offset:1346}},type:"section"},$R[18590]={children:$R[18591]=[$R[18592]={children:$R[18593]=[$R[18594]={position:$R[18595]={start:$R[18596]={line:43,column:5,offset:1445},end:$R[18597]={line:43,column:14,offset:1454}},type:"inlineCode",value:"prepack"}],id:"prepack",level:3,plain:"prepack",position:$R[18598]={start:$R[18599]={line:43,column:1,offset:1441},end:$R[18600]={line:43,column:14,offset:1454}},type:"heading"},$R[18601]={children:$R[18602]=[$R[18603]={position:$R[18604]={start:$R[18605]={line:45,column:1,offset:1456},end:$R[18606]={line:45,column:60,offset:1515}},type:"text",value:"tarball が作成される前に実行されるスクリプトである。tarball が作成されるタイミングは以下の通りである。"}],position:$R[18607]={start:$R[18608]={line:45,column:1,offset:1456},end:$R[18609]={line:45,column:60,offset:1515}},type:"paragraph"},$R[18610]={children:$R[18611]=[$R[18612]={children:$R[18613]=[$R[18614]={children:$R[18615]=[$R[18616]={position:$R[18617]={start:$R[18618]={line:47,column:3,offset:1519},end:$R[18619]={line:47,column:13,offset:1529}},type:"inlineCode",value:"npm pack"}],position:$R[18620]={start:$R[18621]={line:47,column:3,offset:1519},end:$R[18622]={line:47,column:13,offset:1529}},type:"paragraph"}],position:$R[18623]={start:$R[18624]={line:47,column:1,offset:1517},end:$R[18625]={line:47,column:13,offset:1529}},type:"listItem"},$R[18626]={children:$R[18627]=[$R[18628]={children:$R[18629]=[$R[18630]={position:$R[18631]={start:$R[18632]={line:48,column:3,offset:1532},end:$R[18633]={line:48,column:16,offset:1545}},type:"inlineCode",value:"npm publish"}],position:$R[18634]={start:$R[18635]={line:48,column:3,offset:1532},end:$R[18636]={line:48,column:16,offset:1545}},type:"paragraph"}],position:$R[18637]={start:$R[18638]={line:48,column:1,offset:1530},end:$R[18639]={line:48,column:16,offset:1545}},type:"listItem"},$R[18640]={children:$R[18641]=[$R[18642]={children:$R[18643]=[$R[18644]={position:$R[18645]={start:$R[18646]={line:49,column:3,offset:1548},end:$R[18647]={line:49,column:19,offset:1564}},type:"text",value:"git URL でのインストール"}],position:$R[18648]={start:$R[18649]={line:49,column:3,offset:1548},end:$R[18650]={line:49,column:19,offset:1564}},type:"paragraph"}],position:$R[18651]={start:$R[18652]={line:49,column:1,offset:1546},end:$R[18653]={line:49,column:19,offset:1564}},type:"listItem"}],position:$R[18654]={start:$R[18655]={line:47,column:1,offset:1517},end:$R[18656]={line:49,column:19,offset:1564}},type:"unorderedList"},$R[18657]={children:$R[18658]=[$R[18659]={position:$R[18660]={start:$R[18661]={line:51,column:1,offset:1566},end:$R[18662]={line:51,column:5,offset:1570}},type:"text",value:"ここで "},$R[18663]={position:$R[18664]={start:$R[18665]={line:51,column:5,offset:1570},end:$R[18666]={line:51,column:19,offset:1584}},type:"inlineCode",value:"npm run pack"},$R[18667]={position:$R[18668]={start:$R[18669]={line:51,column:19,offset:1584},end:$R[18670]={line:51,column:22,offset:1587}},type:"text",value:" と "},$R[18671]={position:$R[18672]={start:$R[18673]={line:51,column:22,offset:1587},end:$R[18674]={line:51,column:32,offset:1597}},type:"inlineCode",value:"npm pack"},$R[18675]={position:$R[18676]={start:$R[18677]={line:51,column:32,offset:1597},end:$R[18678]={line:51,column:60,offset:1625}},type:"text",value:" は別である。前者はユーザーが定義したスクリプトであり、"},$R[18679]={position:$R[18680]={start:$R[18681]={line:51,column:60,offset:1625},end:$R[18682]={line:51,column:69,offset:1634}},type:"inlineCode",value:"prepack"},$R[18683]={position:$R[18684]={start:$R[18685]={line:51,column:69,offset:1634},end:$R[18686]={line:51,column:78,offset:1643}},type:"text",value:" は実行されない。"}],position:$R[18687]={start:$R[18688]={line:51,column:1,offset:1566},end:$R[18689]={line:51,column:78,offset:1643}},type:"paragraph"}],position:$R[18690]={end:$R[18691]={line:51,column:78,offset:1643},start:$R[18692]={line:43,column:1,offset:1441}},type:"section"},$R[18693]={children:$R[18694]=[$R[18695]={children:$R[18696]=[$R[18697]={position:$R[18698]={start:$R[18699]={line:53,column:5,offset:1649},end:$R[18700]={line:53,column:15,offset:1659}},type:"inlineCode",value:"postpack"}],id:"postpack",level:3,plain:"postpack",position:$R[18701]={start:$R[18702]={line:53,column:1,offset:1645},end:$R[18703]={line:53,column:15,offset:1659}},type:"heading"},$R[18704]={children:$R[18705]=[$R[18706]={position:$R[18707]={start:$R[18708]={line:55,column:1,offset:1661},end:$R[18709]={line:55,column:31,offset:1691}},type:"text",value:"tarball が作成された後に実行されるスクリプトである。"}],position:$R[18710]={start:$R[18711]={line:55,column:1,offset:1661},end:$R[18712]={line:55,column:31,offset:1691}},type:"paragraph"}],position:$R[18713]={end:$R[18714]={line:55,column:31,offset:1691},start:$R[18715]={line:53,column:1,offset:1645}},type:"section"},$R[18716]={children:$R[18717]=[$R[18718]={children:$R[18719]=[$R[18720]={position:$R[18721]={start:$R[18722]={line:57,column:5,offset:1697},end:$R[18723]={line:57,column:19,offset:1711}},type:"inlineCode",value:"dependencies"}],id:"dependencies",level:3,plain:"dependencies",position:$R[18724]={start:$R[18725]={line:57,column:1,offset:1693},end:$R[18726]={line:57,column:19,offset:1711}},type:"heading"},$R[18727]={children:$R[18728]=[$R[18729]={position:$R[18730]={start:$R[18731]={line:59,column:1,offset:1713},end:$R[18732]={line:59,column:15,offset:1727}},type:"inlineCode",value:"node_modules"},$R[18733]={position:$R[18734]={start:$R[18735]={line:59,column:15,offset:1727},end:$R[18736]={line:59,column:42,offset:1754}},type:"text",value:" ディレクトリが変更されたとき、変更の後に実行される。"}],position:$R[18737]={start:$R[18738]={line:59,column:1,offset:1713},end:$R[18739]={line:59,column:42,offset:1754}},type:"paragraph"}],position:$R[18740]={end:$R[18741]={line:59,column:42,offset:1754},start:$R[18742]={line:57,column:1,offset:1693}},type:"section"}],position:$R[18743]={end:$R[18744]={line:59,column:42,offset:1754},start:$R[18745]={line:9,column:1,offset:204}},type:"section"},$R[18746]={children:$R[18747]=[$R[18748]={children:$R[18749]=[$R[18750]={position:$R[18751]={start:$R[18752]={line:61,column:4,offset:1759},end:$R[18753]={line:61,column:34,offset:1789}},type:"text",value:"Life Cycle Scripts が実行されるタイミング"}],id:"life-cycle-scripts-が実行されるタイミング",level:2,plain:"Life Cycle Scripts が実行されるタイミング",position:$R[18754]={start:$R[18755]={line:61,column:1,offset:1756},end:$R[18756]={line:61,column:34,offset:1789}},type:"heading"},$R[18757]={children:$R[18758]=[$R[18759]={position:$R[18760]={start:$R[18761]={line:63,column:1,offset:1791},end:$R[18762]={line:63,column:63,offset:1853}},type:"text",value:"次に npm のコマンドが実行されたときに、どの Life Cycle Scripts がどの順番で実行されるかを整理する。"}],position:$R[18763]={start:$R[18764]={line:63,column:1,offset:1791},end:$R[18765]={line:63,column:63,offset:1853}},type:"paragraph"},$R[18766]={align:$R[18767]=[null,null],children:$R[18768]=[$R[18769]={children:$R[18770]=[$R[18771]={children:$R[18772]=[$R[18773]={position:$R[18774]={start:$R[18775]={line:65,column:3,offset:1857},end:$R[18776]={line:65,column:7,offset:1861}},type:"text",value:"コマンド"}],position:$R[18777]={start:$R[18778]={line:65,column:1,offset:1855},end:$R[18779]={line:65,column:17,offset:1871}},type:"tableCell"},$R[18780]={children:$R[18781]=[$R[18782]={position:$R[18783]={start:$R[18784]={line:65,column:19,offset:1873},end:$R[18785]={line:65,column:50,offset:1904}},type:"text",value:"実行される Life Cycle Scripts の種類と順番"}],position:$R[18786]={start:$R[18787]={line:65,column:17,offset:1871},end:$R[18788]={line:65,column:120,offset:1974}},type:"tableCell"}],position:$R[18789]={start:$R[18790]={line:65,column:1,offset:1855},end:$R[18791]={line:65,column:120,offset:1974}},type:"tableRow"},$R[18792]={children:$R[18793]=[$R[18794]={children:$R[18795]=[$R[18796]={position:$R[18797]={start:$R[18798]={line:67,column:3,offset:2112},end:$R[18799]={line:67,column:18,offset:2127}},type:"inlineCode",value:"npm cache add"}],position:$R[18800]={start:$R[18801]={line:67,column:1,offset:2110},end:$R[18802]={line:67,column:21,offset:2130}},type:"tableCell"},$R[18803]={children:$R[18804]=[$R[18805]={position:$R[18806]={start:$R[18807]={line:67,column:23,offset:2132},end:$R[18808]={line:67,column:32,offset:2141}},type:"inlineCode",value:"prepare"}],position:$R[18809]={start:$R[18810]={line:67,column:21,offset:2130},end:$R[18811]={line:67,column:135,offset:2244}},type:"tableCell"}],position:$R[18812]={start:$R[18813]={line:67,column:1,offset:2110},end:$R[18814]={line:67,column:135,offset:2244}},type:"tableRow"},$R[18815]={children:$R[18816]=[$R[18817]={children:$R[18818]=[$R[18819]={position:$R[18820]={start:$R[18821]={line:68,column:3,offset:2247},end:$R[18822]={line:68,column:11,offset:2255}},type:"inlineCode",value:"npm ci"}],position:$R[18823]={start:$R[18824]={line:68,column:1,offset:2245},end:$R[18825]={line:68,column:21,offset:2265}},type:"tableCell"},$R[18826]={children:$R[18827]=[$R[18828]={position:$R[18829]={start:$R[18830]={line:68,column:23,offset:2267},end:$R[18831]={line:68,column:35,offset:2279}},type:"inlineCode",value:"preinstall"},$R[18832]={position:$R[18833]={start:$R[18834]={line:68,column:35,offset:2279},end:$R[18835]={line:68,column:40,offset:2284}},type:"text",value:" --> "},$R[18836]={position:$R[18837]={start:$R[18838]={line:68,column:40,offset:2284},end:$R[18839]={line:68,column:49,offset:2293}},type:"inlineCode",value:"install"},$R[18840]={position:$R[18841]={start:$R[18842]={line:68,column:49,offset:2293},end:$R[18843]={line:68,column:54,offset:2298}},type:"text",value:" --> "},$R[18844]={position:$R[18845]={start:$R[18846]={line:68,column:54,offset:2298},end:$R[18847]={line:68,column:67,offset:2311}},type:"inlineCode",value:"postinstall"},$R[18848]={position:$R[18849]={start:$R[18850]={line:68,column:67,offset:2311},end:$R[18851]={line:68,column:72,offset:2316}},type:"text",value:" --> "},$R[18852]={position:$R[18853]={start:$R[18854]={line:68,column:72,offset:2316},end:$R[18855]={line:68,column:84,offset:2328}},type:"inlineCode",value:"prepublish"},$R[18856]={position:$R[18857]={start:$R[18858]={line:68,column:84,offset:2328},end:$R[18859]={line:68,column:89,offset:2333}},type:"text",value:" --> "},$R[18860]={position:$R[18861]={start:$R[18862]={line:68,column:89,offset:2333},end:$R[18863]={line:68,column:101,offset:2345}},type:"inlineCode",value:"preprepare"},$R[18864]={position:$R[18865]={start:$R[18866]={line:68,column:101,offset:2345},end:$R[18867]={line:68,column:106,offset:2350}},type:"text",value:" --> "},$R[18868]={position:$R[18869]={start:$R[18870]={line:68,column:106,offset:2350},end:$R[18871]={line:68,column:115,offset:2359}},type:"inlineCode",value:"prepare"},$R[18872]={position:$R[18873]={start:$R[18874]={line:68,column:115,offset:2359},end:$R[18875]={line:68,column:120,offset:2364}},type:"text",value:" --> "},$R[18876]={position:$R[18877]={start:$R[18878]={line:68,column:120,offset:2364},end:$R[18879]={line:68,column:133,offset:2377}},type:"inlineCode",value:"postprepare"}],position:$R[18880]={start:$R[18881]={line:68,column:21,offset:2265},end:$R[18882]={line:68,column:135,offset:2379}},type:"tableCell"}],position:$R[18883]={start:$R[18884]={line:68,column:1,offset:2245},end:$R[18885]={line:68,column:135,offset:2379}},type:"tableRow"},$R[18886]={children:$R[18887]=[$R[18888]={children:$R[18889]=[$R[18890]={position:$R[18891]={start:$R[18892]={line:69,column:3,offset:2382},end:$R[18893]={line:69,column:13,offset:2392}},type:"inlineCode",value:"npm diff"}],position:$R[18894]={start:$R[18895]={line:69,column:1,offset:2380},end:$R[18896]={line:69,column:21,offset:2400}},type:"tableCell"},$R[18897]={children:$R[18898]=[$R[18899]={position:$R[18900]={start:$R[18901]={line:69,column:23,offset:2402},end:$R[18902]={line:69,column:32,offset:2411}},type:"inlineCode",value:"prepare"}],position:$R[18903]={start:$R[18904]={line:69,column:21,offset:2400},end:$R[18905]={line:69,column:135,offset:2514}},type:"tableCell"}],position:$R[18906]={start:$R[18907]={line:69,column:1,offset:2380},end:$R[18908]={line:69,column:135,offset:2514}},type:"tableRow"},$R[18909]={children:$R[18910]=[$R[18911]={children:$R[18912]=[$R[18913]={position:$R[18914]={start:$R[18915]={line:70,column:3,offset:2517},end:$R[18916]={line:70,column:16,offset:2530}},type:"inlineCode",value:"npm install"},$R[18917]={footnoteIndex:1,position:$R[18918]={start:$R[18919]={line:70,column:16,offset:2530},end:$R[18920]={line:70,column:20,offset:2534}},referenceIndex:1,type:"footnoteReference"}],position:$R[18921]={start:$R[18922]={line:70,column:1,offset:2515},end:$R[18923]={line:70,column:21,offset:2535}},type:"tableCell"},$R[18924]={children:$R[18925]=[$R[18926]={position:$R[18927]={start:$R[18928]={line:70,column:23,offset:2537},end:$R[18929]={line:70,column:35,offset:2549}},type:"inlineCode",value:"preinstall"},$R[18930]={position:$R[18931]={start:$R[18932]={line:70,column:35,offset:2549},end:$R[18933]={line:70,column:40,offset:2554}},type:"text",value:" --> "},$R[18934]={position:$R[18935]={start:$R[18936]={line:70,column:40,offset:2554},end:$R[18937]={line:70,column:49,offset:2563}},type:"inlineCode",value:"install"},$R[18938]={position:$R[18939]={start:$R[18940]={line:70,column:49,offset:2563},end:$R[18941]={line:70,column:54,offset:2568}},type:"text",value:" --> "},$R[18942]={position:$R[18943]={start:$R[18944]={line:70,column:54,offset:2568},end:$R[18945]={line:70,column:67,offset:2581}},type:"inlineCode",value:"postinstall"},$R[18946]={position:$R[18947]={start:$R[18948]={line:70,column:67,offset:2581},end:$R[18949]={line:70,column:72,offset:2586}},type:"text",value:" --> "},$R[18950]={position:$R[18951]={start:$R[18952]={line:70,column:72,offset:2586},end:$R[18953]={line:70,column:84,offset:2598}},type:"inlineCode",value:"prepublish"},$R[18954]={position:$R[18955]={start:$R[18956]={line:70,column:84,offset:2598},end:$R[18957]={line:70,column:89,offset:2603}},type:"text",value:" --> "},$R[18958]={position:$R[18959]={start:$R[18960]={line:70,column:89,offset:2603},end:$R[18961]={line:70,column:101,offset:2615}},type:"inlineCode",value:"preprepare"},$R[18962]={position:$R[18963]={start:$R[18964]={line:70,column:101,offset:2615},end:$R[18965]={line:70,column:106,offset:2620}},type:"text",value:" --> "},$R[18966]={position:$R[18967]={start:$R[18968]={line:70,column:106,offset:2620},end:$R[18969]={line:70,column:115,offset:2629}},type:"inlineCode",value:"prepare"},$R[18970]={position:$R[18971]={start:$R[18972]={line:70,column:115,offset:2629},end:$R[18973]={line:70,column:120,offset:2634}},type:"text",value:" --> "},$R[18974]={position:$R[18975]={start:$R[18976]={line:70,column:120,offset:2634},end:$R[18977]={line:70,column:133,offset:2647}},type:"inlineCode",value:"postprepare"}],position:$R[18978]={start:$R[18979]={line:70,column:21,offset:2535},end:$R[18980]={line:70,column:135,offset:2649}},type:"tableCell"}],position:$R[18981]={start:$R[18982]={line:70,column:1,offset:2515},end:$R[18983]={line:70,column:135,offset:2649}},type:"tableRow"},$R[18984]={children:$R[18985]=[$R[18986]={children:$R[18987]=[$R[18988]={position:$R[18989]={start:$R[18990]={line:71,column:3,offset:2652},end:$R[18991]={line:71,column:13,offset:2662}},type:"inlineCode",value:"npm pack"}],position:$R[18992]={start:$R[18993]={line:71,column:1,offset:2650},end:$R[18994]={line:71,column:21,offset:2670}},type:"tableCell"},$R[18995]={children:$R[18996]=[$R[18997]={position:$R[18998]={start:$R[18999]={line:71,column:23,offset:2672},end:$R[19000]={line:71,column:32,offset:2681}},type:"inlineCode",value:"prepack"},$R[19001]={position:$R[19002]={start:$R[19003]={line:71,column:32,offset:2681},end:$R[19004]={line:71,column:37,offset:2686}},type:"text",value:" --> "},$R[19005]={position:$R[19006]={start:$R[19007]={line:71,column:37,offset:2686},end:$R[19008]={line:71,column:43,offset:2692}},type:"inlineCode",value:"pack"},$R[19009]={position:$R[19010]={start:$R[19011]={line:71,column:43,offset:2692},end:$R[19012]={line:71,column:48,offset:2697}},type:"text",value:" --> "},$R[19013]={position:$R[19014]={start:$R[19015]={line:71,column:48,offset:2697},end:$R[19016]={line:71,column:58,offset:2707}},type:"inlineCode",value:"postpack"}],position:$R[19017]={start:$R[19018]={line:71,column:21,offset:2670},end:$R[19019]={line:71,column:135,offset:2784}},type:"tableCell"}],position:$R[19020]={start:$R[19021]={line:71,column:1,offset:2650},end:$R[19022]={line:71,column:135,offset:2784}},type:"tableRow"},$R[19023]={children:$R[19024]=[$R[19025]={children:$R[19026]=[$R[19027]={position:$R[19028]={start:$R[19029]={line:72,column:3,offset:2787},end:$R[19030]={line:72,column:16,offset:2800}},type:"inlineCode",value:"npm publish"},$R[19031]={footnoteIndex:2,position:$R[19032]={start:$R[19033]={line:72,column:16,offset:2800},end:$R[19034]={line:72,column:20,offset:2804}},referenceIndex:1,type:"footnoteReference"}],position:$R[19035]={start:$R[19036]={line:72,column:1,offset:2785},end:$R[19037]={line:72,column:21,offset:2805}},type:"tableCell"},$R[19038]={children:$R[19039]=[$R[19040]={position:$R[19041]={start:$R[19042]={line:72,column:23,offset:2807},end:$R[19043]={line:72,column:39,offset:2823}},type:"inlineCode",value:"prepublishOnly"},$R[19044]={position:$R[19045]={start:$R[19046]={line:72,column:39,offset:2823},end:$R[19047]={line:72,column:44,offset:2828}},type:"text",value:" --> "},$R[19048]={position:$R[19049]={start:$R[19050]={line:72,column:44,offset:2828},end:$R[19051]={line:72,column:53,offset:2837}},type:"inlineCode",value:"prepack"},$R[19052]={position:$R[19053]={start:$R[19054]={line:72,column:53,offset:2837},end:$R[19055]={line:72,column:58,offset:2842}},type:"text",value:" --> "},$R[19056]={position:$R[19057]={start:$R[19058]={line:72,column:58,offset:2842},end:$R[19059]={line:72,column:67,offset:2851}},type:"inlineCode",value:"prepare"},$R[19060]={position:$R[19061]={start:$R[19062]={line:72,column:67,offset:2851},end:$R[19063]={line:72,column:72,offset:2856}},type:"text",value:" --> "},$R[19064]={position:$R[19065]={start:$R[19066]={line:72,column:72,offset:2856},end:$R[19067]={line:72,column:82,offset:2866}},type:"inlineCode",value:"postpack"},$R[19068]={position:$R[19069]={start:$R[19070]={line:72,column:82,offset:2866},end:$R[19071]={line:72,column:87,offset:2871}},type:"text",value:" --> "},$R[19072]={position:$R[19073]={start:$R[19074]={line:72,column:87,offset:2871},end:$R[19075]={line:72,column:96,offset:2880}},type:"inlineCode",value:"publish"},$R[19076]={position:$R[19077]={start:$R[19078]={line:72,column:96,offset:2880},end:$R[19079]={line:72,column:101,offset:2885}},type:"text",value:" --> "},$R[19080]={position:$R[19081]={start:$R[19082]={line:72,column:101,offset:2885},end:$R[19083]={line:72,column:114,offset:2898}},type:"inlineCode",value:"postpublish"}],position:$R[19084]={start:$R[19085]={line:72,column:21,offset:2805},end:$R[19086]={line:72,column:135,offset:2919}},type:"tableCell"}],position:$R[19087]={start:$R[19088]={line:72,column:1,offset:2785},end:$R[19089]={line:72,column:135,offset:2919}},type:"tableRow"},$R[19090]={children:$R[19091]=[$R[19092]={children:$R[19093]=[$R[19094]={position:$R[19095]={start:$R[19096]={line:73,column:3,offset:2922},end:$R[19097]={line:73,column:16,offset:2935}},type:"inlineCode",value:"npm rebuild"},$R[19098]={footnoteIndex:3,position:$R[19099]={start:$R[19100]={line:73,column:16,offset:2935},end:$R[19101]={line:73,column:20,offset:2939}},referenceIndex:1,type:"footnoteReference"}],position:$R[19102]={start:$R[19103]={line:73,column:1,offset:2920},end:$R[19104]={line:73,column:21,offset:2940}},type:"tableCell"},$R[19105]={children:$R[19106]=[$R[19107]={position:$R[19108]={start:$R[19109]={line:73,column:23,offset:2942},end:$R[19110]={line:73,column:35,offset:2954}},type:"inlineCode",value:"preinstall"},$R[19111]={position:$R[19112]={start:$R[19113]={line:73,column:35,offset:2954},end:$R[19114]={line:73,column:40,offset:2959}},type:"text",value:" --> "},$R[19115]={position:$R[19116]={start:$R[19117]={line:73,column:40,offset:2959},end:$R[19118]={line:73,column:49,offset:2968}},type:"inlineCode",value:"install"},$R[19119]={position:$R[19120]={start:$R[19121]={line:73,column:49,offset:2968},end:$R[19122]={line:73,column:54,offset:2973}},type:"text",value:" --> "},$R[19123]={position:$R[19124]={start:$R[19125]={line:73,column:54,offset:2973},end:$R[19126]={line:73,column:67,offset:2986}},type:"inlineCode",value:"postinstall"},$R[19127]={position:$R[19128]={start:$R[19129]={line:73,column:67,offset:2986},end:$R[19130]={line:73,column:72,offset:2991}},type:"text",value:" --> "},$R[19131]={position:$R[19132]={start:$R[19133]={line:73,column:72,offset:2991},end:$R[19134]={line:73,column:81,offset:3000}},type:"inlineCode",value:"prepare"}],position:$R[19135]={start:$R[19136]={line:73,column:21,offset:2940},end:$R[19137]={line:73,column:135,offset:3054}},type:"tableCell"}],position:$R[19138]={start:$R[19139]={line:73,column:1,offset:2920},end:$R[19140]={line:73,column:135,offset:3054}},type:"tableRow"},$R[19141]={children:$R[19142]=[$R[19143]={children:$R[19144]=[$R[19145]={position:$R[19146]={start:$R[19147]={line:74,column:3,offset:3057},end:$R[19148]={line:74,column:16,offset:3070}},type:"inlineCode",value:"npm restart"}],position:$R[19149]={start:$R[19150]={line:74,column:1,offset:3055},end:$R[19151]={line:74,column:21,offset:3075}},type:"tableCell"},$R[19152]={children:$R[19153]=[$R[19154]={position:$R[19155]={start:$R[19156]={line:74,column:23,offset:3077},end:$R[19157]={line:74,column:35,offset:3089}},type:"inlineCode",value:"prerestart"},$R[19158]={position:$R[19159]={start:$R[19160]={line:74,column:35,offset:3089},end:$R[19161]={line:74,column:40,offset:3094}},type:"text",value:" --> "},$R[19162]={position:$R[19163]={start:$R[19164]={line:74,column:40,offset:3094},end:$R[19165]={line:74,column:49,offset:3103}},type:"inlineCode",value:"restart"},$R[19166]={position:$R[19167]={start:$R[19168]={line:74,column:49,offset:3103},end:$R[19169]={line:74,column:54,offset:3108}},type:"text",value:" --> "},$R[19170]={position:$R[19171]={start:$R[19172]={line:74,column:54,offset:3108},end:$R[19173]={line:74,column:67,offset:3121}},type:"inlineCode",value:"postrestart"}],position:$R[19174]={start:$R[19175]={line:74,column:21,offset:3075},end:$R[19176]={line:74,column:135,offset:3189}},type:"tableCell"}],position:$R[19177]={start:$R[19178]={line:74,column:1,offset:3055},end:$R[19179]={line:74,column:135,offset:3189}},type:"tableRow"},$R[19180]={children:$R[19181]=[$R[19182]={children:$R[19183]=[$R[19184]={position:$R[19185]={start:$R[19186]={line:75,column:3,offset:3192},end:$R[19187]={line:75,column:14,offset:3203}},type:"inlineCode",value:"npm start"}],position:$R[19188]={start:$R[19189]={line:75,column:1,offset:3190},end:$R[19190]={line:75,column:21,offset:3210}},type:"tableCell"},$R[19191]={children:$R[19192]=[$R[19193]={position:$R[19194]={start:$R[19195]={line:75,column:23,offset:3212},end:$R[19196]={line:75,column:33,offset:3222}},type:"inlineCode",value:"prestart"},$R[19197]={position:$R[19198]={start:$R[19199]={line:75,column:33,offset:3222},end:$R[19200]={line:75,column:38,offset:3227}},type:"text",value:" --> "},$R[19201]={position:$R[19202]={start:$R[19203]={line:75,column:38,offset:3227},end:$R[19204]={line:75,column:45,offset:3234}},type:"inlineCode",value:"start"},$R[19205]={position:$R[19206]={start:$R[19207]={line:75,column:45,offset:3234},end:$R[19208]={line:75,column:50,offset:3239}},type:"text",value:" --> "},$R[19209]={position:$R[19210]={start:$R[19211]={line:75,column:50,offset:3239},end:$R[19212]={line:75,column:61,offset:3250}},type:"inlineCode",value:"poststart"}],position:$R[19213]={start:$R[19214]={line:75,column:21,offset:3210},end:$R[19215]={line:75,column:135,offset:3324}},type:"tableCell"}],position:$R[19216]={start:$R[19217]={line:75,column:1,offset:3190},end:$R[19218]={line:75,column:135,offset:3324}},type:"tableRow"},$R[19219]={children:$R[19220]=[$R[19221]={children:$R[19222]=[$R[19223]={position:$R[19224]={start:$R[19225]={line:76,column:3,offset:3327},end:$R[19226]={line:76,column:13,offset:3337}},type:"inlineCode",value:"npm stop"}],position:$R[19227]={start:$R[19228]={line:76,column:1,offset:3325},end:$R[19229]={line:76,column:21,offset:3345}},type:"tableCell"},$R[19230]={children:$R[19231]=[$R[19232]={position:$R[19233]={start:$R[19234]={line:76,column:23,offset:3347},end:$R[19235]={line:76,column:32,offset:3356}},type:"inlineCode",value:"prestop"},$R[19236]={position:$R[19237]={start:$R[19238]={line:76,column:32,offset:3356},end:$R[19239]={line:76,column:37,offset:3361}},type:"text",value:" --> "},$R[19240]={position:$R[19241]={start:$R[19242]={line:76,column:37,offset:3361},end:$R[19243]={line:76,column:43,offset:3367}},type:"inlineCode",value:"stop"},$R[19244]={position:$R[19245]={start:$R[19246]={line:76,column:43,offset:3367},end:$R[19247]={line:76,column:48,offset:3372}},type:"text",value:" --> "},$R[19248]={position:$R[19249]={start:$R[19250]={line:76,column:48,offset:3372},end:$R[19251]={line:76,column:58,offset:3382}},type:"inlineCode",value:"poststop"}],position:$R[19252]={start:$R[19253]={line:76,column:21,offset:3345},end:$R[19254]={line:76,column:135,offset:3459}},type:"tableCell"}],position:$R[19255]={start:$R[19256]={line:76,column:1,offset:3325},end:$R[19257]={line:76,column:135,offset:3459}},type:"tableRow"},$R[19258]={children:$R[19259]=[$R[19260]={children:$R[19261]=[$R[19262]={position:$R[19263]={start:$R[19264]={line:77,column:3,offset:3462},end:$R[19265]={line:77,column:13,offset:3472}},type:"inlineCode",value:"npm test"}],position:$R[19266]={start:$R[19267]={line:77,column:1,offset:3460},end:$R[19268]={line:77,column:21,offset:3480}},type:"tableCell"},$R[19269]={children:$R[19270]=[$R[19271]={position:$R[19272]={start:$R[19273]={line:77,column:23,offset:3482},end:$R[19274]={line:77,column:32,offset:3491}},type:"inlineCode",value:"pretest"},$R[19275]={position:$R[19276]={start:$R[19277]={line:77,column:32,offset:3491},end:$R[19278]={line:77,column:37,offset:3496}},type:"text",value:" --> "},$R[19279]={position:$R[19280]={start:$R[19281]={line:77,column:37,offset:3496},end:$R[19282]={line:77,column:43,offset:3502}},type:"inlineCode",value:"test"},$R[19283]={position:$R[19284]={start:$R[19285]={line:77,column:43,offset:3502},end:$R[19286]={line:77,column:48,offset:3507}},type:"text",value:" --> "},$R[19287]={position:$R[19288]={start:$R[19289]={line:77,column:48,offset:3507},end:$R[19290]={line:77,column:58,offset:3517}},type:"inlineCode",value:"posttest"}],position:$R[19291]={start:$R[19292]={line:77,column:21,offset:3480},end:$R[19293]={line:77,column:135,offset:3594}},type:"tableCell"}],position:$R[19294]={start:$R[19295]={line:77,column:1,offset:3460},end:$R[19296]={line:77,column:135,offset:3594}},type:"tableRow"},$R[19297]={children:$R[19298]=[$R[19299]={children:$R[19300]=[$R[19301]={position:$R[19302]={start:$R[19303]={line:78,column:3,offset:3597},end:$R[19304]={line:78,column:16,offset:3610}},type:"inlineCode",value:"npm version"}],position:$R[19305]={start:$R[19306]={line:78,column:1,offset:3595},end:$R[19307]={line:78,column:21,offset:3615}},type:"tableCell"},$R[19308]={children:$R[19309]=[$R[19310]={position:$R[19311]={start:$R[19312]={line:78,column:23,offset:3617},end:$R[19313]={line:78,column:35,offset:3629}},type:"inlineCode",value:"preversion"},$R[19314]={position:$R[19315]={start:$R[19316]={line:78,column:35,offset:3629},end:$R[19317]={line:78,column:40,offset:3634}},type:"text",value:" --> "},$R[19318]={position:$R[19319]={start:$R[19320]={line:78,column:40,offset:3634},end:$R[19321]={line:78,column:49,offset:3643}},type:"inlineCode",value:"version"},$R[19322]={position:$R[19323]={start:$R[19324]={line:78,column:49,offset:3643},end:$R[19325]={line:78,column:54,offset:3648}},type:"text",value:" --> "},$R[19326]={position:$R[19327]={start:$R[19328]={line:78,column:54,offset:3648},end:$R[19329]={line:78,column:67,offset:3661}},type:"inlineCode",value:"postversion"}],position:$R[19330]={start:$R[19331]={line:78,column:21,offset:3615},end:$R[19332]={line:78,column:135,offset:3729}},type:"tableCell"}],position:$R[19333]={start:$R[19334]={line:78,column:1,offset:3595},end:$R[19335]={line:78,column:135,offset:3729}},type:"tableRow"}],position:$R[19336]={start:$R[19337]={line:65,column:1,offset:1855},end:$R[19338]={line:78,column:135,offset:3729}},type:"table"}],position:$R[19339]={end:$R[19340]={line:78,column:135,offset:3729},start:$R[19341]={line:61,column:1,offset:1756}},type:"section"},$R[19342]={children:$R[19343]=[$R[19344]={children:$R[19345]=[$R[19346]={position:$R[19347]={start:$R[19348]={line:86,column:4,offset:3934},end:$R[19349]={line:86,column:14,offset:3944}},type:"text",value:"npm 以外での挙動"}],id:"npm-以外での挙動",level:2,plain:"npm 以外での挙動",position:$R[19350]={start:$R[19351]={line:86,column:1,offset:3931},end:$R[19352]={line:86,column:14,offset:3944}},type:"heading"},$R[19353]={children:$R[19354]=[$R[19355]={position:$R[19356]={start:$R[19357]={line:88,column:1,offset:3946},end:$R[19358]={line:88,column:29,offset:3974}},type:"text",value:"余談だが npm 以外のパッケージマネージャでは、原則 "},$R[19359]={position:$R[19360]={start:$R[19361]={line:88,column:29,offset:3974},end:$R[19362]={line:88,column:34,offset:3979}},type:"inlineCode",value:"pre"},$R[19363]={position:$R[19364]={start:$R[19365]={line:88,column:34,offset:3979},end:$R[19366]={line:88,column:37,offset:3982}},type:"text",value:" と "},$R[19367]={position:$R[19368]={start:$R[19369]={line:88,column:37,offset:3982},end:$R[19370]={line:88,column:43,offset:3988}},type:"inlineCode",value:"post"},$R[19371]={position:$R[19372]={start:$R[19373]={line:88,column:43,offset:3988},end:$R[19374]={line:88,column:103,offset:4048}},type:"text",value:" プレフィックスの付いたスクリプトは実行されない。これはワークフローの動作が複雑になることを避けるために設計されている。"},$R[19375]={footnoteIndex:4,position:$R[19376]={start:$R[19377]={line:88,column:103,offset:4048},end:$R[19378]={line:88,column:107,offset:4052}},referenceIndex:1,type:"footnoteReference"},$R[19379]={footnoteIndex:5,position:$R[19380]={start:$R[19381]={line:88,column:107,offset:4052},end:$R[19382]={line:88,column:111,offset:4056}},referenceIndex:1,type:"footnoteReference"}],position:$R[19383]={start:$R[19384]={line:88,column:1,offset:3946},end:$R[19385]={line:88,column:111,offset:4056}},type:"paragraph"},$R[19386]={children:$R[19387]=[$R[19388]={position:$R[19389]={start:$R[19390]={line:90,column:1,offset:4058},end:$R[19391]={line:90,column:8,offset:4065}},type:"text",value:"また yarn"},$R[19392]={footnoteIndex:4,position:$R[19393]={start:$R[19394]={line:90,column:8,offset:4065},end:$R[19395]={line:90,column:12,offset:4069}},referenceIndex:2,type:"footnoteReference"},$R[19396]={position:$R[19397]={start:$R[19398]={line:90,column:12,offset:4069},end:$R[19399]={line:90,column:19,offset:4076}},type:"text",value:" や pnpm"},$R[19400]={footnoteIndex:6,position:$R[19401]={start:$R[19402]={line:90,column:19,offset:4076},end:$R[19403]={line:90,column:23,offset:4080}},referenceIndex:1,type:"footnoteReference"},$R[19404]={position:$R[19405]={start:$R[19406]={line:90,column:23,offset:4080},end:$R[19407]={line:90,column:74,offset:4131}},type:"text",value:" では定義されている Life Cycle Scripts が npm と異なるので注意が必要である。"}],position:$R[19408]={start:$R[19409]={line:90,column:1,offset:4058},end:$R[19410]={line:90,column:74,offset:4131}},type:"paragraph"},$R[19411]={position:$R[19412]={start:$R[19413]={line:92,column:1,offset:4133},end:$R[19414]={line:92,column:4,offset:4136}},type:"thematicBreak"},$R[19415]={children:$R[19416]=[$R[19417]={children:$R[19418]=[$R[19419]={position:$R[19420]={start:$R[19421]={line:94,column:2,offset:4139},end:$R[19422]={line:94,column:9,offset:4146}},type:"text",value:"@s6n_jp"}],position:$R[19423]={start:$R[19424]={line:94,column:1,offset:4138},end:$R[19425]={line:94,column:38,offset:4175}},title:void 0,type:"link",url:"https://twitter.com/s6n_jp"},$R[19426]={position:$R[19427]={start:$R[19428]={line:94,column:38,offset:4175},end:$R[19429]={line:94,column:105,offset:4242}},type:"text",value:" から指摘されて気づいたのだが、どうやら pnpm v9 以降では Life Cycle Scripts がサポートされるようになった"},$R[19430]={footnoteIndex:7,position:$R[19431]={start:$R[19432]={line:94,column:105,offset:4242},end:$R[19433]={line:94,column:109,offset:4246}},referenceIndex:1,type:"footnoteReference"},$R[19434]={position:$R[19435]={start:$R[19436]={line:94,column:109,offset:4246},end:$R[19437]={line:94,column:168,offset:4305}},type:"text",value:"ようだ。これにより、pnpm でも npm と同様に Life Cycle Scripts が実行されるようになった。"}],position:$R[19438]={start:$R[19439]={line:94,column:1,offset:4138},end:$R[19440]={line:94,column:168,offset:4305}},type:"paragraph"},$R[19441]={children:$R[19442]=[$R[19443]={position:$R[19444]={start:$R[19445]={line:96,column:1,offset:4307},end:$R[19446]={line:96,column:22,offset:4328}},type:"text",value:"Twitter で poll を取った結果"},$R[19447]={footnoteIndex:8,position:$R[19448]={start:$R[19449]={line:96,column:22,offset:4328},end:$R[19450]={line:96,column:26,offset:4332}},referenceIndex:1,type:"footnoteReference"},$R[19451]={position:$R[19452]={start:$R[19453]={line:96,column:26,offset:4332},end:$R[19454]={line:96,column:55,offset:4361}},type:"text",value:"入った変更のようで、多くの人がこの変更を望んでいたようだ。"}],position:$R[19455]={start:$R[19456]={line:96,column:1,offset:4307},end:$R[19457]={line:96,column:55,offset:4361}},type:"paragraph"}],position:$R[19458]={end:$R[19459]={line:96,column:55,offset:4361},start:$R[19460]={line:86,column:1,offset:3931}},type:"section"},$R[19461]={children:$R[19462]=[$R[19463]={children:$R[19464]=[$R[19465]={position:$R[19466]={start:$R[19467]={line:108,column:4,offset:4606},end:$R[19468]={line:108,column:7,offset:4609}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[19469]={start:$R[19470]={line:108,column:1,offset:4603},end:$R[19471]={line:108,column:7,offset:4609}},type:"heading"},$R[19472]={children:$R[19473]=[$R[19474]={position:$R[19475]={start:$R[19476]={line:110,column:1,offset:4611},end:$R[19477]={line:110,column:103,offset:4713}},type:"text",value:"調べていくと、npm の Life Cycle Scripts は意外と複雑で、挙動が混乱しやすい。しかし、理解してしまえば、それほど難しいものではない。この記事が、少しでもその理解に役立てば幸いである。"}],position:$R[19478]={start:$R[19479]={line:110,column:1,offset:4611},end:$R[19480]={line:110,column:103,offset:4713}},type:"paragraph"}],position:$R[19481]={end:$R[19482]={line:110,column:103,offset:4713},start:$R[19483]={line:108,column:1,offset:4603}},type:"section"}],footnotes:$R[19484]=[$R[19485]={children:$R[19486]=[$R[19487]={children:$R[19488]=[$R[19489]={children:$R[19490]=[$R[19491]={position:$R[19492]={start:$R[19493]={line:31,column:7,offset:1097},end:$R[19494]={line:31,column:46,offset:1136}},type:"text",value:"https://github.com/npm/npm/issues/10074"}],position:$R[19495]={start:$R[19496]={line:31,column:7,offset:1097},end:$R[19497]={line:31,column:46,offset:1136}},title:void 0,type:"link",url:"https://github.com/npm/npm/issues/10074"}],position:$R[19498]={start:$R[19499]={line:31,column:7,offset:1097},end:$R[19500]={line:31,column:46,offset:1136}},type:"paragraph"}],count:1,index:0,position:$R[19501]={start:$R[19502]={line:31,column:1,offset:1091},end:$R[19503]={line:31,column:46,offset:1136}},type:"footnoteDefinition"},$R[19504]={children:$R[19505]=[$R[19506]={children:$R[19507]=[$R[19508]={position:$R[19509]={start:$R[19510]={line:80,column:7,offset:3737},end:$R[19511]={line:80,column:20,offset:3750}},type:"inlineCode",value:"binding.gyp"},$R[19512]={position:$R[19513]={start:$R[19514]={line:80,column:20,offset:3750},end:$R[19515]={line:80,column:36,offset:3766}},type:"text",value:" というファイルが存在する場合、"},$R[19516]={position:$R[19517]={start:$R[19518]={line:80,column:36,offset:3766},end:$R[19519]={line:80,column:45,offset:3775}},type:"inlineCode",value:"install"},$R[19520]={position:$R[19521]={start:$R[19522]={line:80,column:45,offset:3775},end:$R[19523]={line:80,column:53,offset:3783}},type:"text",value:" スクリプトは "},$R[19524]={position:$R[19525]={start:$R[19526]={line:80,column:53,offset:3783},end:$R[19527]={line:80,column:71,offset:3801}},type:"inlineCode",value:"node-gyp rebuild"},$R[19528]={position:$R[19529]={start:$R[19530]={line:80,column:71,offset:3801},end:$R[19531]={line:80,column:83,offset:3813}},type:"text",value:" が代わりに実行される。"}],position:$R[19532]={start:$R[19533]={line:80,column:7,offset:3737},end:$R[19534]={line:80,column:83,offset:3813}},type:"paragraph"}],count:1,index:1,position:$R[19535]={start:$R[19536]={line:80,column:1,offset:3731},end:$R[19537]={line:80,column:83,offset:3813}},type:"footnoteDefinition"},$R[19538]={children:$R[19539]=[$R[19540]={children:$R[19541]=[$R[19542]={position:$R[19543]={start:$R[19544]={line:82,column:7,offset:3821},end:$R[19545]={line:82,column:18,offset:3832}},type:"inlineCode",value:"--dry-run"},$R[19546]={position:$R[19547]={start:$R[19548]={line:82,column:18,offset:3832},end:$R[19549]={line:82,column:32,offset:3846}},type:"text",value:" オプションを指定した場合、"},$R[19550]={position:$R[19551]={start:$R[19552]={line:82,column:32,offset:3846},end:$R[19553]={line:82,column:41,offset:3855}},type:"inlineCode",value:"prepare"},$R[19554]={position:$R[19555]={start:$R[19556]={line:82,column:41,offset:3855},end:$R[19557]={line:82,column:50,offset:3864}},type:"text",value:" は実行されない。"}],position:$R[19558]={start:$R[19559]={line:82,column:7,offset:3821},end:$R[19560]={line:82,column:50,offset:3864}},type:"paragraph"}],count:1,index:2,position:$R[19561]={start:$R[19562]={line:82,column:1,offset:3815},end:$R[19563]={line:82,column:50,offset:3864}},type:"footnoteDefinition"},$R[19564]={children:$R[19565]=[$R[19566]={children:$R[19567]=[$R[19568]={position:$R[19569]={start:$R[19570]={line:84,column:7,offset:3872},end:$R[19571]={line:84,column:16,offset:3881}},type:"inlineCode",value:"prepare"},$R[19572]={position:$R[19573]={start:$R[19574]={line:84,column:16,offset:3881},end:$R[19575]={line:84,column:64,offset:3929}},type:"text",value:" はリンクされたパッケージなど、カレントディレクトリがシンボリックリンクの場合にのみ実行される。"}],position:$R[19576]={start:$R[19577]={line:84,column:7,offset:3872},end:$R[19578]={line:84,column:64,offset:3929}},type:"paragraph"}],count:1,index:3,position:$R[19579]={start:$R[19580]={line:84,column:1,offset:3866},end:$R[19581]={line:84,column:64,offset:3929}},type:"footnoteDefinition"},$R[19582]={children:$R[19583]=[$R[19584]={children:$R[19585]=[$R[19586]={children:$R[19587]=[$R[19588]={position:$R[19589]={start:$R[19590]={line:98,column:7,offset:4369},end:$R[19591]={line:98,column:53,offset:4415}},type:"text",value:"https://yarnpkg.com/advanced/lifecycle-scripts"}],position:$R[19592]={start:$R[19593]={line:98,column:7,offset:4369},end:$R[19594]={line:98,column:53,offset:4415}},title:void 0,type:"link",url:"https://yarnpkg.com/advanced/lifecycle-scripts"}],position:$R[19595]={start:$R[19596]={line:98,column:7,offset:4369},end:$R[19597]={line:98,column:53,offset:4415}},type:"paragraph"}],count:2,index:4,position:$R[19598]={start:$R[19599]={line:98,column:1,offset:4363},end:$R[19600]={line:98,column:53,offset:4415}},type:"footnoteDefinition"},$R[19601]={children:$R[19602]=[$R[19603]={children:$R[19604]=[$R[19605]={children:$R[19606]=[$R[19607]={position:$R[19608]={start:$R[19609]={line:100,column:7,offset:4423},end:$R[19610]={line:100,column:47,offset:4463}},type:"text",value:"https://github.com/pnpm/pnpm/issues/2891"}],position:$R[19611]={start:$R[19612]={line:100,column:7,offset:4423},end:$R[19613]={line:100,column:47,offset:4463}},title:void 0,type:"link",url:"https://github.com/pnpm/pnpm/issues/2891"}],position:$R[19614]={start:$R[19615]={line:100,column:7,offset:4423},end:$R[19616]={line:100,column:47,offset:4463}},type:"paragraph"}],count:1,index:5,position:$R[19617]={start:$R[19618]={line:100,column:1,offset:4417},end:$R[19619]={line:100,column:47,offset:4463}},type:"footnoteDefinition"},$R[19620]={children:$R[19621]=[$R[19622]={children:$R[19623]=[$R[19624]={children:$R[19625]=[$R[19626]={position:$R[19627]={start:$R[19628]={line:102,column:7,offset:4471},end:$R[19629]={line:102,column:30,offset:4494}},type:"text",value:"https://pnpm.io/scripts"}],position:$R[19630]={start:$R[19631]={line:102,column:7,offset:4471},end:$R[19632]={line:102,column:30,offset:4494}},title:void 0,type:"link",url:"https://pnpm.io/scripts"}],position:$R[19633]={start:$R[19634]={line:102,column:7,offset:4471},end:$R[19635]={line:102,column:30,offset:4494}},type:"paragraph"}],count:1,index:6,position:$R[19636]={start:$R[19637]={line:102,column:1,offset:4465},end:$R[19638]={line:102,column:30,offset:4494}},type:"footnoteDefinition"},$R[19639]={children:$R[19640]=[$R[19641]={children:$R[19642]=[$R[19643]={children:$R[19644]=[$R[19645]={position:$R[19646]={start:$R[19647]={line:104,column:7,offset:4502},end:$R[19648]={line:104,column:45,offset:4540}},type:"text",value:"https://github.com/pnpm/pnpm/pull/7634"}],position:$R[19649]={start:$R[19650]={line:104,column:7,offset:4502},end:$R[19651]={line:104,column:45,offset:4540}},title:void 0,type:"link",url:"https://github.com/pnpm/pnpm/pull/7634"}],position:$R[19652]={start:$R[19653]={line:104,column:7,offset:4502},end:$R[19654]={line:104,column:45,offset:4540}},type:"paragraph"}],count:1,index:7,position:$R[19655]={start:$R[19656]={line:104,column:1,offset:4496},end:$R[19657]={line:104,column:45,offset:4540}},type:"footnoteDefinition"},$R[19658]={children:$R[19659]=[$R[19660]={children:$R[19661]=[$R[19662]={children:$R[19663]=[$R[19664]={position:$R[19665]={start:$R[19666]={line:106,column:7,offset:4548},end:$R[19667]={line:106,column:60,offset:4601}},type:"text",value:"https://twitter.com/pnpmjs/status/1755902257751605717"}],position:$R[19668]={start:$R[19669]={line:106,column:7,offset:4548},end:$R[19670]={line:106,column:60,offset:4601}},title:void 0,type:"link",url:"https://twitter.com/pnpmjs/status/1755902257751605717"}],position:$R[19671]={start:$R[19672]={line:106,column:7,offset:4548},end:$R[19673]={line:106,column:60,offset:4601}},type:"paragraph"}],count:1,index:8,position:$R[19674]={start:$R[19675]={line:106,column:1,offset:4542},end:$R[19676]={line:106,column:60,offset:4601}},type:"footnoteDefinition"}],title:$R[19677]={children:$R[19678]=[$R[19679]={position:$R[19680]={start:$R[19681]={line:1,column:3,offset:2},end:$R[19682]={line:1,column:27,offset:26}},type:"text",value:"Life Cycle Scripts を理解する"}],id:"life-cycle-scripts-を理解する",level:1,plain:"Life Cycle Scripts を理解する",position:$R[19683]={start:$R[19684]={line:1,column:1,offset:0},end:$R[19685]={line:1,column:27,offset:26}},type:"heading"},toc:$R[19686]=[$R[19687]={children:$R[19688]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[19689]={children:$R[19690]=[$R[19691]={children:$R[19692]=[],id:"prepublish",plain:"prepublish",type:"toc"},$R[19693]={children:$R[19694]=[],id:"prepare",plain:"prepare",type:"toc"},$R[19695]={children:$R[19696]=[],id:"prepublishonly",plain:"prepublishOnly",type:"toc"},$R[19697]={children:$R[19698]=[],id:"prepack",plain:"prepack",type:"toc"},$R[19699]={children:$R[19700]=[],id:"postpack",plain:"postpack",type:"toc"},$R[19701]={children:$R[19702]=[],id:"dependencies",plain:"dependencies",type:"toc"}],id:"life-cycle-scripts-とは",plain:"Life Cycle Scripts とは",type:"toc"},$R[19703]={children:$R[19704]=[],id:"life-cycle-scripts-が実行されるタイミング",plain:"Life Cycle Scripts が実行されるタイミング",type:"toc"},$R[19705]={children:$R[19706]=[],id:"npm-以外での挙動",plain:"npm 以外での挙動",type:"toc"},$R[19707]={children:$R[19708]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[19709]={content:"# @cloudflare/workers-types の Compatibility dates を知っているか\n\n## はじめに\n\nCloudflare Workers で TypeScript を使う際に、`@cloudflare/workers-types` という型定義パッケージを使う。\n\n## Compatibility dates\n\nCloudflare Workers には Compatibility dates という概念がある。これは後方互換性を保つためにある。\n\n通常これは `wrangler.toml` に記述することで Cloudflare Workers ランタイムのバージョンをプロジェクトで指定できる。\n\n## @cloudflare/workers-types にもある Compatibility dates\n\n筆者は今日まで知らなかったが、`@cloudflare/workers-types` にも Compatibility dates がある。\n\nhttps://www.npmjs.com/package/@cloudflare/workers-types\n\nここの `Compatibility dates` には、現在 `@cloudflare/workers-types` で設定できる Compatibility dates が記載されている。筆者が特に気になったのはこれらの記述である。\n\n- `@cloudflare/workers-types`\n - よくブログや記事で見かける書き方であるが、これは最新のバージョンを指定してくれているわけではなく、`2021-11-03` よりも前の互換性を保証しているということである。\n- `@cloudflare/workers-types/experimental`\n - これは最新の Cloudflare Workers ランタイムに追従した型定義である。プロダクションなどで使う際には注意が必要である。\n\n## さいごに\n\nみんな困っていないのだろうか...",description:"@cloudflare/workers-types の 仕様を今知ったので書いた",published:!0,publishedAt:"2024-11-09T23:01:29.591+09:00[Asia/Tokyo]",tags:$R[19710]=["Cloudflare Workers","TypeScript"],title:"@cloudflare/workers-types の Compatibility dates を知っているか",_meta:$R[19711]={filePath:"01JC8KNP7H6T9K7DDGPQ7AW398/slug.md",fileName:"slug.md",directory:"01JC8KNP7H6T9K7DDGPQ7AW398",extension:"md",path:"01JC8KNP7H6T9K7DDGPQ7AW398/slug"},abstract:"@cloudflare/workers-types の Compatibility dates を知っているかはじめにCloudflare Workers で TypeScript を使う際に、@cloudflare/workers-types という型定義パッケージを使う。Compatibility datesCloudflare Workers には Compatibility dates という概念がある。これは後方互換性を保つためにある。通常これは wrangler.toml に記述することで Cloudflare Workers ランタイムのバージョンをプロジェクトで指定できる。@cloudflare/workers-types にもある Compatibility dates筆者は今日まで知らなかったが、@cloudflare/workers-types にも Compatib",mdast:$R[19712]={children:$R[19713]=[$R[19714]={children:$R[19715]=[$R[19716]={children:$R[19717]=[$R[19718]={position:$R[19719]={start:$R[19720]={line:3,column:4,offset:62},end:$R[19721]={line:3,column:8,offset:66}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[19722]={start:$R[19723]={line:3,column:1,offset:59},end:$R[19724]={line:3,column:8,offset:66}},type:"heading"},$R[19725]={children:$R[19726]=[$R[19727]={position:$R[19728]={start:$R[19729]={line:5,column:1,offset:68},end:$R[19730]={line:5,column:39,offset:106}},type:"text",value:"Cloudflare Workers で TypeScript を使う際に、"},$R[19731]={position:$R[19732]={start:$R[19733]={line:5,column:39,offset:106},end:$R[19734]={line:5,column:66,offset:133}},type:"inlineCode",value:"@cloudflare/workers-types"},$R[19735]={position:$R[19736]={start:$R[19737]={line:5,column:66,offset:133},end:$R[19738]={line:5,column:82,offset:149}},type:"text",value:" という型定義パッケージを使う。"}],position:$R[19739]={start:$R[19740]={line:5,column:1,offset:68},end:$R[19741]={line:5,column:82,offset:149}},type:"paragraph"}],position:$R[19742]={end:$R[19743]={line:5,column:82,offset:149},start:$R[19744]={line:3,column:1,offset:59}},type:"section"},$R[19745]={children:$R[19746]=[$R[19747]={children:$R[19748]=[$R[19749]={position:$R[19750]={start:$R[19751]={line:7,column:4,offset:154},end:$R[19752]={line:7,column:23,offset:173}},type:"text",value:"Compatibility dates"}],id:"compatibility-dates",level:2,plain:"Compatibility dates",position:$R[19753]={start:$R[19754]={line:7,column:1,offset:151},end:$R[19755]={line:7,column:23,offset:173}},type:"heading"},$R[19756]={children:$R[19757]=[$R[19758]={position:$R[19759]={start:$R[19760]={line:9,column:1,offset:175},end:$R[19761]={line:9,column:69,offset:243}},type:"text",value:"Cloudflare Workers には Compatibility dates という概念がある。これは後方互換性を保つためにある。"}],position:$R[19762]={start:$R[19763]={line:9,column:1,offset:175},end:$R[19764]={line:9,column:69,offset:243}},type:"paragraph"},$R[19765]={children:$R[19766]=[$R[19767]={position:$R[19768]={start:$R[19769]={line:11,column:1,offset:245},end:$R[19770]={line:11,column:7,offset:251}},type:"text",value:"通常これは "},$R[19771]={position:$R[19772]={start:$R[19773]={line:11,column:7,offset:251},end:$R[19774]={line:11,column:22,offset:266}},type:"inlineCode",value:"wrangler.toml"},$R[19775]={position:$R[19776]={start:$R[19777]={line:11,column:22,offset:266},end:$R[19778]={line:11,column:76,offset:320}},type:"text",value:" に記述することで Cloudflare Workers ランタイムのバージョンをプロジェクトで指定できる。"}],position:$R[19779]={start:$R[19780]={line:11,column:1,offset:245},end:$R[19781]={line:11,column:76,offset:320}},type:"paragraph"}],position:$R[19782]={end:$R[19783]={line:11,column:76,offset:320},start:$R[19784]={line:7,column:1,offset:151}},type:"section"},$R[19785]={children:$R[19786]=[$R[19787]={children:$R[19788]=[$R[19789]={position:$R[19790]={start:$R[19791]={line:13,column:4,offset:325},end:$R[19792]={line:13,column:54,offset:375}},type:"text",value:"@cloudflare/workers-types にもある Compatibility dates"}],id:"cloudflareworkers-types-にもある-compatibility-dates",level:2,plain:"@cloudflare/workers-types にもある Compatibility dates",position:$R[19793]={start:$R[19794]={line:13,column:1,offset:322},end:$R[19795]={line:13,column:54,offset:375}},type:"heading"},$R[19796]={children:$R[19797]=[$R[19798]={position:$R[19799]={start:$R[19800]={line:15,column:1,offset:377},end:$R[19801]={line:15,column:16,offset:392}},type:"text",value:"筆者は今日まで知らなかったが、"},$R[19802]={position:$R[19803]={start:$R[19804]={line:15,column:16,offset:392},end:$R[19805]={line:15,column:43,offset:419}},type:"inlineCode",value:"@cloudflare/workers-types"},$R[19806]={position:$R[19807]={start:$R[19808]={line:15,column:43,offset:419},end:$R[19809]={line:15,column:71,offset:447}},type:"text",value:" にも Compatibility dates がある。"}],position:$R[19810]={start:$R[19811]={line:15,column:1,offset:377},end:$R[19812]={line:15,column:71,offset:447}},type:"paragraph"},$R[19813]={meta:$R[19814]={title:"@cloudflare/workers-types - npm",open_graph:$R[19815]={images:$R[19816]=[$R[19817]={url:"https://static-production.npmjs.com/338e4905a2684ca96e08c7780fc68412.png"}],description:"TypeScript typings for Cloudflare Workers. Latest version: 4.20241205.0, last published: a day ago. Start using @cloudflare/workers-types in your project by running `npm i @cloudflare/workers-types`. There are 151 other projects in the npm registry using @cloudflare/workers-types.",title:"@cloudflare/workers-types",url:"https://www.npmjs.com/package/@cloudflare/workers-types",site_name:"npm"},theme_color:"#cb3837",description:"TypeScript typings for Cloudflare Workers. Latest version: 4.20241205.0, last published: a day ago. Start using @cloudflare/workers-types in your project by running `npm i @cloudflare/workers-types`. There are 151 other projects in the npm registry using @cloudflare/workers-types.",twitter_card:$R[19818]={card:"summary",url:"https://www.npmjs.com/package/@cloudflare/workers-types",title:"npm: @cloudflare/workers-types",description:"TypeScript typings for Cloudflare Workers. Latest version: 4.20241205.0, last published: a day ago. Start using @cloudflare/workers-types in your project by running `npm i @cloudflare/workers-types`. There are 151 other projects in the npm registry using @cloudflare/workers-types."},favicon:"https://static-production.npmjs.com/da3ab40fb0861d15c83854c29f5f2962.png"},oembed:void 0,position:$R[19819]={start:$R[19820]={line:17,column:1,offset:449},end:$R[19821]={line:17,column:56,offset:504}},src:"https://www.npmjs.com/package/@cloudflare/workers-types",type:"embed"},$R[19822]={children:$R[19823]=[$R[19824]={position:$R[19825]={start:$R[19826]={line:19,column:1,offset:506},end:$R[19827]={line:19,column:5,offset:510}},type:"text",value:"ここの "},$R[19828]={position:$R[19829]={start:$R[19830]={line:19,column:5,offset:510},end:$R[19831]={line:19,column:26,offset:531}},type:"inlineCode",value:"Compatibility dates"},$R[19832]={position:$R[19833]={start:$R[19834]={line:19,column:26,offset:531},end:$R[19835]={line:19,column:33,offset:538}},type:"text",value:" には、現在 "},$R[19836]={position:$R[19837]={start:$R[19838]={line:19,column:33,offset:538},end:$R[19839]={line:19,column:60,offset:565}},type:"inlineCode",value:"@cloudflare/workers-types"},$R[19840]={position:$R[19841]={start:$R[19842]={line:19,column:60,offset:565},end:$R[19843]={line:19,column:119,offset:624}},type:"text",value:" で設定できる Compatibility dates が記載されている。筆者が特に気になったのはこれらの記述である。"}],position:$R[19844]={start:$R[19845]={line:19,column:1,offset:506},end:$R[19846]={line:19,column:119,offset:624}},type:"paragraph"},$R[19847]={children:$R[19848]=[$R[19849]={children:$R[19850]=[$R[19851]={children:$R[19852]=[$R[19853]={position:$R[19854]={start:$R[19855]={line:21,column:3,offset:628},end:$R[19856]={line:21,column:30,offset:655}},type:"inlineCode",value:"@cloudflare/workers-types"}],position:$R[19857]={start:$R[19858]={line:21,column:3,offset:628},end:$R[19859]={line:21,column:30,offset:655}},type:"paragraph"},$R[19860]={children:$R[19861]=[$R[19862]={children:$R[19863]=[$R[19864]={children:$R[19865]=[$R[19866]={position:$R[19867]={start:$R[19868]={line:22,column:5,offset:660},end:$R[19869]={line:22,column:54,offset:709}},type:"text",value:"よくブログや記事で見かける書き方であるが、これは最新のバージョンを指定してくれているわけではなく、"},$R[19870]={position:$R[19871]={start:$R[19872]={line:22,column:54,offset:709},end:$R[19873]={line:22,column:66,offset:721}},type:"inlineCode",value:"2021-11-03"},$R[19874]={position:$R[19875]={start:$R[19876]={line:22,column:66,offset:721},end:$R[19877]={line:22,column:91,offset:746}},type:"text",value:" よりも前の互換性を保証しているということである。"}],position:$R[19878]={start:$R[19879]={line:22,column:5,offset:660},end:$R[19880]={line:22,column:91,offset:746}},type:"paragraph"}],position:$R[19881]={start:$R[19882]={line:22,column:3,offset:658},end:$R[19883]={line:22,column:91,offset:746}},type:"listItem"}],position:$R[19884]={start:$R[19885]={line:22,column:3,offset:658},end:$R[19886]={line:22,column:91,offset:746}},type:"unorderedList"}],position:$R[19887]={start:$R[19888]={line:21,column:1,offset:626},end:$R[19889]={line:22,column:91,offset:746}},type:"listItem"},$R[19890]={children:$R[19891]=[$R[19892]={children:$R[19893]=[$R[19894]={position:$R[19895]={start:$R[19896]={line:23,column:3,offset:749},end:$R[19897]={line:23,column:43,offset:789}},type:"inlineCode",value:"@cloudflare/workers-types/experimental"}],position:$R[19898]={start:$R[19899]={line:23,column:3,offset:749},end:$R[19900]={line:23,column:43,offset:789}},type:"paragraph"},$R[19901]={children:$R[19902]=[$R[19903]={children:$R[19904]=[$R[19905]={children:$R[19906]=[$R[19907]={position:$R[19908]={start:$R[19909]={line:24,column:5,offset:794},end:$R[19910]={line:24,column:72,offset:861}},type:"text",value:"これは最新の Cloudflare Workers ランタイムに追従した型定義である。プロダクションなどで使う際には注意が必要である。"}],position:$R[19911]={start:$R[19912]={line:24,column:5,offset:794},end:$R[19913]={line:24,column:72,offset:861}},type:"paragraph"}],position:$R[19914]={start:$R[19915]={line:24,column:3,offset:792},end:$R[19916]={line:24,column:72,offset:861}},type:"listItem"}],position:$R[19917]={start:$R[19918]={line:24,column:3,offset:792},end:$R[19919]={line:24,column:72,offset:861}},type:"unorderedList"}],position:$R[19920]={start:$R[19921]={line:23,column:1,offset:747},end:$R[19922]={line:24,column:72,offset:861}},type:"listItem"}],position:$R[19923]={start:$R[19924]={line:21,column:1,offset:626},end:$R[19925]={line:24,column:72,offset:861}},type:"unorderedList"}],position:$R[19926]={end:$R[19927]={line:24,column:72,offset:861},start:$R[19928]={line:13,column:1,offset:322}},type:"section"},$R[19929]={children:$R[19930]=[$R[19931]={children:$R[19932]=[$R[19933]={position:$R[19934]={start:$R[19935]={line:26,column:4,offset:866},end:$R[19936]={line:26,column:8,offset:870}},type:"text",value:"さいごに"}],id:"さいごに",level:2,plain:"さいごに",position:$R[19937]={start:$R[19938]={line:26,column:1,offset:863},end:$R[19939]={line:26,column:8,offset:870}},type:"heading"},$R[19940]={children:$R[19941]=[$R[19942]={position:$R[19943]={start:$R[19944]={line:28,column:1,offset:872},end:$R[19945]={line:28,column:18,offset:889}},type:"text",value:"みんな困っていないのだろうか..."}],position:$R[19946]={start:$R[19947]={line:28,column:1,offset:872},end:$R[19948]={line:28,column:18,offset:889}},type:"paragraph"}],position:$R[19949]={end:$R[19950]={line:28,column:18,offset:889},start:$R[19951]={line:26,column:1,offset:863}},type:"section"}],footnotes:$R[19952]=[],title:$R[19953]={children:$R[19954]=[$R[19955]={position:$R[19956]={start:$R[19957]={line:1,column:3,offset:2},end:$R[19958]={line:1,column:58,offset:57}},type:"text",value:"@cloudflare/workers-types の Compatibility dates を知っているか"}],id:"cloudflareworkers-types-の-compatibility-dates-を知っているか",level:1,plain:"@cloudflare/workers-types の Compatibility dates を知っているか",position:$R[19959]={start:$R[19960]={line:1,column:1,offset:0},end:$R[19961]={line:1,column:58,offset:57}},type:"heading"},toc:$R[19962]=[$R[19963]={children:$R[19964]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[19965]={children:$R[19966]=[],id:"compatibility-dates",plain:"Compatibility dates",type:"toc"},$R[19967]={children:$R[19968]=[],id:"cloudflareworkers-types-にもある-compatibility-dates",plain:"@cloudflare/workers-types にもある Compatibility dates",type:"toc"},$R[19969]={children:$R[19970]=[],id:"さいごに",plain:"さいごに",type:"toc"}],type:"article"}},$R[19971]={content:"# Cf pages と Hydration Error\n\n## はじめに\n\nCloudflare Pages で custom domains を割り当てたところ、hydration error が発生するようになった。この記事ではその解決方法を記す。\n\n## 解決の糸口となった記事\n\nhttps://medium.com/@Shivam010/cloudflare-pages-and-react-hydration-problems-only-on-custom-domain-957f5598ebe8\n\nこの記事では、 hydration error が起こった理由を Email Address Obfuscation という Cloudflare のサービスが website で有効化されており、それが原因であると指摘している。\n\n## Cloudflare で設定できる最適化一覧\n\n以下が Cloudflare で設定できる最適化の一覧である。\n\n![Cloudflare で設定できる Optimization 一覧](./cf_optimize_list.png)\n\n今回この問題に直面して調査した結果、この一覧にはある共通点があることに気づいた。\n\nそれは、Cloudflare から配信される HTML に対して変更を加えないものたちであることだ。[^1]\n\n[^1]: 正確には、[Speed Brain](https://developers.cloudflare.com/speed/optimization/content/speed-brain/) と呼ばれる機能は Speculation Rules API によって実現されているため、本来は script tag が埋め込まれるはずだが、現状は埋め込まれていない。\n\n## 配信している HTML に変更を加える最適化達\n\n以下の最適化は、Cloudflare から配信される HTML に変更を加えるものである。\n\n### Cloudflare Fonts\n\nオリジンから返却される HTML を CDN 上で解析し、`\x3Clink href=\"https://fonts.googleapis.com...省略\" rel=\"stylesheet\">` に書かれている CSS をブラウザではなくエッジ上でダウンロードする。\nそして、その CSS の内容を head にインラインのスタイル `\x3Cstyle>` として書き込んでから、ブラウザに HTML を返却する。\n\n以下がその例である。\n\n![Cloudflare Fonts の例](./cf_optimize_font.png)\n\n### Rocket Loader\n\nRocket Loader は、ページの読み込みを高速化するために、ページ上の JavaScript の読み込みをレンダリング後まで延期する。\nそれにより、ウェブサイトのコンテンツ(テキスト、画像、フォントなど)を優先的に読み込むことができる。\n\n以下のような script tag が埋め込まれる。\n\n```html:index.html\n\x3Cscript src=\"/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js\" data-cf-settings=\"78debd8b89ee77d3369ad146-|49\" defer>\x3C/script>\n```\n\n## HTML の書き換えにより起こる問題\n\nCloudflare から配信される HTML が書き換えられることにより、hydration error が発生する。\n\nこれは SSR した HTML が使われずに CSR が行われることを意味する。\n\n以下のようなフローをたどり、最終的にブラウザ上に表示されるため CLS が発生してしまう。\n\nhydration 前の SSR された HTML --> CSR される --> hydration される\n\n## まとめ\n\nCloudflare で配信される HTML に変更を加える最適化は、React の hydration に影響を及ぼす可能性がある。ダッシュボードでトグルをオンにするだけで手軽に最適化を行えるが、大いなる力には大いなる責任が伴う[^2]ことを忘れてはならない。\n\n[^2]: [大いなる力には、大いなる責任が伴う - ピクシブ百科事典](https://dic.pixiv.net/a/%E5%A4%A7%E3%81%84%E3%81%AA%E3%82%8B%E5%8A%9B%E3%81%AB%E3%81%AF%E3%80%81%E5%A4%A7%E3%81%84%E3%81%AA%E3%82%8B%E8%B2%AC%E4%BB%BB%E3%81%8C%E4%BC%B4%E3%81%86)",description:"custom domains を割り当てた Cf pages でのみ起こる hydration error を討伐する方法。",published:!0,publishedAt:"2024-11-26T00:49:05.96+09:00[Asia/Tokyo]",tags:$R[19972]=["Cloudflare pages","React"],title:"Cf pages と Hydration Error",_meta:$R[19973]={filePath:"01JDJ06793Q65CFFYBTTSRDWBS/slug.md",fileName:"slug.md",directory:"01JDJ06793Q65CFFYBTTSRDWBS",extension:"md",path:"01JDJ06793Q65CFFYBTTSRDWBS/slug"},abstract:"Cf pages と Hydration ErrorはじめにCloudflare Pages で custom domains を割り当てたところ、hydration error が発生するようになった。この記事ではその解決方法を記す。解決の糸口となった記事https://medium.com/@Shivam010/cloudflare-pages-and-react-hydration-problems-only-on-custom-domain-957f5598ebe8この記事では、 hydration error が起こった理由を Email Address Obfuscation という Cloudflare のサービスが website で有効化されており、それが原因であると指摘している。Cloudflare で設定できる最適化一覧以下が Cloudflare で設定できる最適化",mdast:$R[19974]={children:$R[19975]=[$R[19976]={children:$R[19977]=[$R[19978]={children:$R[19979]=[$R[19980]={position:$R[19981]={start:$R[19982]={line:3,column:4,offset:33},end:$R[19983]={line:3,column:8,offset:37}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[19984]={start:$R[19985]={line:3,column:1,offset:30},end:$R[19986]={line:3,column:8,offset:37}},type:"heading"},$R[19987]={children:$R[19988]=[$R[19989]={position:$R[19990]={start:$R[19991]={line:5,column:1,offset:39},end:$R[19992]={line:5,column:89,offset:127}},type:"text",value:"Cloudflare Pages で custom domains を割り当てたところ、hydration error が発生するようになった。この記事ではその解決方法を記す。"}],position:$R[19993]={start:$R[19994]={line:5,column:1,offset:39},end:$R[19995]={line:5,column:89,offset:127}},type:"paragraph"}],position:$R[19996]={end:$R[19997]={line:5,column:89,offset:127},start:$R[19998]={line:3,column:1,offset:30}},type:"section"},$R[19999]={children:$R[20000]=[$R[20001]={children:$R[20002]=[$R[20003]={position:$R[20004]={start:$R[20005]={line:7,column:4,offset:132},end:$R[20006]={line:7,column:15,offset:143}},type:"text",value:"解決の糸口となった記事"}],id:"解決の糸口となった記事",level:2,plain:"解決の糸口となった記事",position:$R[20007]={start:$R[20008]={line:7,column:1,offset:129},end:$R[20009]={line:7,column:15,offset:143}},type:"heading"},$R[20010]={meta:$R[20011]={title:"Cloudflare Pages and React Hydration problems only on custom domain! | by Shivam Rathore | Medium",theme_color:"#000000",twitter_card:$R[20012]={apps:$R[20013]={iphone:$R[20014]={name:"Medium",id:"828256236",url:"medium://p/957f5598ebe8"}},title:"Cloudflare Pages and React Hydration problems only on custom domain!",site:"@Medium",description:"Problem you are facing is not because of your code but because of some Cloudflare service, modifying your code to protect your code! 😅",images:$R[20015]=[$R[20016]={url:"https://miro.medium.com/v2/da:true/resize:fit:1200/0*k1Y8bGCH7KTDS54R"}],card:"summary_large_image",creator:"@010Shivam"},open_graph:$R[20017]={site_name:"Medium",type:"article",articles:$R[20018]=[$R[20019]={published_time:"2023-07-14T12:51:52.445Z",author:"https://medium.com/@Shivam010"}],title:"Cloudflare Pages and React Hydration problems only on custom domain!",description:"Problem you are facing is not because of your code but because of some Cloudflare service, modifying your code to protect your code! 😅",url:"https://medium.com/@Shivam010/cloudflare-pages-and-react-hydration-problems-only-on-custom-domain-957f5598ebe8",images:$R[20020]=[$R[20021]={url:"https://miro.medium.com/v2/da:true/resize:fit:1200/0*k1Y8bGCH7KTDS54R"}]},description:"The problem you are facing is not because of your code but because of some Cloudflare service, modifying your code to protect your code! 😅",author:"Shivam Rathore",favicon:"https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19",canonical_url:"https://medium.com/@Shivam010/cloudflare-pages-and-react-hydration-problems-only-on-custom-domain-957f5598ebe8"},oembed:void 0,position:$R[20022]={start:$R[20023]={line:9,column:1,offset:145},end:$R[20024]={line:9,column:111,offset:255}},src:"https://medium.com/@Shivam010/cloudflare-pages-and-react-hydration-problems-only-on-custom-domain-957f5598ebe8",type:"embed"},$R[20025]={children:$R[20026]=[$R[20027]={position:$R[20028]={start:$R[20029]={line:11,column:1,offset:257},end:$R[20030]={line:11,column:116,offset:372}},type:"text",value:"この記事では、 hydration error が起こった理由を Email Address Obfuscation という Cloudflare のサービスが website で有効化されており、それが原因であると指摘している。"}],position:$R[20031]={start:$R[20032]={line:11,column:1,offset:257},end:$R[20033]={line:11,column:116,offset:372}},type:"paragraph"}],position:$R[20034]={end:$R[20035]={line:11,column:116,offset:372},start:$R[20036]={line:7,column:1,offset:129}},type:"section"},$R[20037]={children:$R[20038]=[$R[20039]={children:$R[20040]=[$R[20041]={position:$R[20042]={start:$R[20043]={line:13,column:4,offset:377},end:$R[20044]={line:13,column:26,offset:399}},type:"text",value:"Cloudflare で設定できる最適化一覧"}],id:"cloudflare-で設定できる最適化一覧",level:2,plain:"Cloudflare で設定できる最適化一覧",position:$R[20045]={start:$R[20046]={line:13,column:1,offset:374},end:$R[20047]={line:13,column:26,offset:399}},type:"heading"},$R[20048]={children:$R[20049]=[$R[20050]={position:$R[20051]={start:$R[20052]={line:15,column:1,offset:401},end:$R[20053]={line:15,column:32,offset:432}},type:"text",value:"以下が Cloudflare で設定できる最適化の一覧である。"}],position:$R[20054]={start:$R[20055]={line:15,column:1,offset:401},end:$R[20056]={line:15,column:32,offset:432}},type:"paragraph"},$R[20057]={children:$R[20058]=[$R[20059]={alt:"Cloudflare で設定できる Optimization 一覧",position:$R[20060]={start:$R[20061]={line:17,column:1,offset:434},end:$R[20062]={line:17,column:61,offset:494}},title:void 0,type:"image",url:"./cf_optimize_list.png",transformed:$R[20063]=[$R[20064]={dim:$R[20065]={h:1021,w:1069},path:"/img/cf_optimize_list-ZvBXD7Te-1069x1021.webp"},$R[20066]={dim:$R[20067]={h:715,w:748},path:"/img/cf_optimize_list-ZvBXD7Te-748x715.webp"},$R[20068]={dim:$R[20069]={h:500,w:524},path:"/img/cf_optimize_list-ZvBXD7Te-524x500.webp"},$R[20070]={dim:$R[20071]={h:350,w:367},path:"/img/cf_optimize_list-ZvBXD7Te-367x350.webp"}]}],position:$R[20072]={start:$R[20073]={line:17,column:1,offset:434},end:$R[20074]={line:17,column:61,offset:494}},type:"paragraph"},$R[20075]={children:$R[20076]=[$R[20077]={position:$R[20078]={start:$R[20079]={line:19,column:1,offset:496},end:$R[20080]={line:19,column:41,offset:536}},type:"text",value:"今回この問題に直面して調査した結果、この一覧にはある共通点があることに気づいた。"}],position:$R[20081]={start:$R[20082]={line:19,column:1,offset:496},end:$R[20083]={line:19,column:41,offset:536}},type:"paragraph"},$R[20084]={children:$R[20085]=[$R[20086]={position:$R[20087]={start:$R[20088]={line:21,column:1,offset:538},end:$R[20089]={line:21,column:51,offset:588}},type:"text",value:"それは、Cloudflare から配信される HTML に対して変更を加えないものたちであることだ。"},$R[20090]={footnoteIndex:0,position:$R[20091]={start:$R[20092]={line:21,column:51,offset:588},end:$R[20093]={line:21,column:55,offset:592}},referenceIndex:1,type:"footnoteReference"}],position:$R[20094]={start:$R[20095]={line:21,column:1,offset:538},end:$R[20096]={line:21,column:55,offset:592}},type:"paragraph"}],position:$R[20097]={end:$R[20098]={line:21,column:55,offset:592},start:$R[20099]={line:13,column:1,offset:374}},type:"section"},$R[20100]={children:$R[20101]=[$R[20102]={children:$R[20103]=[$R[20104]={position:$R[20105]={start:$R[20106]={line:25,column:4,offset:784},end:$R[20107]={line:25,column:27,offset:807}},type:"text",value:"配信している HTML に変更を加える最適化達"}],id:"配信している-html-に変更を加える最適化達",level:2,plain:"配信している HTML に変更を加える最適化達",position:$R[20108]={start:$R[20109]={line:25,column:1,offset:781},end:$R[20110]={line:25,column:27,offset:807}},type:"heading"},$R[20111]={children:$R[20112]=[$R[20113]={position:$R[20114]={start:$R[20115]={line:27,column:1,offset:809},end:$R[20116]={line:27,column:46,offset:854}},type:"text",value:"以下の最適化は、Cloudflare から配信される HTML に変更を加えるものである。"}],position:$R[20117]={start:$R[20118]={line:27,column:1,offset:809},end:$R[20119]={line:27,column:46,offset:854}},type:"paragraph"},$R[20120]={children:$R[20121]=[$R[20122]={children:$R[20123]=[$R[20124]={position:$R[20125]={start:$R[20126]={line:29,column:5,offset:860},end:$R[20127]={line:29,column:21,offset:876}},type:"text",value:"Cloudflare Fonts"}],id:"cloudflare-fonts",level:3,plain:"Cloudflare Fonts",position:$R[20128]={start:$R[20129]={line:29,column:1,offset:856},end:$R[20130]={line:29,column:21,offset:876}},type:"heading"},$R[20131]={children:$R[20132]=[$R[20133]={position:$R[20134]={start:$R[20135]={line:31,column:1,offset:878},end:$R[20136]={line:31,column:30,offset:907}},type:"text",value:"オリジンから返却される HTML を CDN 上で解析し、"},$R[20137]={position:$R[20138]={start:$R[20139]={line:31,column:30,offset:907},end:$R[20140]={line:31,column:96,offset:973}},type:"inlineCode",value:"\x3Clink href=\"https://fonts.googleapis.com...省略\" rel=\"stylesheet\">"},$R[20141]={position:$R[20142]={start:$R[20143]={line:31,column:96,offset:973},end:$R[20144]={line:32,column:34,offset:1043}},type:"text",value:" に書かれている CSS をブラウザではなくエッジ上でダウンロードする。\nそして、その CSS の内容を head にインラインのスタイル "},$R[20145]={position:$R[20146]={start:$R[20147]={line:32,column:34,offset:1043},end:$R[20148]={line:32,column:43,offset:1052}},type:"inlineCode",value:"\x3Cstyle>"},$R[20149]={position:$R[20150]={start:$R[20151]={line:32,column:43,offset:1052},end:$R[20152]={line:32,column:72,offset:1081}},type:"text",value:" として書き込んでから、ブラウザに HTML を返却する。"}],position:$R[20153]={start:$R[20154]={line:31,column:1,offset:878},end:$R[20155]={line:32,column:72,offset:1081}},type:"paragraph"},$R[20156]={children:$R[20157]=[$R[20158]={position:$R[20159]={start:$R[20160]={line:34,column:1,offset:1083},end:$R[20161]={line:34,column:11,offset:1093}},type:"text",value:"以下がその例である。"}],position:$R[20162]={start:$R[20163]={line:34,column:1,offset:1083},end:$R[20164]={line:34,column:11,offset:1093}},type:"paragraph"},$R[20165]={children:$R[20166]=[$R[20167]={alt:"Cloudflare Fonts の例",position:$R[20168]={start:$R[20169]={line:36,column:1,offset:1095},end:$R[20170]={line:36,column:47,offset:1141}},title:void 0,type:"image",url:"./cf_optimize_font.png",transformed:$R[20171]=[$R[20172]={dim:$R[20173]={h:1013,w:1765},path:"/img/cf_optimize_font-H7mknwM2-1765x1013.webp"},$R[20174]={dim:$R[20175]={h:709,w:1236},path:"/img/cf_optimize_font-H7mknwM2-1236x709.webp"},$R[20176]={dim:$R[20177]={h:496,w:865},path:"/img/cf_optimize_font-H7mknwM2-865x496.webp"},$R[20178]={dim:$R[20179]={h:347,w:605},path:"/img/cf_optimize_font-H7mknwM2-605x347.webp"},$R[20180]={dim:$R[20181]={h:243,w:424},path:"/img/cf_optimize_font-H7mknwM2-424x243.webp"}]}],position:$R[20182]={start:$R[20183]={line:36,column:1,offset:1095},end:$R[20184]={line:36,column:47,offset:1141}},type:"paragraph"}],position:$R[20185]={end:$R[20186]={line:36,column:47,offset:1141},start:$R[20187]={line:29,column:1,offset:856}},type:"section"},$R[20188]={children:$R[20189]=[$R[20190]={children:$R[20191]=[$R[20192]={position:$R[20193]={start:$R[20194]={line:38,column:5,offset:1147},end:$R[20195]={line:38,column:18,offset:1160}},type:"text",value:"Rocket Loader"}],id:"rocket-loader",level:3,plain:"Rocket Loader",position:$R[20196]={start:$R[20197]={line:38,column:1,offset:1143},end:$R[20198]={line:38,column:18,offset:1160}},type:"heading"},$R[20199]={children:$R[20200]=[$R[20201]={position:$R[20202]={start:$R[20203]={line:40,column:1,offset:1162},end:$R[20204]={line:41,column:51,offset:1284}},type:"text",value:"Rocket Loader は、ページの読み込みを高速化するために、ページ上の JavaScript の読み込みをレンダリング後まで延期する。\nそれにより、ウェブサイトのコンテンツ(テキスト、画像、フォントなど)を優先的に読み込むことができる。"}],position:$R[20205]={start:$R[20206]={line:40,column:1,offset:1162},end:$R[20207]={line:41,column:51,offset:1284}},type:"paragraph"},$R[20208]={children:$R[20209]=[$R[20210]={position:$R[20211]={start:$R[20212]={line:43,column:1,offset:1286},end:$R[20213]={line:43,column:27,offset:1312}},type:"text",value:"以下のような script tag が埋め込まれる。"}],position:$R[20214]={start:$R[20215]={line:43,column:1,offset:1286},end:$R[20216]={line:43,column:27,offset:1312}},type:"paragraph"},$R[20217]={filename:"index.html html",lang:"html",position:$R[20218]={start:$R[20219]={line:45,column:1,offset:1314},end:$R[20220]={line:47,column:4,offset:1479}},type:"code",value:"\x3Cscript src=\"/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js\" data-cf-settings=\"78debd8b89ee77d3369ad146-|49\" defer>\x3C/script>",hast:$R[20221]={type:"root",children:$R[20222]=[$R[20223]={type:"element",tagName:"pre",properties:$R[20224]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[20225]=[$R[20226]={type:"element",tagName:"code",properties:$R[20227]={},children:$R[20228]=[$R[20229]={type:"element",tagName:"span",properties:$R[20230]={class:"line"},children:$R[20231]=[$R[20232]={type:"element",tagName:"span",properties:$R[20233]={style:"color:#666666"},children:$R[20234]=[$R[20235]={type:"text",value:"\x3C"}]},$R[20236]={type:"element",tagName:"span",properties:$R[20237]={style:"color:#4D9375"},children:$R[20238]=[$R[20239]={type:"text",value:"script"}]},$R[20240]={type:"element",tagName:"span",properties:$R[20241]={style:"color:#BD976A"},children:$R[20242]=[$R[20243]={type:"text",value:" src"}]},$R[20244]={type:"element",tagName:"span",properties:$R[20245]={style:"color:#666666"},children:$R[20246]=[$R[20247]={type:"text",value:"="}]},$R[20248]={type:"element",tagName:"span",properties:$R[20249]={style:"color:#C98A7D77"},children:$R[20250]=[$R[20251]={type:"text",value:"\""}]},$R[20252]={type:"element",tagName:"span",properties:$R[20253]={style:"color:#C98A7D"},children:$R[20254]=[$R[20255]={type:"text",value:"/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js"}]},$R[20256]={type:"element",tagName:"span",properties:$R[20257]={style:"color:#C98A7D77"},children:$R[20258]=[$R[20259]={type:"text",value:"\""}]},$R[20260]={type:"element",tagName:"span",properties:$R[20261]={style:"color:#BD976A"},children:$R[20262]=[$R[20263]={type:"text",value:" data-cf-settings"}]},$R[20264]={type:"element",tagName:"span",properties:$R[20265]={style:"color:#666666"},children:$R[20266]=[$R[20267]={type:"text",value:"="}]},$R[20268]={type:"element",tagName:"span",properties:$R[20269]={style:"color:#C98A7D77"},children:$R[20270]=[$R[20271]={type:"text",value:"\""}]},$R[20272]={type:"element",tagName:"span",properties:$R[20273]={style:"color:#C98A7D"},children:$R[20274]=[$R[20275]={type:"text",value:"78debd8b89ee77d3369ad146-|49"}]},$R[20276]={type:"element",tagName:"span",properties:$R[20277]={style:"color:#C98A7D77"},children:$R[20278]=[$R[20279]={type:"text",value:"\""}]},$R[20280]={type:"element",tagName:"span",properties:$R[20281]={style:"color:#BD976A"},children:$R[20282]=[$R[20283]={type:"text",value:" defer"}]},$R[20284]={type:"element",tagName:"span",properties:$R[20285]={style:"color:#666666"},children:$R[20286]=[$R[20287]={type:"text",value:">\x3C/"}]},$R[20288]={type:"element",tagName:"span",properties:$R[20289]={style:"color:#4D9375"},children:$R[20290]=[$R[20291]={type:"text",value:"script"}]},$R[20292]={type:"element",tagName:"span",properties:$R[20293]={style:"color:#666666"},children:$R[20294]=[$R[20295]={type:"text",value:">"}]}]}]}]}]}}],position:$R[20296]={end:$R[20297]={line:47,column:4,offset:1479},start:$R[20298]={line:38,column:1,offset:1143}},type:"section"}],position:$R[20299]={end:$R[20300]={line:47,column:4,offset:1479},start:$R[20301]={line:25,column:1,offset:781}},type:"section"},$R[20302]={children:$R[20303]=[$R[20304]={children:$R[20305]=[$R[20306]={position:$R[20307]={start:$R[20308]={line:49,column:4,offset:1484},end:$R[20309]={line:49,column:22,offset:1502}},type:"text",value:"HTML の書き換えにより起こる問題"}],id:"html-の書き換えにより起こる問題",level:2,plain:"HTML の書き換えにより起こる問題",position:$R[20310]={start:$R[20311]={line:49,column:1,offset:1481},end:$R[20312]={line:49,column:22,offset:1502}},type:"heading"},$R[20313]={children:$R[20314]=[$R[20315]={position:$R[20316]={start:$R[20317]={line:51,column:1,offset:1504},end:$R[20318]={line:51,column:61,offset:1564}},type:"text",value:"Cloudflare から配信される HTML が書き換えられることにより、hydration error が発生する。"}],position:$R[20319]={start:$R[20320]={line:51,column:1,offset:1504},end:$R[20321]={line:51,column:61,offset:1564}},type:"paragraph"},$R[20322]={children:$R[20323]=[$R[20324]={position:$R[20325]={start:$R[20326]={line:53,column:1,offset:1566},end:$R[20327]={line:53,column:41,offset:1606}},type:"text",value:"これは SSR した HTML が使われずに CSR が行われることを意味する。"}],position:$R[20328]={start:$R[20329]={line:53,column:1,offset:1566},end:$R[20330]={line:53,column:41,offset:1606}},type:"paragraph"},$R[20331]={children:$R[20332]=[$R[20333]={position:$R[20334]={start:$R[20335]={line:55,column:1,offset:1608},end:$R[20336]={line:55,column:46,offset:1653}},type:"text",value:"以下のようなフローをたどり、最終的にブラウザ上に表示されるため CLS が発生してしまう。"}],position:$R[20337]={start:$R[20338]={line:55,column:1,offset:1608},end:$R[20339]={line:55,column:46,offset:1653}},type:"paragraph"},$R[20340]={children:$R[20341]=[$R[20342]={position:$R[20343]={start:$R[20344]={line:57,column:1,offset:1655},end:$R[20345]={line:57,column:56,offset:1710}},type:"text",value:"hydration 前の SSR された HTML --> CSR される --> hydration される"}],position:$R[20346]={start:$R[20347]={line:57,column:1,offset:1655},end:$R[20348]={line:57,column:56,offset:1710}},type:"paragraph"}],position:$R[20349]={end:$R[20350]={line:57,column:56,offset:1710},start:$R[20351]={line:49,column:1,offset:1481}},type:"section"},$R[20352]={children:$R[20353]=[$R[20354]={children:$R[20355]=[$R[20356]={position:$R[20357]={start:$R[20358]={line:59,column:4,offset:1715},end:$R[20359]={line:59,column:7,offset:1718}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[20360]={start:$R[20361]={line:59,column:1,offset:1712},end:$R[20362]={line:59,column:7,offset:1718}},type:"heading"},$R[20363]={children:$R[20364]=[$R[20365]={position:$R[20366]={start:$R[20367]={line:61,column:1,offset:1720},end:$R[20368]={line:61,column:116,offset:1835}},type:"text",value:"Cloudflare で配信される HTML に変更を加える最適化は、React の hydration に影響を及ぼす可能性がある。ダッシュボードでトグルをオンにするだけで手軽に最適化を行えるが、大いなる力には大いなる責任が伴う"},$R[20369]={footnoteIndex:1,position:$R[20370]={start:$R[20371]={line:61,column:116,offset:1835},end:$R[20372]={line:61,column:120,offset:1839}},referenceIndex:1,type:"footnoteReference"},$R[20373]={position:$R[20374]={start:$R[20375]={line:61,column:120,offset:1839},end:$R[20376]={line:61,column:132,offset:1851}},type:"text",value:"ことを忘れてはならない。"}],position:$R[20377]={start:$R[20378]={line:61,column:1,offset:1720},end:$R[20379]={line:61,column:132,offset:1851}},type:"paragraph"}],position:$R[20380]={end:$R[20381]={line:61,column:132,offset:1851},start:$R[20382]={line:59,column:1,offset:1712}},type:"section"}],footnotes:$R[20383]=[$R[20384]={children:$R[20385]=[$R[20386]={children:$R[20387]=[$R[20388]={position:$R[20389]={start:$R[20390]={line:23,column:7,offset:600},end:$R[20391]={line:23,column:12,offset:605}},type:"text",value:"正確には、"},$R[20392]={children:$R[20393]=[$R[20394]={position:$R[20395]={start:$R[20396]={line:23,column:13,offset:606},end:$R[20397]={line:23,column:24,offset:617}},type:"text",value:"Speed Brain"}],position:$R[20398]={start:$R[20399]={line:23,column:12,offset:605},end:$R[20400]={line:23,column:100,offset:693}},title:void 0,type:"link",url:"https://developers.cloudflare.com/speed/optimization/content/speed-brain/"},$R[20401]={position:$R[20402]={start:$R[20403]={line:23,column:100,offset:693},end:$R[20404]={line:23,column:186,offset:779}},type:"text",value:" と呼ばれる機能は Speculation Rules API によって実現されているため、本来は script tag が埋め込まれるはずだが、現状は埋め込まれていない。"}],position:$R[20405]={start:$R[20406]={line:23,column:7,offset:600},end:$R[20407]={line:23,column:186,offset:779}},type:"paragraph"}],count:1,index:0,position:$R[20408]={start:$R[20409]={line:23,column:1,offset:594},end:$R[20410]={line:23,column:186,offset:779}},type:"footnoteDefinition"},$R[20411]={children:$R[20412]=[$R[20413]={children:$R[20414]=[$R[20415]={children:$R[20416]=[$R[20417]={position:$R[20418]={start:$R[20419]={line:63,column:8,offset:1860},end:$R[20420]={line:63,column:36,offset:1888}},type:"text",value:"大いなる力には、大いなる責任が伴う - ピクシブ百科事典"}],position:$R[20421]={start:$R[20422]={line:63,column:7,offset:1859},end:$R[20423]={line:63,column:216,offset:2068}},title:void 0,type:"link",url:"https://dic.pixiv.net/a/%E5%A4%A7%E3%81%84%E3%81%AA%E3%82%8B%E5%8A%9B%E3%81%AB%E3%81%AF%E3%80%81%E5%A4%A7%E3%81%84%E3%81%AA%E3%82%8B%E8%B2%AC%E4%BB%BB%E3%81%8C%E4%BC%B4%E3%81%86"}],position:$R[20424]={start:$R[20425]={line:63,column:7,offset:1859},end:$R[20426]={line:63,column:216,offset:2068}},type:"paragraph"}],count:1,index:1,position:$R[20427]={start:$R[20428]={line:63,column:1,offset:1853},end:$R[20429]={line:63,column:216,offset:2068}},type:"footnoteDefinition"}],title:$R[20430]={children:$R[20431]=[$R[20432]={position:$R[20433]={start:$R[20434]={line:1,column:3,offset:2},end:$R[20435]={line:1,column:29,offset:28}},type:"text",value:"Cf pages と Hydration Error"}],id:"cf-pages-と-hydration-error",level:1,plain:"Cf pages と Hydration Error",position:$R[20436]={start:$R[20437]={line:1,column:1,offset:0},end:$R[20438]={line:1,column:29,offset:28}},type:"heading"},toc:$R[20439]=[$R[20440]={children:$R[20441]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[20442]={children:$R[20443]=[],id:"解決の糸口となった記事",plain:"解決の糸口となった記事",type:"toc"},$R[20444]={children:$R[20445]=[],id:"cloudflare-で設定できる最適化一覧",plain:"Cloudflare で設定できる最適化一覧",type:"toc"},$R[20446]={children:$R[20447]=[$R[20448]={children:$R[20449]=[],id:"cloudflare-fonts",plain:"Cloudflare Fonts",type:"toc"},$R[20450]={children:$R[20451]=[],id:"rocket-loader",plain:"Rocket Loader",type:"toc"}],id:"配信している-html-に変更を加える最適化達",plain:"配信している HTML に変更を加える最適化達",type:"toc"},$R[20452]={children:$R[20453]=[],id:"html-の書き換えにより起こる問題",plain:"HTML の書き換えにより起こる問題",type:"toc"},$R[20454]={children:$R[20455]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}}]);_$HY.r["0000000100010020000000000"]=$R[20457]=$R[1]();_$HY.r["00000001000100200000000"]=$R[20458]=$R[1]();$R[20456]($R[2],!0);$R[20456]($R[20457],$R[3]);$R[20456]($R[20458],!0);
blog.re-taro.devArchive
Cf pages と Hydration ErrorはじめにCloudflare Pages で custom domains を割り当てたところ、hydration error が発生するようになった。この記事ではその解決方法を記す。解決の糸口となった記事https://med...
@cloudflare/workers-types の Compatibility dates を知っているかはじめにCloudflare Workers で TypeScript を使う際に、@cloudflare/workers-types という型定義パッケージを使う。Co...
Life Cycle Scripts を理解するはじめにnpm scripts には、pre と post というプレフィックスのついたスクリプトがある。これは、スクリプトの前後に実行されるスクリプトを指定するものである。その中でも、特定の状況下で実行されるスクリプトがある。それ...
EventListener のオプションメモはじめにaddEventListener は DOM イベントを登録するためのメソッドである。このメソッドにはオプションを指定できる。このオプションについて調べてみた。オプションaddEventListener には以下のオプションを指...
React Compiler の opt-in と opt-out を整理するはじめに先日に引き続き React Compiler のコードを読んでいる中で、opt-in と opt-out についての挙動がややこしいと感じたので整理してみた。この記事で参照するコードの comm...
eslintSuppressionRules を考察してみるはじめに先日 React Compiler が OSS になった。React のベータ版を使うことで今すぐ使うことができる。React Compiler is a new experimental compiler th...
bunshiを理解するはじめにbunshi というライブラリがある。状態管理ライブラリの DI を行うものだ。jotai を使う機会があり、調べを進める中で当時名前を聞いた jotai-molecule が bunshi という名前で良い感じに開発されていて気になったので調べてみ...
initialはじめにブログを再構築した。これは、そのテスト用のポストである。テスト以降は、本サイトのマークアップやスタイルをテストするためのセクションである。対応している記法を列挙し、挙動を確認する。heading section 3ここは <h3> セクションである。head...