\n```\n\nスタイルオブジェクトはプレーンな JavaScript のため、スタイルの条件分岐することや props から新たにスタイルをオーバーライドする事が容易となる。\n上記の手法に、擬似クラスや擬似要素、メディアクエリがサポートするためコミュニティによって様々なライブラリが作成された。\n\n### styled-components という選択\n\n様々なライブラリが登場した中で、styled-components はある種パイオニア的な存在であった。\n同じ時期に登場したライブラリと比較して、styled-components は以下の特徴を持っていて、開発者にとって魅力的であった。\n\n- 依存 package が少ない\n- template literal の中に今までの CSS とほぼ同じような書き味で記述できる\n\nこれらの特徴は、styled-components は多くの開発者に支持される理由となった。\n\n2020 年の頃の記事を参照してしまい大変恐縮ではあるが、[@takepepe](https://twitter.com/takepepe) さんが書いている、「経年劣化に耐える React Component の書き方[^4]」という記事は、とても筋が良いなと個人的に思う。\nDOM 層として実装した Component を styled-components でスタイリングするという技法は、今でも有効であると感じる。\n\n[^4]: [https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a](https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a)\n\nstyled-components の大胆にスタイルできる利点が少々失われてしまうが、今までの BEM 記法や CSS Modules へのフォールバックが容易であり、それでいてスタイルのコロケーションが可能である。\nこういった選択に自由度がありつつ、プロダクトごとに規約を持たせることで開発体験を上げることができるのは、styled-components の魅力である。\n\n## styled-components の現在\n\n### React Server Components の登場\n\n2023 年の 5 月、Vercel は Next.js 13.4 を発表し、React Server Components の上で動作する最初のフレームワークとなった。[^5]\nまた同じ月に React Core team は React Labs からの発表として React Server Components をよりプリミティブな形で提供することを目指していると発表した。[^6]\n\n[^5]: [https://nextjs.org/blog/next-13-4](https://nextjs.org/blog/next-13-4)\n\n[^6]: [https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)\n\nReact Server Components の RFC[^7] では、React がよりサーバーを活用することでパフォーマンスやバンドルサイズを改善することを目指している。\n\nまだまだ発展途上な概念ではあるが、React を使って開発をする人や、React を使って作られたアプリケーションのユーザーにとって、画期的な機能であることは間違いない。\nだが、この概念の登場によって頭を抱え、存続の危機に陥るライブラリもある。\nstyled-components もその 1 つである。\n\n[^7]: [https://github.com/reactjs/rfcs/blob/7f8492f6a177fc33fe807d242319f2f96353bf68/text/0188-server-components.md](https://github.com/reactjs/rfcs/blob/7f8492f6a177fc33fe807d242319f2f96353bf68/text/0188-server-components.md)\n\n#### styled-components の動作原理\n\nランタイム CSS in JS という集合に分けられる、 styled-components や emotion などのライブラリは、JavaScript の実行時にスタイルを生成する。\n生成されたスタイルは DOM API を介して、style タグとして挿入される。\n\n```ts:dom.ts\n/** Create a style element inside `target` or \x3Chead> after the last */\nexport const makeStyleTag = (target?: InsertionTarget | undefined): HTMLStyleElement => {\n const head = document.head;\n const parent = target || head;\n const style = document.createElement('style');\n const prevStyle = findLastStyleTag(parent);\n const nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;\n\n style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);\n style.setAttribute(SC_ATTR_VERSION, SC_VERSION);\n\n const nonce = getNonce();\n\n if (nonce) style.setAttribute('nonce', nonce);\n\n parent.insertBefore(style, nextSibling);\n\n return style;\n};\n```\n\nhttps://github.com/styled-components/styled-components/blob/ef548a2fd1d8b7766a273084edb33caf7d8a37df/packages/styled-components/src/sheet/dom.ts#L13-L31\n\nしかし、React Server Components では DOM API を使用できないため、styled-components のようなランタイム CSS in JS ライブラリは、React Server Components 上で動作しない。\n\n### React Server Components への対応\n\nこれに対し、React は v19 では `\x3Cbody>` の中にある `\x3Cstyle>` を自動で `\x3Chead>` に巻き上げる機能を追加した[^8]。\n詳しい挙動のイメージはブログを参照してほしいが、この機能を使った新しい世代の CSS in JS ライブラリがある[^9]。\nstyle tag hoisting は DOM API を使用せず、React のレンダリングの流れに乗って、`\x3Cstyle>` タグを `\x3Chead>` に挿入できる。\nこの機能は、React Server Components の上で動作する CSS in JS ライブラリにとって、非常に重要な機能である。\n\n[^8]: [https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets](https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets)\n\n[^9]: [souporserious/restyle - The simplest way to add CSS styles to your React components.](https://github.com/souporserious/restyle)\n\n### styled-components の選択\n\nReact v19 の styled hoisting を使えば、styled-components も React Server Components 上で動作できる。\nしかし、長く続いているライブラリにおいて、React の API 変更へ大胆に対応するのは既存のユーザーへ求める負荷が高まってしまう。\nそのため、styled-components はメンテナンスモードに移行することを選択したと話している。\n\n私達は、この選択を決して責めることはできないし、責めるべきではない。\nstyled-components は長い間、CSS in JS のパイオニアとして多くの開発者に支持されてきた。\nそして、新機能を追加しないと判断した今もなお、UX を損なわない程度にバグ修正などはしばらく行うとも発表している。\n私達は、styled-components の選択を尊重し、感謝の意を表するべきである。\n\nただ、発表文の中にあった、「The React core team has decided to defacto-deprecate certain APIs like the Context API」という文言は、少々気になる。\n少なくとも、React core team は Context API を事実上の非推奨とするような変更や発言はどこでもしていない。\n上述の文言が styled-components の開発者の誤解であることを願うが、React Server Components の登場によって、styled-components の選択肢が狭まったことは間違いない。\nまた、styled-components のメンテナンスモードへの移行は、CSS in JS ライブラリの選択肢を狭めることにもつながる。\n\n## styled-components とこれから\n\n### 移行先?\n\nstyled-components のメンテナンスモードに対して、私達はどのように対応すれば良いのだろうか。\n対応を検討するときに、次の観点が重要である。\n\n- CSS in JS ライブラリを使用するのか\n - runtime CSS in JS を使用するのか zero-runtime CSS in JS を使用するのか\n - 使用するなら template literal を使用するのか\n - object literal を使用する場合、stylelint などの資産が使えなくなることへの考慮\n - 使用しないなら、CSS Modules や BEM 記法を使用するのか\n- 移行する場合に、必ずプロダクトに複数の styling library が混在することになる\n - その場合、どのように移行するのか\n - AST 走査による機械的な移行\n - Cursor や Cline などの AI を使用した移行\n - 手動での移行\n - どのように運用していくのか\n- そもそも移行するのか?\n - 現状 React Server Components を使用していない場合\n - styled-components 起因で React などのバージョンアップができない場合\n - styled-components のバグに悩まされている場合\n\nこれらの観点を考慮しながら、移行先を検討する必要がある。\n私の個人的な感想としては、React Server Components や Streaming SSR を使用する場合、あとは React の major version を上げる際に、styled-components の存在が障壁になったタイミングで移行するのが良いのではないかと思う。\n\n## おわりに\n\nstyled-components のメンテナンスモードへの移行は、CSS in JS ライブラリの歴史において、1つの節目となる出来事である。\n私達は、styled-components の選択を尊重し、感謝の意を表するべきである。\nまた、React Server Components の登場によって、CSS in JS ライブラリの選択肢が狭まることは間違いない。\n私達は、移行先を検討し、プロダクトに最適な選択をする必要がある。",description:"styled-components のメンテナンスモードを受けて考えた記録。",published:!0,publishedAt:"2025-03-24T23:31:13.108+09:00[Asia/Tokyo]",tags:$R[4]=["styled-components","CSS in JS","React"],title:"styled-components の歴史、現在、これから",updatedAt:"2025-04-02T00:04:33.74+09:00[Asia/Tokyo]",_meta:$R[5]={filePath:"01JQ4914YGQZ02Q5PW5CNRJTJT/slug.md",fileName:"slug.md",directory:"01JQ4914YGQZ02Q5PW5CNRJTJT",extension:"md",path:"01JQ4914YGQZ02Q5PW5CNRJTJT/slug"},abstract:"styled-components の歴史、現在、これからはじめに先日、1つの時代が終わりを迎えた。https://opencollective.com/styled-components/updates/thank-youstyled-components のメンテナンスモードへの移行が発表された。\nこれは、CSS in JS 並びに styling library の歴史において、1つの節目となる出来事である。社内のプロダクトでは styled-components が使用されており、年末に私が v6 へのアップデートを行ったばかりだった。\nそのため、この発表は私にとっても大きな影響を与えるものであった。そこで、今回は styled-components の歴史を振り返り、現在の状況を整理し、これからの展望を考える。styled-components とはstyled-componen",mdast:$R[6]={children:$R[7]=[$R[8]={children:$R[9]=[$R[10]={children:$R[11]=[$R[12]={position:$R[13]={start:$R[14]={line:3,column:4,offset:36},end:$R[15]={line:3,column:8,offset:40}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[16]={start:$R[17]={line:3,column:1,offset:33},end:$R[18]={line:3,column:8,offset:40}},type:"heading"},$R[19]={children:$R[20]=[$R[21]={position:$R[22]={start:$R[23]={line:5,column:1,offset:42},end:$R[24]={line:5,column:18,offset:59}},type:"text",value:"先日、1つの時代が終わりを迎えた。"}],position:$R[25]={start:$R[26]={line:5,column:1,offset:42},end:$R[27]={line:5,column:18,offset:59}},type:"paragraph"},$R[28]={meta:$R[29]={title:"Thank you - Open Collective",twitter_card:$R[30]={site:"@opencollect",creator:void 0,card:"summary_large_image",title:"Thank you - styled-components",description:"First and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As...",images:$R[31]=[$R[32]={url:"https://images.opencollective.com/styled-components/dedfe2f/logo.png"}]},open_graph:$R[33]={images:$R[34]=[$R[35]={url:"https://images.opencollective.com/styled-components/dedfe2f/logo.png"}],title:"Thank you - styled-components"},description:"First and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As...",favicon:"https://opencollective.com/static/images/favicon.ico.png",canonical_url:"https://opencollective.com/styled-components/updates/thank-you"},oembed:void 0,position:$R[36]={start:$R[37]={line:7,column:1,offset:61},end:$R[38]={line:7,column:63,offset:123}},src:"https://opencollective.com/styled-components/updates/thank-you",type:"embed"},$R[39]={children:$R[40]=[$R[41]={position:$R[42]={start:$R[43]={line:9,column:1,offset:125},end:$R[44]={line:10,column:58,offset:222}},type:"text",value:"styled-components のメンテナンスモードへの移行が発表された。\nこれは、CSS in JS 並びに styling library の歴史において、1つの節目となる出来事である。"}],position:$R[45]={start:$R[46]={line:9,column:1,offset:125},end:$R[47]={line:10,column:58,offset:222}},type:"paragraph"},$R[48]={children:$R[49]=[$R[50]={position:$R[51]={start:$R[52]={line:12,column:1,offset:224},end:$R[53]={line:13,column:33,offset:323}},type:"text",value:"社内のプロダクトでは styled-components が使用されており、年末に私が v6 へのアップデートを行ったばかりだった。\nそのため、この発表は私にとっても大きな影響を与えるものであった。"}],position:$R[54]={start:$R[55]={line:12,column:1,offset:224},end:$R[56]={line:13,column:33,offset:323}},type:"paragraph"},$R[57]={children:$R[58]=[$R[59]={position:$R[60]={start:$R[61]={line:15,column:1,offset:325},end:$R[62]={line:15,column:58,offset:382}},type:"text",value:"そこで、今回は styled-components の歴史を振り返り、現在の状況を整理し、これからの展望を考える。"}],position:$R[63]={start:$R[64]={line:15,column:1,offset:325},end:$R[65]={line:15,column:58,offset:382}},type:"paragraph"}],position:$R[66]={end:$R[67]={line:15,column:58,offset:382},start:$R[68]={line:3,column:1,offset:33}},type:"section"},$R[69]={children:$R[70]=[$R[71]={children:$R[72]=[$R[73]={position:$R[74]={start:$R[75]={line:17,column:4,offset:387},end:$R[76]={line:17,column:24,offset:407}},type:"text",value:"styled-components とは"}],id:"styled-components-とは",level:2,plain:"styled-components とは",position:$R[77]={start:$R[78]={line:17,column:1,offset:384},end:$R[79]={line:17,column:24,offset:407}},type:"heading"},$R[80]={children:$R[81]=[$R[82]={position:$R[83]={start:$R[84]={line:19,column:1,offset:409},end:$R[85]={line:19,column:52,offset:460}},type:"text",value:"styled-components は 2016 年に Glen Maddern 氏によって作成された"},$R[86]={footnoteIndex:0,position:$R[87]={start:$R[88]={line:19,column:52,offset:460},end:$R[89]={line:19,column:56,offset:464}},referenceIndex:1,type:"footnoteReference"},$R[90]={position:$R[91]={start:$R[92]={line:19,column:56,offset:464},end:$R[93]={line:21,column:58,offset:622}},type:"text",value:"、CSS in JS ライブラリである。\nReact コンポーネントシステムのスタイリングをどのように強化できるかという疑問から生まれたものであり、その後、多くの開発者によって利用されるようになった。\nstyled-components は開発者にとってより良い開発体験を提供することに加えて、以下の利点を提供する。"}],position:$R[94]={start:$R[95]={line:19,column:1,offset:409},end:$R[96]={line:21,column:58,offset:622}},type:"paragraph"},$R[97]={children:$R[98]=[$R[99]={children:$R[100]=[$R[101]={children:$R[102]=[$R[103]={position:$R[104]={start:$R[105]={line:25,column:3,offset:736},end:$R[106]={line:25,column:25,offset:758}},type:"text",value:"Critical CSS を自動的に生成する"}],position:$R[107]={start:$R[108]={line:25,column:3,offset:736},end:$R[109]={line:25,column:25,offset:758}},type:"paragraph"},$R[110]={children:$R[111]=[$R[112]={children:$R[113]=[$R[114]={children:$R[115]=[$R[116]={position:$R[117]={start:$R[118]={line:26,column:5,offset:763},end:$R[119]={line:26,column:88,offset:846}},type:"text",value:"これはほんまか?って気持ちがあったが、レンダリングされたコンポーネントのスタイルのみを注入するのだから、Critical CSS と言っても過言ではないかもしれない。"}],position:$R[120]={start:$R[121]={line:26,column:5,offset:763},end:$R[122]={line:26,column:88,offset:846}},type:"paragraph"}],position:$R[123]={start:$R[124]={line:26,column:3,offset:761},end:$R[125]={line:26,column:88,offset:846}},type:"listItem"}],position:$R[126]={start:$R[127]={line:26,column:3,offset:761},end:$R[128]={line:26,column:88,offset:846}},type:"unorderedList"}],position:$R[129]={start:$R[130]={line:25,column:1,offset:734},end:$R[131]={line:26,column:88,offset:846}},type:"listItem"},$R[132]={children:$R[133]=[$R[134]={children:$R[135]=[$R[136]={position:$R[137]={start:$R[138]={line:27,column:3,offset:849},end:$R[139]={line:27,column:21,offset:867}},type:"text",value:"シンプルに動的なスタイルを適用できる"}],position:$R[140]={start:$R[141]={line:27,column:3,offset:849},end:$R[142]={line:27,column:21,offset:867}},type:"paragraph"}],position:$R[143]={start:$R[144]={line:27,column:1,offset:847},end:$R[145]={line:27,column:21,offset:867}},type:"listItem"},$R[146]={children:$R[147]=[$R[148]={children:$R[149]=[$R[150]={position:$R[151]={start:$R[152]={line:28,column:3,offset:870},end:$R[153]={line:28,column:15,offset:882}},type:"text",value:"スタイルのコロケーション"}],position:$R[154]={start:$R[155]={line:28,column:3,offset:870},end:$R[156]={line:28,column:15,offset:882}},type:"paragraph"}],position:$R[157]={start:$R[158]={line:28,column:1,offset:868},end:$R[159]={line:28,column:15,offset:882}},type:"listItem"}],position:$R[160]={start:$R[161]={line:25,column:1,offset:734},end:$R[162]={line:28,column:15,offset:882}},type:"unorderedList"},$R[163]={children:$R[164]=[$R[165]={position:$R[166]={start:$R[167]={line:30,column:1,offset:884},end:$R[168]={line:30,column:11,offset:894}},type:"text",value:"これらはドキュメント"},$R[169]={footnoteIndex:1,position:$R[170]={start:$R[171]={line:30,column:11,offset:894},end:$R[172]={line:30,column:15,offset:898}},referenceIndex:1,type:"footnoteReference"},$R[173]={position:$R[174]={start:$R[175]={line:30,column:15,offset:898},end:$R[176]={line:30,column:45,offset:928}},type:"text",value:"から引用してきたものであるが、私の認識とほとんど変わらない。"}],position:$R[177]={start:$R[178]={line:30,column:1,offset:884},end:$R[179]={line:30,column:45,offset:928}},type:"paragraph"}],position:$R[180]={end:$R[181]={line:30,column:45,offset:928},start:$R[182]={line:17,column:1,offset:384}},type:"section"},$R[183]={children:$R[184]=[$R[185]={children:$R[186]=[$R[187]={position:$R[188]={start:$R[189]={line:34,column:4,offset:1049},end:$R[190]={line:34,column:25,offset:1070}},type:"text",value:"styled-components の歴史"}],id:"styled-components-の歴史",level:2,plain:"styled-components の歴史",position:$R[191]={start:$R[192]={line:34,column:1,offset:1046},end:$R[193]={line:34,column:25,offset:1070}},type:"heading"},$R[194]={children:$R[195]=[$R[196]={children:$R[197]=[$R[198]={position:$R[199]={start:$R[200]={line:36,column:5,offset:1076},end:$R[201]={line:36,column:18,offset:1089}},type:"text",value:"CSS in JS の登場"}],id:"css-in-js-の登場",level:3,plain:"CSS in JS の登場",position:$R[202]={start:$R[203]={line:36,column:1,offset:1072},end:$R[204]={line:36,column:18,offset:1089}},type:"heading"},$R[205]={children:$R[206]=[$R[207]={position:$R[208]={start:$R[209]={line:38,column:1,offset:1091},end:$R[210]={line:38,column:70,offset:1160}},type:"text",value:"CSS in JS は、2014 年に Facebook の Christopher \"vjeux\" Chedeau 氏によって提唱された"},$R[211]={footnoteIndex:2,position:$R[212]={start:$R[213]={line:38,column:70,offset:1160},end:$R[214]={line:38,column:74,offset:1164}},referenceIndex:1,type:"footnoteReference"},$R[215]={position:$R[216]={start:$R[217]={line:38,column:74,offset:1164},end:$R[218]={line:39,column:57,offset:1222}},type:"text",value:"。\n彼は CSS の問題点として、グローバル変数の汚染や使用されなくなった CSS の削除が困難であることを挙げた。"}],position:$R[219]={start:$R[220]={line:38,column:1,offset:1091},end:$R[221]={line:39,column:57,offset:1222}},type:"paragraph"},$R[222]={children:$R[223]=[$R[224]={position:$R[225]={start:$R[226]={line:43,column:1,offset:1326},end:$R[227]={line:43,column:75,offset:1400}},type:"text",value:"Facebook 社内ではこれらの問題に対処するため、 JavaScript を用いてインラインスタイルをオブジェクト化するという手法が講じられた。"}],position:$R[228]={start:$R[229]={line:43,column:1,offset:1326},end:$R[230]={line:43,column:75,offset:1400}},type:"paragraph"},$R[231]={filename:"sample.jsx jsx",lang:"jsx",position:$R[232]={start:$R[233]={line:45,column:1,offset:1402},end:$R[234]={line:54,column:4,offset:1534}},type:"code",value:"const style = {\n text: {\n backgroundColor: '#000000',\n color: 'white'\n }\n}\n\n\x3Cdiv style={style.text} />",hast:$R[235]={type:"root",children:$R[236]=[$R[237]={type:"element",tagName:"pre",properties:$R[238]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[239]=[$R[240]={type:"element",tagName:"code",properties:$R[241]={},children:$R[242]=[$R[243]={type:"element",tagName:"span",properties:$R[244]={class:"line"},children:$R[245]=[$R[246]={type:"element",tagName:"span",properties:$R[247]={style:"color:#CB7676"},children:$R[248]=[$R[249]={type:"text",value:"const"}]},$R[250]={type:"element",tagName:"span",properties:$R[251]={style:"color:#BD976A"},children:$R[252]=[$R[253]={type:"text",value:" style"}]},$R[254]={type:"element",tagName:"span",properties:$R[255]={style:"color:#666666"},children:$R[256]=[$R[257]={type:"text",value:" ="}]},$R[258]={type:"element",tagName:"span",properties:$R[259]={style:"color:#666666"},children:$R[260]=[$R[261]={type:"text",value:" {"}]}]},$R[262]={type:"text",value:"\n"},$R[263]={type:"element",tagName:"span",properties:$R[264]={class:"line"},children:$R[265]=[$R[266]={type:"element",tagName:"span",properties:$R[267]={style:"color:#B8A965"},children:$R[268]=[$R[269]={type:"text",value:" text"}]},$R[270]={type:"element",tagName:"span",properties:$R[271]={style:"color:#666666"},children:$R[272]=[$R[273]={type:"text",value:":"}]},$R[274]={type:"element",tagName:"span",properties:$R[275]={style:"color:#666666"},children:$R[276]=[$R[277]={type:"text",value:" {"}]}]},$R[278]={type:"text",value:"\n"},$R[279]={type:"element",tagName:"span",properties:$R[280]={class:"line"},children:$R[281]=[$R[282]={type:"element",tagName:"span",properties:$R[283]={style:"color:#B8A965"},children:$R[284]=[$R[285]={type:"text",value:" backgroundColor"}]},$R[286]={type:"element",tagName:"span",properties:$R[287]={style:"color:#666666"},children:$R[288]=[$R[289]={type:"text",value:":"}]},$R[290]={type:"element",tagName:"span",properties:$R[291]={style:"color:#C98A7D77"},children:$R[292]=[$R[293]={type:"text",value:" '"}]},$R[294]={type:"element",tagName:"span",properties:$R[295]={style:"color:#C98A7D"},children:$R[296]=[$R[297]={type:"text",value:"#000000"}]},$R[298]={type:"element",tagName:"span",properties:$R[299]={style:"color:#C98A7D77"},children:$R[300]=[$R[301]={type:"text",value:"'"}]},$R[302]={type:"element",tagName:"span",properties:$R[303]={style:"color:#666666"},children:$R[304]=[$R[305]={type:"text",value:","}]}]},$R[306]={type:"text",value:"\n"},$R[307]={type:"element",tagName:"span",properties:$R[308]={class:"line"},children:$R[309]=[$R[310]={type:"element",tagName:"span",properties:$R[311]={style:"color:#B8A965"},children:$R[312]=[$R[313]={type:"text",value:" color"}]},$R[314]={type:"element",tagName:"span",properties:$R[315]={style:"color:#666666"},children:$R[316]=[$R[317]={type:"text",value:":"}]},$R[318]={type:"element",tagName:"span",properties:$R[319]={style:"color:#C98A7D77"},children:$R[320]=[$R[321]={type:"text",value:" '"}]},$R[322]={type:"element",tagName:"span",properties:$R[323]={style:"color:#C98A7D"},children:$R[324]=[$R[325]={type:"text",value:"white"}]},$R[326]={type:"element",tagName:"span",properties:$R[327]={style:"color:#C98A7D77"},children:$R[328]=[$R[329]={type:"text",value:"'"}]}]},$R[330]={type:"text",value:"\n"},$R[331]={type:"element",tagName:"span",properties:$R[332]={class:"line"},children:$R[333]=[$R[334]={type:"element",tagName:"span",properties:$R[335]={style:"color:#666666"},children:$R[336]=[$R[337]={type:"text",value:" }"}]}]},$R[338]={type:"text",value:"\n"},$R[339]={type:"element",tagName:"span",properties:$R[340]={class:"line"},children:$R[341]=[$R[342]={type:"element",tagName:"span",properties:$R[343]={style:"color:#666666"},children:$R[344]=[$R[345]={type:"text",value:"}"}]}]},$R[346]={type:"text",value:"\n"},$R[347]={type:"element",tagName:"span",properties:$R[348]={class:"line"},children:$R[349]=[]},$R[350]={type:"text",value:"\n"},$R[351]={type:"element",tagName:"span",properties:$R[352]={class:"line"},children:$R[353]=[$R[354]={type:"element",tagName:"span",properties:$R[355]={style:"color:#666666"},children:$R[356]=[$R[357]={type:"text",value:"\x3C"}]},$R[358]={type:"element",tagName:"span",properties:$R[359]={style:"color:#4D9375"},children:$R[360]=[$R[361]={type:"text",value:"div"}]},$R[362]={type:"element",tagName:"span",properties:$R[363]={style:"color:#BD976A"},children:$R[364]=[$R[365]={type:"text",value:" style"}]},$R[366]={type:"element",tagName:"span",properties:$R[367]={style:"color:#666666"},children:$R[368]=[$R[369]={type:"text",value:"={"}]},$R[370]={type:"element",tagName:"span",properties:$R[371]={style:"color:#BD976A"},children:$R[372]=[$R[373]={type:"text",value:"style"}]},$R[374]={type:"element",tagName:"span",properties:$R[375]={style:"color:#666666"},children:$R[376]=[$R[377]={type:"text",value:"."}]},$R[378]={type:"element",tagName:"span",properties:$R[379]={style:"color:#BD976A"},children:$R[380]=[$R[381]={type:"text",value:"text"}]},$R[382]={type:"element",tagName:"span",properties:$R[383]={style:"color:#666666"},children:$R[384]=[$R[385]={type:"text",value:"}"}]},$R[386]={type:"element",tagName:"span",properties:$R[387]={style:"color:#666666"},children:$R[388]=[$R[389]={type:"text",value:" />"}]}]}],data:$R[390]={_shiki_notation:$R[391]=[$R[392]={info:$R[393]=["'","",void 0],line:$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:#B8A965"},children:$R[399]=[$R[400]={type:"text",value:" color"}]},$R[401]={type:"element",tagName:"span",properties:$R[402]={style:"color:#666666"},children:$R[403]=[$R[404]={type:"text",value:":"}]},$R[405]={type:"element",tagName:"span",properties:$R[406]={style:"color:#C98A7D77"},children:$R[407]=[$R[408]={type:"text",value:" '"}]},$R[409]={type:"element",tagName:"span",properties:$R[410]={style:"color:#C98A7D"},children:$R[411]=[$R[412]={type:"text",value:"white"}]},$R[413]={type:"element",tagName:"span",properties:$R[414]={style:"color:#C98A7D77"},children:$R[415]=[$R[416]={type:"text",value:"'"}]}]},token:$R[417]={type:"element",tagName:"span",properties:$R[418]={style:"color:#C98A7D77"},children:$R[419]=[$R[420]={type:"text",value:"'"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[421]={children:$R[422]=[$R[423]={position:$R[424]={start:$R[425]={line:56,column:1,offset:1536},end:$R[426]={line:57,column:60,offset:1676}},type:"text",value:"スタイルオブジェクトはプレーンな JavaScript のため、スタイルの条件分岐することや props から新たにスタイルをオーバーライドする事が容易となる。\n上記の手法に、擬似クラスや擬似要素、メディアクエリがサポートするためコミュニティによって様々なライブラリが作成された。"}],position:$R[427]={start:$R[428]={line:56,column:1,offset:1536},end:$R[429]={line:57,column:60,offset:1676}},type:"paragraph"}],position:$R[430]={end:$R[431]={line:57,column:60,offset:1676},start:$R[432]={line:36,column:1,offset:1072}},type:"section"},$R[433]={children:$R[434]=[$R[435]={children:$R[436]=[$R[437]={position:$R[438]={start:$R[439]={line:59,column:5,offset:1682},end:$R[440]={line:59,column:28,offset:1705}},type:"text",value:"styled-components という選択"}],id:"styled-components-という選択",level:3,plain:"styled-components という選択",position:$R[441]={start:$R[442]={line:59,column:1,offset:1678},end:$R[443]={line:59,column:28,offset:1705}},type:"heading"},$R[444]={children:$R[445]=[$R[446]={position:$R[447]={start:$R[448]={line:61,column:1,offset:1707},end:$R[449]={line:62,column:67,offset:1826}},type:"text",value:"様々なライブラリが登場した中で、styled-components はある種パイオニア的な存在であった。\n同じ時期に登場したライブラリと比較して、styled-components は以下の特徴を持っていて、開発者にとって魅力的であった。"}],position:$R[450]={start:$R[451]={line:61,column:1,offset:1707},end:$R[452]={line:62,column:67,offset:1826}},type:"paragraph"},$R[453]={children:$R[454]=[$R[455]={children:$R[456]=[$R[457]={children:$R[458]=[$R[459]={position:$R[460]={start:$R[461]={line:64,column:3,offset:1830},end:$R[462]={line:64,column:18,offset:1845}},type:"text",value:"依存 package が少ない"}],position:$R[463]={start:$R[464]={line:64,column:3,offset:1830},end:$R[465]={line:64,column:18,offset:1845}},type:"paragraph"}],position:$R[466]={start:$R[467]={line:64,column:1,offset:1828},end:$R[468]={line:64,column:18,offset:1845}},type:"listItem"},$R[469]={children:$R[470]=[$R[471]={children:$R[472]=[$R[473]={position:$R[474]={start:$R[475]={line:65,column:3,offset:1848},end:$R[476]={line:65,column:49,offset:1894}},type:"text",value:"template literal の中に今までの CSS とほぼ同じような書き味で記述できる"}],position:$R[477]={start:$R[478]={line:65,column:3,offset:1848},end:$R[479]={line:65,column:49,offset:1894}},type:"paragraph"}],position:$R[480]={start:$R[481]={line:65,column:1,offset:1846},end:$R[482]={line:65,column:49,offset:1894}},type:"listItem"}],position:$R[483]={start:$R[484]={line:64,column:1,offset:1828},end:$R[485]={line:65,column:49,offset:1894}},type:"unorderedList"},$R[486]={children:$R[487]=[$R[488]={position:$R[489]={start:$R[490]={line:67,column:1,offset:1896},end:$R[491]={line:67,column:47,offset:1942}},type:"text",value:"これらの特徴は、styled-components は多くの開発者に支持される理由となった。"}],position:$R[492]={start:$R[493]={line:67,column:1,offset:1896},end:$R[494]={line:67,column:47,offset:1942}},type:"paragraph"},$R[495]={children:$R[496]=[$R[497]={position:$R[498]={start:$R[499]={line:69,column:1,offset:1944},end:$R[500]={line:69,column:30,offset:1973}},type:"text",value:"2020 年の頃の記事を参照してしまい大変恐縮ではあるが、"},$R[501]={children:$R[502]=[$R[503]={position:$R[504]={start:$R[505]={line:69,column:31,offset:1974},end:$R[506]={line:69,column:40,offset:1983}},type:"text",value:"@takepepe"}],position:$R[507]={start:$R[508]={line:69,column:30,offset:1973},end:$R[509]={line:69,column:71,offset:2014}},title:void 0,type:"link",url:"https://twitter.com/takepepe"},$R[510]={position:$R[511]={start:$R[512]={line:69,column:71,offset:2014},end:$R[513]={line:69,column:111,offset:2054}},type:"text",value:" さんが書いている、「経年劣化に耐える React Component の書き方"},$R[514]={footnoteIndex:3,position:$R[515]={start:$R[516]={line:69,column:111,offset:2054},end:$R[517]={line:69,column:115,offset:2058}},referenceIndex:1,type:"footnoteReference"},$R[518]={position:$R[519]={start:$R[520]={line:69,column:115,offset:2058},end:$R[521]={line:70,column:73,offset:2155}},type:"text",value:"」という記事は、とても筋が良いなと個人的に思う。\nDOM 層として実装した Component を styled-components でスタイリングするという技法は、今でも有効であると感じる。"}],position:$R[522]={start:$R[523]={line:69,column:1,offset:1944},end:$R[524]={line:70,column:73,offset:2155}},type:"paragraph"},$R[525]={children:$R[526]=[$R[527]={position:$R[528]={start:$R[529]={line:74,column:1,offset:2275},end:$R[530]={line:75,column:78,offset:2461}},type:"text",value:"styled-components の大胆にスタイルできる利点が少々失われてしまうが、今までの BEM 記法や CSS Modules へのフォールバックが容易であり、それでいてスタイルのコロケーションが可能である。\nこういった選択に自由度がありつつ、プロダクトごとに規約を持たせることで開発体験を上げることができるのは、styled-components の魅力である。"}],position:$R[531]={start:$R[532]={line:74,column:1,offset:2275},end:$R[533]={line:75,column:78,offset:2461}},type:"paragraph"}],position:$R[534]={end:$R[535]={line:75,column:78,offset:2461},start:$R[536]={line:59,column:1,offset:1678}},type:"section"}],position:$R[537]={end:$R[538]={line:75,column:78,offset:2461},start:$R[539]={line:34,column:1,offset:1046}},type:"section"},$R[540]={children:$R[541]=[$R[542]={children:$R[543]=[$R[544]={position:$R[545]={start:$R[546]={line:77,column:4,offset:2466},end:$R[547]={line:77,column:25,offset:2487}},type:"text",value:"styled-components の現在"}],id:"styled-components-の現在",level:2,plain:"styled-components の現在",position:$R[548]={start:$R[549]={line:77,column:1,offset:2463},end:$R[550]={line:77,column:25,offset:2487}},type:"heading"},$R[551]={children:$R[552]=[$R[553]={children:$R[554]=[$R[555]={position:$R[556]={start:$R[557]={line:79,column:5,offset:2493},end:$R[558]={line:79,column:32,offset:2520}},type:"text",value:"React Server Components の登場"}],id:"react-server-components-の登場",level:3,plain:"React Server Components の登場",position:$R[559]={start:$R[560]={line:79,column:1,offset:2489},end:$R[561]={line:79,column:32,offset:2520}},type:"heading"},$R[562]={children:$R[563]=[$R[564]={position:$R[565]={start:$R[566]={line:81,column:1,offset:2522},end:$R[567]={line:81,column:86,offset:2607}},type:"text",value:"2023 年の 5 月、Vercel は Next.js 13.4 を発表し、React Server Components の上で動作する最初のフレームワークとなった。"},$R[568]={footnoteIndex:4,position:$R[569]={start:$R[570]={line:81,column:86,offset:2607},end:$R[571]={line:81,column:90,offset:2611}},referenceIndex:1,type:"footnoteReference"},$R[572]={position:$R[573]={start:$R[574]={line:81,column:90,offset:2611},end:$R[575]={line:82,column:101,offset:2712}},type:"text",value:"\nまた同じ月に React Core team は React Labs からの発表として React Server Components をよりプリミティブな形で提供することを目指していると発表した。"},$R[576]={footnoteIndex:5,position:$R[577]={start:$R[578]={line:82,column:101,offset:2712},end:$R[579]={line:82,column:105,offset:2716}},referenceIndex:1,type:"footnoteReference"}],position:$R[580]={start:$R[581]={line:81,column:1,offset:2522},end:$R[582]={line:82,column:105,offset:2716}},type:"paragraph"},$R[583]={children:$R[584]=[$R[585]={position:$R[586]={start:$R[587]={line:88,column:1,offset:3024},end:$R[588]={line:88,column:30,offset:3053}},type:"text",value:"React Server Components の RFC"},$R[589]={footnoteIndex:6,position:$R[590]={start:$R[591]={line:88,column:30,offset:3053},end:$R[592]={line:88,column:34,offset:3057}},referenceIndex:1,type:"footnoteReference"},$R[593]={position:$R[594]={start:$R[595]={line:88,column:34,offset:3057},end:$R[596]={line:88,column:89,offset:3112}},type:"text",value:" では、React がよりサーバーを活用することでパフォーマンスやバンドルサイズを改善することを目指している。"}],position:$R[597]={start:$R[598]={line:88,column:1,offset:3024},end:$R[599]={line:88,column:89,offset:3112}},type:"paragraph"},$R[600]={children:$R[601]=[$R[602]={position:$R[603]={start:$R[604]={line:90,column:1,offset:3114},end:$R[605]={line:92,column:30,offset:3266}},type:"text",value:"まだまだ発展途上な概念ではあるが、React を使って開発をする人や、React を使って作られたアプリケーションのユーザーにとって、画期的な機能であることは間違いない。\nだが、この概念の登場によって頭を抱え、存続の危機に陥るライブラリもある。\nstyled-components もその 1 つである。"}],position:$R[606]={start:$R[607]={line:90,column:1,offset:3114},end:$R[608]={line:92,column:30,offset:3266}},type:"paragraph"},$R[609]={children:$R[610]=[$R[611]={children:$R[612]=[$R[613]={position:$R[614]={start:$R[615]={line:96,column:6,offset:3501},end:$R[616]={line:96,column:29,offset:3524}},type:"text",value:"styled-components の動作原理"}],id:"styled-components-の動作原理",level:4,plain:"styled-components の動作原理",position:$R[617]={start:$R[618]={line:96,column:1,offset:3496},end:$R[619]={line:96,column:29,offset:3524}},type:"heading"},$R[620]={children:$R[621]=[$R[622]={position:$R[623]={start:$R[624]={line:98,column:1,offset:3526},end:$R[625]={line:99,column:42,offset:3661}},type:"text",value:"ランタイム CSS in JS という集合に分けられる、 styled-components や emotion などのライブラリは、JavaScript の実行時にスタイルを生成する。\n生成されたスタイルは DOM API を介して、style タグとして挿入される。"}],position:$R[626]={start:$R[627]={line:98,column:1,offset:3526},end:$R[628]={line:99,column:42,offset:3661}},type:"paragraph"},$R[629]={filename:"dom.ts ts",lang:"ts",position:$R[630]={start:$R[631]={line:101,column:1,offset:3663},end:$R[632]={line:121,column:4,offset:4318}},type:"code",value:"/** Create a style element inside `target` or \x3Chead> after the last */\nexport const makeStyleTag = (target?: InsertionTarget | undefined): HTMLStyleElement => {\n const head = document.head;\n const parent = target || head;\n const style = document.createElement('style');\n const prevStyle = findLastStyleTag(parent);\n const nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;\n\n style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);\n style.setAttribute(SC_ATTR_VERSION, SC_VERSION);\n\n const nonce = getNonce();\n\n if (nonce) style.setAttribute('nonce', nonce);\n\n parent.insertBefore(style, nextSibling);\n\n return style;\n};",hast:$R[633]={type:"root",children:$R[634]=[$R[635]={type:"element",tagName:"pre",properties:$R[636]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[637]=[$R[638]={type:"element",tagName:"code",properties:$R[639]={},children:$R[640]=[$R[641]={type:"element",tagName:"span",properties:$R[642]={class:"line"},children:$R[643]=[$R[644]={type:"element",tagName:"span",properties:$R[645]={style:"color:#758575DD"},children:$R[646]=[$R[647]={type:"text",value:"/** Create a style element inside `target` or \x3Chead> after the last */"}]}]},$R[648]={type:"text",value:"\n"},$R[649]={type:"element",tagName:"span",properties:$R[650]={class:"line"},children:$R[651]=[$R[652]={type:"element",tagName:"span",properties:$R[653]={style:"color:#4D9375"},children:$R[654]=[$R[655]={type:"text",value:"export"}]},$R[656]={type:"element",tagName:"span",properties:$R[657]={style:"color:#CB7676"},children:$R[658]=[$R[659]={type:"text",value:" const "}]},$R[660]={type:"element",tagName:"span",properties:$R[661]={style:"color:#80A665"},children:$R[662]=[$R[663]={type:"text",value:"makeStyleTag"}]},$R[664]={type:"element",tagName:"span",properties:$R[665]={style:"color:#666666"},children:$R[666]=[$R[667]={type:"text",value:" ="}]},$R[668]={type:"element",tagName:"span",properties:$R[669]={style:"color:#666666"},children:$R[670]=[$R[671]={type:"text",value:" ("}]},$R[672]={type:"element",tagName:"span",properties:$R[673]={style:"color:#BD976A"},children:$R[674]=[$R[675]={type:"text",value:"target"}]},$R[676]={type:"element",tagName:"span",properties:$R[677]={style:"color:#CB7676"},children:$R[678]=[$R[679]={type:"text",value:"?"}]},$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:#5DA994"},children:$R[686]=[$R[687]={type:"text",value:"InsertionTarget"}]},$R[688]={type:"element",tagName:"span",properties:$R[689]={style:"color:#666666"},children:$R[690]=[$R[691]={type:"text",value:" | "}]},$R[692]={type:"element",tagName:"span",properties:$R[693]={style:"color:#CB7676"},children:$R[694]=[$R[695]={type:"text",value:"undefined"}]},$R[696]={type:"element",tagName:"span",properties:$R[697]={style:"color:#666666"},children:$R[698]=[$R[699]={type:"text",value:"):"}]},$R[700]={type:"element",tagName:"span",properties:$R[701]={style:"color:#5DA994"},children:$R[702]=[$R[703]={type:"text",value:" HTMLStyleElement"}]},$R[704]={type:"element",tagName:"span",properties:$R[705]={style:"color:#666666"},children:$R[706]=[$R[707]={type:"text",value:" =>"}]},$R[708]={type:"element",tagName:"span",properties:$R[709]={style:"color:#666666"},children:$R[710]=[$R[711]={type:"text",value:" {"}]}]},$R[712]={type:"text",value:"\n"},$R[713]={type:"element",tagName:"span",properties:$R[714]={class:"line"},children:$R[715]=[$R[716]={type:"element",tagName:"span",properties:$R[717]={style:"color:#CB7676"},children:$R[718]=[$R[719]={type:"text",value:" const "}]},$R[720]={type:"element",tagName:"span",properties:$R[721]={style:"color:#BD976A"},children:$R[722]=[$R[723]={type:"text",value:"head"}]},$R[724]={type:"element",tagName:"span",properties:$R[725]={style:"color:#666666"},children:$R[726]=[$R[727]={type:"text",value:" ="}]},$R[728]={type:"element",tagName:"span",properties:$R[729]={style:"color:#BD976A"},children:$R[730]=[$R[731]={type:"text",value:" document"}]},$R[732]={type:"element",tagName:"span",properties:$R[733]={style:"color:#666666"},children:$R[734]=[$R[735]={type:"text",value:"."}]},$R[736]={type:"element",tagName:"span",properties:$R[737]={style:"color:#BD976A"},children:$R[738]=[$R[739]={type:"text",value:"head"}]},$R[740]={type:"element",tagName:"span",properties:$R[741]={style:"color:#666666"},children:$R[742]=[$R[743]={type:"text",value:";"}]}]},$R[744]={type:"text",value:"\n"},$R[745]={type:"element",tagName:"span",properties:$R[746]={class:"line"},children:$R[747]=[$R[748]={type:"element",tagName:"span",properties:$R[749]={style:"color:#CB7676"},children:$R[750]=[$R[751]={type:"text",value:" const "}]},$R[752]={type:"element",tagName:"span",properties:$R[753]={style:"color:#BD976A"},children:$R[754]=[$R[755]={type:"text",value:"parent"}]},$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:#BD976A"},children:$R[762]=[$R[763]={type:"text",value:" target"}]},$R[764]={type:"element",tagName:"span",properties:$R[765]={style:"color:#CB7676"},children:$R[766]=[$R[767]={type:"text",value:" || "}]},$R[768]={type:"element",tagName:"span",properties:$R[769]={style:"color:#BD976A"},children:$R[770]=[$R[771]={type:"text",value:"head"}]},$R[772]={type:"element",tagName:"span",properties:$R[773]={style:"color:#666666"},children:$R[774]=[$R[775]={type:"text",value:";"}]}]},$R[776]={type:"text",value:"\n"},$R[777]={type:"element",tagName:"span",properties:$R[778]={class:"line"},children:$R[779]=[$R[780]={type:"element",tagName:"span",properties:$R[781]={style:"color:#CB7676"},children:$R[782]=[$R[783]={type:"text",value:" const "}]},$R[784]={type:"element",tagName:"span",properties:$R[785]={style:"color:#BD976A"},children:$R[786]=[$R[787]={type:"text",value:"style"}]},$R[788]={type:"element",tagName:"span",properties:$R[789]={style:"color:#666666"},children:$R[790]=[$R[791]={type:"text",value:" ="}]},$R[792]={type:"element",tagName:"span",properties:$R[793]={style:"color:#BD976A"},children:$R[794]=[$R[795]={type:"text",value:" document"}]},$R[796]={type:"element",tagName:"span",properties:$R[797]={style:"color:#666666"},children:$R[798]=[$R[799]={type:"text",value:"."}]},$R[800]={type:"element",tagName:"span",properties:$R[801]={style:"color:#80A665"},children:$R[802]=[$R[803]={type:"text",value:"createElement"}]},$R[804]={type:"element",tagName:"span",properties:$R[805]={style:"color:#666666"},children:$R[806]=[$R[807]={type:"text",value:"("}]},$R[808]={type:"element",tagName:"span",properties:$R[809]={style:"color:#C98A7D77"},children:$R[810]=[$R[811]={type:"text",value:"'"}]},$R[812]={type:"element",tagName:"span",properties:$R[813]={style:"color:#C98A7D"},children:$R[814]=[$R[815]={type:"text",value:"style"}]},$R[816]={type:"element",tagName:"span",properties:$R[817]={style:"color:#C98A7D77"},children:$R[818]=[$R[819]={type:"text",value:"'"}]},$R[820]={type:"element",tagName:"span",properties:$R[821]={style:"color:#666666"},children:$R[822]=[$R[823]={type:"text",value:");"}]}]},$R[824]={type:"text",value:"\n"},$R[825]={type:"element",tagName:"span",properties:$R[826]={class:"line"},children:$R[827]=[$R[828]={type:"element",tagName:"span",properties:$R[829]={style:"color:#CB7676"},children:$R[830]=[$R[831]={type:"text",value:" const "}]},$R[832]={type:"element",tagName:"span",properties:$R[833]={style:"color:#BD976A"},children:$R[834]=[$R[835]={type:"text",value:"prevStyle"}]},$R[836]={type:"element",tagName:"span",properties:$R[837]={style:"color:#666666"},children:$R[838]=[$R[839]={type:"text",value:" ="}]},$R[840]={type:"element",tagName:"span",properties:$R[841]={style:"color:#80A665"},children:$R[842]=[$R[843]={type:"text",value:" findLastStyleTag"}]},$R[844]={type:"element",tagName:"span",properties:$R[845]={style:"color:#666666"},children:$R[846]=[$R[847]={type:"text",value:"("}]},$R[848]={type:"element",tagName:"span",properties:$R[849]={style:"color:#BD976A"},children:$R[850]=[$R[851]={type:"text",value:"parent"}]},$R[852]={type:"element",tagName:"span",properties:$R[853]={style:"color:#666666"},children:$R[854]=[$R[855]={type:"text",value:");"}]}]},$R[856]={type:"text",value:"\n"},$R[857]={type:"element",tagName:"span",properties:$R[858]={class:"line"},children:$R[859]=[$R[860]={type:"element",tagName:"span",properties:$R[861]={style:"color:#CB7676"},children:$R[862]=[$R[863]={type:"text",value:" const "}]},$R[864]={type:"element",tagName:"span",properties:$R[865]={style:"color:#BD976A"},children:$R[866]=[$R[867]={type:"text",value:"nextSibling"}]},$R[868]={type:"element",tagName:"span",properties:$R[869]={style:"color:#666666"},children:$R[870]=[$R[871]={type:"text",value:" ="}]},$R[872]={type:"element",tagName:"span",properties:$R[873]={style:"color:#BD976A"},children:$R[874]=[$R[875]={type:"text",value:" prevStyle"}]},$R[876]={type:"element",tagName:"span",properties:$R[877]={style:"color:#CB7676"},children:$R[878]=[$R[879]={type:"text",value:" !== undefined ? "}]},$R[880]={type:"element",tagName:"span",properties:$R[881]={style:"color:#BD976A"},children:$R[882]=[$R[883]={type:"text",value:"prevStyle"}]},$R[884]={type:"element",tagName:"span",properties:$R[885]={style:"color:#666666"},children:$R[886]=[$R[887]={type:"text",value:"."}]},$R[888]={type:"element",tagName:"span",properties:$R[889]={style:"color:#BD976A"},children:$R[890]=[$R[891]={type:"text",value:"nextSibling"}]},$R[892]={type:"element",tagName:"span",properties:$R[893]={style:"color:#CB7676"},children:$R[894]=[$R[895]={type:"text",value:" : null"}]},$R[896]={type:"element",tagName:"span",properties:$R[897]={style:"color:#666666"},children:$R[898]=[$R[899]={type:"text",value:";"}]}]},$R[900]={type:"text",value:"\n"},$R[901]={type:"element",tagName:"span",properties:$R[902]={class:"line"},children:$R[903]=[]},$R[904]={type:"text",value:"\n"},$R[905]={type:"element",tagName:"span",properties:$R[906]={class:"line"},children:$R[907]=[$R[908]={type:"element",tagName:"span",properties:$R[909]={style:"color:#BD976A"},children:$R[910]=[$R[911]={type:"text",value:" style"}]},$R[912]={type:"element",tagName:"span",properties:$R[913]={style:"color:#666666"},children:$R[914]=[$R[915]={type:"text",value:"."}]},$R[916]={type:"element",tagName:"span",properties:$R[917]={style:"color:#80A665"},children:$R[918]=[$R[919]={type:"text",value:"setAttribute"}]},$R[920]={type:"element",tagName:"span",properties:$R[921]={style:"color:#666666"},children:$R[922]=[$R[923]={type:"text",value:"("}]},$R[924]={type:"element",tagName:"span",properties:$R[925]={style:"color:#BD976A"},children:$R[926]=[$R[927]={type:"text",value:"SC_ATTR"}]},$R[928]={type:"element",tagName:"span",properties:$R[929]={style:"color:#666666"},children:$R[930]=[$R[931]={type:"text",value:","}]},$R[932]={type:"element",tagName:"span",properties:$R[933]={style:"color:#BD976A"},children:$R[934]=[$R[935]={type:"text",value:" SC_ATTR_ACTIVE"}]},$R[936]={type:"element",tagName:"span",properties:$R[937]={style:"color:#666666"},children:$R[938]=[$R[939]={type:"text",value:");"}]}]},$R[940]={type:"text",value:"\n"},$R[941]={type:"element",tagName:"span",properties:$R[942]={class:"line"},children:$R[943]=[$R[944]={type:"element",tagName:"span",properties:$R[945]={style:"color:#BD976A"},children:$R[946]=[$R[947]={type:"text",value:" style"}]},$R[948]={type:"element",tagName:"span",properties:$R[949]={style:"color:#666666"},children:$R[950]=[$R[951]={type:"text",value:"."}]},$R[952]={type:"element",tagName:"span",properties:$R[953]={style:"color:#80A665"},children:$R[954]=[$R[955]={type:"text",value:"setAttribute"}]},$R[956]={type:"element",tagName:"span",properties:$R[957]={style:"color:#666666"},children:$R[958]=[$R[959]={type:"text",value:"("}]},$R[960]={type:"element",tagName:"span",properties:$R[961]={style:"color:#BD976A"},children:$R[962]=[$R[963]={type:"text",value:"SC_ATTR_VERSION"}]},$R[964]={type:"element",tagName:"span",properties:$R[965]={style:"color:#666666"},children:$R[966]=[$R[967]={type:"text",value:","}]},$R[968]={type:"element",tagName:"span",properties:$R[969]={style:"color:#BD976A"},children:$R[970]=[$R[971]={type:"text",value:" SC_VERSION"}]},$R[972]={type:"element",tagName:"span",properties:$R[973]={style:"color:#666666"},children:$R[974]=[$R[975]={type:"text",value:");"}]}]},$R[976]={type:"text",value:"\n"},$R[977]={type:"element",tagName:"span",properties:$R[978]={class:"line"},children:$R[979]=[]},$R[980]={type:"text",value:"\n"},$R[981]={type:"element",tagName:"span",properties:$R[982]={class:"line"},children:$R[983]=[$R[984]={type:"element",tagName:"span",properties:$R[985]={style:"color:#CB7676"},children:$R[986]=[$R[987]={type:"text",value:" const "}]},$R[988]={type:"element",tagName:"span",properties:$R[989]={style:"color:#BD976A"},children:$R[990]=[$R[991]={type:"text",value:"nonce"}]},$R[992]={type:"element",tagName:"span",properties:$R[993]={style:"color:#666666"},children:$R[994]=[$R[995]={type:"text",value:" ="}]},$R[996]={type:"element",tagName:"span",properties:$R[997]={style:"color:#80A665"},children:$R[998]=[$R[999]={type:"text",value:" getNonce"}]},$R[1000]={type:"element",tagName:"span",properties:$R[1001]={style:"color:#666666"},children:$R[1002]=[$R[1003]={type:"text",value:"();"}]}]},$R[1004]={type:"text",value:"\n"},$R[1005]={type:"element",tagName:"span",properties:$R[1006]={class:"line"},children:$R[1007]=[]},$R[1008]={type:"text",value:"\n"},$R[1009]={type:"element",tagName:"span",properties:$R[1010]={class:"line"},children:$R[1011]=[$R[1012]={type:"element",tagName:"span",properties:$R[1013]={style:"color:#4D9375"},children:$R[1014]=[$R[1015]={type:"text",value:" if"}]},$R[1016]={type:"element",tagName:"span",properties:$R[1017]={style:"color:#666666"},children:$R[1018]=[$R[1019]={type:"text",value:" ("}]},$R[1020]={type:"element",tagName:"span",properties:$R[1021]={style:"color:#BD976A"},children:$R[1022]=[$R[1023]={type:"text",value:"nonce"}]},$R[1024]={type:"element",tagName:"span",properties:$R[1025]={style:"color:#666666"},children:$R[1026]=[$R[1027]={type:"text",value:")"}]},$R[1028]={type:"element",tagName:"span",properties:$R[1029]={style:"color:#BD976A"},children:$R[1030]=[$R[1031]={type:"text",value:" style"}]},$R[1032]={type:"element",tagName:"span",properties:$R[1033]={style:"color:#666666"},children:$R[1034]=[$R[1035]={type:"text",value:"."}]},$R[1036]={type:"element",tagName:"span",properties:$R[1037]={style:"color:#80A665"},children:$R[1038]=[$R[1039]={type:"text",value:"setAttribute"}]},$R[1040]={type:"element",tagName:"span",properties:$R[1041]={style:"color:#666666"},children:$R[1042]=[$R[1043]={type:"text",value:"("}]},$R[1044]={type:"element",tagName:"span",properties:$R[1045]={style:"color:#C98A7D77"},children:$R[1046]=[$R[1047]={type:"text",value:"'"}]},$R[1048]={type:"element",tagName:"span",properties:$R[1049]={style:"color:#C98A7D"},children:$R[1050]=[$R[1051]={type:"text",value:"nonce"}]},$R[1052]={type:"element",tagName:"span",properties:$R[1053]={style:"color:#C98A7D77"},children:$R[1054]=[$R[1055]={type:"text",value:"'"}]},$R[1056]={type:"element",tagName:"span",properties:$R[1057]={style:"color:#666666"},children:$R[1058]=[$R[1059]={type:"text",value:","}]},$R[1060]={type:"element",tagName:"span",properties:$R[1061]={style:"color:#BD976A"},children:$R[1062]=[$R[1063]={type:"text",value:" nonce"}]},$R[1064]={type:"element",tagName:"span",properties:$R[1065]={style:"color:#666666"},children:$R[1066]=[$R[1067]={type:"text",value:");"}]}]},$R[1068]={type:"text",value:"\n"},$R[1069]={type:"element",tagName:"span",properties:$R[1070]={class:"line"},children:$R[1071]=[]},$R[1072]={type:"text",value:"\n"},$R[1073]={type:"element",tagName:"span",properties:$R[1074]={class:"line"},children:$R[1075]=[$R[1076]={type:"element",tagName:"span",properties:$R[1077]={style:"color:#BD976A"},children:$R[1078]=[$R[1079]={type:"text",value:" parent"}]},$R[1080]={type:"element",tagName:"span",properties:$R[1081]={style:"color:#666666"},children:$R[1082]=[$R[1083]={type:"text",value:"."}]},$R[1084]={type:"element",tagName:"span",properties:$R[1085]={style:"color:#80A665"},children:$R[1086]=[$R[1087]={type:"text",value:"insertBefore"}]},$R[1088]={type:"element",tagName:"span",properties:$R[1089]={style:"color:#666666"},children:$R[1090]=[$R[1091]={type:"text",value:"("}]},$R[1092]={type:"element",tagName:"span",properties:$R[1093]={style:"color:#BD976A"},children:$R[1094]=[$R[1095]={type:"text",value:"style"}]},$R[1096]={type:"element",tagName:"span",properties:$R[1097]={style:"color:#666666"},children:$R[1098]=[$R[1099]={type:"text",value:","}]},$R[1100]={type:"element",tagName:"span",properties:$R[1101]={style:"color:#BD976A"},children:$R[1102]=[$R[1103]={type:"text",value:" nextSibling"}]},$R[1104]={type:"element",tagName:"span",properties:$R[1105]={style:"color:#666666"},children:$R[1106]=[$R[1107]={type:"text",value:");"}]}]},$R[1108]={type:"text",value:"\n"},$R[1109]={type:"element",tagName:"span",properties:$R[1110]={class:"line"},children:$R[1111]=[]},$R[1112]={type:"text",value:"\n"},$R[1113]={type:"element",tagName:"span",properties:$R[1114]={class:"line"},children:$R[1115]=[$R[1116]={type:"element",tagName:"span",properties:$R[1117]={style:"color:#4D9375"},children:$R[1118]=[$R[1119]={type:"text",value:" return"}]},$R[1120]={type:"element",tagName:"span",properties:$R[1121]={style:"color:#BD976A"},children:$R[1122]=[$R[1123]={type:"text",value:" style"}]},$R[1124]={type:"element",tagName:"span",properties:$R[1125]={style:"color:#666666"},children:$R[1126]=[$R[1127]={type:"text",value:";"}]}]},$R[1128]={type:"text",value:"\n"},$R[1129]={type:"element",tagName:"span",properties:$R[1130]={class:"line"},children:$R[1131]=[$R[1132]={type:"element",tagName:"span",properties:$R[1133]={style:"color:#666666"},children:$R[1134]=[$R[1135]={type:"text",value:"};"}]}]}],data:$R[1136]={_shiki_notation:$R[1137]=[$R[1138]={info:$R[1139]=["/*","* Create a style element inside `target` or \x3Chead> after the last ","*/"],line:$R[1140]={type:"element",tagName:"span",properties:$R[1141]={class:"line"},children:$R[1142]=[$R[1143]={type:"element",tagName:"span",properties:$R[1144]={style:"color:#758575DD"},children:$R[1145]=[$R[1146]={type:"text",value:"/** Create a style element inside `target` or \x3Chead> after the last */"}]}]},token:$R[1147]={type:"element",tagName:"span",properties:$R[1148]={style:"color:#758575DD"},children:$R[1149]=[$R[1150]={type:"text",value:"/** Create a style element inside `target` or \x3Chead> after the last */"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[1151]={info:$R[1152]=[";","",void 0],line:$R[1153]={type:"element",tagName:"span",properties:$R[1154]={class:"line"},children:$R[1155]=[$R[1156]={type:"element",tagName:"span",properties:$R[1157]={style:"color:#CB7676"},children:$R[1158]=[$R[1159]={type:"text",value:" const "}]},$R[1160]={type:"element",tagName:"span",properties:$R[1161]={style:"color:#BD976A"},children:$R[1162]=[$R[1163]={type:"text",value:"head"}]},$R[1164]={type:"element",tagName:"span",properties:$R[1165]={style:"color:#666666"},children:$R[1166]=[$R[1167]={type:"text",value:" ="}]},$R[1168]={type:"element",tagName:"span",properties:$R[1169]={style:"color:#BD976A"},children:$R[1170]=[$R[1171]={type:"text",value:" document"}]},$R[1172]={type:"element",tagName:"span",properties:$R[1173]={style:"color:#666666"},children:$R[1174]=[$R[1175]={type:"text",value:"."}]},$R[1176]={type:"element",tagName:"span",properties:$R[1177]={style:"color:#BD976A"},children:$R[1178]=[$R[1179]={type:"text",value:"head"}]},$R[1180]={type:"element",tagName:"span",properties:$R[1181]={style:"color:#666666"},children:$R[1182]=[$R[1183]={type:"text",value:";"}]}]},token:$R[1184]={type:"element",tagName:"span",properties:$R[1185]={style:"color:#666666"},children:$R[1186]=[$R[1187]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[1188]={info:$R[1189]=[";","",void 0],line:$R[1190]={type:"element",tagName:"span",properties:$R[1191]={class:"line"},children:$R[1192]=[$R[1193]={type:"element",tagName:"span",properties:$R[1194]={style:"color:#CB7676"},children:$R[1195]=[$R[1196]={type:"text",value:" const "}]},$R[1197]={type:"element",tagName:"span",properties:$R[1198]={style:"color:#BD976A"},children:$R[1199]=[$R[1200]={type:"text",value:"parent"}]},$R[1201]={type:"element",tagName:"span",properties:$R[1202]={style:"color:#666666"},children:$R[1203]=[$R[1204]={type:"text",value:" ="}]},$R[1205]={type:"element",tagName:"span",properties:$R[1206]={style:"color:#BD976A"},children:$R[1207]=[$R[1208]={type:"text",value:" target"}]},$R[1209]={type:"element",tagName:"span",properties:$R[1210]={style:"color:#CB7676"},children:$R[1211]=[$R[1212]={type:"text",value:" || "}]},$R[1213]={type:"element",tagName:"span",properties:$R[1214]={style:"color:#BD976A"},children:$R[1215]=[$R[1216]={type:"text",value:"head"}]},$R[1217]={type:"element",tagName:"span",properties:$R[1218]={style:"color:#666666"},children:$R[1219]=[$R[1220]={type:"text",value:";"}]}]},token:$R[1221]={type:"element",tagName:"span",properties:$R[1222]={style:"color:#666666"},children:$R[1223]=[$R[1224]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[1225]={info:$R[1226]=[";","",void 0],line:$R[1227]={type:"element",tagName:"span",properties:$R[1228]={class:"line"},children:$R[1229]=[$R[1230]={type:"element",tagName:"span",properties:$R[1231]={style:"color:#CB7676"},children:$R[1232]=[$R[1233]={type:"text",value:" const "}]},$R[1234]={type:"element",tagName:"span",properties:$R[1235]={style:"color:#BD976A"},children:$R[1236]=[$R[1237]={type:"text",value:"nextSibling"}]},$R[1238]={type:"element",tagName:"span",properties:$R[1239]={style:"color:#666666"},children:$R[1240]=[$R[1241]={type:"text",value:" ="}]},$R[1242]={type:"element",tagName:"span",properties:$R[1243]={style:"color:#BD976A"},children:$R[1244]=[$R[1245]={type:"text",value:" prevStyle"}]},$R[1246]={type:"element",tagName:"span",properties:$R[1247]={style:"color:#CB7676"},children:$R[1248]=[$R[1249]={type:"text",value:" !== undefined ? "}]},$R[1250]={type:"element",tagName:"span",properties:$R[1251]={style:"color:#BD976A"},children:$R[1252]=[$R[1253]={type:"text",value:"prevStyle"}]},$R[1254]={type:"element",tagName:"span",properties:$R[1255]={style:"color:#666666"},children:$R[1256]=[$R[1257]={type:"text",value:"."}]},$R[1258]={type:"element",tagName:"span",properties:$R[1259]={style:"color:#BD976A"},children:$R[1260]=[$R[1261]={type:"text",value:"nextSibling"}]},$R[1262]={type:"element",tagName:"span",properties:$R[1263]={style:"color:#CB7676"},children:$R[1264]=[$R[1265]={type:"text",value:" : null"}]},$R[1266]={type:"element",tagName:"span",properties:$R[1267]={style:"color:#666666"},children:$R[1268]=[$R[1269]={type:"text",value:";"}]}]},token:$R[1270]={type:"element",tagName:"span",properties:$R[1271]={style:"color:#666666"},children:$R[1272]=[$R[1273]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[1274]={info:$R[1275]=[";","",void 0],line:$R[1276]={type:"element",tagName:"span",properties:$R[1277]={class:"line"},children:$R[1278]=[$R[1279]={type:"element",tagName:"span",properties:$R[1280]={style:"color:#4D9375"},children:$R[1281]=[$R[1282]={type:"text",value:" return"}]},$R[1283]={type:"element",tagName:"span",properties:$R[1284]={style:"color:#BD976A"},children:$R[1285]=[$R[1286]={type:"text",value:" style"}]},$R[1287]={type:"element",tagName:"span",properties:$R[1288]={style:"color:#666666"},children:$R[1289]=[$R[1290]={type:"text",value:";"}]}]},token:$R[1291]={type:"element",tagName:"span",properties:$R[1292]={style:"color:#666666"},children:$R[1293]=[$R[1294]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[1295]={meta:$R[1296]={title:"styled-components/packages/styled-components/src/sheet/dom.ts at ef548a2fd1d8b7766a273084edb33caf7d8a37df · styled-components/styled-components · GitHub",description:"Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - styled-components/packages/styled-components/src/sheet/dom.ts at ef548a2fd1d8b7766a273084edb33caf7d8a37df · styled-components/styled-components",twitter_card:$R[1297]={images:$R[1298]=[$R[1299]={url:"https://repository-images.githubusercontent.com/65794292/bdacfa80-6132-11e9-90b9-33e6eee04d1f"}],site:"@github",card:"summary_large_image",title:"styled-components/packages/styled-components/src/sheet/dom.ts at ef548a2fd1d8b7766a273084edb33caf7d8a37df · styled-components/styled-components",description:"Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - styled-components/styled-components"},open_graph:$R[1300]={images:$R[1301]=[$R[1302]={url:"https://repository-images.githubusercontent.com/65794292/bdacfa80-6132-11e9-90b9-33e6eee04d1f",alt:"Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - styled-components/styled-components"}],site_name:"GitHub",type:"object",title:"styled-components/packages/styled-components/src/sheet/dom.ts at ef548a2fd1d8b7766a273084edb33caf7d8a37df · styled-components/styled-components",url:"https://github.com/styled-components/styled-components/blob/ef548a2fd1d8b7766a273084edb33caf7d8a37df/packages/styled-components/src/sheet/dom.ts",description:"Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - styled-components/styled-components"},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[1303]={start:$R[1304]={line:123,column:1,offset:4320},end:$R[1305]={line:123,column:153,offset:4472}},src:"https://github.com/styled-components/styled-components/blob/ef548a2fd1d8b7766a273084edb33caf7d8a37df/packages/styled-components/src/sheet/dom.ts#L13-L31",type:"embed"},$R[1306]={children:$R[1307]=[$R[1308]={position:$R[1309]={start:$R[1310]={line:125,column:1,offset:4474},end:$R[1311]={line:125,column:127,offset:4600}},type:"text",value:"しかし、React Server Components では DOM API を使用できないため、styled-components のようなランタイム CSS in JS ライブラリは、React Server Components 上で動作しない。"}],position:$R[1312]={start:$R[1313]={line:125,column:1,offset:4474},end:$R[1314]={line:125,column:127,offset:4600}},type:"paragraph"}],position:$R[1315]={end:$R[1316]={line:125,column:127,offset:4600},start:$R[1317]={line:96,column:1,offset:3496}},type:"section"}],position:$R[1318]={end:$R[1319]={line:125,column:127,offset:4600},start:$R[1320]={line:79,column:1,offset:2489}},type:"section"},$R[1321]={children:$R[1322]=[$R[1323]={children:$R[1324]=[$R[1325]={position:$R[1326]={start:$R[1327]={line:127,column:5,offset:4606},end:$R[1328]={line:127,column:33,offset:4634}},type:"text",value:"React Server Components への対応"}],id:"react-server-components-への対応",level:3,plain:"React Server Components への対応",position:$R[1329]={start:$R[1330]={line:127,column:1,offset:4602},end:$R[1331]={line:127,column:33,offset:4634}},type:"heading"},$R[1332]={children:$R[1333]=[$R[1334]={position:$R[1335]={start:$R[1336]={line:129,column:1,offset:4636},end:$R[1337]={line:129,column:22,offset:4657}},type:"text",value:"これに対し、React は v19 では "},$R[1338]={position:$R[1339]={start:$R[1340]={line:129,column:22,offset:4657},end:$R[1341]={line:129,column:30,offset:4665}},type:"inlineCode",value:"\x3Cbody>"},$R[1342]={position:$R[1343]={start:$R[1344]={line:129,column:30,offset:4665},end:$R[1345]={line:129,column:37,offset:4672}},type:"text",value:" の中にある "},$R[1346]={position:$R[1347]={start:$R[1348]={line:129,column:37,offset:4672},end:$R[1349]={line:129,column:46,offset:4681}},type:"inlineCode",value:"\x3Cstyle>"},$R[1350]={position:$R[1351]={start:$R[1352]={line:129,column:46,offset:4681},end:$R[1353]={line:129,column:52,offset:4687}},type:"text",value:" を自動で "},$R[1354]={position:$R[1355]={start:$R[1356]={line:129,column:52,offset:4687},end:$R[1357]={line:129,column:60,offset:4695}},type:"inlineCode",value:"\x3Chead>"},$R[1358]={position:$R[1359]={start:$R[1360]={line:129,column:60,offset:4695},end:$R[1361]={line:129,column:74,offset:4709}},type:"text",value:" に巻き上げる機能を追加した"},$R[1362]={footnoteIndex:7,position:$R[1363]={start:$R[1364]={line:129,column:74,offset:4709},end:$R[1365]={line:129,column:78,offset:4713}},referenceIndex:1,type:"footnoteReference"},$R[1366]={position:$R[1367]={start:$R[1368]={line:129,column:78,offset:4713},end:$R[1369]={line:130,column:58,offset:4772}},type:"text",value:"。\n詳しい挙動のイメージはブログを参照してほしいが、この機能を使った新しい世代の CSS in JS ライブラリがある"},$R[1370]={footnoteIndex:8,position:$R[1371]={start:$R[1372]={line:130,column:58,offset:4772},end:$R[1373]={line:130,column:62,offset:4776}},referenceIndex:1,type:"footnoteReference"},$R[1374]={position:$R[1375]={start:$R[1376]={line:130,column:62,offset:4776},end:$R[1377]={line:131,column:57,offset:4834}},type:"text",value:"。\nstyle tag hoisting は DOM API を使用せず、React のレンダリングの流れに乗って、"},$R[1378]={position:$R[1379]={start:$R[1380]={line:131,column:57,offset:4834},end:$R[1381]={line:131,column:66,offset:4843}},type:"inlineCode",value:"\x3Cstyle>"},$R[1382]={position:$R[1383]={start:$R[1384]={line:131,column:66,offset:4843},end:$R[1385]={line:131,column:71,offset:4848}},type:"text",value:" タグを "},$R[1386]={position:$R[1387]={start:$R[1388]={line:131,column:71,offset:4848},end:$R[1389]={line:131,column:79,offset:4856}},type:"inlineCode",value:"\x3Chead>"},$R[1390]={position:$R[1391]={start:$R[1392]={line:131,column:79,offset:4856},end:$R[1393]={line:132,column:71,offset:4935}},type:"text",value:" に挿入できる。\nこの機能は、React Server Components の上で動作する CSS in JS ライブラリにとって、非常に重要な機能である。"}],position:$R[1394]={start:$R[1395]={line:129,column:1,offset:4636},end:$R[1396]={line:132,column:71,offset:4935}},type:"paragraph"}],position:$R[1397]={end:$R[1398]={line:132,column:71,offset:4935},start:$R[1399]={line:127,column:1,offset:4602}},type:"section"},$R[1400]={children:$R[1401]=[$R[1402]={children:$R[1403]=[$R[1404]={position:$R[1405]={start:$R[1406]={line:138,column:5,offset:5221},end:$R[1407]={line:138,column:26,offset:5242}},type:"text",value:"styled-components の選択"}],id:"styled-components-の選択",level:3,plain:"styled-components の選択",position:$R[1408]={start:$R[1409]={line:138,column:1,offset:5217},end:$R[1410]={line:138,column:26,offset:5242}},type:"heading"},$R[1411]={children:$R[1412]=[$R[1413]={position:$R[1414]={start:$R[1415]={line:140,column:1,offset:5244},end:$R[1416]={line:142,column:53,offset:5450}},type:"text",value:"React v19 の styled hoisting を使えば、styled-components も React Server Components 上で動作できる。\nしかし、長く続いているライブラリにおいて、React の API 変更へ大胆に対応するのは既存のユーザーへ求める負荷が高まってしまう。\nそのため、styled-components はメンテナンスモードに移行することを選択したと話している。"}],position:$R[1417]={start:$R[1418]={line:140,column:1,offset:5244},end:$R[1419]={line:142,column:53,offset:5450}},type:"paragraph"},$R[1420]={children:$R[1421]=[$R[1422]={position:$R[1423]={start:$R[1424]={line:144,column:1,offset:5452},end:$R[1425]={line:147,column:45,offset:5647}},type:"text",value:"私達は、この選択を決して責めることはできないし、責めるべきではない。\nstyled-components は長い間、CSS in JS のパイオニアとして多くの開発者に支持されてきた。\nそして、新機能を追加しないと判断した今もなお、UX を損なわない程度にバグ修正などはしばらく行うとも発表している。\n私達は、styled-components の選択を尊重し、感謝の意を表するべきである。"}],position:$R[1426]={start:$R[1427]={line:144,column:1,offset:5452},end:$R[1428]={line:147,column:45,offset:5647}},type:"paragraph"},$R[1429]={children:$R[1430]=[$R[1431]={position:$R[1432]={start:$R[1433]={line:149,column:1,offset:5649},end:$R[1434]={line:152,column:70,offset:6012}},type:"text",value:"ただ、発表文の中にあった、「The React core team has decided to defacto-deprecate certain APIs like the Context API」という文言は、少々気になる。\n少なくとも、React core team は Context API を事実上の非推奨とするような変更や発言はどこでもしていない。\n上述の文言が styled-components の開発者の誤解であることを願うが、React Server Components の登場によって、styled-components の選択肢が狭まったことは間違いない。\nまた、styled-components のメンテナンスモードへの移行は、CSS in JS ライブラリの選択肢を狭めることにもつながる。"}],position:$R[1435]={start:$R[1436]={line:149,column:1,offset:5649},end:$R[1437]={line:152,column:70,offset:6012}},type:"paragraph"}],position:$R[1438]={end:$R[1439]={line:152,column:70,offset:6012},start:$R[1440]={line:138,column:1,offset:5217}},type:"section"}],position:$R[1441]={end:$R[1442]={line:152,column:70,offset:6012},start:$R[1443]={line:77,column:1,offset:2463}},type:"section"},$R[1444]={children:$R[1445]=[$R[1446]={children:$R[1447]=[$R[1448]={position:$R[1449]={start:$R[1450]={line:154,column:4,offset:6017},end:$R[1451]={line:154,column:27,offset:6040}},type:"text",value:"styled-components とこれから"}],id:"styled-components-とこれから",level:2,plain:"styled-components とこれから",position:$R[1452]={start:$R[1453]={line:154,column:1,offset:6014},end:$R[1454]={line:154,column:27,offset:6040}},type:"heading"},$R[1455]={children:$R[1456]=[$R[1457]={children:$R[1458]=[$R[1459]={position:$R[1460]={start:$R[1461]={line:156,column:5,offset:6046},end:$R[1462]={line:156,column:9,offset:6050}},type:"text",value:"移行先?"}],id:"移行先",level:3,plain:"移行先?",position:$R[1463]={start:$R[1464]={line:156,column:1,offset:6042},end:$R[1465]={line:156,column:9,offset:6050}},type:"heading"},$R[1466]={children:$R[1467]=[$R[1468]={position:$R[1469]={start:$R[1470]={line:158,column:1,offset:6052},end:$R[1471]={line:159,column:23,offset:6129}},type:"text",value:"styled-components のメンテナンスモードに対して、私達はどのように対応すれば良いのだろうか。\n対応を検討するときに、次の観点が重要である。"}],position:$R[1472]={start:$R[1473]={line:158,column:1,offset:6052},end:$R[1474]={line:159,column:23,offset:6129}},type:"paragraph"},$R[1475]={children:$R[1476]=[$R[1477]={children:$R[1478]=[$R[1479]={children:$R[1480]=[$R[1481]={position:$R[1482]={start:$R[1483]={line:161,column:3,offset:6133},end:$R[1484]={line:161,column:25,offset:6155}},type:"text",value:"CSS in JS ライブラリを使用するのか"}],position:$R[1485]={start:$R[1486]={line:161,column:3,offset:6133},end:$R[1487]={line:161,column:25,offset:6155}},type:"paragraph"},$R[1488]={children:$R[1489]=[$R[1490]={children:$R[1491]=[$R[1492]={children:$R[1493]=[$R[1494]={position:$R[1495]={start:$R[1496]={line:162,column:5,offset:6160},end:$R[1497]={line:162,column:61,offset:6216}},type:"text",value:"runtime CSS in JS を使用するのか zero-runtime CSS in JS を使用するのか"}],position:$R[1498]={start:$R[1499]={line:162,column:5,offset:6160},end:$R[1500]={line:162,column:61,offset:6216}},type:"paragraph"}],position:$R[1501]={start:$R[1502]={line:162,column:3,offset:6158},end:$R[1503]={line:162,column:61,offset:6216}},type:"listItem"},$R[1504]={children:$R[1505]=[$R[1506]={children:$R[1507]=[$R[1508]={position:$R[1509]={start:$R[1510]={line:163,column:5,offset:6221},end:$R[1511]={line:163,column:36,offset:6252}},type:"text",value:"使用するなら template literal を使用するのか"}],position:$R[1512]={start:$R[1513]={line:163,column:5,offset:6221},end:$R[1514]={line:163,column:36,offset:6252}},type:"paragraph"},$R[1515]={children:$R[1516]=[$R[1517]={children:$R[1518]=[$R[1519]={children:$R[1520]=[$R[1521]={position:$R[1522]={start:$R[1523]={line:164,column:7,offset:6259},end:$R[1524]={line:164,column:58,offset:6310}},type:"text",value:"object literal を使用する場合、stylelint などの資産が使えなくなることへの考慮"}],position:$R[1525]={start:$R[1526]={line:164,column:7,offset:6259},end:$R[1527]={line:164,column:58,offset:6310}},type:"paragraph"}],position:$R[1528]={start:$R[1529]={line:164,column:5,offset:6257},end:$R[1530]={line:164,column:58,offset:6310}},type:"listItem"}],position:$R[1531]={start:$R[1532]={line:164,column:5,offset:6257},end:$R[1533]={line:164,column:58,offset:6310}},type:"unorderedList"}],position:$R[1534]={start:$R[1535]={line:163,column:3,offset:6219},end:$R[1536]={line:164,column:58,offset:6310}},type:"listItem"},$R[1537]={children:$R[1538]=[$R[1539]={children:$R[1540]=[$R[1541]={position:$R[1542]={start:$R[1543]={line:165,column:5,offset:6315},end:$R[1544]={line:165,column:40,offset:6350}},type:"text",value:"使用しないなら、CSS Modules や BEM 記法を使用するのか"}],position:$R[1545]={start:$R[1546]={line:165,column:5,offset:6315},end:$R[1547]={line:165,column:40,offset:6350}},type:"paragraph"}],position:$R[1548]={start:$R[1549]={line:165,column:3,offset:6313},end:$R[1550]={line:165,column:40,offset:6350}},type:"listItem"}],position:$R[1551]={start:$R[1552]={line:162,column:3,offset:6158},end:$R[1553]={line:165,column:40,offset:6350}},type:"unorderedList"}],position:$R[1554]={start:$R[1555]={line:161,column:1,offset:6131},end:$R[1556]={line:165,column:40,offset:6350}},type:"listItem"},$R[1557]={children:$R[1558]=[$R[1559]={children:$R[1560]=[$R[1561]={position:$R[1562]={start:$R[1563]={line:166,column:3,offset:6353},end:$R[1564]={line:166,column:49,offset:6399}},type:"text",value:"移行する場合に、必ずプロダクトに複数の styling library が混在することになる"}],position:$R[1565]={start:$R[1566]={line:166,column:3,offset:6353},end:$R[1567]={line:166,column:49,offset:6399}},type:"paragraph"},$R[1568]={children:$R[1569]=[$R[1570]={children:$R[1571]=[$R[1572]={children:$R[1573]=[$R[1574]={position:$R[1575]={start:$R[1576]={line:167,column:5,offset:6404},end:$R[1577]={line:167,column:21,offset:6420}},type:"text",value:"その場合、どのように移行するのか"}],position:$R[1578]={start:$R[1579]={line:167,column:5,offset:6404},end:$R[1580]={line:167,column:21,offset:6420}},type:"paragraph"},$R[1581]={children:$R[1582]=[$R[1583]={children:$R[1584]=[$R[1585]={children:$R[1586]=[$R[1587]={position:$R[1588]={start:$R[1589]={line:168,column:7,offset:6427},end:$R[1590]={line:168,column:22,offset:6442}},type:"text",value:"AST 走査による機械的な移行"}],position:$R[1591]={start:$R[1592]={line:168,column:7,offset:6427},end:$R[1593]={line:168,column:22,offset:6442}},type:"paragraph"}],position:$R[1594]={start:$R[1595]={line:168,column:5,offset:6425},end:$R[1596]={line:168,column:22,offset:6442}},type:"listItem"},$R[1597]={children:$R[1598]=[$R[1599]={children:$R[1600]=[$R[1601]={position:$R[1602]={start:$R[1603]={line:169,column:7,offset:6449},end:$R[1604]={line:169,column:36,offset:6478}},type:"text",value:"Cursor や Cline などの AI を使用した移行"}],position:$R[1605]={start:$R[1606]={line:169,column:7,offset:6449},end:$R[1607]={line:169,column:36,offset:6478}},type:"paragraph"}],position:$R[1608]={start:$R[1609]={line:169,column:5,offset:6447},end:$R[1610]={line:169,column:36,offset:6478}},type:"listItem"},$R[1611]={children:$R[1612]=[$R[1613]={children:$R[1614]=[$R[1615]={position:$R[1616]={start:$R[1617]={line:170,column:7,offset:6485},end:$R[1618]={line:170,column:13,offset:6491}},type:"text",value:"手動での移行"}],position:$R[1619]={start:$R[1620]={line:170,column:7,offset:6485},end:$R[1621]={line:170,column:13,offset:6491}},type:"paragraph"}],position:$R[1622]={start:$R[1623]={line:170,column:5,offset:6483},end:$R[1624]={line:170,column:13,offset:6491}},type:"listItem"}],position:$R[1625]={start:$R[1626]={line:168,column:5,offset:6425},end:$R[1627]={line:170,column:13,offset:6491}},type:"unorderedList"}],position:$R[1628]={start:$R[1629]={line:167,column:3,offset:6402},end:$R[1630]={line:170,column:13,offset:6491}},type:"listItem"},$R[1631]={children:$R[1632]=[$R[1633]={children:$R[1634]=[$R[1635]={position:$R[1636]={start:$R[1637]={line:171,column:5,offset:6496},end:$R[1638]={line:171,column:18,offset:6509}},type:"text",value:"どのように運用していくのか"}],position:$R[1639]={start:$R[1640]={line:171,column:5,offset:6496},end:$R[1641]={line:171,column:18,offset:6509}},type:"paragraph"}],position:$R[1642]={start:$R[1643]={line:171,column:3,offset:6494},end:$R[1644]={line:171,column:18,offset:6509}},type:"listItem"}],position:$R[1645]={start:$R[1646]={line:167,column:3,offset:6402},end:$R[1647]={line:171,column:18,offset:6509}},type:"unorderedList"}],position:$R[1648]={start:$R[1649]={line:166,column:1,offset:6351},end:$R[1650]={line:171,column:18,offset:6509}},type:"listItem"},$R[1651]={children:$R[1652]=[$R[1653]={children:$R[1654]=[$R[1655]={position:$R[1656]={start:$R[1657]={line:172,column:3,offset:6512},end:$R[1658]={line:172,column:14,offset:6523}},type:"text",value:"そもそも移行するのか?"}],position:$R[1659]={start:$R[1660]={line:172,column:3,offset:6512},end:$R[1661]={line:172,column:14,offset:6523}},type:"paragraph"},$R[1662]={children:$R[1663]=[$R[1664]={children:$R[1665]=[$R[1666]={children:$R[1667]=[$R[1668]={position:$R[1669]={start:$R[1670]={line:173,column:5,offset:6528},end:$R[1671]={line:173,column:42,offset:6565}},type:"text",value:"現状 React Server Components を使用していない場合"}],position:$R[1672]={start:$R[1673]={line:173,column:5,offset:6528},end:$R[1674]={line:173,column:42,offset:6565}},type:"paragraph"}],position:$R[1675]={start:$R[1676]={line:173,column:3,offset:6526},end:$R[1677]={line:173,column:42,offset:6565}},type:"listItem"},$R[1678]={children:$R[1679]=[$R[1680]={children:$R[1681]=[$R[1682]={position:$R[1683]={start:$R[1684]={line:174,column:5,offset:6570},end:$R[1685]={line:174,column:51,offset:6616}},type:"text",value:"styled-components 起因で React などのバージョンアップができない場合"}],position:$R[1686]={start:$R[1687]={line:174,column:5,offset:6570},end:$R[1688]={line:174,column:51,offset:6616}},type:"paragraph"}],position:$R[1689]={start:$R[1690]={line:174,column:3,offset:6568},end:$R[1691]={line:174,column:51,offset:6616}},type:"listItem"},$R[1692]={children:$R[1693]=[$R[1694]={children:$R[1695]=[$R[1696]={position:$R[1697]={start:$R[1698]={line:175,column:5,offset:6621},end:$R[1699]={line:175,column:36,offset:6652}},type:"text",value:"styled-components のバグに悩まされている場合"}],position:$R[1700]={start:$R[1701]={line:175,column:5,offset:6621},end:$R[1702]={line:175,column:36,offset:6652}},type:"paragraph"}],position:$R[1703]={start:$R[1704]={line:175,column:3,offset:6619},end:$R[1705]={line:175,column:36,offset:6652}},type:"listItem"}],position:$R[1706]={start:$R[1707]={line:173,column:3,offset:6526},end:$R[1708]={line:175,column:36,offset:6652}},type:"unorderedList"}],position:$R[1709]={start:$R[1710]={line:172,column:1,offset:6510},end:$R[1711]={line:175,column:36,offset:6652}},type:"listItem"}],position:$R[1712]={start:$R[1713]={line:161,column:1,offset:6131},end:$R[1714]={line:175,column:36,offset:6652}},type:"unorderedList"},$R[1715]={children:$R[1716]=[$R[1717]={position:$R[1718]={start:$R[1719]={line:177,column:1,offset:6654},end:$R[1720]={line:178,column:147,offset:6829}},type:"text",value:"これらの観点を考慮しながら、移行先を検討する必要がある。\n私の個人的な感想としては、React Server Components や Streaming SSR を使用する場合、あとは React の major version を上げる際に、styled-components の存在が障壁になったタイミングで移行するのが良いのではないかと思う。"}],position:$R[1721]={start:$R[1722]={line:177,column:1,offset:6654},end:$R[1723]={line:178,column:147,offset:6829}},type:"paragraph"}],position:$R[1724]={end:$R[1725]={line:178,column:147,offset:6829},start:$R[1726]={line:156,column:1,offset:6042}},type:"section"}],position:$R[1727]={end:$R[1728]={line:178,column:147,offset:6829},start:$R[1729]={line:154,column:1,offset:6014}},type:"section"},$R[1730]={children:$R[1731]=[$R[1732]={children:$R[1733]=[$R[1734]={position:$R[1735]={start:$R[1736]={line:180,column:4,offset:6834},end:$R[1737]={line:180,column:8,offset:6838}},type:"text",value:"おわりに"}],id:"おわりに",level:2,plain:"おわりに",position:$R[1738]={start:$R[1739]={line:180,column:1,offset:6831},end:$R[1740]={line:180,column:8,offset:6838}},type:"heading"},$R[1741]={children:$R[1742]=[$R[1743]={position:$R[1744]={start:$R[1745]={line:182,column:1,offset:6840},end:$R[1746]={line:185,column:33,offset:7058}},type:"text",value:"styled-components のメンテナンスモードへの移行は、CSS in JS ライブラリの歴史において、1つの節目となる出来事である。\n私達は、styled-components の選択を尊重し、感謝の意を表するべきである。\nまた、React Server Components の登場によって、CSS in JS ライブラリの選択肢が狭まることは間違いない。\n私達は、移行先を検討し、プロダクトに最適な選択をする必要がある。"}],position:$R[1747]={start:$R[1748]={line:182,column:1,offset:6840},end:$R[1749]={line:185,column:33,offset:7058}},type:"paragraph"}],position:$R[1750]={end:$R[1751]={line:185,column:33,offset:7058},start:$R[1752]={line:180,column:1,offset:6831}},type:"section"}],footnotes:$R[1753]=[$R[1754]={children:$R[1755]=[$R[1756]={children:$R[1757]=[$R[1758]={children:$R[1759]=[$R[1760]={position:$R[1761]={start:$R[1762]={line:23,column:7,offset:630},end:$R[1763]={line:23,column:109,offset:732}},type:"text",value:"https://github.com/styled-components/styled-components/commit/d2561d4928ff252eb79e5e3a3749c13930b6f062"}],position:$R[1764]={start:$R[1765]={line:23,column:7,offset:630},end:$R[1766]={line:23,column:109,offset:732}},title:void 0,type:"link",url:"https://github.com/styled-components/styled-components/commit/d2561d4928ff252eb79e5e3a3749c13930b6f062"}],position:$R[1767]={start:$R[1768]={line:23,column:7,offset:630},end:$R[1769]={line:23,column:109,offset:732}},type:"paragraph"}],count:1,index:0,position:$R[1770]={start:$R[1771]={line:23,column:1,offset:624},end:$R[1772]={line:23,column:109,offset:732}},type:"footnoteDefinition"},$R[1773]={children:$R[1774]=[$R[1775]={children:$R[1776]=[$R[1777]={children:$R[1778]=[$R[1779]={position:$R[1780]={start:$R[1781]={line:32,column:8,offset:937},end:$R[1782]={line:32,column:60,offset:989}},type:"text",value:"https://styled-components.com/docs/basics#motivation"}],position:$R[1783]={start:$R[1784]={line:32,column:7,offset:936},end:$R[1785]={line:32,column:115,offset:1044}},title:void 0,type:"link",url:"https://styled-components.com/docs/basics#motivation"}],position:$R[1786]={start:$R[1787]={line:32,column:7,offset:936},end:$R[1788]={line:32,column:115,offset:1044}},type:"paragraph"}],count:1,index:1,position:$R[1789]={start:$R[1790]={line:32,column:1,offset:930},end:$R[1791]={line:32,column:115,offset:1044}},type:"footnoteDefinition"},$R[1792]={children:$R[1793]=[$R[1794]={children:$R[1795]=[$R[1796]={children:$R[1797]=[$R[1798]={position:$R[1799]={start:$R[1800]={line:41,column:8,offset:1231},end:$R[1801]={line:41,column:53,offset:1276}},type:"text",value:"https://speakerdeck.com/vjeux/react-css-in-js"}],position:$R[1802]={start:$R[1803]={line:41,column:7,offset:1230},end:$R[1804]={line:41,column:101,offset:1324}},title:void 0,type:"link",url:"https://speakerdeck.com/vjeux/react-css-in-js"}],position:$R[1805]={start:$R[1806]={line:41,column:7,offset:1230},end:$R[1807]={line:41,column:101,offset:1324}},type:"paragraph"}],count:1,index:2,position:$R[1808]={start:$R[1809]={line:41,column:1,offset:1224},end:$R[1810]={line:41,column:101,offset:1324}},type:"footnoteDefinition"},$R[1811]={children:$R[1812]=[$R[1813]={children:$R[1814]=[$R[1815]={children:$R[1816]=[$R[1817]={position:$R[1818]={start:$R[1819]={line:72,column:8,offset:2164},end:$R[1820]={line:72,column:61,offset:2217}},type:"text",value:"https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a"}],position:$R[1821]={start:$R[1822]={line:72,column:7,offset:2163},end:$R[1823]={line:72,column:117,offset:2273}},title:void 0,type:"link",url:"https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a"}],position:$R[1824]={start:$R[1825]={line:72,column:7,offset:2163},end:$R[1826]={line:72,column:117,offset:2273}},type:"paragraph"}],count:1,index:3,position:$R[1827]={start:$R[1828]={line:72,column:1,offset:2157},end:$R[1829]={line:72,column:117,offset:2273}},type:"footnoteDefinition"},$R[1830]={children:$R[1831]=[$R[1832]={children:$R[1833]=[$R[1834]={children:$R[1835]=[$R[1836]={position:$R[1837]={start:$R[1838]={line:84,column:8,offset:2725},end:$R[1839]={line:84,column:41,offset:2758}},type:"text",value:"https://nextjs.org/blog/next-13-4"}],position:$R[1840]={start:$R[1841]={line:84,column:7,offset:2724},end:$R[1842]={line:84,column:77,offset:2794}},title:void 0,type:"link",url:"https://nextjs.org/blog/next-13-4"}],position:$R[1843]={start:$R[1844]={line:84,column:7,offset:2724},end:$R[1845]={line:84,column:77,offset:2794}},type:"paragraph"}],count:1,index:4,position:$R[1846]={start:$R[1847]={line:84,column:1,offset:2718},end:$R[1848]={line:84,column:77,offset:2794}},type:"footnoteDefinition"},$R[1849]={children:$R[1850]=[$R[1851]={children:$R[1852]=[$R[1853]={children:$R[1854]=[$R[1855]={position:$R[1856]={start:$R[1857]={line:86,column:8,offset:2803},end:$R[1858]={line:86,column:116,offset:2911}},type:"text",value:"https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components"}],position:$R[1859]={start:$R[1860]={line:86,column:7,offset:2802},end:$R[1861]={line:86,column:227,offset:3022}},title:void 0,type:"link",url:"https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components"}],position:$R[1862]={start:$R[1863]={line:86,column:7,offset:2802},end:$R[1864]={line:86,column:227,offset:3022}},type:"paragraph"}],count:1,index:5,position:$R[1865]={start:$R[1866]={line:86,column:1,offset:2796},end:$R[1867]={line:86,column:227,offset:3022}},type:"footnoteDefinition"},$R[1868]={children:$R[1869]=[$R[1870]={children:$R[1871]=[$R[1872]={children:$R[1873]=[$R[1874]={position:$R[1875]={start:$R[1876]={line:94,column:8,offset:3275},end:$R[1877]={line:94,column:116,offset:3383}},type:"text",value:"https://github.com/reactjs/rfcs/blob/7f8492f6a177fc33fe807d242319f2f96353bf68/text/0188-server-components.md"}],position:$R[1878]={start:$R[1879]={line:94,column:7,offset:3274},end:$R[1880]={line:94,column:227,offset:3494}},title:void 0,type:"link",url:"https://github.com/reactjs/rfcs/blob/7f8492f6a177fc33fe807d242319f2f96353bf68/text/0188-server-components.md"}],position:$R[1881]={start:$R[1882]={line:94,column:7,offset:3274},end:$R[1883]={line:94,column:227,offset:3494}},type:"paragraph"}],count:1,index:6,position:$R[1884]={start:$R[1885]={line:94,column:1,offset:3268},end:$R[1886]={line:94,column:227,offset:3494}},type:"footnoteDefinition"},$R[1887]={children:$R[1888]=[$R[1889]={children:$R[1890]=[$R[1891]={children:$R[1892]=[$R[1893]={position:$R[1894]={start:$R[1895]={line:134,column:8,offset:4944},end:$R[1896]={line:134,column:74,offset:5010}},type:"text",value:"https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets"}],position:$R[1897]={start:$R[1898]={line:134,column:7,offset:4943},end:$R[1899]={line:134,column:143,offset:5079}},title:void 0,type:"link",url:"https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets"}],position:$R[1900]={start:$R[1901]={line:134,column:7,offset:4943},end:$R[1902]={line:134,column:143,offset:5079}},type:"paragraph"}],count:1,index:7,position:$R[1903]={start:$R[1904]={line:134,column:1,offset:4937},end:$R[1905]={line:134,column:143,offset:5079}},type:"footnoteDefinition"},$R[1906]={children:$R[1907]=[$R[1908]={children:$R[1909]=[$R[1910]={children:$R[1911]=[$R[1912]={position:$R[1913]={start:$R[1914]={line:136,column:8,offset:5088},end:$R[1915]={line:136,column:92,offset:5172}},type:"text",value:"souporserious/restyle - The simplest way to add CSS styles to your React components."}],position:$R[1916]={start:$R[1917]={line:136,column:7,offset:5087},end:$R[1918]={line:136,column:135,offset:5215}},title:void 0,type:"link",url:"https://github.com/souporserious/restyle"}],position:$R[1919]={start:$R[1920]={line:136,column:7,offset:5087},end:$R[1921]={line:136,column:135,offset:5215}},type:"paragraph"}],count:1,index:8,position:$R[1922]={start:$R[1923]={line:136,column:1,offset:5081},end:$R[1924]={line:136,column:135,offset:5215}},type:"footnoteDefinition"}],title:$R[1925]={children:$R[1926]=[$R[1927]={position:$R[1928]={start:$R[1929]={line:1,column:3,offset:2},end:$R[1930]={line:1,column:32,offset:31}},type:"text",value:"styled-components の歴史、現在、これから"}],id:"styled-components-の歴史現在これから",level:1,plain:"styled-components の歴史、現在、これから",position:$R[1931]={start:$R[1932]={line:1,column:1,offset:0},end:$R[1933]={line:1,column:32,offset:31}},type:"heading"},toc:$R[1934]=[$R[1935]={children:$R[1936]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[1937]={children:$R[1938]=[],id:"styled-components-とは",plain:"styled-components とは",type:"toc"},$R[1939]={children:$R[1940]=[$R[1941]={children:$R[1942]=[],id:"css-in-js-の登場",plain:"CSS in JS の登場",type:"toc"},$R[1943]={children:$R[1944]=[],id:"styled-components-という選択",plain:"styled-components という選択",type:"toc"}],id:"styled-components-の歴史",plain:"styled-components の歴史",type:"toc"},$R[1945]={children:$R[1946]=[$R[1947]={children:$R[1948]=[$R[1949]={children:$R[1950]=[],id:"styled-components-の動作原理",plain:"styled-components の動作原理",type:"toc"}],id:"react-server-components-の登場",plain:"React Server Components の登場",type:"toc"},$R[1951]={children:$R[1952]=[],id:"react-server-components-への対応",plain:"React Server Components への対応",type:"toc"},$R[1953]={children:$R[1954]=[],id:"styled-components-の選択",plain:"styled-components の選択",type:"toc"}],id:"styled-components-の現在",plain:"styled-components の現在",type:"toc"},$R[1955]={children:$R[1956]=[$R[1957]={children:$R[1958]=[],id:"移行先",plain:"移行先?",type:"toc"}],id:"styled-components-とこれから",plain:"styled-components とこれから",type:"toc"},$R[1959]={children:$R[1960]=[],id:"おわりに",plain:"おわりに",type:"toc"}],type:"article"}});_$HY.r["0000000100010020000000000"]=$R[1962]=$R[1]();_$HY.r["00000001000100200000000"]=$R[1963]=$R[1]();$R[1961]($R[2],!0);$R[1961]($R[1962],$R[3]);$R[1961]($R[1963],!0);
React v19 の styled hoisting を使えば、styled-components も React Server Components 上で動作できる。
しかし、長く続いているライブラリにおいて、React の API 変更へ大胆に対応するのは既存のユーザーへ求める負荷が高まってしまう。
そのため、styled-components はメンテナンスモードに移行することを選択したと話している。
私達は、この選択を決して責めることはできないし、責めるべきではない。
styled-components は長い間、CSS in JS のパイオニアとして多くの開発者に支持されてきた。
そして、新機能を追加しないと判断した今もなお、UX を損なわない程度にバグ修正などはしばらく行うとも発表している。
私達は、styled-components の選択を尊重し、感謝の意を表するべきである。
ただ、発表文の中にあった、「The React core team has decided to defacto-deprecate certain APIs like the Context API」という文言は、少々気になる。
少なくとも、React core team は Context API を事実上の非推奨とするような変更や発言はどこでもしていない。
上述の文言が styled-components の開発者の誤解であることを願うが、React Server Components の登場によって、styled-components の選択肢が狭まったことは間違いない。
また、styled-components のメンテナンスモードへの移行は、CSS in JS ライブラリの選択肢を狭めることにもつながる。
これらの観点を考慮しながら、移行先を検討する必要がある。
私の個人的な感想としては、React Server Components や Streaming SSR を使用する場合、あとは React の major version を上げる際に、styled-components の存在が障壁になったタイミングで移行するのが良いのではないかと思う。
styled-components のメンテナンスモードへの移行は、CSS in JS ライブラリの歴史において、1つの節目となる出来事である。
私達は、styled-components の選択を尊重し、感謝の意を表するべきである。
また、React Server Components の登場によって、CSS in JS ライブラリの選択肢が狭まることは間違いない。
私達は、移行先を検討し、プロダクトに最適な選択をする必要がある。