text / convert

HTML ↔ JSX 変換

HTMLをJSXに変換、またはJSXをHTMLに変換します。class→className、イベントハンドラ、style属性のオブジェクト変換に対応。入力データはサーバーに送信されません。

// 変換ボタンを押すと結果がここに表示されます

使い方

01
  1. 変換方向を「HTML → JSX」または「JSX → HTML」から選択します
  2. 左側のテキストエリアにHTMLまたはJSXをペーストしてください
  3. 「変換」ボタンをクリックすると右側に変換結果が表示されます
  4. 「コピー」ボタンで変換結果をクリップボードにコピーできます
  5. 「クリア」ボタンで入力・出力をリセットできます

実装コード

02

コアロジックは正規表現と属性マッピングテーブルのみで実装しています。外部ライブラリは不要なので、そのままコピーしてご利用いただけます。

export type ConvertResult =
  | { ok: true; output: string }
  | { ok: false; error: string }

const ATTR_MAP: Record<string, string> = {
  class: 'className',
  for: 'htmlFor',
  tabindex: 'tabIndex',
  readonly: 'readOnly',
  // ... 他の属性マッピング
}

function convertAttrName(name: string): string {
  const lower = name.toLowerCase()
  if (ATTR_MAP[lower]) return ATTR_MAP[lower]
  // onclick → onClick
  if (/^on[a-z]/.test(lower))
    return 'on' + name[2].toUpperCase() + name.slice(3)
  return name
}

export function htmlToJsx(html: string): ConvertResult {
  if (!html.trim()) return { ok: false, error: '入力が空です' }
  let out = html.replace(
    /<([a-zA-Z][a-zA-Z0-9-]*)((?:\s+[^>]*?)?)(\/?)>/g,
    (_m, tag, attrs, slash) => {
      const jsxAttrs = convertAttrs(attrs)
      const isVoid = VOID_ELEMENTS.has(tag.toLowerCase())
      const close = isVoid || slash ? ' />' : '>'
      return `<${tag}${jsxAttrs}${close}`
    },
  )
  return { ok: true, output: out }
}

export function jsxToHtml(jsx: string): ConvertResult {
  if (!jsx.trim()) return { ok: false, error: '入力が空です' }
  const reverseMap = Object.fromEntries(
    Object.entries(ATTR_MAP).map(([html, jsx]) => [jsx, html]),
  )
  // self-closing void → bare open tag
  VOID_ELEMENTS.forEach(el => {
    out = out.replace(
      new RegExp(`<(${el})(\\s[^/]*?)\\s*/>`, 'gi'),
      (_m, t, a) => `<${t}${a}>`
    )
  })
  return { ok: true, output: out }
}

よくある使用例・注意点

03
既存HTMLテンプレートをReactコンポーネントに移植
デザイナーから受け取ったHTMLをReactコンポーネントに変換する際に活用できます。class、for、onclick などの属性を一括でJSX形式に変換します。
style属性の変換
HTML の style="color: red; font-size: 14px" は、JSX では style={{ color: "red", fontSize: "14px" }} のようにオブジェクト形式になります。プロパティ名はキャメルケースに変換されます。
void要素の自己終了タグ
JSXでは <br>、<input>、<img> などのvoid要素は <br />、<input />、<img /> のように自己終了タグ（/> で閉じる）にする必要があります。このツールは自動で変換します。
注意：複雑なJSX式は変換対象外
このツールは属性名の変換とvoid要素の処理を行いますが、JSX式（{}内の動的な値）やコンポーネント構文の変換は行いません。テキストベースの変換のため、DOMパーサーを使わずに処理します。

関連ツール

04
キャメルケース変換HTMLエスケープJSONフォーマッター

ソースコード

05

このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。

GitHub でコードを見る →