JSXフォーマッター
構文ハイライト付きでJSXをフォーマット・整形
入力
フォーマットされた出力
JSXフォーマッターとは？
JSXはReactコンポーネント用のXML風構文を持つJavaScriptです。JSXフォーマッターはJSX/Reactコードにインデントと改行を追加します。React JSXドキュメントが構文を定義しています。標準のJavaScriptフォーマッターはJSXを正しく処理しない場合があります。
このツールは完全にブラウザ内で動作します。サーバーには何も送信されません。JSXを貼り付けるか.jsxまたは.jsファイルをアップロードすると、フォーマットされた出力が得られます。プレーンJavaScriptにはJavaScriptフォーマッターを、検証にはJavaScriptバリデーターを、TypeScript変換にはJavaScriptからTypeScriptを使用してください。
このツールの使い方
貼り付けまたはアップロード
左パネルにJSXまたはReactコードを貼り付けるか、.jsxまたは.jsファイルをアップロードしてください。サンプルで例のコードを読み込めます。クリアでリセットできます。
出力を確認
右パネルに適切なインデント付きのフォーマットされたJSXが表示されます。無効なJSXはエラーを表示します。
コピーまたはダウンロード
結果を取得するにはコピーまたはダウンロードを使用してください。コードを実行するにはJavaScriptコンソールを、ミニファイにはJavaScriptミニファイアーを使用してください。
JSXフォーマッターの例
ミニファイされたJSX/Reactコードのフォーマット例です。
例：加入者カードコンポーネント
ミニファイされたJSX入力：
フォーマットされた出力：
JSXフォーマッターが役立つ場面
React、Next.js、その他のJSXベースフレームワークで作業する際、このフォーマッターはJavaScriptとXMLの混在を処理します。コンポーネント、フック、JSXテンプレートに最適です。webpackやViteなどのビルドツールはBabelでJSXを変換することが多いです。プレーンJSにはJavaScriptフォーマッターを使用してください。
よくある質問
データはプライベートですか？
はい。フォーマットは完全にブラウザ内で行われます。データはサーバーに送信されません。
JSXフォーマッターとJSフォーマッターの違いは？
JSXフォーマッターはJSX構文（タグ、props）を理解します。JSフォーマッターはプレーンJavaScript用です。ReactコードにはJSXフォーマッターを使用してください。
TypeScript/TSXはサポートしていますか？
一部のケースでTSXを処理できる場合があります。TypeScript向けのフォーマットは出力を確認してください。
Vueテンプレートはどうですか？
Vueは異なるテンプレート構文を使用します。このツールはJSX/React用です。