HTML → JSX 変換ツール
プライバシー優先設計 — すべてブラウザ内で処理します
左側に HTML を貼り付け、右側で React 用の JSX をコピーできます。class は className、for は htmlFor、インラインの style 文字列は camelCase オブジェクトに書き換わり、img や input といった void 要素は自動的に自己閉鎖されるため、そのまま JSX として読み込めます。
属性とイベントのマッピング
React は HTML 属性ではなく DOM プロパティ名を使うため、tabindex は tabIndex、readonly は readOnly、colspan は colSpan に置き換わります。インラインのハンドラも onclick → onClick、onmouseover → onMouseOver のように、すべての標準ハンドラが camelCase になります。HTML 特有の置き換えは class → className と for → htmlFor の2つで、いずれも JavaScript の予約語のためです。
style 文字列を camelCase オブジェクトへ
JSX のインラインスタイルはオブジェクトリテラルで、CSS プロパティはすべて camelCase でなければなりません。padding: 1rem; background-color: #fff のような文字列は style={{ padding: '1rem', backgroundColor: '#fff' }} に変換されます。コンバーターは kebab-case から camelCase への変換、ベンダープレフィックス(-webkit-、-moz-、-ms-)、CSS カスタムプロパティ(--brand-color。必要なら文字列キー)を扱います。
プライバシーとエッジケース
変換はこのタブ内の単一の JavaScript 関数で行われます。HTML はブラウザの外に出ないため、顧客データを含むマークアップを移行するときも安心して使えます。14 種類の void 要素(img、input、br、hr、meta、link、area、base、col、embed、source、track、wbr、param)は出力で自己閉鎖されるので、JSX がそのまま解釈できます。data- と aria- 属性は JSX でそのまま使えるため、変換せずに残します。
よくある質問
- どの属性が改名されますか?
- class → className、for → htmlFor、tabindex → tabIndex、readonly → readOnly、colspan → colSpan、そして標準 DOM プロパティと on* ハンドラはすべて camelCase になります。
- style 文字列はどのように変換されますか?
- セミコロンで分割し、各 CSS プロパティを camelCase にしたうえで、二重波括弧の JSX オブジェクトとして出力します。ベンダープレフィックスやカスタムプロパティは保持されます。
- data-* と aria-* は変わりますか?
- 変わりません。JSX は kebab のまま受け入れるため、コンバーターは触りません。改名されるのは標準の DOM 属性だけです。
- HTML コメントは変換されますか?
- はい。<!-- コメント --> は {/* コメント */} に変換され、パーサを壊さずに同じ意図を保てます。
- スクリプトやインラインハンドラはどうなりますか?
- onclick を onClick などへ改名しますが、関数本体は文字列のまま残ります。本番公開前に React のコールバックとして書き直すのが一般的です。
- 入力した HTML はどこかへ送信されますか?
- 送信されません。変換はこのブラウザタブ内で完結します。Toova は貼り付け内容を一切見ません — アナリティクスもログも何もありません。