HTML→JSX変換ツール

HTML→JSX変換ツール：無料、ブラウザー内で動作 | We.Inc

HTMLを貼り付けると正しいJSXが得られます。classはclassNameに、forはhtmlForに、style文字列はオブジェクトに変わり、空要素タグの閉じ、コメント、イベント、コンポーネントでの包み込みにも対応します。アップロードは一切ありません。

HTML→JSX変換ツール

左側にHTMLを貼り付けると、入力に合わせて右側にJSXが書き出されます。classはclassNameに、forはhtmlForになり、インラインスタイルはキャメルケースのオブジェクトに変わります。imgやinputのような空要素タグは自己終了タグになり、コメントは波かっこの中へ移され、最上位に複数の要素があればフラグメントで包まれます。変換はすべてブラウザー内だけで行われます。

HTMLとJSXで変わる点

HTML
JSX
理由

class="box"
className="box"
classはJavaScriptの予約語だから

for="email"
htmlFor="email"
forも予約語だから

style="font-weight: bold"
style={{ fontWeight: 'bold' }}
styleはキャメルケースのキーを持つオブジェクトを受け取る

<img src="a.png">
<img src="a.png" />
すべてのタグを閉じる必要がある

onclick="go()"
onClick={go}
イベントはキャメルケースで、関数を受け取る

data-id="7", aria-label="Close"
data-とaria-はハイフンをそのまま残す

テンプレートやメールビルダー、アイコンセットから持ってきたコード片をReactコンポーネントに貼り付けると、たいてい十数か所の細かな違いで壊れてしまいます。このツールはReactが公式に説明しているJSXのルールを適用し、変更した箇所を一つずつ説明し、結果をそのまま貼り付けられる名前付きコンポーネントで包むこともできます。

入力欄にHTMLを貼り付けるか入力します。JSXの出力はキーを押すたびに更新されます。
必要ならコンポーネント名を入力すると、出力がエクスポートされた関数コンポーネントで包まれます。
出力の下にある変更点の一覧を読みます。各メモが、変換ツールが行った書き換えを1つずつ説明しています。
JSXをコンポーネントファイルにコピーし、空のイベントハンドラーを実際の関数に置き換えます。

インラインのonclickのコードはJSXとしては実行できません。変換ツールはそれを空のハンドラーの中にコメントとして残すので、関数へ移してください。
valueを持つフォーム項目はdefaultValueになり、編集可能なまま保たれます。制御された入力にしたい場合は、valueとonChangeの組み合わせに切り替えましょう。
SVGアイコンにはよくstroke-widthやfill-ruleが付いています。これらは自動でstrokeWidthとfillRuleに名前が変わります。
styleオブジェクトの数値にはReactがpxを付けますが、この変換ツールは正確さを保つため、すべての値を元の文字列のまま残します。

よくある質問

Reactがclassではなく、classNameを使うのはなぜですか？

JSXはJavaScriptにコンパイルされ、JavaScriptではclassが予約語です。そのためReactではこのプロパティをclassNameと呼びます。同じ理由で、ラベルのfor属性はhtmlForになります。

data-やaria-の属性はJSXで変わりますか？

変わりません。Reactのドキュメントにあるとおり、歴史的な理由からaria-*とdata-*の属性はHTMLとまったく同じく、ハイフン付きで書きます。それ以外の複数語からなる属性の多くはキャメルケースになります。

JSXでインラインスタイルはどう書けばいいですか？

キャメルケースのプロパティ名を持つオブジェクトをstyleに渡します。例：style={{ fontWeight: 'bold', marginTop: 8 }}。ほとんどのプロパティでは、単なる数値にReactがpxを付けます。外側の波かっこはJavaScriptの式を開き、内側の波かっこがオブジェクトです。

ルート要素が複数あるというエラーが出るのはなぜですか？

コンポーネントが返せる要素は1つだけです。兄弟要素を親要素か、<>と</>で書く空のフラグメントで包みましょう。HTMLの最上位に複数のノードがある場合、変換ツールがこれを自動で行います。

HTMLはどこかに送信されますか？

いいえ。変換はこのページ内で動く素のJavaScriptで行われます。貼り付けた内容がアップロードされたり保存されたりすることはありません。

すべての変換を支える3つのルール

Reactの公式なJSX入門では、違いを3つのルールにまとめています。ルート要素を1つだけ返す、すべてのタグを閉じる、ほとんどの属性名をキャメルケースで書く、の3つです。変換ツールが行うことのほぼすべては、このどれかに当たります。
例外は予約語と、ハイフン付きの属性群です。classとforはJavaScriptが予約しているため名前が変わりますが、aria-とdata-の属性はHTMLの綴りのままです。

人の手が必要な部分

インラインスクリプトやイベントハンドラーの文字列はマークアップではなくコードなので、コンポーネント内の関数として書き直す必要があります。変換ツールは推測せず、そうした箇所を指摘します。
リスト項目のような繰り返しのブロックは、配列をJSXにマッピングする形にしたほうが良いことがよくあります。変換後は、コピー＆ペーストで並んだ兄弟要素を探し、データとmap呼び出しの組み合わせに置き換えましょう。

変換ツールが適用する属性名の変更

HTML属性からJSXのプロパティへ

HTML
JSX

className

htmlFor

tabIndex

readOnly

maxLength

colspan / rowspan
colSpan / rowSpan

autoComplete

srcSet

crossOrigin

input要素のvalue
defaultValue

input要素のchecked
defaultChecked

strokeWidth

fillRule

viewBox

onclickのようなインラインのイベントハンドラーは、キャメルケースの空のハンドラーに変換されました。コードは関数へ移してください。
フォーム項目のvalueはdefaultValueになったため、onChangeハンドラーがなくても編集できます。
同じ理由で、checkedはdefaultCheckedになりました。
option要素のselectedは削除されました。代わりにselect要素にdefaultValueを設定してください。
doctypeは削除されました。JSXにはdoctypeがありません。
入力に最上位の要素が複数あったため、フラグメントで包みました。

変換ツール

下のサンプルはリアルタイムで変換されています。自分のHTMLに置き換えてください。

コンポーネント名（任意）

JSXをコピー

変更点

標準的な名前の変更だけで済みました。

<{tag}>の中身は、波かっこが文字どおりに残るようテンプレートリテラルで包みました。

無料で始める · クレジットカード不要

製品

AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
ホワイトラベルプラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
エンタープライズ：SSO、個別の SLA、専任サポート
開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

制作会社・代理店向け：自社ブランドで再販
フリーランス向け：自分ブランドのビルダーを持つ
ホスティング事業者向け：サービスにビルダーを追加
SaaS プラットフォーム向け：API でサイト作成を組み込み
スタートアップ向け
金融サービス向け
医療・ヘルスケア向け

機能

リソース

会社情報

サイトマップを見る

HTML→JSX変換ツール