DevToolBox無料
ブログ

HTML → JSX変換ツール

オンラインでHTMLをReact JSXに変換。classをclassNameに、styleを文字列からオブジェクトに、自動閉じタグなど。無料で即座に変換。

HTML → JSX変換について

JSXはReactの構文拡張で、HTMLに似ていますが重要な違いがあります。HTMLテンプレートをReactコンポーネントに移行する際、classをclassNameに、forをhtmlForに、インラインスタイル文字列をJavaScriptオブジェクトに変換する必要があります。このツールはこれらの変換をすべて自動化します。自動閉じ空要素の処理、HTMLコメントのJSXコメントへの変換、一般的なHTML属性のJSX対応属性への変換を行います。

𝕏 Twitterin LinkedIn

このツールを評価

4.5 / 5 · 202 件の評価

その他のツール

SVGSVG → JSX/ReactJSJS/HTMLフォーマッター&;HTMLエンティティエンコーダーHMHTML to Markdown

Recommended

VercelDeploy your frontend instantlyGitHub CopilotAI pair programming

最新情報を受け取る

毎週の開発ヒントと新ツール情報。

スパムなし。いつでも解除可能。

Enjoy these free tools?

☕Buy Me a Coffee

使い方

  1. 入力パネルにHTMLマークアップを貼り付け
  2. 変換をクリックしてJSXに変換
  3. 変換されたJSX出力を確認
  4. コピーしてReactコンポーネントに貼り付け

一般的な使用例

  • 静的HTMLテンプレートをReactコンポーネントに移行
  • デザインツール（Figma、Webflow）のHTMLをJSXに変換
  • HTMLメールテンプレートをReact Emailに移植
  • HTMLとJSX構文の違いを学習

よくある質問

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 />に変換されます。