HTML → JSX コンバーター

ブラウザ上でHTMLをReact JSXに即座に変換。className、htmlFor、インラインスタイルオブジェクト、キャメルケースイベント、自己終了タグに対応。無料・登録不要。

ブラウザ内で処理
データはブラウザ外に出ません
無料 · 登録不要

HTML 入力 HTML を貼り付けます。入力が止まってから 200 ミリ秒後に変換します。ツール内で Ctrl/⌘+L を押すと両欄と状態を消去します。

JSX 出力出力はコンポーネントの外枠を含まない JSX マークアップです。保持できないスタイルがあると変換を止め、出力を消去してコピーを無効にします。位置と理由はステータス欄に表示します。

例・詳しい説明・よくある質問実際の出力つきの例、ほかのツールとの違い、よくある質問。

変換ルール

HTML	JSX
`class="..."`	`className="..."`
`for="..."`	`htmlFor="..."`
`style="color:red"`	`style={{ "color": "red" }}`
`onclick="save()"`	`onClick={(event) => { save() }}`
`ondblclick="..."` / `onmouseover="..."`	`onDoubleClick={...}` / `onMouseOver={...}`
`tabindex`	`tabIndex`
`readonly`	`readOnly`
`maxlength`	`maxLength`
`colspan`	`colSpan`
`rowspan`	`rowSpan`
`crossorigin`	`crossOrigin`
`contenteditable`	`contentEditable`
`<br>`	`<br />`
`<img src="...">`	`<img src="..." />`
`<input ...>`	`<input ... />`
`<!-- コメント -->`	`{/* コメント */}`
テキストの `{name}`、`a < b`	`{name}`、`a < b`

主な用途

静的HTMLテンプレートをReactコンポーネントに移行する
デザインツール（Figma、Webflow）からエクスポートしたHTMLスニペットをJSXファイルに貼り付ける
HTMLとJSXの属性名の違いを学習する
HTMLメールテンプレートをReactメールライブラリ用に変換する
サードパーティのHTMLウィジェットをReactプロジェクトに素早く適応させる

変換例

入力：

<label for="email" class="lbl">Email</label>
<input id="email" type="email" required>
<div style="background-image: url('a.png'); font-size:14px">x</div>
<!-- footer -->

出力：

<label htmlFor="email" className="lbl">Email</label>
<input id="email" type="email" required />
<div style={{ "backgroundImage": "url('a.png')", "fontSize": "14px" }}>x</div>
{/* footer */}

data-* と aria-* 属性はハイフンのまま残ります。React ではこれが正しい書き方です。数値の属性は colSpan="2" のように文字列のままですが、React はそのまま受け付けます。

手で直す必要があるところ

変換結果	React での問題	修正
`onClick={(event) => { save(); return false; }}`	コードはアロー関数の中で動く。`this` は要素ではなく、`return false` でも既定の動作は止まらない	`event.currentTarget`、`event.preventDefault()` を使うか、関数を渡す：`onClick={save}`
`<input type="checkbox" checked>`	`onChange` のない `checked` は読み取り専用になる	`defaultChecked`
`<option selected>`	React では選択状態を `<select>` 側で指定する	`<select defaultValue="...">`
`<textarea>hi</textarea>`	`<textarea>` は子要素を受け付けない	`<textarea defaultValue="hi" />`
`style="color:red !important"`（出力なし）	変換されない：React のスタイルオブジェクトは `!important` を保持できないため、出力は消去される	ルールを CSS のクラスに移すか、`!important` を外す
トップレベルの要素が 2 つ以上	コンポーネントが返せる要素は 1 つ	`<>...</>` で囲む
`<path stroke-width="2">`	SVG の属性は変換されない	SVG → JSX を使う

制限事項

属性値はそのまま残ります。 変わるのは属性名だけなので、href="/search?for=1&class=2" は書き換わりません。htmltojsx も同じ扱いです。値が変わるのは 2 つだけです。style はオブジェクトになり、イベントハンドラーのコードは (event) => { ... } に入ります。React には文字列ではなく関数が必要だからです。そのコード中の " などの実体参照はデコードします。DOM イベントではない on* 属性（カスタム要素の onfoo など）はそのまま残ります。
テキストの文字は変わりません。 タグの間のテキストにある {、}、<、> は {、}、<、> と書き、JSX が同じ文字に戻します。そのため <p>{name}</p> は変数を読まず、{name} という文字を表示します。それ以外のテキストはそのまま残り、文書全体を貼ると <!DOCTYPE>、<html>、<head>、<body> も残ります。コンポーネントに入れる部分だけを貼り付けてください。
保持できないスタイルは変換しません。 !important、同じプロパティの重複（color:red;color:blue のような CSS のフォールバック）、CSS コメント、エスケープを含むプロパティ名、閉じていない引用符や括弧があると変換を止め、出力を消去してコピーを無効にします。ステータス欄にはスタイル内の文字位置が出ます（例：「スタイルの 11 文字目を変換できません：React のスタイルオブジェクトでは !important を保持できません」）。url(data:…;base64,…) や --accent のようなカスタムプロパティを含むその他の値は、JSON 文字列として 1 文字も変えずに写します。
コンポーネントの外枠は作りません。 出力はマークアップだけなので、コンポーネントの return (...) の中に入れて使います。

FAQ

HTML → JSX コンバーターは何をするツールですか？

標準のHTMLマークアップを有効なReact JSX構文に変換します。主な変換内容はclassをclassNameに、forをhtmlForに変更し、インラインスタイルをJavaScriptオブジェクトに変換し、イベント属性を React のキャメルケース名にしてコードを関数で包み、ボイド要素に明示的な自己終了スラッシュを追加することです。

JSXでclassの代わりにclassNameを使う理由は？

JSXはJavaScriptにコンパイルされますが、classはJavaScriptの予約キーワードです。Reactは衝突を避けるためにclassNameを使用します。コンバーターがこのリネームを自動的に処理します。

インラインスタイルはどのように変換されますか？

HTMLのインラインスタイルは文字列を使います: style="color: red; font-size: 14px"。JSXではオブジェクトが必要なので、style={{ "color": "red", "fontSize": "14px" }} と出力します。宣言はトップレベルのセミコロンでだけ区切るため、引用符や url(data:…) の中のセミコロンは値に残ります。--accent のようなカスタムプロパティは名前のまま残し、値は 1 文字も変えません。React のスタイルオブジェクトで保持できない書き方（!important、同じプロパティの重複、CSS コメント、閉じていない引用符や括弧）は変換せず、出力を消去してコピーを無効にし、ステータス欄に文字位置を表示します。

HTMLコメントはJSXでどうなりますか？

HTMLコメント（）はJSX式コメント（{/* テキスト */}）に変換されます。これはReactのJSXパーサーが受け付ける唯一のコメント形式です。

データはサーバーに送信されますか？

いいえ。変換はすべてブラウザ上のJavaScriptで実行されます。データは一切送信されません。