AZ Tools

HTML → JSX コンバータ

開発

HTML を React コンポーネントに移植する退屈な作業を書き換える手作りコンバータ：属性名の変更（`class`、`for`、`tabindex` など）、インラインイベントハンドラの大文字化（`onclick → onClick`）、void タグの自己クローズ（`<br>` → `<br />`）、HTML コメントから JSX コメントへ、そして `style="color: red; font-size: 14px"` を `style={{ color: 'red', fontSize: '14px' }}` オブジェクトリテラルに変換するオプション。

—
JSX
<>
  <div className="container">
    <label htmlFor="email">Email</label>
    <input type="email" id="email" required />
    <button onClick="submit()" tabIndex="0" style={{ color: '#fff', backgroundColor: 'rebeccapurple', fontSize: '14px' }}>
      Send
    </button>
    {/* footer */}
    <p className="muted">By signing up you agree to our <a href="/terms">terms</a>.</p>
  </div>
</>

クォートされた文字列属性値は文字列のまま；代わりに JS 式が必要なら、コピー後 JSX で変更してください。

使い方

  1. HTML スニペットを貼り付け。
  2. React コンポーネントの単一ルートが欲しい場合は fragment ラップオプションをトグル。
  3. JSX をコンポーネントファイルにコピー。

よくある質問

どの属性がリネームされる？
React がリネームするすべて：`class` / `for` / `tabindex` / `readonly` / `maxlength` / `contenteditable` / `spellcheck` / `autocomplete` / `autofocus` / `enctype` / `crossorigin` / `srcset` / `rowspan` / `colspan` / `usemap` / `datetime`、加えてすべての `on…` イベントハンドラ。`aria-` と `data-` 属性は kebab-case のまま。
インラインスタイルに CSS 変数があったら？
`--` で始まるプロパティは文字列キーとしてクォートされ（`'--accent': 'blue'`）、JSX に残る。`-webkit-…` のようなベンダープレフィックス付きプロパティもクォートされる。
JavaScript を実行したりスクリプトを eval したりする？
しません。パーサーは小さな手書きスキャナ — `<script>` タグも他の要素と同様にテキストとして通過。変換は純粋に文字列レベル。

関連ツール

JWT デコーダー

JWT のヘッダー・クレーム・有効期限を即座に確認。

開発00

UUID ジェネレーター

ランダムなバージョン 4 UUID をまとめて生成し、コピー。

開発00

ハッシュ生成 (SHA)

テキストから SHA-1・SHA-256・SHA-384・SHA-512 ハッシュを生成。

開発00

URL エンコーダー / デコーダー

URL 用にテキストをパーセントエンコード、または URL をデコード。

開発00

Base64 エンコーダー / デコーダー

テキストを Base64 にエンコード、または Base64 をテキストにデコード。

開発00

JSON フォーマッター & バリデーター

ブラウザで JSON を整形・並べ替え・圧縮・検証できます。

開発00