Softonic

HTML から JSX へのコンバーター

ステップ 1 / 2

変換内容: class を className に、for を htmlFor に、インラインスタイルを JSX オブジェクトに、空要素タグを自己終了形にし、HTMLコメントを削除します。

JSXに変換

JSX は HTML に似ていますが、実際は違います。class は className、for は htmlFor、style は文字列ではなくオブジェクト、そして空要素はすべて自己終了させる必要があります。HTML を貼り付けると、このコンバーターが最初の一回でコンパイルが通る JSX を生成するので、マーケティングページを React コンポーネントに移す際に、コンパイラーエラーを追いかける時間を省けます。

HTML を JSX に変換する方法

  1. 1

    HTML を貼り付けます

    コンポーネントひとつ分のマークアップでも、ページ全体のフラグメントでも構いません。

  2. 2

    変換する

    このツールは `class`、`for`、`readonly` などの属性を JSX の表記にリネームし、インラインスタイルをオブジェクトに変換します。

  3. 3

    JSX を確認します

    出力は `.jsx` または `.tsx` ファイルにそのまま貼り付けられる状態です。

  4. 4

    コピーして貼り付ける

    コードは単一行の式で構成されるため、既存のコンポーネントの内部にすっきり収まります。

押さえておきたい HTML と JSX の違い

JSX は HTML ではありません。React.createElement() の呼び出しにコンパイルされる JavaScript の式なので、属性名は JavaScript の規約に従います。

コンバーターは最もよくあるリネームを自動で行います。以下に挙げる完全な一覧は、JSX を手書きするときに必要なリファレンスです。

属性のリネーム

HTML JSX 備考
class className class は JS で予約語
for htmlFor for は予約語
tabindex tabIndex キャメルケース
readonly readOnly キャメルケース
contenteditable contentEditable キャメルケース
stroke-width (SVG) strokeWidth キャメルケース
xlink:href xlinkHref コロン付き名前空間は平坦化
aria-label aria-label ARIA はハイフンのまま
data-* data-* data 属性はハイフンのまま

style 属性

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

単位のない数値はピクセルになります。パーセントや flex のような単位のない値は文字列のままにします。

自己終了する空要素

HTML では <br> や <input> を閉じタグなしで書けます。JSX では <br /> や <input /> のように、すべての要素を明示的に閉じる必要があります。

コメント

HTML コメント（<!-- -->）は JSX の本文では使えません。このコンバーターはコメントを削除します。メモを残したい場合は、{/* JavaScript ブロックコメント */} として自分で書いてください。

ブール属性

HTML: <input checked>（または <input checked="checked">）

JSX: <input checked={true} /> または単に <input checked />。「true」という文字列を渡さないでください。

逃げ道

  • 信頼できない HTML の断片は dangerouslySetInnerHTML={{ __html: ... }} で描画できます。意図的に見苦しくして使用を思いとどまらせています。
  • 独自の data-* 属性はそのまま残ります。標準外の属性もそのまま渡されますが、開発モードでは React の警告が出ることがあります。

よくある質問

stroke-width のような SVG 属性は JSX ではキャメルケース（strokeWidth）で書く必要があり、すべてのタグを自己終了させなければなりません。コンバーターは SVG 内の void タグを自己終了させ、スタイル文字列内のプロパティ名をキャメルケースに変換しますが、SVG 属性のリネームは行いません。stroke-width は strokeWidth に手動で変更してください。単発のアイコンなら、SVG ファイルとして保存し、svgr でコンポーネントとしてインポートするのが最もきれいな方法です。

はい。JSX でも TSX でも className を使います。唯一の例外は dangerouslySetInnerHTML の中です。そこでは生の HTML 文字列がそのまま DOM に挿入されるため、class のままになります。

いいえ。出力されるのは JSX フラグメントだけで、export default function のラッパーも型注釈もありません。.jsx または .tsx ファイルに貼り付けて、props・型・ラッパーは自分で追加してください。class は className に変換されるので、TSX が期待する通りの出力になります。

そのまま変更されずに渡されます。コンバーターはイベントハンドラーのリネームを行わないので、onclick を onClick に変更し、文字列の値を実際の関数に置き換えてください。例：onClick={() => doThing()}。doThing 関数はコンポーネントのスコープで定義する必要があります。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

メールアドレス検証ツール

メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。

Markdownチートシート

見出し、リスト、表、コード、リンク、画像、GFM構文を、実際のプレビューとコピーできる例で確認できる実用的なMarkdownリファレンスです。

このツールは他の言語でも利用できます