HTML→JSX 変換
無料オンラインの HTML→JSX 変換ツール。HTML を貼り付けるだけで className・htmlFor・キャメルケースの style オブジェクト・自己閉じタグ・安全なコメント化済みの React JSX が即座に生成されます。ブラウザ内で完結。
HTML→JSX 変換ツールは何をしますか？
通常の HTML マークアップを、React が描画できる JSX に変換します。入力欄に HTML を貼り付けると、対応する JSX が出力パネルに表示され、入力に合わせて短いデバウンスを挟んで更新されます。
どの属性が改名されますか？
class は className、for は htmlFor、tabindex は tabIndex になり、maxlength・colspan・stroke-width などハイフン付きの属性も React のキャメルケース名に変換されます。data-* と aria-* はそのまま保持されます。
style 属性はどう変換されますか？
style="background-color: red; font-size: 12px" のような CSS 文字列は JavaScript オブジェクト style={{backgroundColor:'red', fontSize:'12px'}} に変わります。CSS プロパティはすべてキャメルケースになり、値は文字列として引用符で囲まれます。
void 要素はどう処理されますか？
img・br・input・hr・meta・link など子要素を持てないタグは自己閉じ構文に正規化され、<img> は <img /> になります。これは JSX の必須ルールで、空の div や span も同様に閉じられます。
HTML コメントはどうなりますか？
JSX コメントに変換されます。<!-- note --> は {/* note */} になります。コメントを早期に終了させるような並びは無害化されるため、生成コードは常にコンパイルできます。
実体参照や特殊文字はどう扱われますか？
& や © などの実体はまず実際の文字にデコードされ、その後波括弧や山括弧が JSX に安全な形で再エスケープされます。{ } や < を含むテキストもコンポーネントを壊さず正しく描画されます。
関数コンポーネント オプションの役割は？
変換結果をそのまま使えるテンプレート function Component() { return ( ...JSX... ) } で包みます。素の JSX ではなく、React ファイルに直接貼り付ける場合にオンにしてください。
HTML はどこかにアップロードされますか？
いいえ。解析はブラウザ内蔵の DOMParser だけで完結し、サーバーには何も送信されません。非公開のマークアップも安全に変換でき、オフラインでも動作します。
HTML→JSX 変換の使い方
普通の HTML を、ブラウザーから出ずにすぐ使える React JSX へ変換します。解析はすべて内蔵の DOMParser でローカルに行われ、マークアップがアップロードされることはありません。
- 左のエディターに HTML を貼り付けます。右側に JSX の結果が表示され、入力に合わせて更新されます（300 ms のデバウンス）。
- 「インデント」でインデント幅を選びます。ネスト 1 段につき 2 または 4 スペース。
- 「関数コンポーネント」をオンにすると、出力が function Component() { return ( ... ) } で囲まれ、React ファイルにそのまま貼り付けられます。
- 「コピー」で結果を取得、「サンプル」で見本を読み込み、「クリア」でやり直します。
class・for・tabindex は className・htmlFor・tabIndex に変わり、style の文字列はキャメルケースのオブジェクトになり、img や br などの空要素は自己終了タグで出力されます。まさに JSX が期待する形です。
関連ツール
- HTML整形ツール HTMLコードを即座に整形・美化。圧縮されたHTMLをきれいで読みやすいコードに変換します。無料オンラインツール、登録不要。
- コードを画像に コードスニペットをシンタックスハイライト、カスタムテーマ、ウィンドウ装飾付きの美しい共有画像に変換。100%プライバシー、ブラウザ内で完全処理。
- ファイルハッシュ MD5、SHA-1、SHA-256、SHA-512ファイルハッシュをローカル計算・検証
- Chmod 計算機 無料オンラインchmod計算機でチェックボックス付きLinuxファイル権限を視覚化・計算。数値(755, 644)とシンボリック表記(rwxr-xr-x)を即座に変換。setuid、setgid、sticky bit等の特殊権限に対応。
- ASCIIコード表 10進数、16進数、8進数、2進数コード、HTMLエンティティ、文字説明を含む完全なASCII文字エンコーディングリファレンス。即座に検索・フィルタリング。
- Hexビューアー 検索、オフセットナビゲーション、仮想スクロール付きのHexダンプ形式でファイル内容を表示
- MIMEタイプ検索 ファイル拡張子からMIMEタイプを即座に検索、またはMIMEタイプから拡張子を逆引き。1000以上のエントリを収録した無料オンラインリファレンス。
- 画面解像度チェッカー 画面解像度、ビューポートサイズ、DPI、色深度をリアルタイムで検出します。