ヘルプ

JSX to JS：ReactのJSXをプレーンなJavaScriptにコンパイル

JSX to JSとは、Reactコンポーネントのタグ構文を、ブラウザが実行できるプレーンなJavaScriptに書き換えることです。このツールはBabelを使うため、出力はBabelのビルド工程と同じになります。クラシックのReact.createElement呼び出しと、自動のjsx()ランタイムのどちらかを選んで、結果をコピーできます。コードはブラウザ内でコンパイルされ、アップロードも実行もされません。

JSXコンパイルの手順

JSX JS変換に、インストールもアカウント登録も必要ありません。

  1. JSXコードの欄にコードを貼り付けてください。空のあいだは「ここにJSXを貼り付け…」と表示されています。上限は1,000,000文字です。
  2. 少し待ちます。入力や貼り付けのあと、最後の変更からおよそ3分の1秒で自動的にコンパイルされるため、押すボタンはありません。初回はBabelを1回だけダウンロードするので、少し時間がかかります。
  3. 結果は見出しJavaScriptの下に表示されます。読み取り専用のハイライト付きコードです。
  4. クリップボードにコピーを押してください。ボタンの表示がコピー完了に変わります。
  5. JSXのコンパイル方法を変えるには、横にある歯車ボタン（JSXランタイムの設定）を使います。JSXランタイムのグループが開き、クラシックと自動の2つから選べます。変更すると、コードがもう一度コンパイルされます。

JSXとして正しくないテキストの場合は、行と列を示す構文エラーのメッセージが、問題の行と該当箇所を指す^とともに表示され、エラーを直すまで出力は表示されません。コードにJSXがまったく含まれていないときは、プレーンなJavaScriptのまま表示され、「このコードにJSXは見つからなかったため、プレーンなJavaScriptのまま返しました。」と案内されます。

クラシックと自動：ランタイムの違いと選び方

クラシックは初期設定です。各要素がReact.createElement(type, props, ...children)の呼び出しになり、フラグメントはReact.Fragmentになります。importは追加されないため、Reactがスコープ内にある必要があります。プロジェクトやチュートリアルが各ファイルでReactをimportしている場合や、古い構成を想定する場合に向いています。

自動では、JSXがjsx()やjsxs()の呼び出しになり、子要素はpropsの中に入り、フラグメントは_Fragmentになります。react/jsx-runtimeからのimportも追加され、コードが使う名前だけが含まれます。React 17以降が必要で、現在のReactのツールチェーンが出力するものと同じ結果になります。

出力で変わるものと変わらないもの

できないこと：TSX、TypeScript、Flow

コンパイルできるのはJSXだけです。TypeScriptは読み込めないため、型注釈のあるTSXは構文エラーになり、Flowにも対応していません。コードを実行したり、コンポーネントが動くか確認したり、ファイルをまとめたりすることもしません。

逆方向、つまり通常のJavaScriptから型付きコードにしたいときは、JS→TS変換ツールを使ってください。圧縮や難読化されたスクリプトを読みたいときは、JS難読化解除ツールが使えます。

ブラウザ内で動作する理由

Babelは最初に貼り付けたときに1回だけ読み込まれ、その後のコンパイルはお使いの端末のWeb Workerで行われます。コンポーネントはどこにも送信されず、実行もされないため、副作用のあるファイルを貼り付けても安全です。

よくある質問

JSX to JSの変換をオンラインで行うには？

「JSXコード」の欄にJSXを貼り付けてください。約3分の1秒後に、コンパイルされたJavaScriptが「JavaScript」の見出しの下に表示されます。変換ボタンはなく、「クリップボードにコピー」で結果を取り出せます。Babelは最初に貼り付けたときに1回ダウンロードされるため、最初の変換だけ少し時間がかかります。

BabelはJSXをJavaScriptに変換できますか？

はい。BabelのReactプリセットがJSXをJavaScriptにコンパイルします。このページがブラウザ内で実行しているのもそれなので、出力はBabelのビルド工程と一致します。ビルドツールもプロジェクトのビルド時に同じ処理を自動で行います。1つのコンポーネントやスニペットの結果を確認したりコピーしたりしたいときに、このページを使ってください。

JSXとJSの違いは何ですか？

JSXは、UIを記述するためにXMLに似た構文を加えたJavaScriptです。たとえば、onClickハンドラー付きのbuttonタグのように書きます。ブラウザは直接実行できないため、コンパイラが各タグを通常の関数呼び出しに書き換えます。結果は普通のJavaScriptです。.jsxという拡張子は、JSXを含むファイルであることを示す命名上の慣習にすぎません。

クラシックと自動のランタイムの違いは何ですか？

クラシックはJSXをReact.createElementの呼び出しに変えるため、JSXを使うファイルではReactがスコープ内にある必要があります。自動はJSXをjsx()とjsxs()の呼び出しに変え、react/jsx-runtimeからのimportも追加してくれるので、JSXを書くためだけにReactをimportする必要がありません。自動にはReact 17以降が必要です。このツールの初期設定は「クラシック」です。

JSXをReact.createElementに変換するには？

JSXランタイムを初期設定の「クラシック」のままにしてください。各要素がReact.createElementの呼び出しになり、タグ名、propsオブジェクト（なければnull）、子要素の順に並びます。フラグメントはReact.Fragmentになります。

出力がReactを使っているのにimportされないのはなぜですか？

クラシックの出力はReact.createElementとReact.Fragmentを呼び出しますが、Reactがすでにスコープ内にあると想定しているため、importは追加しません。ファイルの先頭にimport React from 'react'がない場合は、その行を追加するか、必要なimportを書き出す「自動」にJSXランタイムを切り替えてください。

出力に/*#__PURE__*/というコメントが付くのはなぜですか？

Babelは各要素の呼び出しの前に/*#__PURE__*/を付けます。これは、その呼び出しに副作用がないことをminifierやバンドラーに伝えるもので、使われない要素を最終的なバンドルから取り除けるようになります。コメントは残しても削除しても構いません。コードの動作は変わりません。

TSXやTypeScriptも変換できますか？

いいえ。このツールが扱うのは通常のJavaScript内のJSXなので、props: Propsのような型注釈は構文エラーになります。先に型を取り除くか、TypeScriptのコンパイラでコンパイルしてください。Flowの構文にも対応していません。

コードはアップロードされますか、実行されますか？

いいえ。Babelがブラウザ内のWeb Workerでコードをコンパイルし、サーバーには何も送信されません。コードが実行されることもないため、副作用のあるコンポーネントを貼り付けても安全です。ダウンロードされるのはBabel本体だけで、それも1回のみです。

おすすめ

無料でツールを続ける支えになります。✨

画像はイメージです。 Amazonのアソシエイトとして、Capsule Toolsは適格販売により収入を得ています。

関連ツール

CSS自動ベンダープレフィックス付与

CSSを貼り付けてベンダープレフィックスを自動付与。無料。

JS難読化解除ツール

難読化されたJavaScriptを読みやすく整える

JS→TS変換ツール

JavaScriptをTypeScriptに変換、PropTypesをインターフェースに

JavaScriptオブジェクトをJSONに変換

JSオブジェクトを厳密なJSONに変換

JSONをPOJOに変換

JSONからJavaクラスやrecordを生成。Jackson/Gson対応