変換ツール

HTML JSX 変換｜React の属性・タグに書き換え

HTML のマークアップを React の JSX に変換します。class を className、for を htmlFor にするなど、既存の HTML を React に移すときの書き換えを補助します。変換はブラウザ内で行います。

静的な HTML の見出しやフォームを React コンポーネントへ移す。

HTML

JSX

こんなときに使えます

  • 静的な HTML の見出しやフォームを React コンポーネントへ移す。
  • JSX の属性名やタグの書き方を、小さい HTML 例で確認する。

使い方

  1. HTML の要素を左側に入力します。
  2. 必要なら設定の Create function component を有効にして関数の形で出力します。
  3. 右側の JSX をコピーし、React プロジェクトでイベントや状態を追加します。

入力例

<label class="field" for="email">メール</label>

出力例

<label className="field" htmlFor="email">
  メール
</label>

仕様と注意点

HTML の構造を JSX として表現するツールです。元ページの CSS、外部 JavaScript、アセットをまとめて移植するものではありません。

クリック処理や DOM 操作を React の状態管理へ自動設計し直すことはできません。イベントハンドラーは変換後に確認してください。

関数形式を選ぶと Foo という名前のコンポーネントになります。用途に合う名前や props に変更し、実際に使う React 環境で検証してください。

入力内容は同じタブ内に一時保存され、再読み込みや同じ入力形式のツールで再表示される場合があります。共用端末では、使い終わったら入力欄をクリアしてください。

よくある質問

class や for の名前が変わるのはなぜですか？

JSX では React のプロパティ名を使うため、class は className、ラベルの for は htmlFor になります。CSS のクラス値や参照する要素 ID はそのまま使えます。

変換したのに見た目が同じになりません。

JSX だけでは元ページのスタイルは含まれません。CSS の読み込み、画像のパス、親要素のレイアウトを確認してください。マークアップの変換と、画面全体の移植は別の作業です。

SVG アイコンにも使えますか？

SVG を React コンポーネントとして扱う場合は関連ツールの SVG → JSX も使えます。そちらはサーバーで変換するため、入力データの扱いも確認してください。

仕様を確認する