ここで実行 100% ブラウザ内で動作します。アップロードもログインも不要です。
HTML to JSX
HTML を JSX へ：className、htmlFor、キャメルケース属性、style オブジェクト、自己閉鎖タグ。
不正なネスト（閉じタグの不一致、<p> 内のブロック要素、<a> の入れ子）は推測せず明示的に報告します。
使い方
- HTML を左側に貼り付けます — まとまった断片でも単一の要素でも構いません。
- コンポーネント名を入力します。PascalCase の識別子に変換され、外側の関数名になります。
- コンポーネントで包むを有効にすると貼り付けやすい関数が得られ、無効にすると素の JSX だけが出力されます。
- 空要素を自己閉鎖を有効にすると
<br />形式になります。明示的な対での記述を好む場合は無効にしてください。 - 変換を押し、コピーまたは .jsx のダウンロードを選びます。
よくある用途
- 静的テンプレートの移植 — ランディングページやメールテンプレートを React コンポーネントに移す際、属性を手で直さずに済みます。
- 属性警告の解消 — tabindex、readonly、maxlength、colspan、srcset など数十項目を規則表で書き換えます。
- インライン style の変換 —
style="padding: 16px; border-radius: 8px"がキーもキャメルケースのオブジェクトになります。 - 不正なネストの早期発見 — 閉じタグの不一致や段落内のブロック要素が、ビルドに届く前に報告されます。
よくある質問
Q: ループ内の key は足してくれますか？
A: いいえ。変換対象はマークアップであり、データフローではありません。.map() にしたリストの key は自分で追加してください。
Q: 独自属性が小文字のままなのはなぜ？ A: data 属性や aria 属性のようにハイフンや名前空間接頭辞を持つ属性はそのまま保持します。JSX の綴りに写されるのは、既知の HTML 属性名だけです。
Q: ここでいう不正なネストとは？
A: 閉じタグが最も内側の開いた要素と一致しない、<p> の中にブロック要素がある、<a> や <form> が自分自身をネストしている、テーブルやリストの子要素が認められていない、などです。いずれも推測せずタグ名を報告します。
データはこのデバイス内にとどまります
HTML to JSX は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。