HTML→JSXコンバーター｜ReactにそのままペーストできるJSXへ変換

既存のHTMLをReactコンポーネントに移したいとき、classやforの属性名、インラインstyleの書き方がそのままでは通らずビルドエラーになります。このツールはHTMLを貼り付けるだけで、Reactが受け付けるJSXへ5項目を一括で書き換えます。

💡 このツールについて

LP制作で作ったマークアップやデザインツールから書き出したHTMLを、Reactプロジェクトへ取り込む場面は多くあります。ところがJSXはJavaScriptの式なので、classはclassName、forはhtmlForという予約語回避が必要で、onclickなどのイベント属性もキャメルケース（onClick）にしなければ動きません。さらにインラインのstyle="color: red"はオブジェクト記法style={{color: 'red'}}に変える必要があり、<img>や<br>といった空要素は<img />のように明示的に閉じないとパースエラーになります。

このツールは入力したHTMLに対して、(1) class/forなどの属性名変換、(2) onclick系イベントのキャメルケース化、(3) インラインstyle文字列のオブジェクト化、(4) 自己閉じタグの補完、(5) <!-- -->コメントの{/* */}記法化、の5項目を一度に処理します。変換結果はコピーしてそのままコンポーネントに貼り込めます。

🧐 よくある質問

Q. class以外にどの属性が変換されますか？ A. for→htmlFor、tabindex→tabIndex、maxlength→maxLength、colspan→colSpanなど、JSXで命名規則が変わる主要属性に対応しています。

Q. インラインstyleはどう変換されますか？ A. style="color: red; line-height: 1.5"がstyle={{color: 'red', lineHeight: 1.5}}のように、ハイフン区切りのプロパティ名をキャメルケースに変え、純粋な数値はそのまま、それ以外は文字列として展開します（14pxのように単位付きの値は'14px'と文字列になります）。

Q. SVGや<input>などの空要素も閉じられますか？ A. img・br・input・hr・metaなどHTML仕様の空要素を検出し、/>を補って閉じます。

Q. JSXのルート要素が複数あるとReactで怒られませんか？ A. このツールは構文変換のみを行います。複数要素を返す場合は<>...</>（フラグメント）で囲むなど、貼り付け後の調整は別途必要です。

Q. コメントはどう扱われますか？ A. <!-- メモ -->はJSXで有効な{/* メモ */}形式に置き換えます。

📚 HTMLとJSXの「似て非なる」関係

JSXはHTMLによく似た見た目を持ちますが、実体はJavaScriptの構文糖衣です。ブラウザはJSXを直接理解できず、ビルド時にトランスパイラがReact.createElementの呼び出しへ変換します。classが使えないのは、JavaScriptでclassがクラス定義の予約語だからで、forもfor文と衝突するため別名が割り当てられています。こうした差分は数が多く暗記しづらいため、機械的に置換できる部分を自動化しておくと、移行時の取りこぼしを減らせます。