Output will appear here...
HTML → JSX変換について
JSXはReactの構文拡張で、HTMLに似ていますが重要な違いがあります。HTMLテンプレートをReactコンポーネントに移行する際、classをclassNameに、forをhtmlForに、インラインスタイル文字列をJavaScriptオブジェクトに変換する必要があります。このツールはこれらの変換をすべて自動化します。自動閉じ空要素の処理、HTMLコメントのJSXコメントへの変換、一般的なHTML属性のJSX対応属性への変換を行います。
Key Features
- Convert class attributes to className
- Convert for attributes to htmlFor for labels
- Transform style strings to style objects
- Handle event handlers (onclick → onClick)
- Support data-* attributes (pass-through)
- 100% client-side — your code stays private
よくある質問
HTML → JSX変換で何が変わりますか？
主な変更：class → className、for → htmlFor、インラインスタイル文字列 → スタイルオブジェクト、自動閉じタグに/>追加、HTMLコメント → {/* */}。
JSXでclassを使えないのはなぜ？
JSXでは'class'はJavaScriptの予約語です。Reactでは代わりに'className'を使います。同様に'for'は'htmlFor'になります。
インラインスタイルはどう変換されますか？
style="color: red; font-size: 16px"はstyle={{color: "red", fontSize: "16px"}}に変換されます。
自動閉じタグに対応していますか？
はい。<br>、<hr>、<img>、<input>などのHTML空要素は<br />、<hr />に変換されます。
このツールを評価
4.5 / 5 · 202 件の評価
最新情報を受け取る
毎週の開発ヒントと新ツール情報。
スパムなし。いつでも解除可能。
Enjoy these free tools?
☕Buy Me a Coffee使い方
- 入力パネルにHTMLマークアップを貼り付け
- 変換をクリックしてJSXに変換
- 変換されたJSX出力を確認
- コピーしてReactコンポーネントに貼り付け
一般的な使用例
- 静的HTMLテンプレートをReactコンポーネントに移行
- デザインツール（Figma、Webflow）のHTMLをJSXに変換
- HTMLメールテンプレートをReact Emailに移植
- HTMLとJSX構文の違いを学習