無料 CSS → JavaScript コンバーター

使い方

このツールはCSSプロパティを解析し、JavaScriptオブジェクト構文に変換します。kebab-caseのプロパティ名(background-colorなど)は自動的にcamelCase(backgroundColor)に変換されます。CSS値はそのまま保持されます。個々のプロパティまたはセレクタ付きの完全なCSSルールを入力できます。

CSS-in-JS の動き、簡潔に

なぜこの変換問題が存在するのか? 2014年に、フロントエンド開発者の世代が、別個のスタイルシートでの CSS が大規模に失敗したと決定したからです。設立瞬間は2014年11月15日の NationJS での Christopher「Vjeux」Chedeau の「CSS in JS」講演でした、Facebook エンジニアが CSS のグローバルカスケード、依存関係追跡の欠如、デッドコードの累積が大規模 Web アプリケーションの最悪の部分であると主張しました。講演はムーブメントを引き起こしました。JSS(Oleg Slobodskoi)は最初の汎用 CSS-in-JS ライブラリとして2014年後半に出荷しました。CSS Modules は2015年にビルド時スコーピングアプローチとして到来しました。styled-components(Glen Maddern + Max Stoiber)は2016年10月に出荷、コンポーネント定義に添付されたバッククォートで CSS を書く tagged-template-literal API を普及させました。Emotion(Kye Hohenberger)は2017年7月10日に出荷、styled-components スタイル API と直接 JavaScript オブジェクトを受け入れるより柔軟な css プロップの両方を持ちます、まさにこのツールが生成するフォーマット。Stitches(Modulz/Pedro Duarte)は2020年にバリアントベース API で出荷しましたが、2023年中盤に未メンテナンスになり、2026年4月に正式にアーカイブされました。

振り子は揺り戻しました。Sam Magura の「Why We're Breaking Up with CSS-in-JS」2022年10月16日、Emotion メンテナーが書いた、は変曲点でした。技術的議論:ランタイム CSS-in-JS は React レンダーを測定可能に遅くします(Magura 自身の Spot Member Browser でのベンチマークは Emotion から移行後、レンダーのメディアン時間を 54.3 ミリ秒から 27.7 ミリ秒に下げました、約 2× 高速)、バンドルはより大きい、シリアル化コストは累積する。アーキテクチャ的議論:React Server Components(Next.js 13.4 によって2023 年 5 月 4 日に安定化)は React Context を使用できません、ほとんどの CSS-in-JS ライブラリがテーマ化のために依存しているもの。置換の波:Tailwind CSS(Adam Wathan、2025年1月22日に v4 ローンチ)、ビルド時 CSS-in-TypeScript のためのVanilla Extract(Seek の Mark Dalgleish、2021年3月26日)、ランタイムコストなしのスコープ付きクラス名のためのCSS Modules、そして Magura のポスト自身で挙げられた生き残りの compile-to-static グループ:vanilla-extract、Linaria、Compiled、StyleX、Pigment CSS。JSS 自体は2024年5月14日に廃止予定、styled-components は2025年3月17日にメンテナンスモードに入りました。ランタイム CSS-in-JS は2026年に新しい React プロジェクトのデフォルトではなくなりました、しかし既存の styled-components と Emotion コードベースの巨大なベースが存続し、それらのライブラリのオブジェクト形式に CSS を変換することは多くのチームの日常的な現実のままです。

主要ライブラリの API サーフェス

React インラインスタイル(style プロップ)は普遍的なベースラインです、すべての React コンポーネントはキーが camelCase の CSS プロパティであるオブジェクト style を受け入れます。pseudo-class(:hover)、メディアクエリ、または !important のサポートはありません、これは古い HTML style="..." 属性の意味での「インラインスタイル」です、文字列ではなく JavaScript オブジェクトで。このツールの出力は style={...} に直接落ちます。styled-components は実際の CSS 文字列を含むタグ付きテンプレートリテラルを取ります:const Button = styled.div`background: red; padding: 10px;`。CSS は実際の CSS、kebab-case とすべて、インラインスタイルから styled コンポーネントに移行する場合を除いて、styled-components にこの変換器が必要なことは通常ありません。Emotion は両方の API をサポートします:styled API(styled-components のようなテンプレートリテラル)と JavaScript オブジェクトを持つ css プロップ(camelCase、まさにこのツールが生成するフォーマット)。Emotion の css プロップには、この変換器の出力が直接使用可能です。JSS はいくつかの追加機能(テーマ化、自動生成クラス名)を持つ類似のオブジェクト形式を使用しますが、基本的な camelCase プロパティ構文は同じです。Vue のスタイルバインディング(:style="...")は React のインラインスタイルと同じ camelCase オブジェクト構文を受け入れます。Vanilla Extract は明示的な style({ ... }) ラッパー関数を持つより厳密な型付きオブジェクト形式を使用します、内部の camelCase オブジェクトは同じ形を持ちます。

エッジケースと落とし穴

• ms ベンダープレフィックスの例外。 ほとんどのベンダープレフィックスは camelCase 後に大文字になります:-webkit-transform → WebkitTransform、-moz-appearance → MozAppearance、-o-transition → OTransition。しかし Microsoft のプレフィックスは例外です:-ms-flex → msFlex、小文字の m で、それが React DOM のソースが定義する方法だからです。これは最も Google で検索される CSS-to-JS の落とし穴です。
• 単位なしのプロパティ。 React DOM は裸の数字が有効なプロパティのリストを保持します(z-index、opacity、line-height、flex-grow、flex-shrink、order、columns、その他いくつか)。これらには、zIndex: 5 は正しい。他のすべてには、寸法値は文字列として単位を必要とします:width: '100px'、width: 100 ではなく(React は静かなデフォルトでそれを '100px' として扱う、便利ですが % や vh が欲しい場合は損失)。
• calc()、var()、CSS カスタムプロパティ。 これらは文字列値として動作します:width: 'calc(100% - 20px)'、color: 'var(--brand-color)'。カスタムプロパティ(CSS 変数)は --name 周りの引用符を必要とします:'--my-var': 'red'。
• !important は React インラインスタイルで動作しません。 React の style プロップは !important アノテーションを静かに無視します。より高い特異性のルールをオーバーライドする必要がある場合は、実際のスタイルシート(CSS Modules、Tailwind、styled-components)を使用してください、インラインスタイルは正しいツールではありません。
• 空の文字列内容。 content: '' は JavaScript で引用符付けに注意が必要です:content: "''"、空の文字列値、しかし値自体は周囲のアポストロフィを保持する必要がある空の CSS 文字列リテラルです。
• ネストされたルールと擬似セレクタ。 単純な CSS-to-JS 変換はフラットなオブジェクトを生成します、ホバー状態、メディアクエリ、擬似要素スタイルは宛先ライブラリ独自の構造を必要とします。Emotion の css プロップはネストされたオブジェクトをサポートします('&:hover': { background: 'red' })、React のインラインスタイルはサポートしません。
• ショートハンドプロパティ。 margin: 10px 20px 10px 20px は JS 形式で文字列として残ります:margin: '10px 20px 10px 20px'。React はショートハンドを許可します、いくつかの CSS-in-JS ライブラリはそれが longhand バリアントと予期せず相互作用する可能性があると警告します。

一般的な使用例

• React インラインスタイル。 デザイナーやスタイルシートからの CSS スニペットを、関連するスタイルシートを持たないコンポーネント用の style={...} オブジェクト形式に変換。
• Emotion css プロップ。 別の CSS ファイルから Emotion のオブジェクト構文 css プロップへの移行、camelCase + JS-オブジェクト形式がネイティブ入力です。
• JavaScript アニメーション。 GSAP、anime.js、Motion One、Framer Motion はすべてキーフレームターゲットとしてスタイルオブジェクトを受け入れます。camelCase 形式もそこで必要です。
• デザインシステムトークン。 CSS カスタムプロパティ値を、TypeScript または JS が正準的な真実のソースであるデザイン-トークンシステム(Style Dictionary、Theo など)で使用するための JavaScript 定数に変換。
• JSS 移行。 Material UI v4 以前は JSS を多用しました、CSS プロトタイプを JSS オブジェクト形式に変換するのが摩擦点です。Material UI v5+ はデフォルトで Emotion に切り替わったので、これはむしろレガシーケースです。
• Vue インラインスタイルバインディング。 Vue テンプレートの :style="{...}" は React の style プロップと同じ camelCase オブジェクト形式を使用します、この変換器の出力は Vue テンプレートでも直接使用可能です。

正直な範囲、このツールが行うことと行わないこと

このツールは CSS 宣言を camelCase キーと正しく引用符付けされた文字列値を持つ JavaScript オブジェクト構文に変換します。それはベンダープレフィックスの大文字化ルール(小文字 ms 例外を含む)を処理します。それは camelCase オブジェクトを生成する以上の特定のライブラリの API に翻訳しません、コードベースが styled.div`...` 内のオブジェクトを望むのか、Emotion css 呼び出し内、React style プロップ内、Vue :style バインディング内かを依然として知る必要があります。選択は変換器ではなくライブラリに依存します。ツールはまた、ネストされたルールと擬似セレクタを自動的に処理しません、Emotion のネストされたオブジェクト構文('&:hover': {...})と styled-components のテンプレートリテラルネスティングは異なる方法で動作し、手動構造化を必要とします。CSS ファイルから CSS-in-JS ライブラリへの完全移行には、このツールが提供するプロパティごとの変換を超えた再構造化を期待してください。

プライバシー、なぜブラウザのみがここで重要か

CSS にはほとんど秘密が含まれませんが、独自のスタイルシートはサイトの内部クラス分類、デザインシステムトークン、時には実験固有のセレクタを介した A/B テスト仮定についての情報を明らかにします。サーバー側変換ツールは CSS をアップロードする必要があります、それはログに残ります。内部製品スタイル、デザインシステムの真実のソースファイル、または進行中のブランディングには、ブラウザのみの変換がすべてをローカルに保ちます。このツールはブラウザですべての変換を実行します、Convert をクリックする間に DevTools の Network タブを確認するか、ページをオフライン(機内モード)にしても変換器はまだ動作します。

よくある質問

CSS プロパティはどのように camelCase に変換されますか?

kebab-case CSS プロパティの各ハイフンが削除され、次の文字が大文字になります:background-color → backgroundColor、border-radius → borderRadius、margin-top → marginTop。ベンダープレフィックスのプロパティは大文字化で同じルールに従います:-webkit-transform → WebkitTransform(大文字 W)、-moz-appearance → MozAppearance。有名な例外は Microsoft プレフィックスです:-ms-flex → msFlex、小文字の m で、それが React DOM が定義する方法だからです。

メディアクエリと擬似クラスで動作しますか?

プレーン JavaScript スタイルオブジェクト(React の style プロップ、Vue の :style)はメディアクエリや擬似クラスをサポートしません、それらはスタイルシート概念です。オブジェクト構文を受け入れる CSS-in-JS ライブラリ(Emotion の css プロップ、JSS)はネストされたオブジェクトを介してそれらをサポートします:'&:hover': { background: 'red' }、'@media (min-width: 768px)': { padding: '20px' }。宛先ライブラリのドキュメントが正確なネスト構造を示します。このツールはフラットオブジェクトを生成します、ライブラリのネスト構文で手動でラップします。

なぜ !important は React インラインスタイルで動作しないのか?

React の style プロップは !important アノテーションを静かに無視します、それらは JS オブジェクトリテラル文法の一部ではなく、React のレンダラーはそれらを翻訳しません。より高い特異性のルールをオーバーライドする必要がある場合は、実際のスタイルシート(CSS Modules、Tailwind、styled-components、純粋 CSS)を使用してください。React のインラインスタイルメカニズムは特異性が懸念事項ではないアドホックまたは動的スタイル用です、!important はスタイルシートに属します。

2026年に CSS-in-JS をまだ使用すべきですか?

新しい React プロジェクトには、現在のデフォルトは「いいえ、Tailwind、CSS Modules、または Vanilla Extract を使用してください」です。Emotion チーム内からの2022年10月の Sam Magura の記事、React Server Components の Context 互換性のなさと組み合わさって、エコシステムをビルド時のみのソリューションに押しやりました。styled-components は2025年3月17日にメンテナンスモードに入りました、JSS は2024年5月14日に廃止予定。styled-components や Emotion への大きな投資を持つ既存のコードベースには、移行する緊急性はありません、両方のライブラリはまだ動作し、ランタイムコストはプロファイリングで現れたときに最適化するものの種類です。2026年の真新しいプロジェクトには:Tailwind v4(2025年1月22日リリース)が最も人気のある選択です、スタイルで厳密な TypeScript 型付けを望むプロジェクトには Vanilla Extract、最小限の抽象化を望むプロジェクトには CSS Modules。

デザインシステムトークンをこの方法で変換できますか?

ワンオフのスニペットには、はい。色、間隔、タイポグラフィ、モーションごとに整理された通常数十または数百のトークンを持つ完全なデザインシステムには、Style Dictionary や Theo のような専用ツールを使用してください、両方とも単一の真実のソース(JSON、YAML、または JS)を取って複数の宛先(CSS カスタムプロパティ、JS 定数、iOS Asset Catalog、Android XML など)に出力します。実際のデザイントークンツールの利点はプラットフォーム間の一貫性です、この変換器は手元に CSS スニペットがあって今すぐ JS 形式が欲しい場合のためです。

私の CSS はどこかに送信されますか?

いいえ。変換は JavaScript を介してブラウザで完全に実行されます。貼り付ける CSS はネットワークを横断しません、Convert をクリックする間に DevTools の Network タブを確認するか、ロード後にページをオフラインにしてツールがまだ動作することを確認してください。独自のスタイルシート、デザインシステムの真実のソースファイル、または見知らぬ人のハードドライブにコピーされたくない内部クラス分類を明らかにする CSS に安全です。

関連ツール