ZeroTool Workbench
HTML → JSX コンバーター
ブラウザ上でHTMLをReact JSXに即座に変換。className、htmlFor、インラインスタイルオブジェクト、キャメルケースイベント、自己終了タグに対応。無料・登録不要。
使い方
- 左側のテキストエリアにHTMLを貼り付けます。
- 入力と同時に右側のテキストエリアにJSX出力が即座に表示されます。
- コピーをクリックしてJSX出力をクリップボードにコピーします。
変換ルール
| HTML | JSX |
|---|---|
class="..." | className="..." |
for="..." | htmlFor="..." |
style="color:red" | style={{ color: 'red' }} |
onclick="..." | onClick="..." |
onchange="..." | onChange="..." |
tabindex | tabIndex |
readonly | readOnly |
maxlength | maxLength |
colspan | colSpan |
rowspan | rowSpan |
crossorigin | crossOrigin |
contenteditable | contentEditable |
<br> | <br /> |
<img src="..."> | <img src="..." /> |
<input ...> | <input ... /> |
<!-- コメント --> | {/* コメント */} |
主な用途
- 静的HTMLテンプレートをReactコンポーネントに移行する
- デザインツール（Figma、Webflow）からエクスポートしたHTMLスニペットをJSXファイルに貼り付ける
- HTMLとJSXの属性名の違いを学習する
- HTMLメールテンプレートをReactメールライブラリ用に変換する
- サードパーティのHTMLウィジェットをReactプロジェクトに素早く適応させる
FAQ
HTML → JSX コンバーターは何をするツールですか？
標準のHTMLマークアップを有効なReact JSX構文に変換します。主な変換内容はclassをclassNameに、forをhtmlForに変更し、インラインスタイルをJavaScriptオブジェクトに変換し、イベントハンドラーをキャメルケースにし、ボイド要素に明示的な自己終了スラッシュを追加することです。
JSXでclassの代わりにclassNameを使う理由は？
JSXはJavaScriptにコンパイルされますが、classはJavaScriptの予約キーワードです。Reactは衝突を避けるためにclassNameを使用します。コンバーターがこのリネームを自動的に処理します。
インラインスタイルはどのように変換されますか？
HTMLのインラインスタイルは文字列を使います: style="color: red; font-size: 14px"。JSXではオブジェクトが必要です: style={{ color: 'red', fontSize: '14px' }}。コンバーターが文字列を解析し、プロパティ名をキャメルケースに変換します。
HTMLコメントはJSXでどうなりますか？
HTMLコメント（<!-- テキスト -->）はJSX式コメント（{/* テキスト */}）に変換されます。これはReactのJSXパーサーが受け付ける唯一のコメント形式です。
データはサーバーに送信されますか？
いいえ。変換はすべてブラウザ上のJavaScriptで実行されます。データは一切送信されません。