\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[6]=["state","jotai","bunshi"],title:"bunshiを理解する",_meta:$R[7]={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[8]={children:$R[9]=[$R[10]={children:$R[11]=[$R[12]={children:$R[13]=[$R[14]={position:$R[15]={start:$R[16]={line:3,column:4,offset:18},end:$R[17]={line:3,column:8,offset:22}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[18]={start:$R[19]={line:3,column:1,offset:15},end:$R[20]={line:3,column:8,offset:22}},type:"heading"},$R[21]={children:$R[22]=[$R[23]={children:$R[24]=[$R[25]={position:$R[26]={start:$R[27]={line:5,column:2,offset:25},end:$R[28]={line:5,column:8,offset:31}},type:"text",value:"bunshi"}],position:$R[29]={start:$R[30]={line:5,column:1,offset:24},end:$R[31]={line:5,column:47,offset:70}},title:void 0,type:"link",url:"https://github.com/saasquatch/bunshi"},$R[32]={position:$R[33]={start:$R[34]={line:5,column:47,offset:70},end:$R[35]={line:5,column:81,offset:104}},type:"text",value:" というライブラリがある。状態管理ライブラリの DI を行うものだ。"}],position:$R[36]={start:$R[37]={line:5,column:1,offset:24},end:$R[38]={line:5,column:81,offset:104}},type:"paragraph"},$R[39]={children:$R[40]=[$R[41]={position:$R[42]={start:$R[43]={line:7,column:1,offset:106},end:$R[44]={line:7,column:8,offset:113}},type:"inlineCode",value:"jotai"},$R[45]={position:$R[46]={start:$R[47]={line:7,column:8,offset:113},end:$R[48]={line:7,column:35,offset:140}},type:"text",value:" を使う機会があり、調べを進める中で当時名前を聞いた "},$R[49]={position:$R[50]={start:$R[51]={line:7,column:35,offset:140},end:$R[52]={line:7,column:51,offset:156}},type:"inlineCode",value:"jotai-molecule"},$R[53]={position:$R[54]={start:$R[55]={line:7,column:51,offset:156},end:$R[56]={line:7,column:54,offset:159}},type:"text",value:" が "},$R[57]={position:$R[58]={start:$R[59]={line:7,column:54,offset:159},end:$R[60]={line:7,column:62,offset:167}},type:"inlineCode",value:"bunshi"},$R[61]={position:$R[62]={start:$R[63]={line:7,column:62,offset:167},end:$R[64]={line:7,column:94,offset:199}},type:"text",value:" という名前で良い感じに開発されていて気になったので調べてみる。"}],position:$R[65]={start:$R[66]={line:7,column:1,offset:106},end:$R[67]={line:7,column:94,offset:199}},type:"paragraph"},$R[68]={children:$R[69]=[$R[70]={position:$R[71]={start:$R[72]={line:9,column:1,offset:201},end:$R[73]={line:9,column:40,offset:240}},type:"text",value:"注意: この記事が書かれた当時の情報であり、最新の情報とは異なる可能性がある。"},$R[74]={position:$R[75]={start:$R[76]={line:9,column:40,offset:240},end:$R[77]={line:9,column:48,offset:248}},type:"inlineCode",value:"bunshi"},$R[78]={position:$R[79]={start:$R[80]={line:9,column:48,offset:248},end:$R[81]={line:9,column:57,offset:257}},type:"text",value:" のバージョンは "},$R[82]={position:$R[83]={start:$R[84]={line:9,column:57,offset:257},end:$R[85]={line:9,column:64,offset:264}},type:"inlineCode",value:"2.1.5"},$R[86]={position:$R[87]={start:$R[88]={line:9,column:64,offset:264},end:$R[89]={line:9,column:69,offset:269}},type:"text",value:" である。"}],position:$R[90]={start:$R[91]={line:9,column:1,offset:201},end:$R[92]={line:9,column:69,offset:269}},type:"paragraph"}],position:$R[93]={end:$R[94]={line:9,column:69,offset:269},start:$R[95]={line:3,column:1,offset:15}},type:"section"},$R[96]={children:$R[97]=[$R[98]={children:$R[99]=[$R[100]={position:$R[101]={start:$R[102]={line:11,column:4,offset:274},end:$R[103]={line:11,column:13,offset:283}},type:"text",value:"bunshiの特徴"}],id:"bunshiの特徴",level:2,plain:"bunshiの特徴",position:$R[104]={start:$R[105]={line:11,column:1,offset:271},end:$R[106]={line:11,column:13,offset:283}},type:"heading"},$R[107]={children:$R[108]=[$R[109]={position:$R[110]={start:$R[111]={line:13,column:1,offset:285},end:$R[112]={line:13,column:9,offset:293}},type:"inlineCode",value:"bunshi"},$R[113]={position:$R[114]={start:$R[115]={line:13,column:9,offset:293},end:$R[116]={line:13,column:22,offset:306}},type:"text",value:" は次のような特徴を持つ。"}],position:$R[117]={start:$R[118]={line:13,column:1,offset:285},end:$R[119]={line:13,column:22,offset:306}},type:"paragraph"},$R[120]={children:$R[121]=[$R[122]={children:$R[123]=[$R[124]={position:$R[125]={start:$R[126]={line:15,column:5,offset:312},end:$R[127]={line:15,column:16,offset:323}},type:"text",value:"バンドルサイズが小さい"}],id:"バンドルサイズが小さい",level:3,plain:"バンドルサイズが小さい",position:$R[128]={start:$R[129]={line:15,column:1,offset:308},end:$R[130]={line:15,column:16,offset:323}},type:"heading"},$R[131]={children:$R[132]=[$R[133]={position:$R[134]={start:$R[135]={line:17,column:1,offset:325},end:$R[136]={line:17,column:54,offset:378}},type:"text",value:"gzip 圧縮されたサイズで 1.18KB しかない。また他のライブラリに依存いていないのも大きな特徴だ。"}],position:$R[137]={start:$R[138]={line:17,column:1,offset:325},end:$R[139]={line:17,column:54,offset:378}},type:"paragraph"}],position:$R[140]={end:$R[141]={line:17,column:54,offset:378},start:$R[142]={line:15,column:1,offset:308}},type:"section"},$R[143]={children:$R[144]=[$R[145]={children:$R[146]=[$R[147]={position:$R[148]={start:$R[149]={line:19,column:5,offset:384},end:$R[150]={line:19,column:26,offset:405}},type:"text",value:"framework agnosticである"}],id:"framework-agnosticである",level:3,plain:"framework agnosticである",position:$R[151]={start:$R[152]={line:19,column:1,offset:380},end:$R[153]={line:19,column:26,offset:405}},type:"heading"},$R[154]={children:$R[155]=[$R[156]={position:$R[157]={start:$R[158]={line:21,column:1,offset:407},end:$R[159]={line:21,column:9,offset:415}},type:"inlineCode",value:"bunshi"},$R[160]={position:$R[161]={start:$R[162]={line:21,column:9,offset:415},end:$R[163]={line:21,column:12,offset:418}},type:"text",value:" は "},$R[164]={position:$R[165]={start:$R[166]={line:21,column:12,offset:418},end:$R[167]={line:21,column:19,offset:425}},type:"inlineCode",value:"jotai"},$R[168]={position:$R[169]={start:$R[170]={line:21,column:19,offset:425},end:$R[171]={line:21,column:22,offset:428}},type:"text",value:" や "},$R[172]={position:$R[173]={start:$R[174]={line:21,column:22,offset:428},end:$R[175]={line:21,column:31,offset:437}},type:"inlineCode",value:"zustand"},$R[176]={position:$R[177]={start:$R[178]={line:21,column:31,offset:437},end:$R[179]={line:21,column:32,offset:438}},type:"text",value:"、"},$R[180]={position:$R[181]={start:$R[182]={line:21,column:32,offset:438},end:$R[183]={line:21,column:44,offset:450}},type:"inlineCode",value:"nanostores"},$R[184]={position:$R[185]={start:$R[186]={line:21,column:44,offset:450},end:$R[187]={line:21,column:59,offset:465}},type:"text",value:" などの状態管理ライブラリを "},$R[188]={position:$R[189]={start:$R[190]={line:21,column:59,offset:465},end:$R[191]={line:21,column:69,offset:475}},type:"inlineCode",value:"molecule"},$R[192]={position:$R[193]={start:$R[194]={line:21,column:69,offset:475},end:$R[195]={line:21,column:109,offset:515}},type:"text",value:" という概念でラップすることで、状態のスコープ管理や依存注入を行うことができる。"}],position:$R[196]={start:$R[197]={line:21,column:1,offset:407},end:$R[198]={line:21,column:109,offset:515}},type:"paragraph"},$R[199]={children:$R[200]=[$R[201]={position:$R[202]={start:$R[203]={line:23,column:1,offset:517},end:$R[204]={line:23,column:11,offset:527}},type:"inlineCode",value:"molecule"},$R[205]={position:$R[206]={start:$R[207]={line:23,column:11,offset:527},end:$R[208]={line:23,column:68,offset:584}},type:"text",value:" の宣言は framework agnostic であるため、ロジックをフレームワークに依存させず書くことができる"},$R[209]={footnoteIndex:0,position:$R[210]={start:$R[211]={line:23,column:68,offset:584},end:$R[212]={line:23,column:72,offset:588}},referenceIndex:1,type:"footnoteReference"},$R[213]={position:$R[214]={start:$R[215]={line:23,column:72,offset:588},end:$R[216]={line:23,column:73,offset:589}},type:"text",value:"。"}],position:$R[217]={start:$R[218]={line:23,column:1,offset:517},end:$R[219]={line:23,column:73,offset:589}},type:"paragraph"}],position:$R[220]={end:$R[221]={line:23,column:73,offset:589},start:$R[222]={line:19,column:1,offset:380}},type:"section"},$R[223]={children:$R[224]=[$R[225]={children:$R[226]=[$R[227]={position:$R[228]={start:$R[229]={line:27,column:5,offset:747},end:$R[230]={line:27,column:20,offset:762}},type:"text",value:"パフォーマンスに配慮されている"}],id:"パフォーマンスに配慮されている",level:3,plain:"パフォーマンスに配慮されている",position:$R[231]={start:$R[232]={line:27,column:1,offset:743},end:$R[233]={line:27,column:20,offset:762}},type:"heading"},$R[234]={children:$R[235]=[$R[236]={position:$R[237]={start:$R[238]={line:29,column:1,offset:764},end:$R[239]={line:29,column:10,offset:773}},type:"inlineCode",value:"WeakMap"},$R[240]={position:$R[241]={start:$R[242]={line:29,column:10,offset:773},end:$R[243]={line:29,column:24,offset:787}},type:"text",value:" を用いたメモリリークの防止"},$R[244]={footnoteIndex:1,position:$R[245]={start:$R[246]={line:29,column:24,offset:787},end:$R[247]={line:29,column:28,offset:791}},referenceIndex:1,type:"footnoteReference"},$R[248]={position:$R[249]={start:$R[250]={line:29,column:28,offset:791},end:$R[251]={line:29,column:66,offset:829}},type:"text",value:"や、不要な再レンダリングを防止するためにフレームワークのインテグレーション("},$R[252]={position:$R[253]={start:$R[254]={line:29,column:66,offset:829},end:$R[255]={line:29,column:73,offset:836}},type:"inlineCode",value:"React"},$R[256]={position:$R[257]={start:$R[258]={line:29,column:73,offset:836},end:$R[259]={line:29,column:75,offset:838}},type:"text",value:", "},$R[260]={position:$R[261]={start:$R[262]={line:29,column:75,offset:838},end:$R[263]={line:29,column:80,offset:843}},type:"inlineCode",value:"Vue"},$R[264]={position:$R[265]={start:$R[266]={line:29,column:80,offset:843},end:$R[267]={line:29,column:93,offset:856}},type:"text",value:")ではメモ化を行っている。"}],position:$R[268]={start:$R[269]={line:29,column:1,offset:764},end:$R[270]={line:29,column:93,offset:856}},type:"paragraph"}],position:$R[271]={end:$R[272]={line:29,column:93,offset:856},start:$R[273]={line:27,column:1,offset:743}},type:"section"}],position:$R[274]={end:$R[275]={line:29,column:93,offset:856},start:$R[276]={line:11,column:1,offset:271}},type:"section"},$R[277]={children:$R[278]=[$R[279]={children:$R[280]=[$R[281]={position:$R[282]={start:$R[283]={line:33,column:4,offset:985},end:$R[284]={line:33,column:15,offset:996}},type:"text",value:"bunshiの基本概念"}],id:"bunshiの基本概念",level:2,plain:"bunshiの基本概念",position:$R[285]={start:$R[286]={line:33,column:1,offset:982},end:$R[287]={line:33,column:15,offset:996}},type:"heading"},$R[288]={children:$R[289]=[$R[290]={position:$R[291]={start:$R[292]={line:35,column:1,offset:998},end:$R[293]={line:35,column:25,offset:1022}},type:"text",value:"bunshi は次の 3 つの概念で構成される。"}],position:$R[294]={start:$R[295]={line:35,column:1,offset:998},end:$R[296]={line:35,column:25,offset:1022}},type:"paragraph"},$R[297]={children:$R[298]=[$R[299]={children:$R[300]=[$R[301]={position:$R[302]={start:$R[303]={line:37,column:5,offset:1028},end:$R[304]={line:37,column:13,offset:1036}},type:"text",value:"molecule"}],id:"molecule",level:3,plain:"molecule",position:$R[305]={start:$R[306]={line:37,column:1,offset:1024},end:$R[307]={line:37,column:13,offset:1036}},type:"heading"},$R[308]={children:$R[309]=[$R[310]={position:$R[311]={start:$R[312]={line:39,column:1,offset:1038},end:$R[313]={line:39,column:11,offset:1048}},type:"inlineCode",value:"molecule"},$R[314]={position:$R[315]={start:$R[316]={line:39,column:11,offset:1048},end:$R[317]={line:39,column:14,offset:1051}},type:"text",value:" は "},$R[318]={position:$R[319]={start:$R[320]={line:39,column:14,offset:1051},end:$R[321]={line:39,column:22,offset:1059}},type:"inlineCode",value:"bunshi"},$R[322]={position:$R[323]={start:$R[324]={line:39,column:22,offset:1059},end:$R[325]={line:39,column:57,offset:1094}},type:"text",value:" の core 的な概念であり、実態は値を返す関数の HoF である。"}],position:$R[326]={start:$R[327]={line:39,column:1,offset:1038},end:$R[328]={line:39,column:57,offset:1094}},type:"paragraph"},$R[329]={children:$R[330]=[$R[331]={position:$R[332]={start:$R[333]={line:41,column:1,offset:1096},end:$R[334]={line:41,column:45,offset:1140}},type:"text",value:"最大の特徴は、関数の実行結果がキャッシュされることである。以下の例は常に同じ乱数を返す。"}],position:$R[335]={start:$R[336]={line:41,column:1,offset:1096},end:$R[337]={line:41,column:45,offset:1140}},type:"paragraph"},$R[338]={filename:"sample.ts ts",lang:"ts",position:$R[339]={start:$R[340]={line:43,column:1,offset:1142},end:$R[341]={line:47,column:4,offset:1258}},type:"code",value:"import { molecule } from \"bunshi\";\n\nexport const RandomMolecule = molecule(() => Math.random());",hast:$R[342]={type:"root",children:$R[343]=[$R[344]={type:"element",tagName:"pre",properties:$R[345]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[346]=[$R[347]={type:"element",tagName:"code",properties:$R[348]={},children:$R[349]=[$R[350]={type:"element",tagName:"span",properties:$R[351]={class:"line"},children:$R[352]=[$R[353]={type:"element",tagName:"span",properties:$R[354]={style:"color:#4D9375"},children:$R[355]=[$R[356]={type:"text",value:"import"}]},$R[357]={type:"element",tagName:"span",properties:$R[358]={style:"color:#666666"},children:$R[359]=[$R[360]={type:"text",value:" {"}]},$R[361]={type:"element",tagName:"span",properties:$R[362]={style:"color:#BD976A"},children:$R[363]=[$R[364]={type:"text",value:" molecule"}]},$R[365]={type:"element",tagName:"span",properties:$R[366]={style:"color:#666666"},children:$R[367]=[$R[368]={type:"text",value:" }"}]},$R[369]={type:"element",tagName:"span",properties:$R[370]={style:"color:#4D9375"},children:$R[371]=[$R[372]={type:"text",value:" from"}]},$R[373]={type:"element",tagName:"span",properties:$R[374]={style:"color:#C98A7D77"},children:$R[375]=[$R[376]={type:"text",value:" \""}]},$R[377]={type:"element",tagName:"span",properties:$R[378]={style:"color:#C98A7D"},children:$R[379]=[$R[380]={type:"text",value:"bunshi"}]},$R[381]={type:"element",tagName:"span",properties:$R[382]={style:"color:#C98A7D77"},children:$R[383]=[$R[384]={type:"text",value:"\""}]},$R[385]={type:"element",tagName:"span",properties:$R[386]={style:"color:#666666"},children:$R[387]=[$R[388]={type:"text",value:";"}]}]},$R[389]={type:"text",value:"\n"},$R[390]={type:"element",tagName:"span",properties:$R[391]={class:"line"},children:$R[392]=[]},$R[393]={type:"text",value:"\n"},$R[394]={type:"element",tagName:"span",properties:$R[395]={class:"line"},children:$R[396]=[$R[397]={type:"element",tagName:"span",properties:$R[398]={style:"color:#4D9375"},children:$R[399]=[$R[400]={type:"text",value:"export"}]},$R[401]={type:"element",tagName:"span",properties:$R[402]={style:"color:#CB7676"},children:$R[403]=[$R[404]={type:"text",value:" const "}]},$R[405]={type:"element",tagName:"span",properties:$R[406]={style:"color:#BD976A"},children:$R[407]=[$R[408]={type:"text",value:"RandomMolecule"}]},$R[409]={type:"element",tagName:"span",properties:$R[410]={style:"color:#666666"},children:$R[411]=[$R[412]={type:"text",value:" ="}]},$R[413]={type:"element",tagName:"span",properties:$R[414]={style:"color:#80A665"},children:$R[415]=[$R[416]={type:"text",value:" molecule"}]},$R[417]={type:"element",tagName:"span",properties:$R[418]={style:"color:#666666"},children:$R[419]=[$R[420]={type:"text",value:"(()"}]},$R[421]={type:"element",tagName:"span",properties:$R[422]={style:"color:#666666"},children:$R[423]=[$R[424]={type:"text",value:" =>"}]},$R[425]={type:"element",tagName:"span",properties:$R[426]={style:"color:#BD976A"},children:$R[427]=[$R[428]={type:"text",value:" Math"}]},$R[429]={type:"element",tagName:"span",properties:$R[430]={style:"color:#666666"},children:$R[431]=[$R[432]={type:"text",value:"."}]},$R[433]={type:"element",tagName:"span",properties:$R[434]={style:"color:#80A665"},children:$R[435]=[$R[436]={type:"text",value:"random"}]},$R[437]={type:"element",tagName:"span",properties:$R[438]={style:"color:#666666"},children:$R[439]=[$R[440]={type:"text",value:"());"}]}]}],data:$R[441]={_shiki_notation:$R[442]=[$R[443]={info:$R[444]=[";","",void 0],line:$R[445]={type:"element",tagName:"span",properties:$R[446]={class:"line"},children:$R[447]=[$R[448]={type:"element",tagName:"span",properties:$R[449]={style:"color:#4D9375"},children:$R[450]=[$R[451]={type:"text",value:"import"}]},$R[452]={type:"element",tagName:"span",properties:$R[453]={style:"color:#666666"},children:$R[454]=[$R[455]={type:"text",value:" {"}]},$R[456]={type:"element",tagName:"span",properties:$R[457]={style:"color:#BD976A"},children:$R[458]=[$R[459]={type:"text",value:" molecule"}]},$R[460]={type:"element",tagName:"span",properties:$R[461]={style:"color:#666666"},children:$R[462]=[$R[463]={type:"text",value:" }"}]},$R[464]={type:"element",tagName:"span",properties:$R[465]={style:"color:#4D9375"},children:$R[466]=[$R[467]={type:"text",value:" from"}]},$R[468]={type:"element",tagName:"span",properties:$R[469]={style:"color:#C98A7D77"},children:$R[470]=[$R[471]={type:"text",value:" \""}]},$R[472]={type:"element",tagName:"span",properties:$R[473]={style:"color:#C98A7D"},children:$R[474]=[$R[475]={type:"text",value:"bunshi"}]},$R[476]={type:"element",tagName:"span",properties:$R[477]={style:"color:#C98A7D77"},children:$R[478]=[$R[479]={type:"text",value:"\""}]},$R[480]={type:"element",tagName:"span",properties:$R[481]={style:"color:#666666"},children:$R[482]=[$R[483]={type:"text",value:";"}]}]},token:$R[484]={type:"element",tagName:"span",properties:$R[485]={style:"color:#666666"},children:$R[486]=[$R[487]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[488]={children:$R[489]=[$R[490]={position:$R[491]={start:$R[492]={line:49,column:1,offset:1260},end:$R[493]={line:49,column:4,offset:1263}},type:"text",value:"また "},$R[494]={position:$R[495]={start:$R[496]={line:49,column:4,offset:1263},end:$R[497]={line:49,column:14,offset:1273}},type:"inlineCode",value:"molecule"},$R[498]={position:$R[499]={start:$R[500]={line:49,column:14,offset:1273},end:$R[501]={line:49,column:19,offset:1278}},type:"text",value:" は他の "},$R[502]={position:$R[503]={start:$R[504]={line:49,column:19,offset:1278},end:$R[505]={line:49,column:29,offset:1288}},type:"inlineCode",value:"molecule"},$R[506]={position:$R[507]={start:$R[508]={line:49,column:29,offset:1288},end:$R[509]={line:49,column:37,offset:1296}},type:"text",value:" に依存できる。"}],position:$R[510]={start:$R[511]={line:49,column:1,offset:1260},end:$R[512]={line:49,column:37,offset:1296}},type:"paragraph"},$R[513]={filename:"sample.ts ts",lang:"ts",position:$R[514]={start:$R[515]={line:51,column:1,offset:1298},end:$R[516]={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[517]={type:"root",children:$R[518]=[$R[519]={type:"element",tagName:"pre",properties:$R[520]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[521]=[$R[522]={type:"element",tagName:"code",properties:$R[523]={},children:$R[524]=[$R[525]={type:"element",tagName:"span",properties:$R[526]={class:"line"},children:$R[527]=[$R[528]={type:"element",tagName:"span",properties:$R[529]={style:"color:#4D9375"},children:$R[530]=[$R[531]={type:"text",value:"import"}]},$R[532]={type:"element",tagName:"span",properties:$R[533]={style:"color:#666666"},children:$R[534]=[$R[535]={type:"text",value:" {"}]},$R[536]={type:"element",tagName:"span",properties:$R[537]={style:"color:#BD976A"},children:$R[538]=[$R[539]={type:"text",value:" molecule"}]},$R[540]={type:"element",tagName:"span",properties:$R[541]={style:"color:#666666"},children:$R[542]=[$R[543]={type:"text",value:" }"}]},$R[544]={type:"element",tagName:"span",properties:$R[545]={style:"color:#4D9375"},children:$R[546]=[$R[547]={type:"text",value:" from"}]},$R[548]={type:"element",tagName:"span",properties:$R[549]={style:"color:#C98A7D77"},children:$R[550]=[$R[551]={type:"text",value:" \""}]},$R[552]={type:"element",tagName:"span",properties:$R[553]={style:"color:#C98A7D"},children:$R[554]=[$R[555]={type:"text",value:"bunshi"}]},$R[556]={type:"element",tagName:"span",properties:$R[557]={style:"color:#C98A7D77"},children:$R[558]=[$R[559]={type:"text",value:"\""}]},$R[560]={type:"element",tagName:"span",properties:$R[561]={style:"color:#666666"},children:$R[562]=[$R[563]={type:"text",value:";"}]}]},$R[564]={type:"text",value:"\n"},$R[565]={type:"element",tagName:"span",properties:$R[566]={class:"line"},children:$R[567]=[]},$R[568]={type:"text",value:"\n"},$R[569]={type:"element",tagName:"span",properties:$R[570]={class:"line"},children:$R[571]=[$R[572]={type:"element",tagName:"span",properties:$R[573]={style:"color:#4D9375"},children:$R[574]=[$R[575]={type:"text",value:"export"}]},$R[576]={type:"element",tagName:"span",properties:$R[577]={style:"color:#CB7676"},children:$R[578]=[$R[579]={type:"text",value:" const "}]},$R[580]={type:"element",tagName:"span",properties:$R[581]={style:"color:#BD976A"},children:$R[582]=[$R[583]={type:"text",value:"RandomMolecule"}]},$R[584]={type:"element",tagName:"span",properties:$R[585]={style:"color:#666666"},children:$R[586]=[$R[587]={type:"text",value:" ="}]},$R[588]={type:"element",tagName:"span",properties:$R[589]={style:"color:#80A665"},children:$R[590]=[$R[591]={type:"text",value:" molecule"}]},$R[592]={type:"element",tagName:"span",properties:$R[593]={style:"color:#666666"},children:$R[594]=[$R[595]={type:"text",value:"(()"}]},$R[596]={type:"element",tagName:"span",properties:$R[597]={style:"color:#666666"},children:$R[598]=[$R[599]={type:"text",value:" =>"}]},$R[600]={type:"element",tagName:"span",properties:$R[601]={style:"color:#BD976A"},children:$R[602]=[$R[603]={type:"text",value:" Math"}]},$R[604]={type:"element",tagName:"span",properties:$R[605]={style:"color:#666666"},children:$R[606]=[$R[607]={type:"text",value:"."}]},$R[608]={type:"element",tagName:"span",properties:$R[609]={style:"color:#80A665"},children:$R[610]=[$R[611]={type:"text",value:"random"}]},$R[612]={type:"element",tagName:"span",properties:$R[613]={style:"color:#666666"},children:$R[614]=[$R[615]={type:"text",value:"());"}]}]},$R[616]={type:"text",value:"\n"},$R[617]={type:"element",tagName:"span",properties:$R[618]={class:"line"},children:$R[619]=[$R[620]={type:"element",tagName:"span",properties:$R[621]={style:"color:#4D9375"},children:$R[622]=[$R[623]={type:"text",value:"export"}]},$R[624]={type:"element",tagName:"span",properties:$R[625]={style:"color:#CB7676"},children:$R[626]=[$R[627]={type:"text",value:" const "}]},$R[628]={type:"element",tagName:"span",properties:$R[629]={style:"color:#BD976A"},children:$R[630]=[$R[631]={type:"text",value:"UsernameMolecule"}]},$R[632]={type:"element",tagName:"span",properties:$R[633]={style:"color:#666666"},children:$R[634]=[$R[635]={type:"text",value:" ="}]},$R[636]={type:"element",tagName:"span",properties:$R[637]={style:"color:#80A665"},children:$R[638]=[$R[639]={type:"text",value:" molecule"}]},$R[640]={type:"element",tagName:"span",properties:$R[641]={style:"color:#666666"},children:$R[642]=[$R[643]={type:"text",value:"("}]}]},$R[644]={type:"text",value:"\n"},$R[645]={type:"element",tagName:"span",properties:$R[646]={class:"line"},children:$R[647]=[$R[648]={type:"element",tagName:"span",properties:$R[649]={style:"color:#BD976A"},children:$R[650]=[$R[651]={type:"text",value:"\tmol"}]},$R[652]={type:"element",tagName:"span",properties:$R[653]={style:"color:#666666"},children:$R[654]=[$R[655]={type:"text",value:" =>"}]},$R[656]={type:"element",tagName:"span",properties:$R[657]={style:"color:#C98A7D77"},children:$R[658]=[$R[659]={type:"text",value:" `"}]},$R[660]={type:"element",tagName:"span",properties:$R[661]={style:"color:#C98A7D"},children:$R[662]=[$R[663]={type:"text",value:"You are user "}]},$R[664]={type:"element",tagName:"span",properties:$R[665]={style:"color:#4D9375"},children:$R[666]=[$R[667]={type:"text",value:"${"}]},$R[668]={type:"element",tagName:"span",properties:$R[669]={style:"color:#80A665"},children:$R[670]=[$R[671]={type:"text",value:"mol"}]},$R[672]={type:"element",tagName:"span",properties:$R[673]={style:"color:#666666"},children:$R[674]=[$R[675]={type:"text",value:"("}]},$R[676]={type:"element",tagName:"span",properties:$R[677]={style:"color:#C98A7D"},children:$R[678]=[$R[679]={type:"text",value:"RandomMolecule"}]},$R[680]={type:"element",tagName:"span",properties:$R[681]={style:"color:#666666"},children:$R[682]=[$R[683]={type:"text",value:")"}]},$R[684]={type:"element",tagName:"span",properties:$R[685]={style:"color:#4D9375"},children:$R[686]=[$R[687]={type:"text",value:"}"}]},$R[688]={type:"element",tagName:"span",properties:$R[689]={style:"color:#C98A7D77"},children:$R[690]=[$R[691]={type:"text",value:"`"}]},$R[692]={type:"element",tagName:"span",properties:$R[693]={style:"color:#666666"},children:$R[694]=[$R[695]={type:"text",value:","}]}]},$R[696]={type:"text",value:"\n"},$R[697]={type:"element",tagName:"span",properties:$R[698]={class:"line"},children:$R[699]=[$R[700]={type:"element",tagName:"span",properties:$R[701]={style:"color:#666666"},children:$R[702]=[$R[703]={type:"text",value:");"}]}]},$R[704]={type:"text",value:"\n"},$R[705]={type:"element",tagName:"span",properties:$R[706]={class:"line"},children:$R[707]=[$R[708]={type:"element",tagName:"span",properties:$R[709]={style:"color:#4D9375"},children:$R[710]=[$R[711]={type:"text",value:"export"}]},$R[712]={type:"element",tagName:"span",properties:$R[713]={style:"color:#CB7676"},children:$R[714]=[$R[715]={type:"text",value:" const "}]},$R[716]={type:"element",tagName:"span",properties:$R[717]={style:"color:#BD976A"},children:$R[718]=[$R[719]={type:"text",value:"IDMolecule"}]},$R[720]={type:"element",tagName:"span",properties:$R[721]={style:"color:#666666"},children:$R[722]=[$R[723]={type:"text",value:" ="}]},$R[724]={type:"element",tagName:"span",properties:$R[725]={style:"color:#80A665"},children:$R[726]=[$R[727]={type:"text",value:" molecule"}]},$R[728]={type:"element",tagName:"span",properties:$R[729]={style:"color:#666666"},children:$R[730]=[$R[731]={type:"text",value:"("}]},$R[732]={type:"element",tagName:"span",properties:$R[733]={style:"color:#BD976A"},children:$R[734]=[$R[735]={type:"text",value:"mol"}]},$R[736]={type:"element",tagName:"span",properties:$R[737]={style:"color:#666666"},children:$R[738]=[$R[739]={type:"text",value:" =>"}]},$R[740]={type:"element",tagName:"span",properties:$R[741]={style:"color:#C98A7D77"},children:$R[742]=[$R[743]={type:"text",value:" `"}]},$R[744]={type:"element",tagName:"span",properties:$R[745]={style:"color:#C98A7D"},children:$R[746]=[$R[747]={type:"text",value:"ID: "}]},$R[748]={type:"element",tagName:"span",properties:$R[749]={style:"color:#4D9375"},children:$R[750]=[$R[751]={type:"text",value:"${"}]},$R[752]={type:"element",tagName:"span",properties:$R[753]={style:"color:#80A665"},children:$R[754]=[$R[755]={type:"text",value:"mol"}]},$R[756]={type:"element",tagName:"span",properties:$R[757]={style:"color:#666666"},children:$R[758]=[$R[759]={type:"text",value:"("}]},$R[760]={type:"element",tagName:"span",properties:$R[761]={style:"color:#C98A7D"},children:$R[762]=[$R[763]={type:"text",value:"RandomMolecule"}]},$R[764]={type:"element",tagName:"span",properties:$R[765]={style:"color:#666666"},children:$R[766]=[$R[767]={type:"text",value:")"}]},$R[768]={type:"element",tagName:"span",properties:$R[769]={style:"color:#4D9375"},children:$R[770]=[$R[771]={type:"text",value:"}"}]},$R[772]={type:"element",tagName:"span",properties:$R[773]={style:"color:#C98A7D77"},children:$R[774]=[$R[775]={type:"text",value:"`"}]},$R[776]={type:"element",tagName:"span",properties:$R[777]={style:"color:#666666"},children:$R[778]=[$R[779]={type:"text",value:");"}]}]}],data:$R[780]={_shiki_notation:$R[781]=[$R[782]={info:$R[783]=[";","",void 0],line:$R[784]={type:"element",tagName:"span",properties:$R[785]={class:"line"},children:$R[786]=[$R[787]={type:"element",tagName:"span",properties:$R[788]={style:"color:#4D9375"},children:$R[789]=[$R[790]={type:"text",value:"import"}]},$R[791]={type:"element",tagName:"span",properties:$R[792]={style:"color:#666666"},children:$R[793]=[$R[794]={type:"text",value:" {"}]},$R[795]={type:"element",tagName:"span",properties:$R[796]={style:"color:#BD976A"},children:$R[797]=[$R[798]={type:"text",value:" molecule"}]},$R[799]={type:"element",tagName:"span",properties:$R[800]={style:"color:#666666"},children:$R[801]=[$R[802]={type:"text",value:" }"}]},$R[803]={type:"element",tagName:"span",properties:$R[804]={style:"color:#4D9375"},children:$R[805]=[$R[806]={type:"text",value:" from"}]},$R[807]={type:"element",tagName:"span",properties:$R[808]={style:"color:#C98A7D77"},children:$R[809]=[$R[810]={type:"text",value:" \""}]},$R[811]={type:"element",tagName:"span",properties:$R[812]={style:"color:#C98A7D"},children:$R[813]=[$R[814]={type:"text",value:"bunshi"}]},$R[815]={type:"element",tagName:"span",properties:$R[816]={style:"color:#C98A7D77"},children:$R[817]=[$R[818]={type:"text",value:"\""}]},$R[819]={type:"element",tagName:"span",properties:$R[820]={style:"color:#666666"},children:$R[821]=[$R[822]={type:"text",value:";"}]}]},token:$R[823]={type:"element",tagName:"span",properties:$R[824]={style:"color:#666666"},children:$R[825]=[$R[826]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[827]={children:$R[828]=[$R[829]={position:$R[830]={start:$R[831]={line:61,column:1,offset:1581},end:$R[832]={line:61,column:31,offset:1611}},type:"text",value:"依存は自動で解決されるため、コード保守やテストが容易になる。"}],position:$R[833]={start:$R[834]={line:61,column:1,offset:1581},end:$R[835]={line:61,column:31,offset:1611}},type:"paragraph"},$R[836]={children:$R[837]=[$R[838]={position:$R[839]={start:$R[840]={line:63,column:1,offset:1613},end:$R[841]={line:63,column:9,offset:1621}},type:"text",value:"ロジックなどを "},$R[842]={position:$R[843]={start:$R[844]={line:63,column:9,offset:1621},end:$R[845]={line:63,column:19,offset:1631}},type:"inlineCode",value:"molecule"},$R[846]={position:$R[847]={start:$R[848]={line:63,column:19,offset:1631},end:$R[849]={line:63,column:44,offset:1656}},type:"text",value:" に閉じ込めることでコードは非結合で遅延的となる。"}],position:$R[850]={start:$R[851]={line:63,column:1,offset:1613},end:$R[852]={line:63,column:44,offset:1656}},type:"paragraph"},$R[853]={children:$R[854]=[$R[855]={children:$R[856]=[$R[857]={children:$R[858]=[$R[859]={position:$R[860]={start:$R[861]={line:65,column:3,offset:1660},end:$R[862]={line:65,column:6,offset:1663}},type:"text",value:"非結合"}],position:$R[863]={start:$R[864]={line:65,column:3,offset:1660},end:$R[865]={line:65,column:6,offset:1663}},type:"paragraph"},$R[866]={children:$R[867]=[$R[868]={children:$R[869]=[$R[870]={children:$R[871]=[$R[872]={position:$R[873]={start:$R[874]={line:67,column:5,offset:1669},end:$R[875]={line:67,column:8,offset:1672}},type:"text",value:"ある "},$R[876]={position:$R[877]={start:$R[878]={line:67,column:8,offset:1672},end:$R[879]={line:67,column:18,offset:1682}},type:"inlineCode",value:"molecule"},$R[880]={position:$R[881]={start:$R[882]={line:67,column:18,offset:1682},end:$R[883]={line:67,column:35,offset:1699}},type:"text",value:" をリファクタリングする時、その "},$R[884]={position:$R[885]={start:$R[886]={line:67,column:35,offset:1699},end:$R[887]={line:67,column:45,offset:1709}},type:"inlineCode",value:"molecule"},$R[888]={position:$R[889]={start:$R[890]={line:67,column:45,offset:1709},end:$R[891]={line:67,column:54,offset:1718}},type:"text",value:" に依存する他の "},$R[892]={position:$R[893]={start:$R[894]={line:67,column:54,offset:1718},end:$R[895]={line:67,column:64,offset:1728}},type:"inlineCode",value:"molecule"},$R[896]={position:$R[897]={start:$R[898]={line:67,column:64,offset:1728},end:$R[899]={line:67,column:73,offset:1737}},type:"text",value:" に影響を与えない"}],position:$R[900]={start:$R[901]={line:67,column:5,offset:1669},end:$R[902]={line:67,column:73,offset:1737}},type:"paragraph"}],position:$R[903]={start:$R[904]={line:67,column:3,offset:1667},end:$R[905]={line:67,column:73,offset:1737}},type:"listItem"}],position:$R[906]={start:$R[907]={line:67,column:3,offset:1667},end:$R[908]={line:67,column:73,offset:1737}},type:"unorderedList"}],position:$R[909]={start:$R[910]={line:65,column:1,offset:1658},end:$R[911]={line:67,column:73,offset:1737}},type:"listItem"},$R[912]={children:$R[913]=[$R[914]={children:$R[915]=[$R[916]={position:$R[917]={start:$R[918]={line:69,column:3,offset:1741},end:$R[919]={line:69,column:6,offset:1744}},type:"text",value:"遅延的"}],position:$R[920]={start:$R[921]={line:69,column:3,offset:1741},end:$R[922]={line:69,column:6,offset:1744}},type:"paragraph"},$R[923]={children:$R[924]=[$R[925]={children:$R[926]=[$R[927]={children:$R[928]=[$R[929]={position:$R[930]={start:$R[931]={line:71,column:5,offset:1750},end:$R[932]={line:71,column:15,offset:1760}},type:"inlineCode",value:"molecule"},$R[933]={position:$R[934]={start:$R[935]={line:71,column:15,offset:1760},end:$R[936]={line:71,column:30,offset:1775}},type:"text",value:" は必要になるまで実行されない"}],position:$R[937]={start:$R[938]={line:71,column:5,offset:1750},end:$R[939]={line:71,column:30,offset:1775}},type:"paragraph"}],position:$R[940]={start:$R[941]={line:71,column:3,offset:1748},end:$R[942]={line:71,column:30,offset:1775}},type:"listItem"}],position:$R[943]={start:$R[944]={line:71,column:3,offset:1748},end:$R[945]={line:71,column:30,offset:1775}},type:"unorderedList"}],position:$R[946]={start:$R[947]={line:69,column:1,offset:1739},end:$R[948]={line:71,column:30,offset:1775}},type:"listItem"}],position:$R[949]={start:$R[950]={line:65,column:1,offset:1658},end:$R[951]={line:71,column:30,offset:1775}},type:"unorderedList"}],position:$R[952]={end:$R[953]={line:71,column:30,offset:1775},start:$R[954]={line:37,column:1,offset:1024}},type:"section"},$R[955]={children:$R[956]=[$R[957]={children:$R[958]=[$R[959]={position:$R[960]={start:$R[961]={line:73,column:5,offset:1781},end:$R[962]={line:73,column:10,offset:1786}},type:"text",value:"scope"}],id:"scope",level:3,plain:"scope",position:$R[963]={start:$R[964]={line:73,column:1,offset:1777},end:$R[965]={line:73,column:10,offset:1786}},type:"heading"},$R[966]={children:$R[967]=[$R[968]={position:$R[969]={start:$R[970]={line:75,column:1,offset:1788},end:$R[971]={line:75,column:8,offset:1795}},type:"inlineCode",value:"scope"},$R[972]={position:$R[973]={start:$R[974]={line:75,column:8,offset:1795},end:$R[975]={line:75,column:11,offset:1798}},type:"text",value:" は "},$R[976]={position:$R[977]={start:$R[978]={line:75,column:11,offset:1798},end:$R[979]={line:75,column:21,offset:1808}},type:"inlineCode",value:"molecule"},$R[980]={position:$R[981]={start:$R[982]={line:75,column:21,offset:1808},end:$R[983]={line:75,column:71,offset:1858}},type:"text",value:" を異なるコンポーネントで共通の環境を共有して使うための依存関係のグラフを構築するための概念である。"}],position:$R[984]={start:$R[985]={line:75,column:1,offset:1788},end:$R[986]={line:75,column:71,offset:1858}},type:"paragraph"},$R[987]={children:$R[988]=[$R[989]={position:$R[990]={start:$R[991]={line:77,column:1,offset:1860},end:$R[992]={line:77,column:14,offset:1873}},type:"inlineCode",value:"createScope"},$R[993]={position:$R[994]={start:$R[995]={line:77,column:14,offset:1873},end:$R[996]={line:77,column:22,offset:1881}},type:"text",value:" 関数を使って "},$R[997]={position:$R[998]={start:$R[999]={line:77,column:22,offset:1881},end:$R[1000]={line:77,column:29,offset:1888}},type:"inlineCode",value:"scope"},$R[1001]={position:$R[1002]={start:$R[1003]={line:77,column:29,offset:1888},end:$R[1004]={line:77,column:36,offset:1895}},type:"text",value:" を作成する。"}],position:$R[1005]={start:$R[1006]={line:77,column:1,offset:1860},end:$R[1007]={line:77,column:36,offset:1895}},type:"paragraph"},$R[1008]={filename:"sample.ts ts",lang:"ts",position:$R[1009]={start:$R[1010]={line:79,column:1,offset:1897},end:$R[1011]={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[1012]={type:"root",children:$R[1013]=[$R[1014]={type:"element",tagName:"pre",properties:$R[1015]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[1016]=[$R[1017]={type:"element",tagName:"code",properties:$R[1018]={},children:$R[1019]=[$R[1020]={type:"element",tagName:"span",properties:$R[1021]={class:"line"},children:$R[1022]=[$R[1023]={type:"element",tagName:"span",properties:$R[1024]={style:"color:#4D9375"},children:$R[1025]=[$R[1026]={type:"text",value:"import"}]},$R[1027]={type:"element",tagName:"span",properties:$R[1028]={style:"color:#666666"},children:$R[1029]=[$R[1030]={type:"text",value:" {"}]},$R[1031]={type:"element",tagName:"span",properties:$R[1032]={style:"color:#BD976A"},children:$R[1033]=[$R[1034]={type:"text",value:" createScope"}]},$R[1035]={type:"element",tagName:"span",properties:$R[1036]={style:"color:#666666"},children:$R[1037]=[$R[1038]={type:"text",value:" }"}]},$R[1039]={type:"element",tagName:"span",properties:$R[1040]={style:"color:#4D9375"},children:$R[1041]=[$R[1042]={type:"text",value:" from"}]},$R[1043]={type:"element",tagName:"span",properties:$R[1044]={style:"color:#C98A7D77"},children:$R[1045]=[$R[1046]={type:"text",value:" \""}]},$R[1047]={type:"element",tagName:"span",properties:$R[1048]={style:"color:#C98A7D"},children:$R[1049]=[$R[1050]={type:"text",value:"bunshi"}]},$R[1051]={type:"element",tagName:"span",properties:$R[1052]={style:"color:#C98A7D77"},children:$R[1053]=[$R[1054]={type:"text",value:"\""}]},$R[1055]={type:"element",tagName:"span",properties:$R[1056]={style:"color:#666666"},children:$R[1057]=[$R[1058]={type:"text",value:";"}]}]},$R[1059]={type:"text",value:"\n"},$R[1060]={type:"element",tagName:"span",properties:$R[1061]={class:"line"},children:$R[1062]=[]},$R[1063]={type:"text",value:"\n"},$R[1064]={type:"element",tagName:"span",properties:$R[1065]={class:"line"},children:$R[1066]=[$R[1067]={type:"element",tagName:"span",properties:$R[1068]={style:"color:#758575DD"},children:$R[1069]=[$R[1070]={type:"text",value:"/**"}]}]},$R[1071]={type:"text",value:"\n"},$R[1072]={type:"element",tagName:"span",properties:$R[1073]={class:"line"},children:$R[1074]=[$R[1075]={type:"element",tagName:"span",properties:$R[1076]={style:"color:#758575DD"},children:$R[1077]=[$R[1078]={type:"text",value:" * Scope for a user id"}]}]},$R[1079]={type:"text",value:"\n"},$R[1080]={type:"element",tagName:"span",properties:$R[1081]={class:"line"},children:$R[1082]=[$R[1083]={type:"element",tagName:"span",properties:$R[1084]={style:"color:#758575DD"},children:$R[1085]=[$R[1086]={type:"text",value:" */"}]}]},$R[1087]={type:"text",value:"\n"},$R[1088]={type:"element",tagName:"span",properties:$R[1089]={class:"line"},children:$R[1090]=[$R[1091]={type:"element",tagName:"span",properties:$R[1092]={style:"color:#4D9375"},children:$R[1093]=[$R[1094]={type:"text",value:"export"}]},$R[1095]={type:"element",tagName:"span",properties:$R[1096]={style:"color:#CB7676"},children:$R[1097]=[$R[1098]={type:"text",value:" const "}]},$R[1099]={type:"element",tagName:"span",properties:$R[1100]={style:"color:#BD976A"},children:$R[1101]=[$R[1102]={type:"text",value:"UserScope"}]},$R[1103]={type:"element",tagName:"span",properties:$R[1104]={style:"color:#666666"},children:$R[1105]=[$R[1106]={type:"text",value:" ="}]},$R[1107]={type:"element",tagName:"span",properties:$R[1108]={style:"color:#80A665"},children:$R[1109]=[$R[1110]={type:"text",value:" createScope"}]},$R[1111]={type:"element",tagName:"span",properties:$R[1112]={style:"color:#666666"},children:$R[1113]=[$R[1114]={type:"text",value:"\x3C"}]},$R[1115]={type:"element",tagName:"span",properties:$R[1116]={style:"color:#5DA994"},children:$R[1117]=[$R[1118]={type:"text",value:"string"}]},$R[1119]={type:"element",tagName:"span",properties:$R[1120]={style:"color:#666666"},children:$R[1121]=[$R[1122]={type:"text",value:">("}]},$R[1123]={type:"element",tagName:"span",properties:$R[1124]={style:"color:#C98A7D77"},children:$R[1125]=[$R[1126]={type:"text",value:"\""}]},$R[1127]={type:"element",tagName:"span",properties:$R[1128]={style:"color:#C98A7D"},children:$R[1129]=[$R[1130]={type:"text",value:"alice@example.com"}]},$R[1131]={type:"element",tagName:"span",properties:$R[1132]={style:"color:#C98A7D77"},children:$R[1133]=[$R[1134]={type:"text",value:"\""}]},$R[1135]={type:"element",tagName:"span",properties:$R[1136]={style:"color:#666666"},children:$R[1137]=[$R[1138]={type:"text",value:");"}]}]}],data:$R[1139]={_shiki_notation:$R[1140]=[$R[1141]={info:$R[1142]=[";","",void 0],line:$R[1143]={type:"element",tagName:"span",properties:$R[1144]={class:"line"},children:$R[1145]=[$R[1146]={type:"element",tagName:"span",properties:$R[1147]={style:"color:#4D9375"},children:$R[1148]=[$R[1149]={type:"text",value:"import"}]},$R[1150]={type:"element",tagName:"span",properties:$R[1151]={style:"color:#666666"},children:$R[1152]=[$R[1153]={type:"text",value:" {"}]},$R[1154]={type:"element",tagName:"span",properties:$R[1155]={style:"color:#BD976A"},children:$R[1156]=[$R[1157]={type:"text",value:" createScope"}]},$R[1158]={type:"element",tagName:"span",properties:$R[1159]={style:"color:#666666"},children:$R[1160]=[$R[1161]={type:"text",value:" }"}]},$R[1162]={type:"element",tagName:"span",properties:$R[1163]={style:"color:#4D9375"},children:$R[1164]=[$R[1165]={type:"text",value:" from"}]},$R[1166]={type:"element",tagName:"span",properties:$R[1167]={style:"color:#C98A7D77"},children:$R[1168]=[$R[1169]={type:"text",value:" \""}]},$R[1170]={type:"element",tagName:"span",properties:$R[1171]={style:"color:#C98A7D"},children:$R[1172]=[$R[1173]={type:"text",value:"bunshi"}]},$R[1174]={type:"element",tagName:"span",properties:$R[1175]={style:"color:#C98A7D77"},children:$R[1176]=[$R[1177]={type:"text",value:"\""}]},$R[1178]={type:"element",tagName:"span",properties:$R[1179]={style:"color:#666666"},children:$R[1180]=[$R[1181]={type:"text",value:";"}]}]},token:$R[1182]={type:"element",tagName:"span",properties:$R[1183]={style:"color:#666666"},children:$R[1184]=[$R[1185]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[1186]={info:$R[1187]=[" *"," Scope for a user id",void 0],line:$R[1188]={type:"element",tagName:"span",properties:$R[1189]={class:"line"},children:$R[1190]=[$R[1191]={type:"element",tagName:"span",properties:$R[1192]={style:"color:#758575DD"},children:$R[1193]=[$R[1194]={type:"text",value:" * Scope for a user id"}]}]},token:$R[1195]={type:"element",tagName:"span",properties:$R[1196]={style:"color:#758575DD"},children:$R[1197]=[$R[1198]={type:"text",value:" * Scope for a user id"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[1199]={info:$R[1200]=[" *","/",void 0],line:$R[1201]={type:"element",tagName:"span",properties:$R[1202]={class:"line"},children:$R[1203]=[$R[1204]={type:"element",tagName:"span",properties:$R[1205]={style:"color:#758575DD"},children:$R[1206]=[$R[1207]={type:"text",value:" */"}]}]},token:$R[1208]={type:"element",tagName:"span",properties:$R[1209]={style:"color:#758575DD"},children:$R[1210]=[$R[1211]={type:"text",value:" */"}]},isLineCommentOnly:!0,isJsxStyle:!1}]}}]}]}},$R[1212]={children:$R[1213]=[$R[1214]={position:$R[1215]={start:$R[1216]={line:88,column:1,offset:2056},end:$R[1217]={line:88,column:6,offset:2061}},type:"text",value:"宣言した "},$R[1218]={position:$R[1219]={start:$R[1220]={line:88,column:6,offset:2061},end:$R[1221]={line:88,column:13,offset:2068}},type:"inlineCode",value:"scope"},$R[1222]={position:$R[1223]={start:$R[1224]={line:88,column:13,offset:2068},end:$R[1225]={line:88,column:47,offset:2102}},type:"text",value:" はフレームワークによって異なる方法でプロバイダーを提供する。私は "},$R[1226]={position:$R[1227]={start:$R[1228]={line:88,column:47,offset:2102},end:$R[1229]={line:88,column:54,offset:2109}},type:"inlineCode",value:"React"},$R[1230]={position:$R[1231]={start:$R[1232]={line:88,column:54,offset:2109},end:$R[1233]={line:88,column:64,offset:2119}},type:"text",value:" を使っているので、"},$R[1234]={position:$R[1235]={start:$R[1236]={line:88,column:64,offset:2119},end:$R[1237]={line:88,column:71,offset:2126}},type:"inlineCode",value:"React"},$R[1238]={position:$R[1239]={start:$R[1240]={line:88,column:71,offset:2126},end:$R[1241]={line:88,column:89,offset:2144}},type:"text",value:" でのプロバイダーの提供方法を示す。"}],position:$R[1242]={start:$R[1243]={line:88,column:1,offset:2056},end:$R[1244]={line:88,column:89,offset:2144}},type:"paragraph"},$R[1245]={filename:"sample.tsx tsx",lang:"tsx",position:$R[1246]={start:$R[1247]={line:90,column:1,offset:2146},end:$R[1248]={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[1249]={type:"root",children:$R[1250]=[$R[1251]={type:"element",tagName:"pre",properties:$R[1252]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[1253]=[$R[1254]={type:"element",tagName:"code",properties:$R[1255]={},children:$R[1256]=[$R[1257]={type:"element",tagName:"span",properties:$R[1258]={class:"line"},children:$R[1259]=[$R[1260]={type:"element",tagName:"span",properties:$R[1261]={style:"color:#4D9375"},children:$R[1262]=[$R[1263]={type:"text",value:"import"}]},$R[1264]={type:"element",tagName:"span",properties:$R[1265]={style:"color:#666666"},children:$R[1266]=[$R[1267]={type:"text",value:" {"}]},$R[1268]={type:"element",tagName:"span",properties:$R[1269]={style:"color:#BD976A"},children:$R[1270]=[$R[1271]={type:"text",value:" ScopeProvider"}]},$R[1272]={type:"element",tagName:"span",properties:$R[1273]={style:"color:#666666"},children:$R[1274]=[$R[1275]={type:"text",value:" }"}]},$R[1276]={type:"element",tagName:"span",properties:$R[1277]={style:"color:#4D9375"},children:$R[1278]=[$R[1279]={type:"text",value:" from"}]},$R[1280]={type:"element",tagName:"span",properties:$R[1281]={style:"color:#C98A7D77"},children:$R[1282]=[$R[1283]={type:"text",value:" \""}]},$R[1284]={type:"element",tagName:"span",properties:$R[1285]={style:"color:#C98A7D"},children:$R[1286]=[$R[1287]={type:"text",value:"bunshi/react"}]},$R[1288]={type:"element",tagName:"span",properties:$R[1289]={style:"color:#C98A7D77"},children:$R[1290]=[$R[1291]={type:"text",value:"\""}]},$R[1292]={type:"element",tagName:"span",properties:$R[1293]={style:"color:#666666"},children:$R[1294]=[$R[1295]={type:"text",value:";"}]}]},$R[1296]={type:"text",value:"\n"},$R[1297]={type:"element",tagName:"span",properties:$R[1298]={class:"line"},children:$R[1299]=[$R[1300]={type:"element",tagName:"span",properties:$R[1301]={style:"color:#4D9375"},children:$R[1302]=[$R[1303]={type:"text",value:"import"}]},$R[1304]={type:"element",tagName:"span",properties:$R[1305]={style:"color:#4D9375"},children:$R[1306]=[$R[1307]={type:"text",value:" type"}]},$R[1308]={type:"element",tagName:"span",properties:$R[1309]={style:"color:#666666"},children:$R[1310]=[$R[1311]={type:"text",value:" {"}]},$R[1312]={type:"element",tagName:"span",properties:$R[1313]={style:"color:#BD976A"},children:$R[1314]=[$R[1315]={type:"text",value:" ReactElement"}]},$R[1316]={type:"element",tagName:"span",properties:$R[1317]={style:"color:#666666"},children:$R[1318]=[$R[1319]={type:"text",value:" }"}]},$R[1320]={type:"element",tagName:"span",properties:$R[1321]={style:"color:#4D9375"},children:$R[1322]=[$R[1323]={type:"text",value:" from"}]},$R[1324]={type:"element",tagName:"span",properties:$R[1325]={style:"color:#C98A7D77"},children:$R[1326]=[$R[1327]={type:"text",value:" \""}]},$R[1328]={type:"element",tagName:"span",properties:$R[1329]={style:"color:#C98A7D"},children:$R[1330]=[$R[1331]={type:"text",value:"react"}]},$R[1332]={type:"element",tagName:"span",properties:$R[1333]={style:"color:#C98A7D77"},children:$R[1334]=[$R[1335]={type:"text",value:"\""}]},$R[1336]={type:"element",tagName:"span",properties:$R[1337]={style:"color:#666666"},children:$R[1338]=[$R[1339]={type:"text",value:";"}]}]},$R[1340]={type:"text",value:"\n"},$R[1341]={type:"element",tagName:"span",properties:$R[1342]={class:"line"},children:$R[1343]=[]},$R[1344]={type:"text",value:"\n"},$R[1345]={type:"element",tagName:"span",properties:$R[1346]={class:"line"},children:$R[1347]=[$R[1348]={type:"element",tagName:"span",properties:$R[1349]={style:"color:#4D9375"},children:$R[1350]=[$R[1351]={type:"text",value:"import"}]},$R[1352]={type:"element",tagName:"span",properties:$R[1353]={style:"color:#666666"},children:$R[1354]=[$R[1355]={type:"text",value:" {"}]},$R[1356]={type:"element",tagName:"span",properties:$R[1357]={style:"color:#BD976A"},children:$R[1358]=[$R[1359]={type:"text",value:" UserScope"}]},$R[1360]={type:"element",tagName:"span",properties:$R[1361]={style:"color:#666666"},children:$R[1362]=[$R[1363]={type:"text",value:" }"}]},$R[1364]={type:"element",tagName:"span",properties:$R[1365]={style:"color:#4D9375"},children:$R[1366]=[$R[1367]={type:"text",value:" from"}]},$R[1368]={type:"element",tagName:"span",properties:$R[1369]={style:"color:#C98A7D77"},children:$R[1370]=[$R[1371]={type:"text",value:" \""}]},$R[1372]={type:"element",tagName:"span",properties:$R[1373]={style:"color:#C98A7D"},children:$R[1374]=[$R[1375]={type:"text",value:"./scopes"}]},$R[1376]={type:"element",tagName:"span",properties:$R[1377]={style:"color:#C98A7D77"},children:$R[1378]=[$R[1379]={type:"text",value:"\""}]},$R[1380]={type:"element",tagName:"span",properties:$R[1381]={style:"color:#666666"},children:$R[1382]=[$R[1383]={type:"text",value:";"}]}]},$R[1384]={type:"text",value:"\n"},$R[1385]={type:"element",tagName:"span",properties:$R[1386]={class:"line"},children:$R[1387]=[]},$R[1388]={type:"text",value:"\n"},$R[1389]={type:"element",tagName:"span",properties:$R[1390]={class:"line"},children:$R[1391]=[$R[1392]={type:"element",tagName:"span",properties:$R[1393]={style:"color:#4D9375"},children:$R[1394]=[$R[1395]={type:"text",value:"export"}]},$R[1396]={type:"element",tagName:"span",properties:$R[1397]={style:"color:#CB7676"},children:$R[1398]=[$R[1399]={type:"text",value:" function"}]},$R[1400]={type:"element",tagName:"span",properties:$R[1401]={style:"color:#80A665"},children:$R[1402]=[$R[1403]={type:"text",value:" App"}]},$R[1404]={type:"element",tagName:"span",properties:$R[1405]={style:"color:#666666"},children:$R[1406]=[$R[1407]={type:"text",value:"({"}]},$R[1408]={type:"element",tagName:"span",properties:$R[1409]={style:"color:#BD976A"},children:$R[1410]=[$R[1411]={type:"text",value:" children"}]},$R[1412]={type:"element",tagName:"span",properties:$R[1413]={style:"color:#666666"},children:$R[1414]=[$R[1415]={type:"text",value:" }: "}]},$R[1416]={type:"element",tagName:"span",properties:$R[1417]={style:"color:#5DA994"},children:$R[1418]=[$R[1419]={type:"text",value:"Props"}]},$R[1420]={type:"element",tagName:"span",properties:$R[1421]={style:"color:#666666"},children:$R[1422]=[$R[1423]={type:"text",value:"):"}]},$R[1424]={type:"element",tagName:"span",properties:$R[1425]={style:"color:#5DA994"},children:$R[1426]=[$R[1427]={type:"text",value:" ReactElement"}]},$R[1428]={type:"element",tagName:"span",properties:$R[1429]={style:"color:#666666"},children:$R[1430]=[$R[1431]={type:"text",value:" {"}]}]},$R[1432]={type:"text",value:"\n"},$R[1433]={type:"element",tagName:"span",properties:$R[1434]={class:"line"},children:$R[1435]=[$R[1436]={type:"element",tagName:"span",properties:$R[1437]={style:"color:#4D9375"},children:$R[1438]=[$R[1439]={type:"text",value:"\treturn"}]},$R[1440]={type:"element",tagName:"span",properties:$R[1441]={style:"color:#666666"},children:$R[1442]=[$R[1443]={type:"text",value:" ("}]}]},$R[1444]={type:"text",value:"\n"},$R[1445]={type:"element",tagName:"span",properties:$R[1446]={class:"line"},children:$R[1447]=[$R[1448]={type:"element",tagName:"span",properties:$R[1449]={style:"color:#666666"},children:$R[1450]=[$R[1451]={type:"text",value:"\t\t\x3C"}]},$R[1452]={type:"element",tagName:"span",properties:$R[1453]={style:"color:#B8A965"},children:$R[1454]=[$R[1455]={type:"text",value:"ScopeProvider"}]},$R[1456]={type:"element",tagName:"span",properties:$R[1457]={style:"color:#BD976A"},children:$R[1458]=[$R[1459]={type:"text",value:" scope"}]},$R[1460]={type:"element",tagName:"span",properties:$R[1461]={style:"color:#666666"},children:$R[1462]=[$R[1463]={type:"text",value:"={"}]},$R[1464]={type:"element",tagName:"span",properties:$R[1465]={style:"color:#BD976A"},children:$R[1466]=[$R[1467]={type:"text",value:"UserScope"}]},$R[1468]={type:"element",tagName:"span",properties:$R[1469]={style:"color:#666666"},children:$R[1470]=[$R[1471]={type:"text",value:"}>"}]}]},$R[1472]={type:"text",value:"\n"},$R[1473]={type:"element",tagName:"span",properties:$R[1474]={class:"line"},children:$R[1475]=[$R[1476]={type:"element",tagName:"span",properties:$R[1477]={style:"color:#666666"},children:$R[1478]=[$R[1479]={type:"text",value:"\t\t\t{"}]},$R[1480]={type:"element",tagName:"span",properties:$R[1481]={style:"color:#BD976A"},children:$R[1482]=[$R[1483]={type:"text",value:"children"}]},$R[1484]={type:"element",tagName:"span",properties:$R[1485]={style:"color:#666666"},children:$R[1486]=[$R[1487]={type:"text",value:"}"}]}]},$R[1488]={type:"text",value:"\n"},$R[1489]={type:"element",tagName:"span",properties:$R[1490]={class:"line"},children:$R[1491]=[$R[1492]={type:"element",tagName:"span",properties:$R[1493]={style:"color:#666666"},children:$R[1494]=[$R[1495]={type:"text",value:"\t\t\x3C/"}]},$R[1496]={type:"element",tagName:"span",properties:$R[1497]={style:"color:#B8A965"},children:$R[1498]=[$R[1499]={type:"text",value:"ScopeProvider"}]},$R[1500]={type:"element",tagName:"span",properties:$R[1501]={style:"color:#666666"},children:$R[1502]=[$R[1503]={type:"text",value:">"}]}]},$R[1504]={type:"text",value:"\n"},$R[1505]={type:"element",tagName:"span",properties:$R[1506]={class:"line"},children:$R[1507]=[$R[1508]={type:"element",tagName:"span",properties:$R[1509]={style:"color:#666666"},children:$R[1510]=[$R[1511]={type:"text",value:"\t);"}]}]},$R[1512]={type:"text",value:"\n"},$R[1513]={type:"element",tagName:"span",properties:$R[1514]={class:"line"},children:$R[1515]=[$R[1516]={type:"element",tagName:"span",properties:$R[1517]={style:"color:#666666"},children:$R[1518]=[$R[1519]={type:"text",value:"}"}]}]}],data:$R[1520]={_shiki_notation:$R[1521]=[$R[1522]={info:$R[1523]=[";","",void 0],line:$R[1524]={type:"element",tagName:"span",properties:$R[1525]={class:"line"},children:$R[1526]=[$R[1527]={type:"element",tagName:"span",properties:$R[1528]={style:"color:#4D9375"},children:$R[1529]=[$R[1530]={type:"text",value:"import"}]},$R[1531]={type:"element",tagName:"span",properties:$R[1532]={style:"color:#666666"},children:$R[1533]=[$R[1534]={type:"text",value:" {"}]},$R[1535]={type:"element",tagName:"span",properties:$R[1536]={style:"color:#BD976A"},children:$R[1537]=[$R[1538]={type:"text",value:" ScopeProvider"}]},$R[1539]={type:"element",tagName:"span",properties:$R[1540]={style:"color:#666666"},children:$R[1541]=[$R[1542]={type:"text",value:" }"}]},$R[1543]={type:"element",tagName:"span",properties:$R[1544]={style:"color:#4D9375"},children:$R[1545]=[$R[1546]={type:"text",value:" from"}]},$R[1547]={type:"element",tagName:"span",properties:$R[1548]={style:"color:#C98A7D77"},children:$R[1549]=[$R[1550]={type:"text",value:" \""}]},$R[1551]={type:"element",tagName:"span",properties:$R[1552]={style:"color:#C98A7D"},children:$R[1553]=[$R[1554]={type:"text",value:"bunshi/react"}]},$R[1555]={type:"element",tagName:"span",properties:$R[1556]={style:"color:#C98A7D77"},children:$R[1557]=[$R[1558]={type:"text",value:"\""}]},$R[1559]={type:"element",tagName:"span",properties:$R[1560]={style:"color:#666666"},children:$R[1561]=[$R[1562]={type:"text",value:";"}]}]},token:$R[1563]={type:"element",tagName:"span",properties:$R[1564]={style:"color:#666666"},children:$R[1565]=[$R[1566]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[1567]={info:$R[1568]=[";","",void 0],line:$R[1569]={type:"element",tagName:"span",properties:$R[1570]={class:"line"},children:$R[1571]=[$R[1572]={type:"element",tagName:"span",properties:$R[1573]={style:"color:#4D9375"},children:$R[1574]=[$R[1575]={type:"text",value:"import"}]},$R[1576]={type:"element",tagName:"span",properties:$R[1577]={style:"color:#4D9375"},children:$R[1578]=[$R[1579]={type:"text",value:" type"}]},$R[1580]={type:"element",tagName:"span",properties:$R[1581]={style:"color:#666666"},children:$R[1582]=[$R[1583]={type:"text",value:" {"}]},$R[1584]={type:"element",tagName:"span",properties:$R[1585]={style:"color:#BD976A"},children:$R[1586]=[$R[1587]={type:"text",value:" ReactElement"}]},$R[1588]={type:"element",tagName:"span",properties:$R[1589]={style:"color:#666666"},children:$R[1590]=[$R[1591]={type:"text",value:" }"}]},$R[1592]={type:"element",tagName:"span",properties:$R[1593]={style:"color:#4D9375"},children:$R[1594]=[$R[1595]={type:"text",value:" from"}]},$R[1596]={type:"element",tagName:"span",properties:$R[1597]={style:"color:#C98A7D77"},children:$R[1598]=[$R[1599]={type:"text",value:" \""}]},$R[1600]={type:"element",tagName:"span",properties:$R[1601]={style:"color:#C98A7D"},children:$R[1602]=[$R[1603]={type:"text",value:"react"}]},$R[1604]={type:"element",tagName:"span",properties:$R[1605]={style:"color:#C98A7D77"},children:$R[1606]=[$R[1607]={type:"text",value:"\""}]},$R[1608]={type:"element",tagName:"span",properties:$R[1609]={style:"color:#666666"},children:$R[1610]=[$R[1611]={type:"text",value:";"}]}]},token:$R[1612]={type:"element",tagName:"span",properties:$R[1613]={style:"color:#666666"},children:$R[1614]=[$R[1615]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[1616]={info:$R[1617]=[";","",void 0],line:$R[1618]={type:"element",tagName:"span",properties:$R[1619]={class:"line"},children:$R[1620]=[$R[1621]={type:"element",tagName:"span",properties:$R[1622]={style:"color:#4D9375"},children:$R[1623]=[$R[1624]={type:"text",value:"import"}]},$R[1625]={type:"element",tagName:"span",properties:$R[1626]={style:"color:#666666"},children:$R[1627]=[$R[1628]={type:"text",value:" {"}]},$R[1629]={type:"element",tagName:"span",properties:$R[1630]={style:"color:#BD976A"},children:$R[1631]=[$R[1632]={type:"text",value:" UserScope"}]},$R[1633]={type:"element",tagName:"span",properties:$R[1634]={style:"color:#666666"},children:$R[1635]=[$R[1636]={type:"text",value:" }"}]},$R[1637]={type:"element",tagName:"span",properties:$R[1638]={style:"color:#4D9375"},children:$R[1639]=[$R[1640]={type:"text",value:" from"}]},$R[1641]={type:"element",tagName:"span",properties:$R[1642]={style:"color:#C98A7D77"},children:$R[1643]=[$R[1644]={type:"text",value:" \""}]},$R[1645]={type:"element",tagName:"span",properties:$R[1646]={style:"color:#C98A7D"},children:$R[1647]=[$R[1648]={type:"text",value:"./scopes"}]},$R[1649]={type:"element",tagName:"span",properties:$R[1650]={style:"color:#C98A7D77"},children:$R[1651]=[$R[1652]={type:"text",value:"\""}]},$R[1653]={type:"element",tagName:"span",properties:$R[1654]={style:"color:#666666"},children:$R[1655]=[$R[1656]={type:"text",value:";"}]}]},token:$R[1657]={type:"element",tagName:"span",properties:$R[1658]={style:"color:#666666"},children:$R[1659]=[$R[1660]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[1661]={children:$R[1662]=[$R[1663]={position:$R[1664]={start:$R[1665]={line:105,column:1,offset:2440},end:$R[1666]={line:105,column:8,offset:2447}},type:"inlineCode",value:"scope"},$R[1667]={position:$R[1668]={start:$R[1669]={line:105,column:8,offset:2447},end:$R[1670]={line:105,column:14,offset:2453}},type:"text",value:" の真価は、"},$R[1671]={position:$R[1672]={start:$R[1673]={line:105,column:14,offset:2453},end:$R[1674]={line:105,column:24,offset:2463}},type:"inlineCode",value:"molecule"},$R[1675]={position:$R[1676]={start:$R[1677]={line:105,column:24,offset:2463},end:$R[1678]={line:105,column:27,offset:2466}},type:"text",value:" を "},$R[1679]={position:$R[1680]={start:$R[1681]={line:105,column:27,offset:2466},end:$R[1682]={line:105,column:34,offset:2473}},type:"inlineCode",value:"scope"},$R[1683]={position:$R[1684]={start:$R[1685]={line:105,column:34,offset:2473},end:$R[1686]={line:105,column:49,offset:2488}},type:"text",value:" に依存させることで発揮する。"}],position:$R[1687]={start:$R[1688]={line:105,column:1,offset:2440},end:$R[1689]={line:105,column:49,offset:2488}},type:"paragraph"},$R[1690]={filename:"sample.ts ts",lang:"ts",position:$R[1691]={start:$R[1692]={line:107,column:1,offset:2490},end:$R[1693]={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[1694]={type:"root",children:$R[1695]=[$R[1696]={type:"element",tagName:"pre",properties:$R[1697]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[1698]=[$R[1699]={type:"element",tagName:"code",properties:$R[1700]={},children:$R[1701]=[$R[1702]={type:"element",tagName:"span",properties:$R[1703]={class:"line"},children:$R[1704]=[$R[1705]={type:"element",tagName:"span",properties:$R[1706]={style:"color:#4D9375"},children:$R[1707]=[$R[1708]={type:"text",value:"import"}]},$R[1709]={type:"element",tagName:"span",properties:$R[1710]={style:"color:#666666"},children:$R[1711]=[$R[1712]={type:"text",value:" {"}]},$R[1713]={type:"element",tagName:"span",properties:$R[1714]={style:"color:#BD976A"},children:$R[1715]=[$R[1716]={type:"text",value:" molecule"}]},$R[1717]={type:"element",tagName:"span",properties:$R[1718]={style:"color:#666666"},children:$R[1719]=[$R[1720]={type:"text",value:" }"}]},$R[1721]={type:"element",tagName:"span",properties:$R[1722]={style:"color:#4D9375"},children:$R[1723]=[$R[1724]={type:"text",value:" from"}]},$R[1725]={type:"element",tagName:"span",properties:$R[1726]={style:"color:#C98A7D77"},children:$R[1727]=[$R[1728]={type:"text",value:" \""}]},$R[1729]={type:"element",tagName:"span",properties:$R[1730]={style:"color:#C98A7D"},children:$R[1731]=[$R[1732]={type:"text",value:"bunshi"}]},$R[1733]={type:"element",tagName:"span",properties:$R[1734]={style:"color:#C98A7D77"},children:$R[1735]=[$R[1736]={type:"text",value:"\""}]},$R[1737]={type:"element",tagName:"span",properties:$R[1738]={style:"color:#666666"},children:$R[1739]=[$R[1740]={type:"text",value:";"}]}]},$R[1741]={type:"text",value:"\n"},$R[1742]={type:"element",tagName:"span",properties:$R[1743]={class:"line"},children:$R[1744]=[$R[1745]={type:"element",tagName:"span",properties:$R[1746]={style:"color:#4D9375"},children:$R[1747]=[$R[1748]={type:"text",value:"import"}]},$R[1749]={type:"element",tagName:"span",properties:$R[1750]={style:"color:#666666"},children:$R[1751]=[$R[1752]={type:"text",value:" {"}]},$R[1753]={type:"element",tagName:"span",properties:$R[1754]={style:"color:#BD976A"},children:$R[1755]=[$R[1756]={type:"text",value:" UserScope"}]},$R[1757]={type:"element",tagName:"span",properties:$R[1758]={style:"color:#666666"},children:$R[1759]=[$R[1760]={type:"text",value:" }"}]},$R[1761]={type:"element",tagName:"span",properties:$R[1762]={style:"color:#4D9375"},children:$R[1763]=[$R[1764]={type:"text",value:" from"}]},$R[1765]={type:"element",tagName:"span",properties:$R[1766]={style:"color:#C98A7D77"},children:$R[1767]=[$R[1768]={type:"text",value:" \""}]},$R[1769]={type:"element",tagName:"span",properties:$R[1770]={style:"color:#C98A7D"},children:$R[1771]=[$R[1772]={type:"text",value:"./scopes"}]},$R[1773]={type:"element",tagName:"span",properties:$R[1774]={style:"color:#C98A7D77"},children:$R[1775]=[$R[1776]={type:"text",value:"\""}]},$R[1777]={type:"element",tagName:"span",properties:$R[1778]={style:"color:#666666"},children:$R[1779]=[$R[1780]={type:"text",value:";"}]}]},$R[1781]={type:"text",value:"\n"},$R[1782]={type:"element",tagName:"span",properties:$R[1783]={class:"line"},children:$R[1784]=[]},$R[1785]={type:"text",value:"\n"},$R[1786]={type:"element",tagName:"span",properties:$R[1787]={class:"line"},children:$R[1788]=[$R[1789]={type:"element",tagName:"span",properties:$R[1790]={style:"color:#4D9375"},children:$R[1791]=[$R[1792]={type:"text",value:"export"}]},$R[1793]={type:"element",tagName:"span",properties:$R[1794]={style:"color:#CB7676"},children:$R[1795]=[$R[1796]={type:"text",value:" const "}]},$R[1797]={type:"element",tagName:"span",properties:$R[1798]={style:"color:#BD976A"},children:$R[1799]=[$R[1800]={type:"text",value:"UsernameMolecule"}]},$R[1801]={type:"element",tagName:"span",properties:$R[1802]={style:"color:#666666"},children:$R[1803]=[$R[1804]={type:"text",value:" ="}]},$R[1805]={type:"element",tagName:"span",properties:$R[1806]={style:"color:#80A665"},children:$R[1807]=[$R[1808]={type:"text",value:" molecule"}]},$R[1809]={type:"element",tagName:"span",properties:$R[1810]={style:"color:#666666"},children:$R[1811]=[$R[1812]={type:"text",value:"("}]}]},$R[1813]={type:"text",value:"\n"},$R[1814]={type:"element",tagName:"span",properties:$R[1815]={class:"line"},children:$R[1816]=[$R[1817]={type:"element",tagName:"span",properties:$R[1818]={style:"color:#666666"},children:$R[1819]=[$R[1820]={type:"text",value:"\t("}]},$R[1821]={type:"element",tagName:"span",properties:$R[1822]={style:"color:#BD976A"},children:$R[1823]=[$R[1824]={type:"text",value:"_mol"}]},$R[1825]={type:"element",tagName:"span",properties:$R[1826]={style:"color:#666666"},children:$R[1827]=[$R[1828]={type:"text",value:","}]},$R[1829]={type:"element",tagName:"span",properties:$R[1830]={style:"color:#BD976A"},children:$R[1831]=[$R[1832]={type:"text",value:" scope"}]},$R[1833]={type:"element",tagName:"span",properties:$R[1834]={style:"color:#666666"},children:$R[1835]=[$R[1836]={type:"text",value:")"}]},$R[1837]={type:"element",tagName:"span",properties:$R[1838]={style:"color:#666666"},children:$R[1839]=[$R[1840]={type:"text",value:" =>"}]},$R[1841]={type:"element",tagName:"span",properties:$R[1842]={style:"color:#C98A7D77"},children:$R[1843]=[$R[1844]={type:"text",value:" `"}]},$R[1845]={type:"element",tagName:"span",properties:$R[1846]={style:"color:#C98A7D"},children:$R[1847]=[$R[1848]={type:"text",value:"You are user "}]},$R[1849]={type:"element",tagName:"span",properties:$R[1850]={style:"color:#4D9375"},children:$R[1851]=[$R[1852]={type:"text",value:"${"}]},$R[1853]={type:"element",tagName:"span",properties:$R[1854]={style:"color:#80A665"},children:$R[1855]=[$R[1856]={type:"text",value:"scope"}]},$R[1857]={type:"element",tagName:"span",properties:$R[1858]={style:"color:#666666"},children:$R[1859]=[$R[1860]={type:"text",value:"("}]},$R[1861]={type:"element",tagName:"span",properties:$R[1862]={style:"color:#C98A7D"},children:$R[1863]=[$R[1864]={type:"text",value:"UserScope"}]},$R[1865]={type:"element",tagName:"span",properties:$R[1866]={style:"color:#666666"},children:$R[1867]=[$R[1868]={type:"text",value:")"}]},$R[1869]={type:"element",tagName:"span",properties:$R[1870]={style:"color:#4D9375"},children:$R[1871]=[$R[1872]={type:"text",value:"}"}]},$R[1873]={type:"element",tagName:"span",properties:$R[1874]={style:"color:#C98A7D77"},children:$R[1875]=[$R[1876]={type:"text",value:"`"}]},$R[1877]={type:"element",tagName:"span",properties:$R[1878]={style:"color:#666666"},children:$R[1879]=[$R[1880]={type:"text",value:","}]}]},$R[1881]={type:"text",value:"\n"},$R[1882]={type:"element",tagName:"span",properties:$R[1883]={class:"line"},children:$R[1884]=[$R[1885]={type:"element",tagName:"span",properties:$R[1886]={style:"color:#666666"},children:$R[1887]=[$R[1888]={type:"text",value:");"}]}]}],data:$R[1889]={_shiki_notation:$R[1890]=[$R[1891]={info:$R[1892]=[";","",void 0],line:$R[1893]={type:"element",tagName:"span",properties:$R[1894]={class:"line"},children:$R[1895]=[$R[1896]={type:"element",tagName:"span",properties:$R[1897]={style:"color:#4D9375"},children:$R[1898]=[$R[1899]={type:"text",value:"import"}]},$R[1900]={type:"element",tagName:"span",properties:$R[1901]={style:"color:#666666"},children:$R[1902]=[$R[1903]={type:"text",value:" {"}]},$R[1904]={type:"element",tagName:"span",properties:$R[1905]={style:"color:#BD976A"},children:$R[1906]=[$R[1907]={type:"text",value:" molecule"}]},$R[1908]={type:"element",tagName:"span",properties:$R[1909]={style:"color:#666666"},children:$R[1910]=[$R[1911]={type:"text",value:" }"}]},$R[1912]={type:"element",tagName:"span",properties:$R[1913]={style:"color:#4D9375"},children:$R[1914]=[$R[1915]={type:"text",value:" from"}]},$R[1916]={type:"element",tagName:"span",properties:$R[1917]={style:"color:#C98A7D77"},children:$R[1918]=[$R[1919]={type:"text",value:" \""}]},$R[1920]={type:"element",tagName:"span",properties:$R[1921]={style:"color:#C98A7D"},children:$R[1922]=[$R[1923]={type:"text",value:"bunshi"}]},$R[1924]={type:"element",tagName:"span",properties:$R[1925]={style:"color:#C98A7D77"},children:$R[1926]=[$R[1927]={type:"text",value:"\""}]},$R[1928]={type:"element",tagName:"span",properties:$R[1929]={style:"color:#666666"},children:$R[1930]=[$R[1931]={type:"text",value:";"}]}]},token:$R[1932]={type:"element",tagName:"span",properties:$R[1933]={style:"color:#666666"},children:$R[1934]=[$R[1935]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[1936]={info:$R[1937]=[";","",void 0],line:$R[1938]={type:"element",tagName:"span",properties:$R[1939]={class:"line"},children:$R[1940]=[$R[1941]={type:"element",tagName:"span",properties:$R[1942]={style:"color:#4D9375"},children:$R[1943]=[$R[1944]={type:"text",value:"import"}]},$R[1945]={type:"element",tagName:"span",properties:$R[1946]={style:"color:#666666"},children:$R[1947]=[$R[1948]={type:"text",value:" {"}]},$R[1949]={type:"element",tagName:"span",properties:$R[1950]={style:"color:#BD976A"},children:$R[1951]=[$R[1952]={type:"text",value:" UserScope"}]},$R[1953]={type:"element",tagName:"span",properties:$R[1954]={style:"color:#666666"},children:$R[1955]=[$R[1956]={type:"text",value:" }"}]},$R[1957]={type:"element",tagName:"span",properties:$R[1958]={style:"color:#4D9375"},children:$R[1959]=[$R[1960]={type:"text",value:" from"}]},$R[1961]={type:"element",tagName:"span",properties:$R[1962]={style:"color:#C98A7D77"},children:$R[1963]=[$R[1964]={type:"text",value:" \""}]},$R[1965]={type:"element",tagName:"span",properties:$R[1966]={style:"color:#C98A7D"},children:$R[1967]=[$R[1968]={type:"text",value:"./scopes"}]},$R[1969]={type:"element",tagName:"span",properties:$R[1970]={style:"color:#C98A7D77"},children:$R[1971]=[$R[1972]={type:"text",value:"\""}]},$R[1973]={type:"element",tagName:"span",properties:$R[1974]={style:"color:#666666"},children:$R[1975]=[$R[1976]={type:"text",value:";"}]}]},token:$R[1977]={type:"element",tagName:"span",properties:$R[1978]={style:"color:#666666"},children:$R[1979]=[$R[1980]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[1981]={children:$R[1982]=[$R[1983]={position:$R[1984]={start:$R[1985]={line:116,column:1,offset:2684},end:$R[1986]={line:116,column:8,offset:2691}},type:"inlineCode",value:"scope"},$R[1987]={position:$R[1988]={start:$R[1989]={line:116,column:8,offset:2691},end:$R[1990]={line:116,column:11,offset:2694}},type:"text",value:" を "},$R[1991]={position:$R[1992]={start:$R[1993]={line:116,column:11,offset:2694},end:$R[1994]={line:116,column:21,offset:2704}},type:"inlineCode",value:"molecule"},$R[1995]={position:$R[1996]={start:$R[1997]={line:116,column:21,offset:2704},end:$R[1998]={line:116,column:32,offset:2715}},type:"text",value:" に依存させることで "},$R[1999]={position:$R[2000]={start:$R[2001]={line:116,column:32,offset:2715},end:$R[2002]={line:116,column:42,offset:2725}},type:"inlineCode",value:"molecule"},$R[2003]={position:$R[2004]={start:$R[2005]={line:116,column:42,offset:2725},end:$R[2006]={line:116,column:70,offset:2753}},type:"text",value:" はアプリケーション全体で 1 回実行されるのではなく、"},$R[2007]={position:$R[2008]={start:$R[2009]={line:116,column:70,offset:2753},end:$R[2010]={line:116,column:77,offset:2760}},type:"inlineCode",value:"scope"},$R[2011]={position:$R[2012]={start:$R[2013]={line:116,column:77,offset:2760},end:$R[2014]={line:116,column:98,offset:2781}},type:"text",value:" をマウントするごとに再実行される。また、"},$R[2015]={position:$R[2016]={start:$R[2017]={line:116,column:98,offset:2781},end:$R[2018]={line:116,column:105,offset:2788}},type:"inlineCode",value:"scope"},$R[2019]={position:$R[2020]={start:$R[2021]={line:116,column:105,offset:2788},end:$R[2022]={line:116,column:113,offset:2796}},type:"text",value:" に渡した値は "},$R[2023]={position:$R[2024]={start:$R[2025]={line:116,column:113,offset:2796},end:$R[2026]={line:116,column:120,offset:2803}},type:"inlineCode",value:"scope"},$R[2027]={position:$R[2028]={start:$R[2029]={line:116,column:120,offset:2803},end:$R[2030]={line:116,column:131,offset:2814}},type:"text",value:" プロバイダー内部の "},$R[2031]={position:$R[2032]={start:$R[2033]={line:116,column:131,offset:2814},end:$R[2034]={line:116,column:141,offset:2824}},type:"inlineCode",value:"molecule"},$R[2035]={position:$R[2036]={start:$R[2037]={line:116,column:141,offset:2824},end:$R[2038]={line:116,column:145,offset:2828}},type:"text",value:" から "},$R[2039]={position:$R[2040]={start:$R[2041]={line:116,column:145,offset:2828},end:$R[2042]={line:116,column:154,offset:2837}},type:"inlineCode",value:"scope()"},$R[2043]={position:$R[2044]={start:$R[2045]={line:116,column:154,offset:2837},end:$R[2046]={line:116,column:167,offset:2850}},type:"text",value:" 関数を通じて取得できる。"}],position:$R[2047]={start:$R[2048]={line:116,column:1,offset:2684},end:$R[2049]={line:116,column:167,offset:2850}},type:"paragraph"}],position:$R[2050]={end:$R[2051]={line:116,column:167,offset:2850},start:$R[2052]={line:73,column:1,offset:1777}},type:"section"},$R[2053]={children:$R[2054]=[$R[2055]={children:$R[2056]=[$R[2057]={position:$R[2058]={start:$R[2059]={line:118,column:5,offset:2856},end:$R[2060]={line:118,column:14,offset:2865}},type:"text",value:"lifecycle"}],id:"lifecycle",level:3,plain:"lifecycle",position:$R[2061]={start:$R[2062]={line:118,column:1,offset:2852},end:$R[2063]={line:118,column:14,offset:2865}},type:"heading"},$R[2064]={children:$R[2065]=[$R[2066]={position:$R[2067]={start:$R[2068]={line:120,column:1,offset:2867},end:$R[2069]={line:120,column:11,offset:2877}},type:"inlineCode",value:"molecule"},$R[2070]={position:$R[2071]={start:$R[2072]={line:120,column:11,offset:2877},end:$R[2073]={line:120,column:85,offset:2951}},type:"text",value:" はアプリケーションやスコープに応じて必要なときに実行され使用中であることを示すためマウントされ、必要でなくなったらアンマウントされ GC される。"}],position:$R[2074]={start:$R[2075]={line:120,column:1,offset:2867},end:$R[2076]={line:120,column:85,offset:2951}},type:"paragraph"},$R[2077]={children:$R[2078]=[$R[2079]={position:$R[2080]={start:$R[2081]={line:122,column:1,offset:2953},end:$R[2082]={line:122,column:7,offset:2959}},type:"text",value:"以下の図は "},$R[2083]={children:$R[2084]=[$R[2085]={position:$R[2086]={start:$R[2087]={line:122,column:8,offset:2960},end:$R[2088]={line:122,column:17,offset:2969}},type:"text",value:"公式のドキュメント"}],position:$R[2089]={start:$R[2090]={line:122,column:7,offset:2959},end:$R[2091]={line:122,column:62,offset:3014}},title:void 0,type:"link",url:"https://www.bunshi.org/concepts/lifecycle/"},$R[2092]={position:$R[2093]={start:$R[2094]={line:122,column:62,offset:3014},end:$R[2095]={line:122,column:85,offset:3037}},type:"text",value:" から引用したものである。とてもわかりやすい。"}],position:$R[2096]={start:$R[2097]={line:122,column:1,offset:2953},end:$R[2098]={line:122,column:85,offset:3037}},type:"paragraph"},$R[2099]={children:$R[2100]=[$R[2101]={alt:"bunshiのライフサイクル",position:$R[2102]={start:$R[2103]={line:124,column:1,offset:3039},end:$R[2104]={line:124,column:35,offset:3073}},title:void 0,type:"image",url:"./lifecycle.png",transformed:$R[2105]=[$R[2106]={dim:$R[2107]={h:1800,w:1390},path:"/img/lifecycle-YaSDHDzK-1390x1800.webp"},$R[2108]={dim:$R[2109]={h:1260,w:973},path:"/img/lifecycle-YaSDHDzK-973x1260.webp"},$R[2110]={dim:$R[2111]={h:882,w:681},path:"/img/lifecycle-YaSDHDzK-681x882.webp"},$R[2112]={dim:$R[2113]={h:617,w:477},path:"/img/lifecycle-YaSDHDzK-477x617.webp"},$R[2114]={dim:$R[2115]={h:432,w:334},path:"/img/lifecycle-YaSDHDzK-334x432.webp"}]}],position:$R[2116]={start:$R[2117]={line:124,column:1,offset:3039},end:$R[2118]={line:124,column:35,offset:3073}},type:"paragraph"},$R[2119]={children:$R[2120]=[$R[2121]={position:$R[2122]={start:$R[2123]={line:126,column:1,offset:3075},end:$R[2124]={line:126,column:9,offset:3083}},type:"text",value:"次の例のように "},$R[2125]={position:$R[2126]={start:$R[2127]={line:126,column:9,offset:3083},end:$R[2128]={line:126,column:18,offset:3092}},type:"inlineCode",value:"onMount"},$R[2129]={position:$R[2130]={start:$R[2131]={line:126,column:18,offset:3092},end:$R[2132]={line:126,column:40,offset:3114}},type:"text",value:" 関数とその cleanup 関数を使って "},$R[2133]={position:$R[2134]={start:$R[2135]={line:126,column:40,offset:3114},end:$R[2136]={line:126,column:50,offset:3124}},type:"inlineCode",value:"molecule"},$R[2137]={position:$R[2138]={start:$R[2139]={line:126,column:50,offset:3124},end:$R[2140]={line:126,column:77,offset:3151}},type:"text",value:" のマウントとアンマウント時の処理を行うことができる。"}],position:$R[2141]={start:$R[2142]={line:126,column:1,offset:3075},end:$R[2143]={line:126,column:77,offset:3151}},type:"paragraph"},$R[2144]={filename:"sample.ts ts",lang:"ts",position:$R[2145]={start:$R[2146]={line:128,column:1,offset:3153},end:$R[2147]={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[2148]={type:"root",children:$R[2149]=[$R[2150]={type:"element",tagName:"pre",properties:$R[2151]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[2152]=[$R[2153]={type:"element",tagName:"code",properties:$R[2154]={},children:$R[2155]=[$R[2156]={type:"element",tagName:"span",properties:$R[2157]={class:"line"},children:$R[2158]=[$R[2159]={type:"element",tagName:"span",properties:$R[2160]={style:"color:#4D9375"},children:$R[2161]=[$R[2162]={type:"text",value:"import"}]},$R[2163]={type:"element",tagName:"span",properties:$R[2164]={style:"color:#666666"},children:$R[2165]=[$R[2166]={type:"text",value:" {"}]},$R[2167]={type:"element",tagName:"span",properties:$R[2168]={style:"color:#BD976A"},children:$R[2169]=[$R[2170]={type:"text",value:" molecule"}]},$R[2171]={type:"element",tagName:"span",properties:$R[2172]={style:"color:#666666"},children:$R[2173]=[$R[2174]={type:"text",value:","}]},$R[2175]={type:"element",tagName:"span",properties:$R[2176]={style:"color:#BD976A"},children:$R[2177]=[$R[2178]={type:"text",value:" onMount"}]},$R[2179]={type:"element",tagName:"span",properties:$R[2180]={style:"color:#666666"},children:$R[2181]=[$R[2182]={type:"text",value:" }"}]},$R[2183]={type:"element",tagName:"span",properties:$R[2184]={style:"color:#4D9375"},children:$R[2185]=[$R[2186]={type:"text",value:" from"}]},$R[2187]={type:"element",tagName:"span",properties:$R[2188]={style:"color:#C98A7D77"},children:$R[2189]=[$R[2190]={type:"text",value:" \""}]},$R[2191]={type:"element",tagName:"span",properties:$R[2192]={style:"color:#C98A7D"},children:$R[2193]=[$R[2194]={type:"text",value:"bunshi"}]},$R[2195]={type:"element",tagName:"span",properties:$R[2196]={style:"color:#C98A7D77"},children:$R[2197]=[$R[2198]={type:"text",value:"\""}]},$R[2199]={type:"element",tagName:"span",properties:$R[2200]={style:"color:#666666"},children:$R[2201]=[$R[2202]={type:"text",value:";"}]}]},$R[2203]={type:"text",value:"\n"},$R[2204]={type:"element",tagName:"span",properties:$R[2205]={class:"line"},children:$R[2206]=[$R[2207]={type:"element",tagName:"span",properties:$R[2208]={style:"color:#4D9375"},children:$R[2209]=[$R[2210]={type:"text",value:"import"}]},$R[2211]={type:"element",tagName:"span",properties:$R[2212]={style:"color:#666666"},children:$R[2213]=[$R[2214]={type:"text",value:" {"}]},$R[2215]={type:"element",tagName:"span",properties:$R[2216]={style:"color:#BD976A"},children:$R[2217]=[$R[2218]={type:"text",value:" atom"}]},$R[2219]={type:"element",tagName:"span",properties:$R[2220]={style:"color:#666666"},children:$R[2221]=[$R[2222]={type:"text",value:" }"}]},$R[2223]={type:"element",tagName:"span",properties:$R[2224]={style:"color:#4D9375"},children:$R[2225]=[$R[2226]={type:"text",value:" from"}]},$R[2227]={type:"element",tagName:"span",properties:$R[2228]={style:"color:#C98A7D77"},children:$R[2229]=[$R[2230]={type:"text",value:" \""}]},$R[2231]={type:"element",tagName:"span",properties:$R[2232]={style:"color:#C98A7D"},children:$R[2233]=[$R[2234]={type:"text",value:"jotai/vanilla"}]},$R[2235]={type:"element",tagName:"span",properties:$R[2236]={style:"color:#C98A7D77"},children:$R[2237]=[$R[2238]={type:"text",value:"\""}]},$R[2239]={type:"element",tagName:"span",properties:$R[2240]={style:"color:#666666"},children:$R[2241]=[$R[2242]={type:"text",value:";"}]}]},$R[2243]={type:"text",value:"\n"},$R[2244]={type:"element",tagName:"span",properties:$R[2245]={class:"line"},children:$R[2246]=[]},$R[2247]={type:"text",value:"\n"},$R[2248]={type:"element",tagName:"span",properties:$R[2249]={class:"line"},children:$R[2250]=[$R[2251]={type:"element",tagName:"span",properties:$R[2252]={style:"color:#4D9375"},children:$R[2253]=[$R[2254]={type:"text",value:"export"}]},$R[2255]={type:"element",tagName:"span",properties:$R[2256]={style:"color:#CB7676"},children:$R[2257]=[$R[2258]={type:"text",value:" const "}]},$R[2259]={type:"element",tagName:"span",properties:$R[2260]={style:"color:#BD976A"},children:$R[2261]=[$R[2262]={type:"text",value:"CountMolecule"}]},$R[2263]={type:"element",tagName:"span",properties:$R[2264]={style:"color:#666666"},children:$R[2265]=[$R[2266]={type:"text",value:" ="}]},$R[2267]={type:"element",tagName:"span",properties:$R[2268]={style:"color:#80A665"},children:$R[2269]=[$R[2270]={type:"text",value:" molecule"}]},$R[2271]={type:"element",tagName:"span",properties:$R[2272]={style:"color:#666666"},children:$R[2273]=[$R[2274]={type:"text",value:"(()"}]},$R[2275]={type:"element",tagName:"span",properties:$R[2276]={style:"color:#666666"},children:$R[2277]=[$R[2278]={type:"text",value:" =>"}]},$R[2279]={type:"element",tagName:"span",properties:$R[2280]={style:"color:#666666"},children:$R[2281]=[$R[2282]={type:"text",value:" {"}]}]},$R[2283]={type:"text",value:"\n"},$R[2284]={type:"element",tagName:"span",properties:$R[2285]={class:"line"},children:$R[2286]=[$R[2287]={type:"element",tagName:"span",properties:$R[2288]={style:"color:#BD976A"},children:$R[2289]=[$R[2290]={type:"text",value:"\tconsole"}]},$R[2291]={type:"element",tagName:"span",properties:$R[2292]={style:"color:#666666"},children:$R[2293]=[$R[2294]={type:"text",value:"."}]},$R[2295]={type:"element",tagName:"span",properties:$R[2296]={style:"color:#80A665"},children:$R[2297]=[$R[2298]={type:"text",value:"log"}]},$R[2299]={type:"element",tagName:"span",properties:$R[2300]={style:"color:#666666"},children:$R[2301]=[$R[2302]={type:"text",value:"("}]},$R[2303]={type:"element",tagName:"span",properties:$R[2304]={style:"color:#C98A7D77"},children:$R[2305]=[$R[2306]={type:"text",value:"\""}]},$R[2307]={type:"element",tagName:"span",properties:$R[2308]={style:"color:#C98A7D"},children:$R[2309]=[$R[2310]={type:"text",value:"Created"}]},$R[2311]={type:"element",tagName:"span",properties:$R[2312]={style:"color:#C98A7D77"},children:$R[2313]=[$R[2314]={type:"text",value:"\""}]},$R[2315]={type:"element",tagName:"span",properties:$R[2316]={style:"color:#666666"},children:$R[2317]=[$R[2318]={type:"text",value:");"}]}]},$R[2319]={type:"text",value:"\n"},$R[2320]={type:"element",tagName:"span",properties:$R[2321]={class:"line"},children:$R[2322]=[$R[2323]={type:"element",tagName:"span",properties:$R[2324]={style:"color:#80A665"},children:$R[2325]=[$R[2326]={type:"text",value:"\tonMount"}]},$R[2327]={type:"element",tagName:"span",properties:$R[2328]={style:"color:#666666"},children:$R[2329]=[$R[2330]={type:"text",value:"(()"}]},$R[2331]={type:"element",tagName:"span",properties:$R[2332]={style:"color:#666666"},children:$R[2333]=[$R[2334]={type:"text",value:" =>"}]},$R[2335]={type:"element",tagName:"span",properties:$R[2336]={style:"color:#666666"},children:$R[2337]=[$R[2338]={type:"text",value:" {"}]}]},$R[2339]={type:"text",value:"\n"},$R[2340]={type:"element",tagName:"span",properties:$R[2341]={class:"line"},children:$R[2342]=[$R[2343]={type:"element",tagName:"span",properties:$R[2344]={style:"color:#BD976A"},children:$R[2345]=[$R[2346]={type:"text",value:"\t\tconsole"}]},$R[2347]={type:"element",tagName:"span",properties:$R[2348]={style:"color:#666666"},children:$R[2349]=[$R[2350]={type:"text",value:"."}]},$R[2351]={type:"element",tagName:"span",properties:$R[2352]={style:"color:#80A665"},children:$R[2353]=[$R[2354]={type:"text",value:"log"}]},$R[2355]={type:"element",tagName:"span",properties:$R[2356]={style:"color:#666666"},children:$R[2357]=[$R[2358]={type:"text",value:"("}]},$R[2359]={type:"element",tagName:"span",properties:$R[2360]={style:"color:#C98A7D77"},children:$R[2361]=[$R[2362]={type:"text",value:"\""}]},$R[2363]={type:"element",tagName:"span",properties:$R[2364]={style:"color:#C98A7D"},children:$R[2365]=[$R[2366]={type:"text",value:"Mounted"}]},$R[2367]={type:"element",tagName:"span",properties:$R[2368]={style:"color:#C98A7D77"},children:$R[2369]=[$R[2370]={type:"text",value:"\""}]},$R[2371]={type:"element",tagName:"span",properties:$R[2372]={style:"color:#666666"},children:$R[2373]=[$R[2374]={type:"text",value:");"}]}]},$R[2375]={type:"text",value:"\n"},$R[2376]={type:"element",tagName:"span",properties:$R[2377]={class:"line"},children:$R[2378]=[$R[2379]={type:"element",tagName:"span",properties:$R[2380]={style:"color:#4D9375"},children:$R[2381]=[$R[2382]={type:"text",value:"\t\treturn"}]},$R[2383]={type:"element",tagName:"span",properties:$R[2384]={style:"color:#666666"},children:$R[2385]=[$R[2386]={type:"text",value:" ()"}]},$R[2387]={type:"element",tagName:"span",properties:$R[2388]={style:"color:#666666"},children:$R[2389]=[$R[2390]={type:"text",value:" =>"}]},$R[2391]={type:"element",tagName:"span",properties:$R[2392]={style:"color:#BD976A"},children:$R[2393]=[$R[2394]={type:"text",value:" console"}]},$R[2395]={type:"element",tagName:"span",properties:$R[2396]={style:"color:#666666"},children:$R[2397]=[$R[2398]={type:"text",value:"."}]},$R[2399]={type:"element",tagName:"span",properties:$R[2400]={style:"color:#80A665"},children:$R[2401]=[$R[2402]={type:"text",value:"log"}]},$R[2403]={type:"element",tagName:"span",properties:$R[2404]={style:"color:#666666"},children:$R[2405]=[$R[2406]={type:"text",value:"("}]},$R[2407]={type:"element",tagName:"span",properties:$R[2408]={style:"color:#C98A7D77"},children:$R[2409]=[$R[2410]={type:"text",value:"\""}]},$R[2411]={type:"element",tagName:"span",properties:$R[2412]={style:"color:#C98A7D"},children:$R[2413]=[$R[2414]={type:"text",value:"Unmounted"}]},$R[2415]={type:"element",tagName:"span",properties:$R[2416]={style:"color:#C98A7D77"},children:$R[2417]=[$R[2418]={type:"text",value:"\""}]},$R[2419]={type:"element",tagName:"span",properties:$R[2420]={style:"color:#666666"},children:$R[2421]=[$R[2422]={type:"text",value:");"}]}]},$R[2423]={type:"text",value:"\n"},$R[2424]={type:"element",tagName:"span",properties:$R[2425]={class:"line"},children:$R[2426]=[$R[2427]={type:"element",tagName:"span",properties:$R[2428]={style:"color:#666666"},children:$R[2429]=[$R[2430]={type:"text",value:"\t});"}]}]},$R[2431]={type:"text",value:"\n"},$R[2432]={type:"element",tagName:"span",properties:$R[2433]={class:"line"},children:$R[2434]=[$R[2435]={type:"element",tagName:"span",properties:$R[2436]={style:"color:#4D9375"},children:$R[2437]=[$R[2438]={type:"text",value:"\treturn"}]},$R[2439]={type:"element",tagName:"span",properties:$R[2440]={style:"color:#80A665"},children:$R[2441]=[$R[2442]={type:"text",value:" atom"}]},$R[2443]={type:"element",tagName:"span",properties:$R[2444]={style:"color:#666666"},children:$R[2445]=[$R[2446]={type:"text",value:"("}]},$R[2447]={type:"element",tagName:"span",properties:$R[2448]={style:"color:#4C9A91"},children:$R[2449]=[$R[2450]={type:"text",value:"0"}]},$R[2451]={type:"element",tagName:"span",properties:$R[2452]={style:"color:#666666"},children:$R[2453]=[$R[2454]={type:"text",value:");"}]}]},$R[2455]={type:"text",value:"\n"},$R[2456]={type:"element",tagName:"span",properties:$R[2457]={class:"line"},children:$R[2458]=[$R[2459]={type:"element",tagName:"span",properties:$R[2460]={style:"color:#666666"},children:$R[2461]=[$R[2462]={type:"text",value:"});"}]}]}],data:$R[2463]={_shiki_notation:$R[2464]=[$R[2465]={info:$R[2466]=[";","",void 0],line:$R[2467]={type:"element",tagName:"span",properties:$R[2468]={class:"line"},children:$R[2469]=[$R[2470]={type:"element",tagName:"span",properties:$R[2471]={style:"color:#4D9375"},children:$R[2472]=[$R[2473]={type:"text",value:"import"}]},$R[2474]={type:"element",tagName:"span",properties:$R[2475]={style:"color:#666666"},children:$R[2476]=[$R[2477]={type:"text",value:" {"}]},$R[2478]={type:"element",tagName:"span",properties:$R[2479]={style:"color:#BD976A"},children:$R[2480]=[$R[2481]={type:"text",value:" molecule"}]},$R[2482]={type:"element",tagName:"span",properties:$R[2483]={style:"color:#666666"},children:$R[2484]=[$R[2485]={type:"text",value:","}]},$R[2486]={type:"element",tagName:"span",properties:$R[2487]={style:"color:#BD976A"},children:$R[2488]=[$R[2489]={type:"text",value:" onMount"}]},$R[2490]={type:"element",tagName:"span",properties:$R[2491]={style:"color:#666666"},children:$R[2492]=[$R[2493]={type:"text",value:" }"}]},$R[2494]={type:"element",tagName:"span",properties:$R[2495]={style:"color:#4D9375"},children:$R[2496]=[$R[2497]={type:"text",value:" from"}]},$R[2498]={type:"element",tagName:"span",properties:$R[2499]={style:"color:#C98A7D77"},children:$R[2500]=[$R[2501]={type:"text",value:" \""}]},$R[2502]={type:"element",tagName:"span",properties:$R[2503]={style:"color:#C98A7D"},children:$R[2504]=[$R[2505]={type:"text",value:"bunshi"}]},$R[2506]={type:"element",tagName:"span",properties:$R[2507]={style:"color:#C98A7D77"},children:$R[2508]=[$R[2509]={type:"text",value:"\""}]},$R[2510]={type:"element",tagName:"span",properties:$R[2511]={style:"color:#666666"},children:$R[2512]=[$R[2513]={type:"text",value:";"}]}]},token:$R[2514]={type:"element",tagName:"span",properties:$R[2515]={style:"color:#666666"},children:$R[2516]=[$R[2517]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[2518]={info:$R[2519]=[";","",void 0],line:$R[2520]={type:"element",tagName:"span",properties:$R[2521]={class:"line"},children:$R[2522]=[$R[2523]={type:"element",tagName:"span",properties:$R[2524]={style:"color:#4D9375"},children:$R[2525]=[$R[2526]={type:"text",value:"import"}]},$R[2527]={type:"element",tagName:"span",properties:$R[2528]={style:"color:#666666"},children:$R[2529]=[$R[2530]={type:"text",value:" {"}]},$R[2531]={type:"element",tagName:"span",properties:$R[2532]={style:"color:#BD976A"},children:$R[2533]=[$R[2534]={type:"text",value:" atom"}]},$R[2535]={type:"element",tagName:"span",properties:$R[2536]={style:"color:#666666"},children:$R[2537]=[$R[2538]={type:"text",value:" }"}]},$R[2539]={type:"element",tagName:"span",properties:$R[2540]={style:"color:#4D9375"},children:$R[2541]=[$R[2542]={type:"text",value:" from"}]},$R[2543]={type:"element",tagName:"span",properties:$R[2544]={style:"color:#C98A7D77"},children:$R[2545]=[$R[2546]={type:"text",value:" \""}]},$R[2547]={type:"element",tagName:"span",properties:$R[2548]={style:"color:#C98A7D"},children:$R[2549]=[$R[2550]={type:"text",value:"jotai/vanilla"}]},$R[2551]={type:"element",tagName:"span",properties:$R[2552]={style:"color:#C98A7D77"},children:$R[2553]=[$R[2554]={type:"text",value:"\""}]},$R[2555]={type:"element",tagName:"span",properties:$R[2556]={style:"color:#666666"},children:$R[2557]=[$R[2558]={type:"text",value:";"}]}]},token:$R[2559]={type:"element",tagName:"span",properties:$R[2560]={style:"color:#666666"},children:$R[2561]=[$R[2562]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[2563]={children:$R[2564]=[$R[2565]={position:$R[2566]={start:$R[2567]={line:142,column:1,offset:3438},end:$R[2568]={line:142,column:25,offset:3462}},type:"text",value:"次にライフサイクルの各ステップについて説明する。"}],position:$R[2569]={start:$R[2570]={line:142,column:1,offset:3438},end:$R[2571]={line:142,column:25,offset:3462}},type:"paragraph"},$R[2572]={children:$R[2573]=[$R[2574]={children:$R[2575]=[$R[2576]={position:$R[2577]={start:$R[2578]={line:144,column:6,offset:3469},end:$R[2579]={line:144,column:13,offset:3476}},type:"text",value:"Created"}],id:"created",level:4,plain:"Created",position:$R[2580]={start:$R[2581]={line:144,column:1,offset:3464},end:$R[2582]={line:144,column:13,offset:3476}},type:"heading"},$R[2583]={children:$R[2584]=[$R[2585]={position:$R[2586]={start:$R[2587]={line:146,column:1,offset:3478},end:$R[2588]={line:146,column:18,offset:3495}},type:"text",value:"アプリケーションが初期化された時、"},$R[2589]={position:$R[2590]={start:$R[2591]={line:146,column:18,offset:3495},end:$R[2592]={line:146,column:25,offset:3502}},type:"inlineCode",value:"scope"},$R[2593]={position:$R[2594]={start:$R[2595]={line:146,column:25,offset:3502},end:$R[2596]={line:146,column:50,offset:3527}},type:"text",value:" を登録したプロバイダーがマウントされた時などに "},$R[2597]={position:$R[2598]={start:$R[2599]={line:146,column:50,offset:3527},end:$R[2600]={line:146,column:60,offset:3537}},type:"inlineCode",value:"molecule"},$R[2601]={position:$R[2602]={start:$R[2603]={line:146,column:60,offset:3537},end:$R[2604]={line:146,column:85,offset:3562}},type:"text",value:" の値は作成され、すべての値は GC 可能になる。"}],position:$R[2605]={start:$R[2606]={line:146,column:1,offset:3478},end:$R[2607]={line:146,column:85,offset:3562}},type:"paragraph"}],position:$R[2608]={end:$R[2609]={line:146,column:85,offset:3562},start:$R[2610]={line:144,column:1,offset:3464}},type:"section"},$R[2611]={children:$R[2612]=[$R[2613]={children:$R[2614]=[$R[2615]={position:$R[2616]={start:$R[2617]={line:148,column:6,offset:3569},end:$R[2618]={line:148,column:13,offset:3576}},type:"text",value:"Mounted"}],id:"mounted",level:4,plain:"Mounted",position:$R[2619]={start:$R[2620]={line:148,column:1,offset:3564},end:$R[2621]={line:148,column:13,offset:3576}},type:"heading"},$R[2622]={children:$R[2623]=[$R[2624]={position:$R[2625]={start:$R[2626]={line:150,column:1,offset:3578},end:$R[2627]={line:150,column:11,offset:3588}},type:"inlineCode",value:"molecule"},$R[2628]={position:$R[2629]={start:$R[2630]={line:150,column:11,offset:3588},end:$R[2631]={line:150,column:34,offset:3611}},type:"text",value:" の値は実行されただけではキャッシュされない。"},$R[2632]={position:$R[2633]={start:$R[2634]={line:150,column:34,offset:3611},end:$R[2635]={line:150,column:41,offset:3618}},type:"inlineCode",value:"React"},$R[2636]={position:$R[2637]={start:$R[2638]={line:150,column:41,offset:3618},end:$R[2639]={line:150,column:44,offset:3621}},type:"text",value:" や "},$R[2640]={position:$R[2641]={start:$R[2642]={line:150,column:44,offset:3621},end:$R[2643]={line:150,column:49,offset:3626}},type:"inlineCode",value:"Vue"},$R[2644]={position:$R[2645]={start:$R[2646]={line:150,column:49,offset:3626},end:$R[2647]={line:150,column:53,offset:3630}},type:"text",value:" では "},$R[2648]={position:$R[2649]={start:$R[2650]={line:150,column:53,offset:3630},end:$R[2651]={line:150,column:66,offset:3643}},type:"inlineCode",value:"useMolecule"},$R[2652]={position:$R[2653]={start:$R[2654]={line:150,column:66,offset:3643},end:$R[2655]={line:150,column:76,offset:3653}},type:"text",value:" フックを使用して "},$R[2656]={position:$R[2657]={start:$R[2658]={line:150,column:76,offset:3653},end:$R[2659]={line:150,column:86,offset:3663}},type:"inlineCode",value:"molecule"},$R[2660]={position:$R[2661]={start:$R[2662]={line:150,column:86,offset:3663},end:$R[2663]={line:150,column:106,offset:3683}},type:"text",value:" をマウントすることでキャッシュされる。"}],position:$R[2664]={start:$R[2665]={line:150,column:1,offset:3578},end:$R[2666]={line:150,column:106,offset:3683}},type:"paragraph"}],position:$R[2667]={end:$R[2668]={line:150,column:106,offset:3683},start:$R[2669]={line:148,column:1,offset:3564}},type:"section"},$R[2670]={children:$R[2671]=[$R[2672]={children:$R[2673]=[$R[2674]={position:$R[2675]={start:$R[2676]={line:152,column:6,offset:3690},end:$R[2677]={line:152,column:15,offset:3699}},type:"text",value:"Unmounted"}],id:"unmounted",level:4,plain:"Unmounted",position:$R[2678]={start:$R[2679]={line:152,column:1,offset:3685},end:$R[2680]={line:152,column:15,offset:3699}},type:"heading"},$R[2681]={children:$R[2682]=[$R[2683]={position:$R[2684]={start:$R[2685]={line:154,column:1,offset:3701},end:$R[2686]={line:154,column:11,offset:3711}},type:"inlineCode",value:"molecule"},$R[2687]={position:$R[2688]={start:$R[2689]={line:154,column:11,offset:3711},end:$R[2690]={line:154,column:25,offset:3725}},type:"text",value:" の値が使用されなくなると、"},$R[2691]={position:$R[2692]={start:$R[2693]={line:154,column:25,offset:3725},end:$R[2694]={line:154,column:35,offset:3735}},type:"inlineCode",value:"molecule"},$R[2695]={position:$R[2696]={start:$R[2697]={line:154,column:35,offset:3735},end:$R[2698]={line:154,column:53,offset:3753}},type:"text",value:" はアンマウントされ、GC される。"},$R[2699]={position:$R[2700]={start:$R[2701]={line:154,column:53,offset:3753},end:$R[2702]={line:154,column:60,offset:3760}},type:"inlineCode",value:"React"},$R[2703]={position:$R[2704]={start:$R[2705]={line:154,column:60,offset:3760},end:$R[2706]={line:154,column:63,offset:3763}},type:"text",value:" や "},$R[2707]={position:$R[2708]={start:$R[2709]={line:154,column:63,offset:3763},end:$R[2710]={line:154,column:68,offset:3768}},type:"inlineCode",value:"Vue"},$R[2711]={position:$R[2712]={start:$R[2713]={line:154,column:68,offset:3768},end:$R[2714]={line:154,column:72,offset:3772}},type:"text",value:" では "},$R[2715]={position:$R[2716]={start:$R[2717]={line:154,column:72,offset:3772},end:$R[2718]={line:154,column:85,offset:3785}},type:"inlineCode",value:"useMolecule"},$R[2719]={position:$R[2720]={start:$R[2721]={line:154,column:85,offset:3785},end:$R[2722]={line:154,column:104,offset:3804}},type:"text",value:" フックで自動的にアンマウントされる。"}],position:$R[2723]={start:$R[2724]={line:154,column:1,offset:3701},end:$R[2725]={line:154,column:104,offset:3804}},type:"paragraph"},$R[2726]={children:$R[2727]=[$R[2728]={position:$R[2729]={start:$R[2730]={line:156,column:1,offset:3806},end:$R[2731]={line:156,column:75,offset:3880}},type:"text",value:"React Strict mode を使用している方は unmount された後に再度 mount されることがあるので、この点に注意が必要である。"},$R[2732]={position:$R[2733]={start:$R[2734]={line:156,column:75,offset:3880},end:$R[2735]={line:156,column:86,offset:3891}},type:"inlineCode",value:"useEffect"},$R[2736]={position:$R[2737]={start:$R[2738]={line:156,column:86,offset:3891},end:$R[2739]={line:156,column:122,offset:3927}},type:"text",value:" などのフックの正当性を確認するために 2 回実行されるのと同じように、"},$R[2740]={position:$R[2741]={start:$R[2742]={line:156,column:122,offset:3927},end:$R[2743]={line:156,column:132,offset:3937}},type:"inlineCode",value:"molecule"},$R[2744]={position:$R[2745]={start:$R[2746]={line:156,column:132,offset:3937},end:$R[2747]={line:156,column:153,offset:3958}},type:"text",value:" も 2 回実行されることがある。この時、"},$R[2748]={position:$R[2749]={start:$R[2750]={line:156,column:153,offset:3958},end:$R[2751]={line:156,column:180,offset:3985}},type:"inlineCode",value:"mount -> unmount -> mount"},$R[2752]={position:$R[2753]={start:$R[2754]={line:156,column:180,offset:3985},end:$R[2755]={line:156,column:191,offset:3996}},type:"text",value:" の順番で実行される。"}],position:$R[2756]={start:$R[2757]={line:156,column:1,offset:3806},end:$R[2758]={line:156,column:191,offset:3996}},type:"paragraph"}],position:$R[2759]={end:$R[2760]={line:156,column:191,offset:3996},start:$R[2761]={line:152,column:1,offset:3685}},type:"section"}],position:$R[2762]={end:$R[2763]={line:156,column:191,offset:3996},start:$R[2764]={line:118,column:1,offset:2852}},type:"section"}],position:$R[2765]={end:$R[2766]={line:156,column:191,offset:3996},start:$R[2767]={line:33,column:1,offset:982}},type:"section"},$R[2768]={children:$R[2769]=[$R[2770]={children:$R[2771]=[$R[2772]={position:$R[2773]={start:$R[2774]={line:158,column:4,offset:4001},end:$R[2775]={line:158,column:19,offset:4016}},type:"text",value:"個人的に面白いと思ったポイント"}],id:"個人的に面白いと思ったポイント",level:2,plain:"個人的に面白いと思ったポイント",position:$R[2776]={start:$R[2777]={line:158,column:1,offset:3998},end:$R[2778]={line:158,column:19,offset:4016}},type:"heading"},$R[2779]={children:$R[2780]=[$R[2781]={position:$R[2782]={start:$R[2783]={line:160,column:1,offset:4018},end:$R[2784]={line:160,column:19,offset:4036}},type:"inlineCode",value:"MoleculeInjector"},$R[2785]={position:$R[2786]={start:$R[2787]={line:160,column:19,offset:4036},end:$R[2788]={line:160,column:26,offset:4043}},type:"text",value:"(を生成する "},$R[2789]={position:$R[2790]={start:$R[2791]={line:160,column:26,offset:4043},end:$R[2792]={line:160,column:42,offset:4059}},type:"inlineCode",value:"createInjector"},$R[2793]={position:$R[2794]={start:$R[2795]={line:160,column:42,offset:4059},end:$R[2796]={line:160,column:45,offset:4062}},type:"text",value:")と "},$R[2797]={position:$R[2798]={start:$R[2799]={line:160,column:45,offset:4062},end:$R[2800]={line:160,column:64,offset:4081}},type:"inlineCode",value:"moleculeInterface"},$R[2801]={position:$R[2802]={start:$R[2803]={line:160,column:64,offset:4081},end:$R[2804]={line:160,column:67,offset:4084}},type:"text",value:" だ。"}],position:$R[2805]={start:$R[2806]={line:160,column:1,offset:4018},end:$R[2807]={line:160,column:67,offset:4084}},type:"paragraph"},$R[2808]={meta:$R[2809]={title:"moleculeInterface",open_graph:$R[2810]={title:"moleculeInterface",type:"article",url:void 0,locale:"en",description:void 0,site_name:"Bunshi"},twitter_card:$R[2811]={card:"summary_large_image",title:"moleculeInterface",description:void 0},favicon:"https://www.bunshi.org/public/favicon.ico"},oembed:void 0,position:$R[2812]={start:$R[2813]={line:162,column:1,offset:4086},end:$R[2814]={line:162,column:80,offset:4165}},src:"https://www.bunshi.org/reference/vanilla/functions/functionmoleculeinterface-1/",type:"embed"},$R[2815]={meta:$R[2816]={title:"MoleculeInjector",open_graph:$R[2817]={title:"MoleculeInjector",type:"article",url:void 0,locale:"en",description:void 0,site_name:"Bunshi"},twitter_card:$R[2818]={card:"summary_large_image",title:"MoleculeInjector",description:void 0},favicon:"https://www.bunshi.org/public/favicon.ico"},oembed:void 0,position:$R[2819]={start:$R[2820]={line:164,column:1,offset:4167},end:$R[2821]={line:164,column:82,offset:4248}},src:"https://www.bunshi.org/reference/vanilla/type-aliases/type-aliasmoleculeinjector/",type:"embed"},$R[2822]={children:$R[2823]=[$R[2824]={position:$R[2825]={start:$R[2826]={line:166,column:1,offset:4250},end:$R[2827]={line:166,column:6,offset:4255}},type:"text",value:"それぞれ "},$R[2828]={position:$R[2829]={start:$R[2830]={line:166,column:6,offset:4255},end:$R[2831]={line:166,column:14,offset:4263}},type:"inlineCode",value:"bunshi"},$R[2832]={position:$R[2833]={start:$R[2834]={line:166,column:14,offset:4263},end:$R[2835]={line:166,column:45,offset:4294}},type:"text",value:" の依存関係のグラフを構築するための DI コンテナと、他の "},$R[2836]={position:$R[2837]={start:$R[2838]={line:166,column:45,offset:4294},end:$R[2839]={line:166,column:55,offset:4304}},type:"inlineCode",value:"molecule"},$R[2840]={position:$R[2841]={start:$R[2842]={line:166,column:55,offset:4304},end:$R[2843]={line:166,column:93,offset:4342}},type:"text",value:" が依存できるための参照を提供するものだ。ドキュメントにある通り、どちらも "},$R[2844]={position:$R[2845]={start:$R[2846]={line:166,column:93,offset:4342},end:$R[2847]={line:166,column:103,offset:4352}},type:"inlineCode",value:"molecule"},$R[2848]={position:$R[2849]={start:$R[2850]={line:166,column:103,offset:4352},end:$R[2851]={line:166,column:106,offset:4355}},type:"text",value:" や "},$R[2852]={position:$R[2853]={start:$R[2854]={line:166,column:106,offset:4355},end:$R[2855]={line:166,column:119,offset:4368}},type:"inlineCode",value:"useMolecule"},$R[2856]={position:$R[2857]={start:$R[2858]={line:166,column:119,offset:4368},end:$R[2859]={line:166,column:168,offset:4417}},type:"text",value:" の裏で使用されておりユーザーがこれらを直接使用するのはテストコードを書く場合やライブラリとして "},$R[2860]={position:$R[2861]={start:$R[2862]={line:166,column:168,offset:4417},end:$R[2863]={line:166,column:178,offset:4427}},type:"inlineCode",value:"molecule"},$R[2864]={position:$R[2865]={start:$R[2866]={line:166,column:178,offset:4427},end:$R[2867]={line:166,column:194,offset:4443}},type:"text",value:" を提供する場合などに限られる。"}],position:$R[2868]={start:$R[2869]={line:166,column:1,offset:4250},end:$R[2870]={line:166,column:194,offset:4443}},type:"paragraph"},$R[2871]={children:$R[2872]=[$R[2873]={position:$R[2874]={start:$R[2875]={line:168,column:1,offset:4445},end:$R[2876]={line:168,column:43,offset:4487}},type:"text",value:"私がこれらの機能を面白いと感じたのは、今まで TS の DI コンテナと言われると、"},$R[2877]={children:$R[2878]=[$R[2879]={position:$R[2880]={start:$R[2881]={line:168,column:44,offset:4488},end:$R[2882]={line:168,column:50,offset:4494}},type:"text",value:"NestJS"}],position:$R[2883]={start:$R[2884]={line:168,column:43,offset:4487},end:$R[2885]={line:168,column:72,offset:4516}},title:void 0,type:"link",url:"https://nestjs.com/"},$R[2886]={position:$R[2887]={start:$R[2888]={line:168,column:72,offset:4516},end:$R[2889]={line:168,column:80,offset:4524}},type:"text",value:" に乗っかるか、"},$R[2890]={children:$R[2891]=[$R[2892]={position:$R[2893]={start:$R[2894]={line:168,column:81,offset:4525},end:$R[2895]={line:168,column:89,offset:4533}},type:"text",value:"TSyringe"}],position:$R[2896]={start:$R[2897]={line:168,column:80,offset:4524},end:$R[2898]={line:168,column:129,offset:4573}},title:void 0,type:"link",url:"https://github.com/microsoft/tsyringe"},$R[2899]={position:$R[2900]={start:$R[2901]={line:168,column:129,offset:4573},end:$R[2902]={line:168,column:259,offset:4703}},type:"text",value:" であった。前者はバックエンドを構築するためのフレームワークなので、そもそもフロントエンド文脈で使うことがない。また TSyringe は DI コンテナとしては良くできている。循環依存やインスタンスを使い捨てるなどができるが、デコレータを使用する必要があり "},$R[2903]={position:$R[2904]={start:$R[2905]={line:168,column:259,offset:4703},end:$R[2906]={line:168,column:277,offset:4721}},type:"inlineCode",value:"reflect-metadata"},$R[2907]={position:$R[2908]={start:$R[2909]={line:168,column:277,offset:4721},end:$R[2910]={line:168,column:286,offset:4730}},type:"text",value:" を使う制約がある"},$R[2911]={footnoteIndex:2,position:$R[2912]={start:$R[2913]={line:168,column:286,offset:4730},end:$R[2914]={line:168,column:290,offset:4734}},referenceIndex:1,type:"footnoteReference"},$R[2915]={position:$R[2916]={start:$R[2917]={line:168,column:290,offset:4734},end:$R[2918]={line:168,column:291,offset:4735}},type:"text",value:"。"}],position:$R[2919]={start:$R[2920]={line:168,column:1,offset:4445},end:$R[2921]={line:168,column:291,offset:4735}},type:"paragraph"},$R[2922]={children:$R[2923]=[$R[2924]={position:$R[2925]={start:$R[2926]={line:170,column:1,offset:4737},end:$R[2927]={line:170,column:5,offset:4741}},type:"text",value:"その点 "},$R[2928]={position:$R[2929]={start:$R[2930]={line:170,column:5,offset:4741},end:$R[2931]={line:170,column:13,offset:4749}},type:"inlineCode",value:"bunshi"},$R[2932]={position:$R[2933]={start:$R[2934]={line:170,column:13,offset:4749},end:$R[2935]={line:170,column:55,offset:4791}},type:"text",value:" はスコープで分けられていて、かつ自動で DI される仕組みをとても気に入っている。"}],position:$R[2936]={start:$R[2937]={line:170,column:1,offset:4737},end:$R[2938]={line:170,column:55,offset:4791}},type:"paragraph"}],position:$R[2939]={end:$R[2940]={line:170,column:55,offset:4791},start:$R[2941]={line:158,column:1,offset:3998}},type:"section"},$R[2942]={children:$R[2943]=[$R[2944]={children:$R[2945]=[$R[2946]={position:$R[2947]={start:$R[2948]={line:174,column:4,offset:4858},end:$R[2949]={line:174,column:12,offset:4866}},type:"text",value:"結局何が嬉しい?"}],id:"結局何が嬉しい",level:2,plain:"結局何が嬉しい?",position:$R[2950]={start:$R[2951]={line:174,column:1,offset:4855},end:$R[2952]={line:174,column:12,offset:4866}},type:"heading"},$R[2953]={children:$R[2954]=[$R[2955]={position:$R[2956]={start:$R[2957]={line:176,column:1,offset:4868},end:$R[2958]={line:176,column:9,offset:4876}},type:"inlineCode",value:"bunshi"},$R[2959]={position:$R[2960]={start:$R[2961]={line:176,column:9,offset:4876},end:$R[2962]={line:176,column:71,offset:4938}},type:"text",value:" を使うことで、ステートのリフトアップやプッシュダウンを容易に実現できる。以下の 2 つの例を見れば一目瞭然であると言える。"}],position:$R[2963]={start:$R[2964]={line:176,column:1,offset:4868},end:$R[2965]={line:176,column:71,offset:4938}},type:"paragraph"},$R[2966]={filename:"sample.tsx tsx",lang:"tsx",position:$R[2967]={start:$R[2968]={line:178,column:1,offset:4940},end:$R[2969]={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[2970]={type:"root",children:$R[2971]=[$R[2972]={type:"element",tagName:"pre",properties:$R[2973]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[2974]=[$R[2975]={type:"element",tagName:"code",properties:$R[2976]={},children:$R[2977]=[$R[2978]={type:"element",tagName:"span",properties:$R[2979]={class:"line"},children:$R[2980]=[$R[2981]={type:"element",tagName:"span",properties:$R[2982]={style:"color:#4D9375"},children:$R[2983]=[$R[2984]={type:"text",value:"import"}]},$R[2985]={type:"element",tagName:"span",properties:$R[2986]={style:"color:#666666"},children:$R[2987]=[$R[2988]={type:"text",value:" {"}]},$R[2989]={type:"element",tagName:"span",properties:$R[2990]={style:"color:#BD976A"},children:$R[2991]=[$R[2992]={type:"text",value:" atom"}]},$R[2993]={type:"element",tagName:"span",properties:$R[2994]={style:"color:#666666"},children:$R[2995]=[$R[2996]={type:"text",value:","}]},$R[2997]={type:"element",tagName:"span",properties:$R[2998]={style:"color:#BD976A"},children:$R[2999]=[$R[3000]={type:"text",value:" useAtom"}]},$R[3001]={type:"element",tagName:"span",properties:$R[3002]={style:"color:#666666"},children:$R[3003]=[$R[3004]={type:"text",value:" }"}]},$R[3005]={type:"element",tagName:"span",properties:$R[3006]={style:"color:#4D9375"},children:$R[3007]=[$R[3008]={type:"text",value:" from"}]},$R[3009]={type:"element",tagName:"span",properties:$R[3010]={style:"color:#C98A7D77"},children:$R[3011]=[$R[3012]={type:"text",value:" \""}]},$R[3013]={type:"element",tagName:"span",properties:$R[3014]={style:"color:#C98A7D"},children:$R[3015]=[$R[3016]={type:"text",value:"jotai"}]},$R[3017]={type:"element",tagName:"span",properties:$R[3018]={style:"color:#C98A7D77"},children:$R[3019]=[$R[3020]={type:"text",value:"\""}]},$R[3021]={type:"element",tagName:"span",properties:$R[3022]={style:"color:#666666"},children:$R[3023]=[$R[3024]={type:"text",value:";"}]}]},$R[3025]={type:"text",value:"\n"},$R[3026]={type:"element",tagName:"span",properties:$R[3027]={class:"line"},children:$R[3028]=[]},$R[3029]={type:"text",value:"\n"},$R[3030]={type:"element",tagName:"span",properties:$R[3031]={class:"line"},children:$R[3032]=[$R[3033]={type:"element",tagName:"span",properties:$R[3034]={style:"color:#CB7676"},children:$R[3035]=[$R[3036]={type:"text",value:"function"}]},$R[3037]={type:"element",tagName:"span",properties:$R[3038]={style:"color:#80A665"},children:$R[3039]=[$R[3040]={type:"text",value:" createAtom"}]},$R[3041]={type:"element",tagName:"span",properties:$R[3042]={style:"color:#666666"},children:$R[3043]=[$R[3044]={type:"text",value:"("}]},$R[3045]={type:"element",tagName:"span",properties:$R[3046]={style:"color:#BD976A"},children:$R[3047]=[$R[3048]={type:"text",value:"userId"}]},$R[3049]={type:"element",tagName:"span",properties:$R[3050]={style:"color:#666666"},children:$R[3051]=[$R[3052]={type:"text",value:": "}]},$R[3053]={type:"element",tagName:"span",properties:$R[3054]={style:"color:#5DA994"},children:$R[3055]=[$R[3056]={type:"text",value:"string"}]},$R[3057]={type:"element",tagName:"span",properties:$R[3058]={style:"color:#666666"},children:$R[3059]=[$R[3060]={type:"text",value:")"}]},$R[3061]={type:"element",tagName:"span",properties:$R[3062]={style:"color:#666666"},children:$R[3063]=[$R[3064]={type:"text",value:" {"}]}]},$R[3065]={type:"text",value:"\n"},$R[3066]={type:"element",tagName:"span",properties:$R[3067]={class:"line"},children:$R[3068]=[$R[3069]={type:"element",tagName:"span",properties:$R[3070]={style:"color:#4D9375"},children:$R[3071]=[$R[3072]={type:"text",value:"\treturn"}]},$R[3073]={type:"element",tagName:"span",properties:$R[3074]={style:"color:#80A665"},children:$R[3075]=[$R[3076]={type:"text",value:" atom"}]},$R[3077]={type:"element",tagName:"span",properties:$R[3078]={style:"color:#666666"},children:$R[3079]=[$R[3080]={type:"text",value:"("}]},$R[3081]={type:"element",tagName:"span",properties:$R[3082]={style:"color:#BD976A"},children:$R[3083]=[$R[3084]={type:"text",value:"userId"}]},$R[3085]={type:"element",tagName:"span",properties:$R[3086]={style:"color:#CB7676"},children:$R[3087]=[$R[3088]={type:"text",value:" ==="}]},$R[3089]={type:"element",tagName:"span",properties:$R[3090]={style:"color:#C98A7D77"},children:$R[3091]=[$R[3092]={type:"text",value:" \""}]},$R[3093]={type:"element",tagName:"span",properties:$R[3094]={style:"color:#C98A7D"},children:$R[3095]=[$R[3096]={type:"text",value:"bob@example.com"}]},$R[3097]={type:"element",tagName:"span",properties:$R[3098]={style:"color:#C98A7D77"},children:$R[3099]=[$R[3100]={type:"text",value:"\""}]},$R[3101]={type:"element",tagName:"span",properties:$R[3102]={style:"color:#CB7676"},children:$R[3103]=[$R[3104]={type:"text",value:" ?"}]},$R[3105]={type:"element",tagName:"span",properties:$R[3106]={style:"color:#4C9A91"},children:$R[3107]=[$R[3108]={type:"text",value:" 0"}]},$R[3109]={type:"element",tagName:"span",properties:$R[3110]={style:"color:#CB7676"},children:$R[3111]=[$R[3112]={type:"text",value:" :"}]},$R[3113]={type:"element",tagName:"span",properties:$R[3114]={style:"color:#4C9A91"},children:$R[3115]=[$R[3116]={type:"text",value:" 1"}]},$R[3117]={type:"element",tagName:"span",properties:$R[3118]={style:"color:#666666"},children:$R[3119]=[$R[3120]={type:"text",value:");"}]}]},$R[3121]={type:"text",value:"\n"},$R[3122]={type:"element",tagName:"span",properties:$R[3123]={class:"line"},children:$R[3124]=[$R[3125]={type:"element",tagName:"span",properties:$R[3126]={style:"color:#666666"},children:$R[3127]=[$R[3128]={type:"text",value:"}"}]}]},$R[3129]={type:"text",value:"\n"},$R[3130]={type:"element",tagName:"span",properties:$R[3131]={class:"line"},children:$R[3132]=[]},$R[3133]={type:"text",value:"\n"},$R[3134]={type:"element",tagName:"span",properties:$R[3135]={class:"line"},children:$R[3136]=[$R[3137]={type:"element",tagName:"span",properties:$R[3138]={style:"color:#CB7676"},children:$R[3139]=[$R[3140]={type:"text",value:"const"}]},$R[3141]={type:"element",tagName:"span",properties:$R[3142]={style:"color:#BD976A"},children:$R[3143]=[$R[3144]={type:"text",value:" CountAtomContext"}]},$R[3145]={type:"element",tagName:"span",properties:$R[3146]={style:"color:#666666"},children:$R[3147]=[$R[3148]={type:"text",value:" ="}]},$R[3149]={type:"element",tagName:"span",properties:$R[3150]={style:"color:#BD976A"},children:$R[3151]=[$R[3152]={type:"text",value:" React"}]},$R[3153]={type:"element",tagName:"span",properties:$R[3154]={style:"color:#666666"},children:$R[3155]=[$R[3156]={type:"text",value:"."}]},$R[3157]={type:"element",tagName:"span",properties:$R[3158]={style:"color:#80A665"},children:$R[3159]=[$R[3160]={type:"text",value:"createContext"}]},$R[3161]={type:"element",tagName:"span",properties:$R[3162]={style:"color:#666666"},children:$R[3163]=[$R[3164]={type:"text",value:"("}]},$R[3165]={type:"element",tagName:"span",properties:$R[3166]={style:"color:#80A665"},children:$R[3167]=[$R[3168]={type:"text",value:"createAtom"}]},$R[3169]={type:"element",tagName:"span",properties:$R[3170]={style:"color:#666666"},children:$R[3171]=[$R[3172]={type:"text",value:"("}]},$R[3173]={type:"element",tagName:"span",properties:$R[3174]={style:"color:#C98A7D77"},children:$R[3175]=[$R[3176]={type:"text",value:"\""}]},$R[3177]={type:"element",tagName:"span",properties:$R[3178]={style:"color:#C98A7D"},children:$R[3179]=[$R[3180]={type:"text",value:"bob@example.com"}]},$R[3181]={type:"element",tagName:"span",properties:$R[3182]={style:"color:#C98A7D77"},children:$R[3183]=[$R[3184]={type:"text",value:"\""}]},$R[3185]={type:"element",tagName:"span",properties:$R[3186]={style:"color:#666666"},children:$R[3187]=[$R[3188]={type:"text",value:"));"}]}]},$R[3189]={type:"text",value:"\n"},$R[3190]={type:"element",tagName:"span",properties:$R[3191]={class:"line"},children:$R[3192]=[$R[3193]={type:"element",tagName:"span",properties:$R[3194]={style:"color:#CB7676"},children:$R[3195]=[$R[3196]={type:"text",value:"const"}]},$R[3197]={type:"element",tagName:"span",properties:$R[3198]={style:"color:#80A665"},children:$R[3199]=[$R[3200]={type:"text",value:" useCountAtom"}]},$R[3201]={type:"element",tagName:"span",properties:$R[3202]={style:"color:#666666"},children:$R[3203]=[$R[3204]={type:"text",value:" ="}]},$R[3205]={type:"element",tagName:"span",properties:$R[3206]={style:"color:#666666"},children:$R[3207]=[$R[3208]={type:"text",value:" ()"}]},$R[3209]={type:"element",tagName:"span",properties:$R[3210]={style:"color:#666666"},children:$R[3211]=[$R[3212]={type:"text",value:" =>"}]},$R[3213]={type:"element",tagName:"span",properties:$R[3214]={style:"color:#80A665"},children:$R[3215]=[$R[3216]={type:"text",value:" useContext"}]},$R[3217]={type:"element",tagName:"span",properties:$R[3218]={style:"color:#666666"},children:$R[3219]=[$R[3220]={type:"text",value:"("}]},$R[3221]={type:"element",tagName:"span",properties:$R[3222]={style:"color:#BD976A"},children:$R[3223]=[$R[3224]={type:"text",value:"CountAtomContext"}]},$R[3225]={type:"element",tagName:"span",properties:$R[3226]={style:"color:#666666"},children:$R[3227]=[$R[3228]={type:"text",value:");"}]}]},$R[3229]={type:"text",value:"\n"},$R[3230]={type:"element",tagName:"span",properties:$R[3231]={class:"line"},children:$R[3232]=[$R[3233]={type:"element",tagName:"span",properties:$R[3234]={style:"color:#CB7676"},children:$R[3235]=[$R[3236]={type:"text",value:"function"}]},$R[3237]={type:"element",tagName:"span",properties:$R[3238]={style:"color:#80A665"},children:$R[3239]=[$R[3240]={type:"text",value:" CountAtomScopeProvider"}]},$R[3241]={type:"element",tagName:"span",properties:$R[3242]={style:"color:#666666"},children:$R[3243]=[$R[3244]={type:"text",value:"({"}]},$R[3245]={type:"element",tagName:"span",properties:$R[3246]={style:"color:#BD976A"},children:$R[3247]=[$R[3248]={type:"text",value:" children"}]},$R[3249]={type:"element",tagName:"span",properties:$R[3250]={style:"color:#666666"},children:$R[3251]=[$R[3252]={type:"text",value:","}]},$R[3253]={type:"element",tagName:"span",properties:$R[3254]={style:"color:#BD976A"},children:$R[3255]=[$R[3256]={type:"text",value:" userId"}]},$R[3257]={type:"element",tagName:"span",properties:$R[3258]={style:"color:#666666"},children:$R[3259]=[$R[3260]={type:"text",value:" })"}]},$R[3261]={type:"element",tagName:"span",properties:$R[3262]={style:"color:#666666"},children:$R[3263]=[$R[3264]={type:"text",value:" {"}]}]},$R[3265]={type:"text",value:"\n"},$R[3266]={type:"element",tagName:"span",properties:$R[3267]={class:"line"},children:$R[3268]=[$R[3269]={type:"element",tagName:"span",properties:$R[3270]={style:"color:#758575DD"},children:$R[3271]=[$R[3272]={type:"text",value:"\t// Create a new atom for every user Id"}]}]},$R[3273]={type:"text",value:"\n"},$R[3274]={type:"element",tagName:"span",properties:$R[3275]={class:"line"},children:$R[3276]=[$R[3277]={type:"element",tagName:"span",properties:$R[3278]={style:"color:#CB7676"},children:$R[3279]=[$R[3280]={type:"text",value:"\tconst"}]},$R[3281]={type:"element",tagName:"span",properties:$R[3282]={style:"color:#BD976A"},children:$R[3283]=[$R[3284]={type:"text",value:" countAtom"}]},$R[3285]={type:"element",tagName:"span",properties:$R[3286]={style:"color:#666666"},children:$R[3287]=[$R[3288]={type:"text",value:" ="}]},$R[3289]={type:"element",tagName:"span",properties:$R[3290]={style:"color:#80A665"},children:$R[3291]=[$R[3292]={type:"text",value:" useMemo"}]},$R[3293]={type:"element",tagName:"span",properties:$R[3294]={style:"color:#666666"},children:$R[3295]=[$R[3296]={type:"text",value:"(()"}]},$R[3297]={type:"element",tagName:"span",properties:$R[3298]={style:"color:#666666"},children:$R[3299]=[$R[3300]={type:"text",value:" =>"}]},$R[3301]={type:"element",tagName:"span",properties:$R[3302]={style:"color:#80A665"},children:$R[3303]=[$R[3304]={type:"text",value:" createAtom"}]},$R[3305]={type:"element",tagName:"span",properties:$R[3306]={style:"color:#666666"},children:$R[3307]=[$R[3308]={type:"text",value:"("}]},$R[3309]={type:"element",tagName:"span",properties:$R[3310]={style:"color:#BD976A"},children:$R[3311]=[$R[3312]={type:"text",value:"userId"}]},$R[3313]={type:"element",tagName:"span",properties:$R[3314]={style:"color:#666666"},children:$R[3315]=[$R[3316]={type:"text",value:"),"}]},$R[3317]={type:"element",tagName:"span",properties:$R[3318]={style:"color:#666666"},children:$R[3319]=[$R[3320]={type:"text",value:" ["}]},$R[3321]={type:"element",tagName:"span",properties:$R[3322]={style:"color:#BD976A"},children:$R[3323]=[$R[3324]={type:"text",value:"userId"}]},$R[3325]={type:"element",tagName:"span",properties:$R[3326]={style:"color:#666666"},children:$R[3327]=[$R[3328]={type:"text",value:"]);"}]}]},$R[3329]={type:"text",value:"\n"},$R[3330]={type:"element",tagName:"span",properties:$R[3331]={class:"line"},children:$R[3332]=[$R[3333]={type:"element",tagName:"span",properties:$R[3334]={style:"color:#4D9375"},children:$R[3335]=[$R[3336]={type:"text",value:"\treturn"}]},$R[3337]={type:"element",tagName:"span",properties:$R[3338]={style:"color:#666666"},children:$R[3339]=[$R[3340]={type:"text",value:" ("}]}]},$R[3341]={type:"text",value:"\n"},$R[3342]={type:"element",tagName:"span",properties:$R[3343]={class:"line"},children:$R[3344]=[$R[3345]={type:"element",tagName:"span",properties:$R[3346]={style:"color:#666666"},children:$R[3347]=[$R[3348]={type:"text",value:"\t\t\x3C"}]},$R[3349]={type:"element",tagName:"span",properties:$R[3350]={style:"color:#B8A965"},children:$R[3351]=[$R[3352]={type:"text",value:"CountAtomContext.Provider"}]},$R[3353]={type:"element",tagName:"span",properties:$R[3354]={style:"color:#BD976A"},children:$R[3355]=[$R[3356]={type:"text",value:" value"}]},$R[3357]={type:"element",tagName:"span",properties:$R[3358]={style:"color:#666666"},children:$R[3359]=[$R[3360]={type:"text",value:"={"}]},$R[3361]={type:"element",tagName:"span",properties:$R[3362]={style:"color:#BD976A"},children:$R[3363]=[$R[3364]={type:"text",value:"countAtom"}]},$R[3365]={type:"element",tagName:"span",properties:$R[3366]={style:"color:#666666"},children:$R[3367]=[$R[3368]={type:"text",value:"}>"}]}]},$R[3369]={type:"text",value:"\n"},$R[3370]={type:"element",tagName:"span",properties:$R[3371]={class:"line"},children:$R[3372]=[$R[3373]={type:"element",tagName:"span",properties:$R[3374]={style:"color:#666666"},children:$R[3375]=[$R[3376]={type:"text",value:"\t\t\t{"}]},$R[3377]={type:"element",tagName:"span",properties:$R[3378]={style:"color:#BD976A"},children:$R[3379]=[$R[3380]={type:"text",value:"children"}]},$R[3381]={type:"element",tagName:"span",properties:$R[3382]={style:"color:#666666"},children:$R[3383]=[$R[3384]={type:"text",value:"}"}]}]},$R[3385]={type:"text",value:"\n"},$R[3386]={type:"element",tagName:"span",properties:$R[3387]={class:"line"},children:$R[3388]=[$R[3389]={type:"element",tagName:"span",properties:$R[3390]={style:"color:#666666"},children:$R[3391]=[$R[3392]={type:"text",value:"\t\t\x3C/"}]},$R[3393]={type:"element",tagName:"span",properties:$R[3394]={style:"color:#B8A965"},children:$R[3395]=[$R[3396]={type:"text",value:"CountAtomContext.Provider"}]},$R[3397]={type:"element",tagName:"span",properties:$R[3398]={style:"color:#666666"},children:$R[3399]=[$R[3400]={type:"text",value:">"}]}]},$R[3401]={type:"text",value:"\n"},$R[3402]={type:"element",tagName:"span",properties:$R[3403]={class:"line"},children:$R[3404]=[$R[3405]={type:"element",tagName:"span",properties:$R[3406]={style:"color:#666666"},children:$R[3407]=[$R[3408]={type:"text",value:"\t);"}]}]},$R[3409]={type:"text",value:"\n"},$R[3410]={type:"element",tagName:"span",properties:$R[3411]={class:"line"},children:$R[3412]=[$R[3413]={type:"element",tagName:"span",properties:$R[3414]={style:"color:#666666"},children:$R[3415]=[$R[3416]={type:"text",value:"}"}]}]},$R[3417]={type:"text",value:"\n"},$R[3418]={type:"element",tagName:"span",properties:$R[3419]={class:"line"},children:$R[3420]=[]},$R[3421]={type:"text",value:"\n"},$R[3422]={type:"element",tagName:"span",properties:$R[3423]={class:"line"},children:$R[3424]=[$R[3425]={type:"element",tagName:"span",properties:$R[3426]={style:"color:#CB7676"},children:$R[3427]=[$R[3428]={type:"text",value:"function"}]},$R[3429]={type:"element",tagName:"span",properties:$R[3430]={style:"color:#80A665"},children:$R[3431]=[$R[3432]={type:"text",value:" Counter"}]},$R[3433]={type:"element",tagName:"span",properties:$R[3434]={style:"color:#666666"},children:$R[3435]=[$R[3436]={type:"text",value:"()"}]},$R[3437]={type:"element",tagName:"span",properties:$R[3438]={style:"color:#666666"},children:$R[3439]=[$R[3440]={type:"text",value:" {"}]}]},$R[3441]={type:"text",value:"\n"},$R[3442]={type:"element",tagName:"span",properties:$R[3443]={class:"line"},children:$R[3444]=[$R[3445]={type:"element",tagName:"span",properties:$R[3446]={style:"color:#CB7676"},children:$R[3447]=[$R[3448]={type:"text",value:"\tconst"}]},$R[3449]={type:"element",tagName:"span",properties:$R[3450]={style:"color:#BD976A"},children:$R[3451]=[$R[3452]={type:"text",value:" countAtom"}]},$R[3453]={type:"element",tagName:"span",properties:$R[3454]={style:"color:#666666"},children:$R[3455]=[$R[3456]={type:"text",value:" ="}]},$R[3457]={type:"element",tagName:"span",properties:$R[3458]={style:"color:#80A665"},children:$R[3459]=[$R[3460]={type:"text",value:" useCountAtom"}]},$R[3461]={type:"element",tagName:"span",properties:$R[3462]={style:"color:#666666"},children:$R[3463]=[$R[3464]={type:"text",value:"();"}]}]},$R[3465]={type:"text",value:"\n"},$R[3466]={type:"element",tagName:"span",properties:$R[3467]={class:"line"},children:$R[3468]=[$R[3469]={type:"element",tagName:"span",properties:$R[3470]={style:"color:#CB7676"},children:$R[3471]=[$R[3472]={type:"text",value:"\tconst"}]},$R[3473]={type:"element",tagName:"span",properties:$R[3474]={style:"color:#666666"},children:$R[3475]=[$R[3476]={type:"text",value:" ["}]},$R[3477]={type:"element",tagName:"span",properties:$R[3478]={style:"color:#BD976A"},children:$R[3479]=[$R[3480]={type:"text",value:"count"}]},$R[3481]={type:"element",tagName:"span",properties:$R[3482]={style:"color:#666666"},children:$R[3483]=[$R[3484]={type:"text",value:","}]},$R[3485]={type:"element",tagName:"span",properties:$R[3486]={style:"color:#BD976A"},children:$R[3487]=[$R[3488]={type:"text",value:" setCount"}]},$R[3489]={type:"element",tagName:"span",properties:$R[3490]={style:"color:#666666"},children:$R[3491]=[$R[3492]={type:"text",value:"]"}]},$R[3493]={type:"element",tagName:"span",properties:$R[3494]={style:"color:#666666"},children:$R[3495]=[$R[3496]={type:"text",value:" ="}]},$R[3497]={type:"element",tagName:"span",properties:$R[3498]={style:"color:#80A665"},children:$R[3499]=[$R[3500]={type:"text",value:" useAtom"}]},$R[3501]={type:"element",tagName:"span",properties:$R[3502]={style:"color:#666666"},children:$R[3503]=[$R[3504]={type:"text",value:"("}]},$R[3505]={type:"element",tagName:"span",properties:$R[3506]={style:"color:#BD976A"},children:$R[3507]=[$R[3508]={type:"text",value:"countAtom"}]},$R[3509]={type:"element",tagName:"span",properties:$R[3510]={style:"color:#666666"},children:$R[3511]=[$R[3512]={type:"text",value:");"}]}]},$R[3513]={type:"text",value:"\n"},$R[3514]={type:"element",tagName:"span",properties:$R[3515]={class:"line"},children:$R[3516]=[$R[3517]={type:"element",tagName:"span",properties:$R[3518]={style:"color:#4D9375"},children:$R[3519]=[$R[3520]={type:"text",value:"\treturn"}]},$R[3521]={type:"element",tagName:"span",properties:$R[3522]={style:"color:#666666"},children:$R[3523]=[$R[3524]={type:"text",value:" ("}]}]},$R[3525]={type:"text",value:"\n"},$R[3526]={type:"element",tagName:"span",properties:$R[3527]={class:"line"},children:$R[3528]=[$R[3529]={type:"element",tagName:"span",properties:$R[3530]={style:"color:#666666"},children:$R[3531]=[$R[3532]={type:"text",value:"\t\t\x3C"}]},$R[3533]={type:"element",tagName:"span",properties:$R[3534]={style:"color:#4D9375"},children:$R[3535]=[$R[3536]={type:"text",value:"div"}]},$R[3537]={type:"element",tagName:"span",properties:$R[3538]={style:"color:#666666"},children:$R[3539]=[$R[3540]={type:"text",value:">"}]}]},$R[3541]={type:"text",value:"\n"},$R[3542]={type:"element",tagName:"span",properties:$R[3543]={class:"line"},children:$R[3544]=[$R[3545]={type:"element",tagName:"span",properties:$R[3546]={style:"color:#DBD7CAEE"},children:$R[3547]=[$R[3548]={type:"text",value:"\t\t\tcount:"}]}]},$R[3549]={type:"text",value:"\n"},$R[3550]={type:"element",tagName:"span",properties:$R[3551]={class:"line"},children:$R[3552]=[$R[3553]={type:"element",tagName:"span",properties:$R[3554]={style:"color:#666666"},children:$R[3555]=[$R[3556]={type:"text",value:"\t\t\t{"}]},$R[3557]={type:"element",tagName:"span",properties:$R[3558]={style:"color:#C98A7D77"},children:$R[3559]=[$R[3560]={type:"text",value:"\""}]},$R[3561]={type:"element",tagName:"span",properties:$R[3562]={style:"color:#C98A7D77"},children:$R[3563]=[$R[3564]={type:"text",value:" \""}]},$R[3565]={type:"element",tagName:"span",properties:$R[3566]={style:"color:#666666"},children:$R[3567]=[$R[3568]={type:"text",value:"}"}]}]},$R[3569]={type:"text",value:"\n"},$R[3570]={type:"element",tagName:"span",properties:$R[3571]={class:"line"},children:$R[3572]=[$R[3573]={type:"element",tagName:"span",properties:$R[3574]={style:"color:#666666"},children:$R[3575]=[$R[3576]={type:"text",value:"\t\t\t{"}]},$R[3577]={type:"element",tagName:"span",properties:$R[3578]={style:"color:#BD976A"},children:$R[3579]=[$R[3580]={type:"text",value:"count"}]},$R[3581]={type:"element",tagName:"span",properties:$R[3582]={style:"color:#666666"},children:$R[3583]=[$R[3584]={type:"text",value:"}"}]}]},$R[3585]={type:"text",value:"\n"},$R[3586]={type:"element",tagName:"span",properties:$R[3587]={class:"line"},children:$R[3588]=[$R[3589]={type:"element",tagName:"span",properties:$R[3590]={style:"color:#666666"},children:$R[3591]=[$R[3592]={type:"text",value:"\t\t\t{"}]},$R[3593]={type:"element",tagName:"span",properties:$R[3594]={style:"color:#C98A7D77"},children:$R[3595]=[$R[3596]={type:"text",value:"\""}]},$R[3597]={type:"element",tagName:"span",properties:$R[3598]={style:"color:#C98A7D77"},children:$R[3599]=[$R[3600]={type:"text",value:" \""}]},$R[3601]={type:"element",tagName:"span",properties:$R[3602]={style:"color:#666666"},children:$R[3603]=[$R[3604]={type:"text",value:"}"}]}]},$R[3605]={type:"text",value:"\n"},$R[3606]={type:"element",tagName:"span",properties:$R[3607]={class:"line"},children:$R[3608]=[$R[3609]={type:"element",tagName:"span",properties:$R[3610]={style:"color:#666666"},children:$R[3611]=[$R[3612]={type:"text",value:"\t\t\t\x3C"}]},$R[3613]={type:"element",tagName:"span",properties:$R[3614]={style:"color:#4D9375"},children:$R[3615]=[$R[3616]={type:"text",value:"button"}]},$R[3617]={type:"element",tagName:"span",properties:$R[3618]={style:"color:#BD976A"},children:$R[3619]=[$R[3620]={type:"text",value:" onClick"}]},$R[3621]={type:"element",tagName:"span",properties:$R[3622]={style:"color:#666666"},children:$R[3623]=[$R[3624]={type:"text",value:"={()"}]},$R[3625]={type:"element",tagName:"span",properties:$R[3626]={style:"color:#666666"},children:$R[3627]=[$R[3628]={type:"text",value:" =>"}]},$R[3629]={type:"element",tagName:"span",properties:$R[3630]={style:"color:#80A665"},children:$R[3631]=[$R[3632]={type:"text",value:" setCount"}]},$R[3633]={type:"element",tagName:"span",properties:$R[3634]={style:"color:#666666"},children:$R[3635]=[$R[3636]={type:"text",value:"("}]},$R[3637]={type:"element",tagName:"span",properties:$R[3638]={style:"color:#BD976A"},children:$R[3639]=[$R[3640]={type:"text",value:"c"}]},$R[3641]={type:"element",tagName:"span",properties:$R[3642]={style:"color:#666666"},children:$R[3643]=[$R[3644]={type:"text",value:" =>"}]},$R[3645]={type:"element",tagName:"span",properties:$R[3646]={style:"color:#BD976A"},children:$R[3647]=[$R[3648]={type:"text",value:" c"}]},$R[3649]={type:"element",tagName:"span",properties:$R[3650]={style:"color:#CB7676"},children:$R[3651]=[$R[3652]={type:"text",value:" +"}]},$R[3653]={type:"element",tagName:"span",properties:$R[3654]={style:"color:#4C9A91"},children:$R[3655]=[$R[3656]={type:"text",value:" 1"}]},$R[3657]={type:"element",tagName:"span",properties:$R[3658]={style:"color:#666666"},children:$R[3659]=[$R[3660]={type:"text",value:")}>"}]},$R[3661]={type:"element",tagName:"span",properties:$R[3662]={style:"color:#DBD7CAEE"},children:$R[3663]=[$R[3664]={type:"text",value:"+1"}]},$R[3665]={type:"element",tagName:"span",properties:$R[3666]={style:"color:#666666"},children:$R[3667]=[$R[3668]={type:"text",value:"\x3C/"}]},$R[3669]={type:"element",tagName:"span",properties:$R[3670]={style:"color:#4D9375"},children:$R[3671]=[$R[3672]={type:"text",value:"button"}]},$R[3673]={type:"element",tagName:"span",properties:$R[3674]={style:"color:#666666"},children:$R[3675]=[$R[3676]={type:"text",value:">"}]}]},$R[3677]={type:"text",value:"\n"},$R[3678]={type:"element",tagName:"span",properties:$R[3679]={class:"line"},children:$R[3680]=[$R[3681]={type:"element",tagName:"span",properties:$R[3682]={style:"color:#666666"},children:$R[3683]=[$R[3684]={type:"text",value:"\t\t\x3C/"}]},$R[3685]={type:"element",tagName:"span",properties:$R[3686]={style:"color:#4D9375"},children:$R[3687]=[$R[3688]={type:"text",value:"div"}]},$R[3689]={type:"element",tagName:"span",properties:$R[3690]={style:"color:#666666"},children:$R[3691]=[$R[3692]={type:"text",value:">"}]}]},$R[3693]={type:"text",value:"\n"},$R[3694]={type:"element",tagName:"span",properties:$R[3695]={class:"line"},children:$R[3696]=[$R[3697]={type:"element",tagName:"span",properties:$R[3698]={style:"color:#666666"},children:$R[3699]=[$R[3700]={type:"text",value:"\t);"}]}]},$R[3701]={type:"text",value:"\n"},$R[3702]={type:"element",tagName:"span",properties:$R[3703]={class:"line"},children:$R[3704]=[$R[3705]={type:"element",tagName:"span",properties:$R[3706]={style:"color:#666666"},children:$R[3707]=[$R[3708]={type:"text",value:"}"}]}]},$R[3709]={type:"text",value:"\n"},$R[3710]={type:"element",tagName:"span",properties:$R[3711]={class:"line"},children:$R[3712]=[]},$R[3713]={type:"text",value:"\n"},$R[3714]={type:"element",tagName:"span",properties:$R[3715]={class:"line"},children:$R[3716]=[$R[3717]={type:"element",tagName:"span",properties:$R[3718]={style:"color:#4D9375"},children:$R[3719]=[$R[3720]={type:"text",value:"export"}]},$R[3721]={type:"element",tagName:"span",properties:$R[3722]={style:"color:#CB7676"},children:$R[3723]=[$R[3724]={type:"text",value:" function"}]},$R[3725]={type:"element",tagName:"span",properties:$R[3726]={style:"color:#80A665"},children:$R[3727]=[$R[3728]={type:"text",value:" App"}]},$R[3729]={type:"element",tagName:"span",properties:$R[3730]={style:"color:#666666"},children:$R[3731]=[$R[3732]={type:"text",value:"()"}]},$R[3733]={type:"element",tagName:"span",properties:$R[3734]={style:"color:#666666"},children:$R[3735]=[$R[3736]={type:"text",value:" {"}]}]},$R[3737]={type:"text",value:"\n"},$R[3738]={type:"element",tagName:"span",properties:$R[3739]={class:"line"},children:$R[3740]=[$R[3741]={type:"element",tagName:"span",properties:$R[3742]={style:"color:#4D9375"},children:$R[3743]=[$R[3744]={type:"text",value:"\treturn"}]},$R[3745]={type:"element",tagName:"span",properties:$R[3746]={style:"color:#666666"},children:$R[3747]=[$R[3748]={type:"text",value:" ("}]}]},$R[3749]={type:"text",value:"\n"},$R[3750]={type:"element",tagName:"span",properties:$R[3751]={class:"line"},children:$R[3752]=[$R[3753]={type:"element",tagName:"span",properties:$R[3754]={style:"color:#666666"},children:$R[3755]=[$R[3756]={type:"text",value:"\t\t\x3C"}]},$R[3757]={type:"element",tagName:"span",properties:$R[3758]={style:"color:#B8A965"},children:$R[3759]=[$R[3760]={type:"text",value:"CountAtomScopeProvider"}]},$R[3761]={type:"element",tagName:"span",properties:$R[3762]={style:"color:#BD976A"},children:$R[3763]=[$R[3764]={type:"text",value:" userId"}]},$R[3765]={type:"element",tagName:"span",properties:$R[3766]={style:"color:#666666"},children:$R[3767]=[$R[3768]={type:"text",value:"="}]},$R[3769]={type:"element",tagName:"span",properties:$R[3770]={style:"color:#C98A7D77"},children:$R[3771]=[$R[3772]={type:"text",value:"\""}]},$R[3773]={type:"element",tagName:"span",properties:$R[3774]={style:"color:#C98A7D"},children:$R[3775]=[$R[3776]={type:"text",value:"bob@example.com"}]},$R[3777]={type:"element",tagName:"span",properties:$R[3778]={style:"color:#C98A7D77"},children:$R[3779]=[$R[3780]={type:"text",value:"\""}]},$R[3781]={type:"element",tagName:"span",properties:$R[3782]={style:"color:#666666"},children:$R[3783]=[$R[3784]={type:"text",value:">"}]}]},$R[3785]={type:"text",value:"\n"},$R[3786]={type:"element",tagName:"span",properties:$R[3787]={class:"line"},children:$R[3788]=[$R[3789]={type:"element",tagName:"span",properties:$R[3790]={style:"color:#666666"},children:$R[3791]=[$R[3792]={type:"text",value:"\t\t\t\x3C"}]},$R[3793]={type:"element",tagName:"span",properties:$R[3794]={style:"color:#B8A965"},children:$R[3795]=[$R[3796]={type:"text",value:"Counter"}]},$R[3797]={type:"element",tagName:"span",properties:$R[3798]={style:"color:#666666"},children:$R[3799]=[$R[3800]={type:"text",value:" />"}]}]},$R[3801]={type:"text",value:"\n"},$R[3802]={type:"element",tagName:"span",properties:$R[3803]={class:"line"},children:$R[3804]=[$R[3805]={type:"element",tagName:"span",properties:$R[3806]={style:"color:#666666"},children:$R[3807]=[$R[3808]={type:"text",value:"\t\t\t\x3C"}]},$R[3809]={type:"element",tagName:"span",properties:$R[3810]={style:"color:#B8A965"},children:$R[3811]=[$R[3812]={type:"text",value:"Counter"}]},$R[3813]={type:"element",tagName:"span",properties:$R[3814]={style:"color:#666666"},children:$R[3815]=[$R[3816]={type:"text",value:" />"}]}]},$R[3817]={type:"text",value:"\n"},$R[3818]={type:"element",tagName:"span",properties:$R[3819]={class:"line"},children:$R[3820]=[$R[3821]={type:"element",tagName:"span",properties:$R[3822]={style:"color:#666666"},children:$R[3823]=[$R[3824]={type:"text",value:"\t\t\t\x3C"}]},$R[3825]={type:"element",tagName:"span",properties:$R[3826]={style:"color:#B8A965"},children:$R[3827]=[$R[3828]={type:"text",value:"CountAtomScopeProvider"}]},$R[3829]={type:"element",tagName:"span",properties:$R[3830]={style:"color:#BD976A"},children:$R[3831]=[$R[3832]={type:"text",value:" userId"}]},$R[3833]={type:"element",tagName:"span",properties:$R[3834]={style:"color:#666666"},children:$R[3835]=[$R[3836]={type:"text",value:"="}]},$R[3837]={type:"element",tagName:"span",properties:$R[3838]={style:"color:#C98A7D77"},children:$R[3839]=[$R[3840]={type:"text",value:"\""}]},$R[3841]={type:"element",tagName:"span",properties:$R[3842]={style:"color:#C98A7D"},children:$R[3843]=[$R[3844]={type:"text",value:"tom@example.com"}]},$R[3845]={type:"element",tagName:"span",properties:$R[3846]={style:"color:#C98A7D77"},children:$R[3847]=[$R[3848]={type:"text",value:"\""}]},$R[3849]={type:"element",tagName:"span",properties:$R[3850]={style:"color:#666666"},children:$R[3851]=[$R[3852]={type:"text",value:">"}]}]},$R[3853]={type:"text",value:"\n"},$R[3854]={type:"element",tagName:"span",properties:$R[3855]={class:"line"},children:$R[3856]=[$R[3857]={type:"element",tagName:"span",properties:$R[3858]={style:"color:#666666"},children:$R[3859]=[$R[3860]={type:"text",value:"\t\t\t\t\x3C"}]},$R[3861]={type:"element",tagName:"span",properties:$R[3862]={style:"color:#B8A965"},children:$R[3863]=[$R[3864]={type:"text",value:"Counter"}]},$R[3865]={type:"element",tagName:"span",properties:$R[3866]={style:"color:#666666"},children:$R[3867]=[$R[3868]={type:"text",value:" />"}]}]},$R[3869]={type:"text",value:"\n"},$R[3870]={type:"element",tagName:"span",properties:$R[3871]={class:"line"},children:$R[3872]=[$R[3873]={type:"element",tagName:"span",properties:$R[3874]={style:"color:#666666"},children:$R[3875]=[$R[3876]={type:"text",value:"\t\t\t\t\x3C"}]},$R[3877]={type:"element",tagName:"span",properties:$R[3878]={style:"color:#B8A965"},children:$R[3879]=[$R[3880]={type:"text",value:"Counter"}]},$R[3881]={type:"element",tagName:"span",properties:$R[3882]={style:"color:#666666"},children:$R[3883]=[$R[3884]={type:"text",value:" />"}]}]},$R[3885]={type:"text",value:"\n"},$R[3886]={type:"element",tagName:"span",properties:$R[3887]={class:"line"},children:$R[3888]=[$R[3889]={type:"element",tagName:"span",properties:$R[3890]={style:"color:#666666"},children:$R[3891]=[$R[3892]={type:"text",value:"\t\t\t\x3C/"}]},$R[3893]={type:"element",tagName:"span",properties:$R[3894]={style:"color:#B8A965"},children:$R[3895]=[$R[3896]={type:"text",value:"CountAtomScopeProvider"}]},$R[3897]={type:"element",tagName:"span",properties:$R[3898]={style:"color:#666666"},children:$R[3899]=[$R[3900]={type:"text",value:">"}]}]},$R[3901]={type:"text",value:"\n"},$R[3902]={type:"element",tagName:"span",properties:$R[3903]={class:"line"},children:$R[3904]=[$R[3905]={type:"element",tagName:"span",properties:$R[3906]={style:"color:#666666"},children:$R[3907]=[$R[3908]={type:"text",value:"\t\t\x3C/"}]},$R[3909]={type:"element",tagName:"span",properties:$R[3910]={style:"color:#B8A965"},children:$R[3911]=[$R[3912]={type:"text",value:"CountAtomScopeProvider"}]},$R[3913]={type:"element",tagName:"span",properties:$R[3914]={style:"color:#666666"},children:$R[3915]=[$R[3916]={type:"text",value:">"}]}]},$R[3917]={type:"text",value:"\n"},$R[3918]={type:"element",tagName:"span",properties:$R[3919]={class:"line"},children:$R[3920]=[$R[3921]={type:"element",tagName:"span",properties:$R[3922]={style:"color:#666666"},children:$R[3923]=[$R[3924]={type:"text",value:"\t);"}]}]},$R[3925]={type:"text",value:"\n"},$R[3926]={type:"element",tagName:"span",properties:$R[3927]={class:"line"},children:$R[3928]=[$R[3929]={type:"element",tagName:"span",properties:$R[3930]={style:"color:#666666"},children:$R[3931]=[$R[3932]={type:"text",value:"}"}]}]}],data:$R[3933]={_shiki_notation:$R[3934]=[$R[3935]={info:$R[3936]=[";","",void 0],line:$R[3937]={type:"element",tagName:"span",properties:$R[3938]={class:"line"},children:$R[3939]=[$R[3940]={type:"element",tagName:"span",properties:$R[3941]={style:"color:#4D9375"},children:$R[3942]=[$R[3943]={type:"text",value:"import"}]},$R[3944]={type:"element",tagName:"span",properties:$R[3945]={style:"color:#666666"},children:$R[3946]=[$R[3947]={type:"text",value:" {"}]},$R[3948]={type:"element",tagName:"span",properties:$R[3949]={style:"color:#BD976A"},children:$R[3950]=[$R[3951]={type:"text",value:" atom"}]},$R[3952]={type:"element",tagName:"span",properties:$R[3953]={style:"color:#666666"},children:$R[3954]=[$R[3955]={type:"text",value:","}]},$R[3956]={type:"element",tagName:"span",properties:$R[3957]={style:"color:#BD976A"},children:$R[3958]=[$R[3959]={type:"text",value:" useAtom"}]},$R[3960]={type:"element",tagName:"span",properties:$R[3961]={style:"color:#666666"},children:$R[3962]=[$R[3963]={type:"text",value:" }"}]},$R[3964]={type:"element",tagName:"span",properties:$R[3965]={style:"color:#4D9375"},children:$R[3966]=[$R[3967]={type:"text",value:" from"}]},$R[3968]={type:"element",tagName:"span",properties:$R[3969]={style:"color:#C98A7D77"},children:$R[3970]=[$R[3971]={type:"text",value:" \""}]},$R[3972]={type:"element",tagName:"span",properties:$R[3973]={style:"color:#C98A7D"},children:$R[3974]=[$R[3975]={type:"text",value:"jotai"}]},$R[3976]={type:"element",tagName:"span",properties:$R[3977]={style:"color:#C98A7D77"},children:$R[3978]=[$R[3979]={type:"text",value:"\""}]},$R[3980]={type:"element",tagName:"span",properties:$R[3981]={style:"color:#666666"},children:$R[3982]=[$R[3983]={type:"text",value:";"}]}]},token:$R[3984]={type:"element",tagName:"span",properties:$R[3985]={style:"color:#666666"},children:$R[3986]=[$R[3987]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[3988]={info:$R[3989]=[" //"," Create a new atom for every user Id",void 0],line:$R[3990]={type:"element",tagName:"span",properties:$R[3991]={class:"line"},children:$R[3992]=[$R[3993]={type:"element",tagName:"span",properties:$R[3994]={style:"color:#758575DD"},children:$R[3995]=[$R[3996]={type:"text",value:"\t// Create a new atom for every user Id"}]}]},token:$R[3997]={type:"element",tagName:"span",properties:$R[3998]={style:"color:#758575DD"},children:$R[3999]=[$R[4000]={type:"text",value:"\t// Create a new atom for every user Id"}]},isLineCommentOnly:!0,isJsxStyle:!1}]}}]}]}},$R[4001]={children:$R[4002]=[$R[4003]={position:$R[4004]={start:$R[4005]={line:225,column:1,offset:6000},end:$R[4006]={line:225,column:7,offset:6006}},type:"text",value:"上記の例は "},$R[4007]={position:$R[4008]={start:$R[4009]={line:225,column:7,offset:6006},end:$R[4010]={line:225,column:14,offset:6013}},type:"inlineCode",value:"jotai"},$R[4011]={position:$R[4012]={start:$R[4013]={line:225,column:14,offset:6013},end:$R[4014]={line:225,column:23,offset:6022}},type:"text",value:" を使っているが、"},$R[4015]={position:$R[4016]={start:$R[4017]={line:225,column:23,offset:6022},end:$R[4018]={line:225,column:31,offset:6030}},type:"inlineCode",value:"bunshi"},$R[4019]={position:$R[4020]={start:$R[4021]={line:225,column:31,offset:6030},end:$R[4022]={line:225,column:51,offset:6050}},type:"text",value:" も使うと以下のように書くことができる。"}],position:$R[4023]={start:$R[4024]={line:225,column:1,offset:6000},end:$R[4025]={line:225,column:51,offset:6050}},type:"paragraph"},$R[4026]={filename:"sample.tsx tsx",lang:"tsx",position:$R[4027]={start:$R[4028]={line:227,column:1,offset:6052},end:$R[4029]={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[4030]={type:"root",children:$R[4031]=[$R[4032]={type:"element",tagName:"pre",properties:$R[4033]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[4034]=[$R[4035]={type:"element",tagName:"code",properties:$R[4036]={},children:$R[4037]=[$R[4038]={type:"element",tagName:"span",properties:$R[4039]={class:"line"},children:$R[4040]=[$R[4041]={type:"element",tagName:"span",properties:$R[4042]={style:"color:#4D9375"},children:$R[4043]=[$R[4044]={type:"text",value:"import"}]},$R[4045]={type:"element",tagName:"span",properties:$R[4046]={style:"color:#666666"},children:$R[4047]=[$R[4048]={type:"text",value:" {"}]},$R[4049]={type:"element",tagName:"span",properties:$R[4050]={style:"color:#BD976A"},children:$R[4051]=[$R[4052]={type:"text",value:" atom"}]},$R[4053]={type:"element",tagName:"span",properties:$R[4054]={style:"color:#666666"},children:$R[4055]=[$R[4056]={type:"text",value:","}]},$R[4057]={type:"element",tagName:"span",properties:$R[4058]={style:"color:#BD976A"},children:$R[4059]=[$R[4060]={type:"text",value:" useAtom"}]},$R[4061]={type:"element",tagName:"span",properties:$R[4062]={style:"color:#666666"},children:$R[4063]=[$R[4064]={type:"text",value:" }"}]},$R[4065]={type:"element",tagName:"span",properties:$R[4066]={style:"color:#4D9375"},children:$R[4067]=[$R[4068]={type:"text",value:" from"}]},$R[4069]={type:"element",tagName:"span",properties:$R[4070]={style:"color:#C98A7D77"},children:$R[4071]=[$R[4072]={type:"text",value:" \""}]},$R[4073]={type:"element",tagName:"span",properties:$R[4074]={style:"color:#C98A7D"},children:$R[4075]=[$R[4076]={type:"text",value:"jotai"}]},$R[4077]={type:"element",tagName:"span",properties:$R[4078]={style:"color:#C98A7D77"},children:$R[4079]=[$R[4080]={type:"text",value:"\""}]},$R[4081]={type:"element",tagName:"span",properties:$R[4082]={style:"color:#666666"},children:$R[4083]=[$R[4084]={type:"text",value:";"}]}]},$R[4085]={type:"text",value:"\n"},$R[4086]={type:"element",tagName:"span",properties:$R[4087]={class:"line"},children:$R[4088]=[$R[4089]={type:"element",tagName:"span",properties:$R[4090]={style:"color:#4D9375"},children:$R[4091]=[$R[4092]={type:"text",value:"import"}]},$R[4093]={type:"element",tagName:"span",properties:$R[4094]={style:"color:#666666"},children:$R[4095]=[$R[4096]={type:"text",value:" {"}]}]},$R[4097]={type:"text",value:"\n"},$R[4098]={type:"element",tagName:"span",properties:$R[4099]={class:"line"},children:$R[4100]=[$R[4101]={type:"element",tagName:"span",properties:$R[4102]={style:"color:#BD976A"},children:$R[4103]=[$R[4104]={type:"text",value:"\tScopeProvider"}]},$R[4105]={type:"element",tagName:"span",properties:$R[4106]={style:"color:#666666"},children:$R[4107]=[$R[4108]={type:"text",value:","}]}]},$R[4109]={type:"text",value:"\n"},$R[4110]={type:"element",tagName:"span",properties:$R[4111]={class:"line"},children:$R[4112]=[$R[4113]={type:"element",tagName:"span",properties:$R[4114]={style:"color:#BD976A"},children:$R[4115]=[$R[4116]={type:"text",value:"\tcreateScope"}]},$R[4117]={type:"element",tagName:"span",properties:$R[4118]={style:"color:#666666"},children:$R[4119]=[$R[4120]={type:"text",value:","}]}]},$R[4121]={type:"text",value:"\n"},$R[4122]={type:"element",tagName:"span",properties:$R[4123]={class:"line"},children:$R[4124]=[$R[4125]={type:"element",tagName:"span",properties:$R[4126]={style:"color:#BD976A"},children:$R[4127]=[$R[4128]={type:"text",value:"\tmolecule"}]},$R[4129]={type:"element",tagName:"span",properties:$R[4130]={style:"color:#666666"},children:$R[4131]=[$R[4132]={type:"text",value:","}]}]},$R[4133]={type:"text",value:"\n"},$R[4134]={type:"element",tagName:"span",properties:$R[4135]={class:"line"},children:$R[4136]=[$R[4137]={type:"element",tagName:"span",properties:$R[4138]={style:"color:#BD976A"},children:$R[4139]=[$R[4140]={type:"text",value:"\tuseMolecule"}]},$R[4141]={type:"element",tagName:"span",properties:$R[4142]={style:"color:#666666"},children:$R[4143]=[$R[4144]={type:"text",value:","}]}]},$R[4145]={type:"text",value:"\n"},$R[4146]={type:"element",tagName:"span",properties:$R[4147]={class:"line"},children:$R[4148]=[$R[4149]={type:"element",tagName:"span",properties:$R[4150]={style:"color:#666666"},children:$R[4151]=[$R[4152]={type:"text",value:"}"}]},$R[4153]={type:"element",tagName:"span",properties:$R[4154]={style:"color:#4D9375"},children:$R[4155]=[$R[4156]={type:"text",value:" from"}]},$R[4157]={type:"element",tagName:"span",properties:$R[4158]={style:"color:#C98A7D77"},children:$R[4159]=[$R[4160]={type:"text",value:" \""}]},$R[4161]={type:"element",tagName:"span",properties:$R[4162]={style:"color:#C98A7D"},children:$R[4163]=[$R[4164]={type:"text",value:"bunshi/react"}]},$R[4165]={type:"element",tagName:"span",properties:$R[4166]={style:"color:#C98A7D77"},children:$R[4167]=[$R[4168]={type:"text",value:"\""}]},$R[4169]={type:"element",tagName:"span",properties:$R[4170]={style:"color:#666666"},children:$R[4171]=[$R[4172]={type:"text",value:";"}]}]},$R[4173]={type:"text",value:"\n"},$R[4174]={type:"element",tagName:"span",properties:$R[4175]={class:"line"},children:$R[4176]=[]},$R[4177]={type:"text",value:"\n"},$R[4178]={type:"element",tagName:"span",properties:$R[4179]={class:"line"},children:$R[4180]=[$R[4181]={type:"element",tagName:"span",properties:$R[4182]={style:"color:#CB7676"},children:$R[4183]=[$R[4184]={type:"text",value:"const"}]},$R[4185]={type:"element",tagName:"span",properties:$R[4186]={style:"color:#BD976A"},children:$R[4187]=[$R[4188]={type:"text",value:" UserScope"}]},$R[4189]={type:"element",tagName:"span",properties:$R[4190]={style:"color:#666666"},children:$R[4191]=[$R[4192]={type:"text",value:" ="}]},$R[4193]={type:"element",tagName:"span",properties:$R[4194]={style:"color:#80A665"},children:$R[4195]=[$R[4196]={type:"text",value:" createScope"}]},$R[4197]={type:"element",tagName:"span",properties:$R[4198]={style:"color:#666666"},children:$R[4199]=[$R[4200]={type:"text",value:"("}]},$R[4201]={type:"element",tagName:"span",properties:$R[4202]={style:"color:#CB7676"},children:$R[4203]=[$R[4204]={type:"text",value:"undefined"}]},$R[4205]={type:"element",tagName:"span",properties:$R[4206]={style:"color:#666666"},children:$R[4207]=[$R[4208]={type:"text",value:");"}]}]},$R[4209]={type:"text",value:"\n"},$R[4210]={type:"element",tagName:"span",properties:$R[4211]={class:"line"},children:$R[4212]=[$R[4213]={type:"element",tagName:"span",properties:$R[4214]={style:"color:#CB7676"},children:$R[4215]=[$R[4216]={type:"text",value:"const"}]},$R[4217]={type:"element",tagName:"span",properties:$R[4218]={style:"color:#BD976A"},children:$R[4219]=[$R[4220]={type:"text",value:" countMolecule"}]},$R[4221]={type:"element",tagName:"span",properties:$R[4222]={style:"color:#666666"},children:$R[4223]=[$R[4224]={type:"text",value:" ="}]},$R[4225]={type:"element",tagName:"span",properties:$R[4226]={style:"color:#80A665"},children:$R[4227]=[$R[4228]={type:"text",value:" molecule"}]},$R[4229]={type:"element",tagName:"span",properties:$R[4230]={style:"color:#666666"},children:$R[4231]=[$R[4232]={type:"text",value:"(("}]},$R[4233]={type:"element",tagName:"span",properties:$R[4234]={style:"color:#BD976A"},children:$R[4235]=[$R[4236]={type:"text",value:"mol"}]},$R[4237]={type:"element",tagName:"span",properties:$R[4238]={style:"color:#666666"},children:$R[4239]=[$R[4240]={type:"text",value:","}]},$R[4241]={type:"element",tagName:"span",properties:$R[4242]={style:"color:#BD976A"},children:$R[4243]=[$R[4244]={type:"text",value:" scope"}]},$R[4245]={type:"element",tagName:"span",properties:$R[4246]={style:"color:#666666"},children:$R[4247]=[$R[4248]={type:"text",value:")"}]},$R[4249]={type:"element",tagName:"span",properties:$R[4250]={style:"color:#666666"},children:$R[4251]=[$R[4252]={type:"text",value:" =>"}]},$R[4253]={type:"element",tagName:"span",properties:$R[4254]={style:"color:#666666"},children:$R[4255]=[$R[4256]={type:"text",value:" {"}]}]},$R[4257]={type:"text",value:"\n"},$R[4258]={type:"element",tagName:"span",properties:$R[4259]={class:"line"},children:$R[4260]=[$R[4261]={type:"element",tagName:"span",properties:$R[4262]={style:"color:#CB7676"},children:$R[4263]=[$R[4264]={type:"text",value:"\tconst"}]},$R[4265]={type:"element",tagName:"span",properties:$R[4266]={style:"color:#BD976A"},children:$R[4267]=[$R[4268]={type:"text",value:" userId"}]},$R[4269]={type:"element",tagName:"span",properties:$R[4270]={style:"color:#666666"},children:$R[4271]=[$R[4272]={type:"text",value:" ="}]},$R[4273]={type:"element",tagName:"span",properties:$R[4274]={style:"color:#80A665"},children:$R[4275]=[$R[4276]={type:"text",value:" scope"}]},$R[4277]={type:"element",tagName:"span",properties:$R[4278]={style:"color:#666666"},children:$R[4279]=[$R[4280]={type:"text",value:"("}]},$R[4281]={type:"element",tagName:"span",properties:$R[4282]={style:"color:#BD976A"},children:$R[4283]=[$R[4284]={type:"text",value:"UserScope"}]},$R[4285]={type:"element",tagName:"span",properties:$R[4286]={style:"color:#666666"},children:$R[4287]=[$R[4288]={type:"text",value:");"}]}]},$R[4289]={type:"text",value:"\n"},$R[4290]={type:"element",tagName:"span",properties:$R[4291]={class:"line"},children:$R[4292]=[$R[4293]={type:"element",tagName:"span",properties:$R[4294]={style:"color:#BD976A"},children:$R[4295]=[$R[4296]={type:"text",value:"\tconsole"}]},$R[4297]={type:"element",tagName:"span",properties:$R[4298]={style:"color:#666666"},children:$R[4299]=[$R[4300]={type:"text",value:"."}]},$R[4301]={type:"element",tagName:"span",properties:$R[4302]={style:"color:#80A665"},children:$R[4303]=[$R[4304]={type:"text",value:"log"}]},$R[4305]={type:"element",tagName:"span",properties:$R[4306]={style:"color:#666666"},children:$R[4307]=[$R[4308]={type:"text",value:"("}]},$R[4309]={type:"element",tagName:"span",properties:$R[4310]={style:"color:#C98A7D77"},children:$R[4311]=[$R[4312]={type:"text",value:"\""}]},$R[4313]={type:"element",tagName:"span",properties:$R[4314]={style:"color:#C98A7D"},children:$R[4315]=[$R[4316]={type:"text",value:"Creating a new atom for"}]},$R[4317]={type:"element",tagName:"span",properties:$R[4318]={style:"color:#C98A7D77"},children:$R[4319]=[$R[4320]={type:"text",value:"\""}]},$R[4321]={type:"element",tagName:"span",properties:$R[4322]={style:"color:#666666"},children:$R[4323]=[$R[4324]={type:"text",value:","}]},$R[4325]={type:"element",tagName:"span",properties:$R[4326]={style:"color:#BD976A"},children:$R[4327]=[$R[4328]={type:"text",value:" userId"}]},$R[4329]={type:"element",tagName:"span",properties:$R[4330]={style:"color:#666666"},children:$R[4331]=[$R[4332]={type:"text",value:");"}]}]},$R[4333]={type:"text",value:"\n"},$R[4334]={type:"element",tagName:"span",properties:$R[4335]={class:"line"},children:$R[4336]=[$R[4337]={type:"element",tagName:"span",properties:$R[4338]={style:"color:#4D9375"},children:$R[4339]=[$R[4340]={type:"text",value:"\treturn"}]},$R[4341]={type:"element",tagName:"span",properties:$R[4342]={style:"color:#80A665"},children:$R[4343]=[$R[4344]={type:"text",value:" atom"}]},$R[4345]={type:"element",tagName:"span",properties:$R[4346]={style:"color:#666666"},children:$R[4347]=[$R[4348]={type:"text",value:"("}]},$R[4349]={type:"element",tagName:"span",properties:$R[4350]={style:"color:#4C9A91"},children:$R[4351]=[$R[4352]={type:"text",value:"0"}]},$R[4353]={type:"element",tagName:"span",properties:$R[4354]={style:"color:#666666"},children:$R[4355]=[$R[4356]={type:"text",value:");"}]}]},$R[4357]={type:"text",value:"\n"},$R[4358]={type:"element",tagName:"span",properties:$R[4359]={class:"line"},children:$R[4360]=[$R[4361]={type:"element",tagName:"span",properties:$R[4362]={style:"color:#666666"},children:$R[4363]=[$R[4364]={type:"text",value:"});"}]}]},$R[4365]={type:"text",value:"\n"},$R[4366]={type:"element",tagName:"span",properties:$R[4367]={class:"line"},children:$R[4368]=[]},$R[4369]={type:"text",value:"\n"},$R[4370]={type:"element",tagName:"span",properties:$R[4371]={class:"line"},children:$R[4372]=[$R[4373]={type:"element",tagName:"span",properties:$R[4374]={style:"color:#758575DD"},children:$R[4375]=[$R[4376]={type:"text",value:"// ... Counter unchanged"}]}]},$R[4377]={type:"text",value:"\n"},$R[4378]={type:"element",tagName:"span",properties:$R[4379]={class:"line"},children:$R[4380]=[]},$R[4381]={type:"text",value:"\n"},$R[4382]={type:"element",tagName:"span",properties:$R[4383]={class:"line"},children:$R[4384]=[$R[4385]={type:"element",tagName:"span",properties:$R[4386]={style:"color:#4D9375"},children:$R[4387]=[$R[4388]={type:"text",value:"export"}]},$R[4389]={type:"element",tagName:"span",properties:$R[4390]={style:"color:#CB7676"},children:$R[4391]=[$R[4392]={type:"text",value:" function"}]},$R[4393]={type:"element",tagName:"span",properties:$R[4394]={style:"color:#80A665"},children:$R[4395]=[$R[4396]={type:"text",value:" App"}]},$R[4397]={type:"element",tagName:"span",properties:$R[4398]={style:"color:#666666"},children:$R[4399]=[$R[4400]={type:"text",value:"()"}]},$R[4401]={type:"element",tagName:"span",properties:$R[4402]={style:"color:#666666"},children:$R[4403]=[$R[4404]={type:"text",value:" {"}]}]},$R[4405]={type:"text",value:"\n"},$R[4406]={type:"element",tagName:"span",properties:$R[4407]={class:"line"},children:$R[4408]=[$R[4409]={type:"element",tagName:"span",properties:$R[4410]={style:"color:#4D9375"},children:$R[4411]=[$R[4412]={type:"text",value:"\treturn"}]},$R[4413]={type:"element",tagName:"span",properties:$R[4414]={style:"color:#666666"},children:$R[4415]=[$R[4416]={type:"text",value:" ("}]}]},$R[4417]={type:"text",value:"\n"},$R[4418]={type:"element",tagName:"span",properties:$R[4419]={class:"line"},children:$R[4420]=[$R[4421]={type:"element",tagName:"span",properties:$R[4422]={style:"color:#666666"},children:$R[4423]=[$R[4424]={type:"text",value:"\t\t\x3C"}]},$R[4425]={type:"element",tagName:"span",properties:$R[4426]={style:"color:#B8A965"},children:$R[4427]=[$R[4428]={type:"text",value:"ScopeProvider"}]},$R[4429]={type:"element",tagName:"span",properties:$R[4430]={style:"color:#BD976A"},children:$R[4431]=[$R[4432]={type:"text",value:" scope"}]},$R[4433]={type:"element",tagName:"span",properties:$R[4434]={style:"color:#666666"},children:$R[4435]=[$R[4436]={type:"text",value:"={"}]},$R[4437]={type:"element",tagName:"span",properties:$R[4438]={style:"color:#BD976A"},children:$R[4439]=[$R[4440]={type:"text",value:"UserScope"}]},$R[4441]={type:"element",tagName:"span",properties:$R[4442]={style:"color:#666666"},children:$R[4443]=[$R[4444]={type:"text",value:"}"}]},$R[4445]={type:"element",tagName:"span",properties:$R[4446]={style:"color:#BD976A"},children:$R[4447]=[$R[4448]={type:"text",value:" value"}]},$R[4449]={type:"element",tagName:"span",properties:$R[4450]={style:"color:#666666"},children:$R[4451]=[$R[4452]={type:"text",value:"="}]},$R[4453]={type:"element",tagName:"span",properties:$R[4454]={style:"color:#C98A7D77"},children:$R[4455]=[$R[4456]={type:"text",value:"\""}]},$R[4457]={type:"element",tagName:"span",properties:$R[4458]={style:"color:#C98A7D"},children:$R[4459]=[$R[4460]={type:"text",value:"bob@example.com"}]},$R[4461]={type:"element",tagName:"span",properties:$R[4462]={style:"color:#C98A7D77"},children:$R[4463]=[$R[4464]={type:"text",value:"\""}]},$R[4465]={type:"element",tagName:"span",properties:$R[4466]={style:"color:#666666"},children:$R[4467]=[$R[4468]={type:"text",value:">"}]}]},$R[4469]={type:"text",value:"\n"},$R[4470]={type:"element",tagName:"span",properties:$R[4471]={class:"line"},children:$R[4472]=[$R[4473]={type:"element",tagName:"span",properties:$R[4474]={style:"color:#666666"},children:$R[4475]=[$R[4476]={type:"text",value:"\t\t\t\x3C"}]},$R[4477]={type:"element",tagName:"span",properties:$R[4478]={style:"color:#B8A965"},children:$R[4479]=[$R[4480]={type:"text",value:"Counter"}]},$R[4481]={type:"element",tagName:"span",properties:$R[4482]={style:"color:#666666"},children:$R[4483]=[$R[4484]={type:"text",value:" />"}]}]},$R[4485]={type:"text",value:"\n"},$R[4486]={type:"element",tagName:"span",properties:$R[4487]={class:"line"},children:$R[4488]=[$R[4489]={type:"element",tagName:"span",properties:$R[4490]={style:"color:#666666"},children:$R[4491]=[$R[4492]={type:"text",value:"\t\t\x3C/"}]},$R[4493]={type:"element",tagName:"span",properties:$R[4494]={style:"color:#B8A965"},children:$R[4495]=[$R[4496]={type:"text",value:"ScopeProvider"}]},$R[4497]={type:"element",tagName:"span",properties:$R[4498]={style:"color:#666666"},children:$R[4499]=[$R[4500]={type:"text",value:">"}]}]},$R[4501]={type:"text",value:"\n"},$R[4502]={type:"element",tagName:"span",properties:$R[4503]={class:"line"},children:$R[4504]=[$R[4505]={type:"element",tagName:"span",properties:$R[4506]={style:"color:#666666"},children:$R[4507]=[$R[4508]={type:"text",value:"\t);"}]}]},$R[4509]={type:"text",value:"\n"},$R[4510]={type:"element",tagName:"span",properties:$R[4511]={class:"line"},children:$R[4512]=[$R[4513]={type:"element",tagName:"span",properties:$R[4514]={style:"color:#666666"},children:$R[4515]=[$R[4516]={type:"text",value:"}"}]}]}],data:$R[4517]={_shiki_notation:$R[4518]=[$R[4519]={info:$R[4520]=[";","",void 0],line:$R[4521]={type:"element",tagName:"span",properties:$R[4522]={class:"line"},children:$R[4523]=[$R[4524]={type:"element",tagName:"span",properties:$R[4525]={style:"color:#4D9375"},children:$R[4526]=[$R[4527]={type:"text",value:"import"}]},$R[4528]={type:"element",tagName:"span",properties:$R[4529]={style:"color:#666666"},children:$R[4530]=[$R[4531]={type:"text",value:" {"}]},$R[4532]={type:"element",tagName:"span",properties:$R[4533]={style:"color:#BD976A"},children:$R[4534]=[$R[4535]={type:"text",value:" atom"}]},$R[4536]={type:"element",tagName:"span",properties:$R[4537]={style:"color:#666666"},children:$R[4538]=[$R[4539]={type:"text",value:","}]},$R[4540]={type:"element",tagName:"span",properties:$R[4541]={style:"color:#BD976A"},children:$R[4542]=[$R[4543]={type:"text",value:" useAtom"}]},$R[4544]={type:"element",tagName:"span",properties:$R[4545]={style:"color:#666666"},children:$R[4546]=[$R[4547]={type:"text",value:" }"}]},$R[4548]={type:"element",tagName:"span",properties:$R[4549]={style:"color:#4D9375"},children:$R[4550]=[$R[4551]={type:"text",value:" from"}]},$R[4552]={type:"element",tagName:"span",properties:$R[4553]={style:"color:#C98A7D77"},children:$R[4554]=[$R[4555]={type:"text",value:" \""}]},$R[4556]={type:"element",tagName:"span",properties:$R[4557]={style:"color:#C98A7D"},children:$R[4558]=[$R[4559]={type:"text",value:"jotai"}]},$R[4560]={type:"element",tagName:"span",properties:$R[4561]={style:"color:#C98A7D77"},children:$R[4562]=[$R[4563]={type:"text",value:"\""}]},$R[4564]={type:"element",tagName:"span",properties:$R[4565]={style:"color:#666666"},children:$R[4566]=[$R[4567]={type:"text",value:";"}]}]},token:$R[4568]={type:"element",tagName:"span",properties:$R[4569]={style:"color:#666666"},children:$R[4570]=[$R[4571]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[4572]={info:$R[4573]=[";","",void 0],line:$R[4574]={type:"element",tagName:"span",properties:$R[4575]={class:"line"},children:$R[4576]=[$R[4577]={type:"element",tagName:"span",properties:$R[4578]={style:"color:#666666"},children:$R[4579]=[$R[4580]={type:"text",value:"}"}]},$R[4581]={type:"element",tagName:"span",properties:$R[4582]={style:"color:#4D9375"},children:$R[4583]=[$R[4584]={type:"text",value:" from"}]},$R[4585]={type:"element",tagName:"span",properties:$R[4586]={style:"color:#C98A7D77"},children:$R[4587]=[$R[4588]={type:"text",value:" \""}]},$R[4589]={type:"element",tagName:"span",properties:$R[4590]={style:"color:#C98A7D"},children:$R[4591]=[$R[4592]={type:"text",value:"bunshi/react"}]},$R[4593]={type:"element",tagName:"span",properties:$R[4594]={style:"color:#C98A7D77"},children:$R[4595]=[$R[4596]={type:"text",value:"\""}]},$R[4597]={type:"element",tagName:"span",properties:$R[4598]={style:"color:#666666"},children:$R[4599]=[$R[4600]={type:"text",value:";"}]}]},token:$R[4601]={type:"element",tagName:"span",properties:$R[4602]={style:"color:#666666"},children:$R[4603]=[$R[4604]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[4605]={info:$R[4606]=["//"," ... Counter unchanged",void 0],line:$R[4607]={type:"element",tagName:"span",properties:$R[4608]={class:"line"},children:$R[4609]=[$R[4610]={type:"element",tagName:"span",properties:$R[4611]={style:"color:#758575DD"},children:$R[4612]=[$R[4613]={type:"text",value:"// ... Counter unchanged"}]}]},token:$R[4614]={type:"element",tagName:"span",properties:$R[4615]={style:"color:#758575DD"},children:$R[4616]=[$R[4617]={type:"text",value:"// ... Counter unchanged"}]},isLineCommentOnly:!0,isJsxStyle:!1}]}}]}]}}],position:$R[4618]={end:$R[4619]={line:252,column:4,offset:6556},start:$R[4620]={line:174,column:1,offset:4855}},type:"section"},$R[4621]={children:$R[4622]=[$R[4623]={children:$R[4624]=[$R[4625]={position:$R[4626]={start:$R[4627]={line:254,column:4,offset:6561},end:$R[4628]={line:254,column:7,offset:6564}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[4629]={start:$R[4630]={line:254,column:1,offset:6558},end:$R[4631]={line:254,column:7,offset:6564}},type:"heading"},$R[4632]={children:$R[4633]=[$R[4634]={position:$R[4635]={start:$R[4636]={line:256,column:1,offset:6566},end:$R[4637]={line:256,column:5,offset:6570}},type:"text",value:"今回は "},$R[4638]={position:$R[4639]={start:$R[4640]={line:256,column:5,offset:6570},end:$R[4641]={line:256,column:13,offset:6578}},type:"inlineCode",value:"bunshi"},$R[4642]={position:$R[4643]={start:$R[4644]={line:256,column:13,offset:6578},end:$R[4645]={line:256,column:104,offset:6669}},type:"text",value:" というライブラリの基本概念からその魅力までを調べた。途中で実装の方を参照することが多々あったが、ほとんどテストされていてドキュメントも充実しているため、理解するのは難しくなかった。"}],position:$R[4646]={start:$R[4647]={line:256,column:1,offset:6566},end:$R[4648]={line:256,column:104,offset:6669}},type:"paragraph"},$R[4649]={children:$R[4650]=[$R[4651]={position:$R[4652]={start:$R[4653]={line:258,column:1,offset:6671},end:$R[4654]={line:258,column:9,offset:6679}},type:"inlineCode",value:"bunshi"},$R[4655]={position:$R[4656]={start:$R[4657]={line:258,column:9,offset:6679},end:$R[4658]={line:258,column:39,offset:6709}},type:"text",value:" を使って状態管理のベストプラクティスを追求したいと思った。"}],position:$R[4659]={start:$R[4660]={line:258,column:1,offset:6671},end:$R[4661]={line:258,column:39,offset:6709}},type:"paragraph"}],position:$R[4662]={end:$R[4663]={line:258,column:39,offset:6709},start:$R[4664]={line:254,column:1,offset:6558}},type:"section"}],footnotes:$R[4665]=[$R[4666]={children:$R[4667]=[$R[4668]={children:$R[4669]=[$R[4670]={position:$R[4671]={start:$R[4672]={line:25,column:7,offset:597},end:$R[4673]={line:25,column:14,offset:604}},type:"inlineCode",value:"React"},$R[4674]={position:$R[4675]={start:$R[4676]={line:25,column:14,offset:604},end:$R[4677]={line:25,column:17,offset:607}},type:"text",value:" と "},$R[4678]={position:$R[4679]={start:$R[4680]={line:25,column:17,offset:607},end:$R[4681]={line:25,column:22,offset:612}},type:"inlineCode",value:"Vue"},$R[4682]={position:$R[4683]={start:$R[4684]={line:25,column:22,offset:612},end:$R[4685]={line:25,column:52,offset:642}},type:"text",value:" は専用の API が用意されている。詳しくはこちらを参照。"},$R[4686]={children:$R[4687]=[$R[4688]={position:$R[4689]={start:$R[4690]={line:25,column:53,offset:643},end:$R[4691]={line:25,column:58,offset:648}},type:"text",value:"React"}],position:$R[4692]={start:$R[4693]={line:25,column:52,offset:642},end:$R[4694]={line:25,column:103,offset:693}},title:void 0,type:"link",url:"https://www.bunshi.org/integrations/react/"},$R[4695]={position:$R[4696]={start:$R[4697]={line:25,column:103,offset:693},end:$R[4698]={line:25,column:104,offset:694}},type:"text",value:"、"},$R[4699]={children:$R[4700]=[$R[4701]={position:$R[4702]={start:$R[4703]={line:25,column:105,offset:695},end:$R[4704]={line:25,column:108,offset:698}},type:"text",value:"Vue"}],position:$R[4705]={start:$R[4706]={line:25,column:104,offset:694},end:$R[4707]={line:25,column:151,offset:741}},title:void 0,type:"link",url:"https://www.bunshi.org/integrations/vue/"}],position:$R[4708]={start:$R[4709]={line:25,column:7,offset:597},end:$R[4710]={line:25,column:151,offset:741}},type:"paragraph"}],count:1,index:0,position:$R[4711]={start:$R[4712]={line:25,column:1,offset:591},end:$R[4713]={line:25,column:151,offset:741}},type:"footnoteDefinition"},$R[4714]={children:$R[4715]=[$R[4716]={children:$R[4717]=[$R[4718]={children:$R[4719]=[$R[4720]={position:$R[4721]={start:$R[4722]={line:31,column:8,offset:865},end:$R[4723]={line:31,column:20,offset:877}},type:"text",value:"Why WeakMap?"}],position:$R[4724]={start:$R[4725]={line:31,column:7,offset:864},end:$R[4726]={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[4727]={start:$R[4728]={line:31,column:7,offset:864},end:$R[4729]={line:31,column:123,offset:980}},type:"paragraph"}],count:1,index:1,position:$R[4730]={start:$R[4731]={line:31,column:1,offset:858},end:$R[4732]={line:31,column:123,offset:980}},type:"footnoteDefinition"},$R[4733]={children:$R[4734]=[$R[4735]={children:$R[4736]=[$R[4737]={position:$R[4738]={start:$R[4739]={line:172,column:7,offset:4799},end:$R[4740]={line:172,column:25,offset:4817}},type:"inlineCode",value:"reflect-metadata"},$R[4741]={position:$R[4742]={start:$R[4743]={line:172,column:25,offset:4817},end:$R[4744]={line:172,column:61,offset:4853}},type:"text",value:" はバンドルに含めるとサイズが大きくなるため、筆者はあまり使いたくない。"}],position:$R[4745]={start:$R[4746]={line:172,column:7,offset:4799},end:$R[4747]={line:172,column:61,offset:4853}},type:"paragraph"}],count:1,index:2,position:$R[4748]={start:$R[4749]={line:172,column:1,offset:4793},end:$R[4750]={line:172,column:61,offset:4853}},type:"footnoteDefinition"}],title:$R[4751]={children:$R[4752]=[$R[4753]={position:$R[4754]={start:$R[4755]={line:1,column:3,offset:2},end:$R[4756]={line:1,column:14,offset:13}},type:"text",value:"bunshiを理解する"}],id:"bunshiを理解する",level:1,plain:"bunshiを理解する",position:$R[4757]={start:$R[4758]={line:1,column:1,offset:0},end:$R[4759]={line:1,column:14,offset:13}},type:"heading"},toc:$R[4760]=[$R[4761]={children:$R[4762]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[4763]={children:$R[4764]=[$R[4765]={children:$R[4766]=[],id:"バンドルサイズが小さい",plain:"バンドルサイズが小さい",type:"toc"},$R[4767]={children:$R[4768]=[],id:"framework-agnosticである",plain:"framework agnosticである",type:"toc"},$R[4769]={children:$R[4770]=[],id:"パフォーマンスに配慮されている",plain:"パフォーマンスに配慮されている",type:"toc"}],id:"bunshiの特徴",plain:"bunshiの特徴",type:"toc"},$R[4771]={children:$R[4772]=[$R[4773]={children:$R[4774]=[],id:"molecule",plain:"molecule",type:"toc"},$R[4775]={children:$R[4776]=[],id:"scope",plain:"scope",type:"toc"},$R[4777]={children:$R[4778]=[$R[4779]={children:$R[4780]=[],id:"created",plain:"Created",type:"toc"},$R[4781]={children:$R[4782]=[],id:"mounted",plain:"Mounted",type:"toc"},$R[4783]={children:$R[4784]=[],id:"unmounted",plain:"Unmounted",type:"toc"}],id:"lifecycle",plain:"lifecycle",type:"toc"}],id:"bunshiの基本概念",plain:"bunshiの基本概念",type:"toc"},$R[4785]={children:$R[4786]=[],id:"個人的に面白いと思ったポイント",plain:"個人的に面白いと思ったポイント",type:"toc"},$R[4787]={children:$R[4788]=[],id:"結局何が嬉しい",plain:"結局何が嬉しい?",type:"toc"},$R[4789]={children:$R[4790]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}});$R[4791]($R[2],!0);$R[4791]($R[3],$R[5]);$R[4791]($R[4],!0);
bunshiを理解するbunshi というライブラリがある。状態管理ライブラリの DI を行うものだ。
jotai
を使う機会があり、調べを進める中で当時名前を聞いた jotai-molecule
が bunshi
という名前で良い感じに開発されていて気になったので調べてみる。
注意: この記事が書かれた当時の情報であり、最新の情報とは異なる可能性がある。bunshi
のバージョンは 2.1.5
である。
bunshi
は次のような特徴を持つ。
gzip 圧縮されたサイズで 1.18KB しかない。また他のライブラリに依存いていないのも大きな特徴だ。
bunshi
は jotai
や zustand
、nanostores
などの状態管理ライブラリを molecule
という概念でラップすることで、状態のスコープ管理や依存注入を行うことができる。
molecule
の宣言は framework agnostic であるため、ロジックをフレームワークに依存させず書くことができる1。
WeakMap
を用いたメモリリークの防止2や、不要な再レンダリングを防止するためにフレームワークのインテグレーション(React
, Vue
)ではメモ化を行っている。
bunshi は次の 3 つの概念で構成される。
molecule
は bunshi
の core 的な概念であり、実態は値を返す関数の HoF である。
最大の特徴は、関数の実行結果がキャッシュされることである。以下の例は常に同じ乱数を返す。
import { molecule } from "bunshi";
export const RandomMolecule = molecule(() => Math.random());
また molecule
は他の molecule
に依存できる。
import { molecule } from "bunshi";
export const RandomMolecule = molecule(() => Math.random());
export const UsernameMolecule = molecule(
mol => `You are user ${mol(RandomMolecule)}`,
);
export const IDMolecule = molecule(mol => `ID: ${mol(RandomMolecule)}`);
依存は自動で解決されるため、コード保守やテストが容易になる。
ロジックなどを molecule
に閉じ込めることでコードは非結合で遅延的となる。
scope
は molecule
を異なるコンポーネントで共通の環境を共有して使うための依存関係のグラフを構築するための概念である。
createScope
関数を使って scope
を作成する。
import { createScope } from "bunshi";
/**
* Scope for a user id
*/
export const UserScope = createScope<string>("alice@example.com");
宣言した scope
はフレームワークによって異なる方法でプロバイダーを提供する。私は React
を使っているので、React
でのプロバイダーの提供方法を示す。
import { ScopeProvider } from "bunshi/react";
import type { ReactElement } from "react";
import { UserScope } from "./scopes";
export function App({ children }: Props): ReactElement {
return (
<ScopeProvider scope={UserScope}>
{children}
</ScopeProvider>
);
}
scope
の真価は、molecule
を scope
に依存させることで発揮する。
import { molecule } from "bunshi";
import { UserScope } from "./scopes";
export const UsernameMolecule = molecule(
(_mol, scope) => `You are user ${scope(UserScope)}`,
);
scope
を molecule
に依存させることで molecule
はアプリケーション全体で 1 回実行されるのではなく、scope
をマウントするごとに再実行される。また、scope
に渡した値は scope
プロバイダー内部の molecule
から scope()
関数を通じて取得できる。
molecule
はアプリケーションやスコープに応じて必要なときに実行され使用中であることを示すためマウントされ、必要でなくなったらアンマウントされ GC される。
以下の図は 公式のドキュメント から引用したものである。とてもわかりやすい。

次の例のように onMount
関数とその cleanup 関数を使って molecule
のマウントとアンマウント時の処理を行うことができる。
import { molecule, onMount } from "bunshi";
import { atom } from "jotai/vanilla";
export const CountMolecule = molecule(() => {
console.log("Created");
onMount(() => {
console.log("Mounted");
return () => console.log("Unmounted");
});
return atom(0);
});
次にライフサイクルの各ステップについて説明する。
アプリケーションが初期化された時、scope
を登録したプロバイダーがマウントされた時などに molecule
の値は作成され、すべての値は GC 可能になる。
molecule
の値は実行されただけではキャッシュされない。React
や Vue
では useMolecule
フックを使用して molecule
をマウントすることでキャッシュされる。
molecule
の値が使用されなくなると、molecule
はアンマウントされ、GC される。React
や Vue
では useMolecule
フックで自動的にアンマウントされる。
React Strict mode を使用している方は unmount された後に再度 mount されることがあるので、この点に注意が必要である。useEffect
などのフックの正当性を確認するために 2 回実行されるのと同じように、molecule
も 2 回実行されることがある。この時、mount -> unmount -> mount
の順番で実行される。
MoleculeInjector
(を生成する createInjector
)と moleculeInterface
だ。
moleculeInterface
MoleculeInjector
それぞれ bunshi
の依存関係のグラフを構築するための DI コンテナと、他の molecule
が依存できるための参照を提供するものだ。ドキュメントにある通り、どちらも molecule
や useMolecule
の裏で使用されておりユーザーがこれらを直接使用するのはテストコードを書く場合やライブラリとして molecule
を提供する場合などに限られる。
私がこれらの機能を面白いと感じたのは、今まで TS の DI コンテナと言われると、NestJS に乗っかるか、TSyringe であった。前者はバックエンドを構築するためのフレームワークなので、そもそもフロントエンド文脈で使うことがない。また TSyringe は DI コンテナとしては良くできている。循環依存やインスタンスを使い捨てるなどができるが、デコレータを使用する必要があり reflect-metadata
を使う制約がある3。
その点 bunshi
はスコープで分けられていて、かつ自動で DI される仕組みをとても気に入っている。
bunshi
を使うことで、ステートのリフトアップやプッシュダウンを容易に実現できる。以下の 2 つの例を見れば一目瞭然であると言える。
import { atom, useAtom } from "jotai";
function createAtom(userId: string) {
return atom(userId === "bob@example.com" ? 0 : 1);
}
const CountAtomContext = React.createContext(createAtom("bob@example.com"));
const useCountAtom = () => useContext(CountAtomContext);
function CountAtomScopeProvider({ children, userId }) {
// Create a new atom for every user Id
const countAtom = useMemo(() => createAtom(userId), [userId]);
return (
<CountAtomContext.Provider value={countAtom}>
{children}
</CountAtomContext.Provider>
);
}
function Counter() {
const countAtom = useCountAtom();
const [count, setCount] = useAtom(countAtom);
return (
<div>
count:
{" "}
{count}
{" "}
<button onClick={() => setCount(c => c + 1)}>+1</button>
</div>
);
}
export function App() {
return (
<CountAtomScopeProvider userId="bob@example.com">
<Counter />
<Counter />
<CountAtomScopeProvider userId="tom@example.com">
<Counter />
<Counter />
</CountAtomScopeProvider>
</CountAtomScopeProvider>
);
}
上記の例は jotai
を使っているが、bunshi
も使うと以下のように書くことができる。
import { atom, useAtom } from "jotai";
import {
ScopeProvider,
createScope,
molecule,
useMolecule,
} from "bunshi/react";
const UserScope = createScope(undefined);
const countMolecule = molecule((mol, scope) => {
const userId = scope(UserScope);
console.log("Creating a new atom for", userId);
return atom(0);
});
// ... Counter unchanged
export function App() {
return (
<ScopeProvider scope={UserScope} value="bob@example.com">
<Counter />
</ScopeProvider>
);
}
今回は bunshi
というライブラリの基本概念からその魅力までを調べた。途中で実装の方を参照することが多々あったが、ほとんどテストされていてドキュメントも充実しているため、理解するのは難しくなかった。
bunshi
を使って状態管理のベストプラクティスを追求したいと思った。
脚注
React
と Vue
は専用の API が用意されている。詳しくはこちらを参照。React、Vue
↵reflect-metadata
はバンドルに含めるとサイズが大きくなるため、筆者はあまり使いたくない。
↵