JSXフォーマッター

0 文字

GeekFormat JSXフォーマッターツールは、Prettier v3 Standaloneエンジンに基づいてReact JSX/TSXコンポーネントコードをプロフェッショナルに整形します。12種類のフォーマット設定（インデントサイズ、セミコロン、クォートスタイル、末尾カンマ、ブラケット間隔、アロー関数の括弧、印刷幅、JSXシングルクォート、JSXブラケット同一行、プロパティクォート戦略など）をサポートし、Terser圧縮エンジンを内蔵、JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSONの7言語切り替えを提供します。CodeMirror 6シンタックスハイライトエディター、左右分割パネルでリアルタイム比較、ファイルアップロード/ダウンロード、履歴記録、URL共有、ワンクリックコピーをサポート。純ブラウザサイド処理で、コードはサーバーにアップロードされません。

関連おすすめ

JSX 圧縮

TSXフォーマッター

JavaScript フォーマッター

CSSフォーマッター

JSON フォーマッター

JSXフォーマットについて

JSXはJavaScript XMLの略で、Reactフレームワークによって導入されたJavaScriptの構文拡張です。JavaScriptコード内に直接HTMLのようなタグ構造を記述できるようにします。JSXはコンパイル時にBabelやTypeScriptなどのツールによって通常のReact.createElement()関数呼び出しに変換されます。JSXにより、開発者はHTMLを書くようにUI構造を記述しながらJavaScriptの完全な表現力を得られるため、コンポーネントコードの構造がより直感的になります。しかし、JSXコードに標準化されたフォーマットがない場合 — タグのネストレベルが乱雑、属性の配置が無秩序、インデントが不統一 — 可読性と保守効率に深刻な影響を与えます。これがJSXフォーマットツールの価値でもあります。

Prettierは現在JavaScript/JSXエコシステムで最も主流のコードフォーマットツールであり、James Longによって2017年に作成され、現在では事実上の標準となっています。Prettierの核となるコンセプトは「独断的なフォーマッター」（opinionated formatter）です — 少数の設定可能項目しか提供せず、残りのルールは内蔵されていて変更できません。このアプローチの利点は、チーム間のコードスタイルに関する終わりのない議論を排除することです。PrettierはJSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdownなどの複数の言語とフォーマットをサポートし、React、Vue、Angularなどの主流フレームワークコミュニティで広く採用されています。ほとんどのモダンなフロントエンドプロジェクトでは、コードスタイルの一貫性を確保するためにCI/CDパイプラインにPrettierを統合しています。

JSXフォーマットのコアルールには以下が含まれます：第一に、インデントレベル — ネストされた各JSXタグと式はインデントを1レベル増やし、DOMツリー構造を反映させる；第二に、属性の配置 — タグに複数の属性があり行幅を超える場合、各属性は1行ずつ占有して整列させる；第三に、ブラケット処理 — 複数行のJSX式は通常、自動セミコロン挿入（ASI）の問題を防ぐために丸括弧で包む；第四に、自己閉じタグ — 子要素のないコンポーネントは<Component />形式を使用する；第五に、文字列クォート — JSX属性はデフォルトでダブルクォート（HTMLと一致）、JavaScript文字列はデフォルトでシングルクォート；第六に、空白処理 — タグ内の中括弧{}の両側にスペースを入れるかどうかは設定可能。

JSX圧縮（minification）はフォーマットの逆の操作であり、JSXを実行可能な最小サイズのコードに変換することを目的としています。本番環境へのデプロイ時にネットワーク転送量を減らし、読み込み速度を向上させるために使用されます。JSX圧縮には通常以下のステップが含まれます：まずBabelを使用してJSXをReact.createElement呼び出し（つまり通常のJavaScript）にコンパイルし、次に圧縮ツール（Terser、UglifyJSなど）を使用して：コメントと空白文字の除去、変数名と関数名の短縮（mangling）、デッドコードの除去（dead code elimination）、式と条件文の単純化、宣言のマージ、関数のインライン化などを行います。モダンなビルドツール（Webpack、Vite、Rollup）はproductionモードで自動的にコード圧縮を実行します。

コードフォーマットはなぜ重要ですか？チームでのコラボレーションにおいて、統一されたコードスタイルは可読性とレビュー効率を大幅に向上させることができます。すべての開発者が自分の好みに合わせてコードをフォーマットすると、Git diffには大量の無意味なフォーマット変更が溢れ、レビュアーが本当のロジックの変更を見つけるのが難しくなります。研究によると、開発者がコードを読む時間はコードを書く時間よりはるかに長く、一貫したフォーマットスタイルは読解の認知的負荷を大幅に軽減できます。Google、Meta、Airbnbなどの大企業はすべて厳格なコードスタイル規範と自動化されたフォーマットツールチェーンを持っており、これもソフトウェアエンジニアリングの成熟度の現れです。

Prettierとリンター（ESLint、TSLintなど）の役割分担は、モダンなフロントエンドエンジニアリングのベストプラクティスです：Prettierはフォーマット（formatting）を専門とし — 改行、インデント、スペース、セミコロン、クォート、カンマなどの純粋なスタイルの問題；ESLintはコード品質（code quality）を専門とし — 未使用変数、潜在的なバグ、セキュリティ問題、ベストプラクティスなどの論理的な問題。両方を併用する場合は、競合を避けるためにeslint-config-prettierを介してESLintの重複するフォーマットルールをオフにする必要があります。多くのチームはさらにpre-commitフック（husky + lint-staged経由）を設定し、コード送信前に自動的にPrettierとESLintを実行して、コミットされるコードが規範に適合していることを確認しています。

JSXフォーマットツールを選ぶ際に考慮すべきいくつかの要因：第一に、エンジンの選択 — Prettierをエンジンとして優先的に選ぶ。これはコミュニティ標準であり、結果が予測可能でIDEプラグインと一致するため；第二に、設定可能性 — チームのニーズに応じて調整可能なパラメータの数を選ぶ。オプションが多すぎるとかえって意思決定コストが増える；第三に、セキュリティ — ツールがコードをローカルで処理し、サーバーにアップロードせず、ソースコード漏洩のリスクを回避することを確認する；第四に、追加機能 — 圧縮、シンタックスハイライト、履歴記録、共有などの機能は使用効率を向上させることができる；第五に、多言語サポート — JS/TS/JSX/TSX/CSS/HTML/JSONなどの複数の言語を1つのツールでカバーすると、ツール切り替えのコストを削減できる。

オンラインコードフォーマットツールを使用する際のセキュリティ上の注意点：第一に、純ブラウザサイド処理のツールを優先的に選ぶ — このようなツールはサーバーを必要とせず、コードはローカルでのみ実行され、セキュリティが最も高い；第二に、機密情報を含むコードを貼り付けない — データベースパスワード、APIキー、内部ビジネスロジック、専有アルゴリズムなど。ツールがアップロードしないと主張していても、セキュリティ意識を持つべき；第三に、ツールがHTTPSを使用しているか確認する — 転送中の盗聴を防ぐ（ローカル処理のツールは転送の必要はないが、ページ自体も安全に読み込む必要がある）；第四に、重要なコードにはローカルツールを使用する — コアビジネスコードについては、オンラインサービスに依存せず、ローカルにインストールしたPrettier CLIまたはIDEプラグインを使用することをお勧めする；第五に、ツールの信頼性を定期的にレビューする — オープンソースかどうか、コミュニティの評価はどうか、プライバシーポリシーがあるかどうかなどを確認する。

ユースケース

  • ネットからコピーしたReactコンポーネントコードのフォーマットが乱れている場合、迅速にフォーマットして読みやすく学習しやすくする
  • 既存プロジェクトを引き継ぐ際にJSXコンポーネントファイルを整理し、コードスタイルを統一してから二次開発を行う
  • コードレビューの前にフォーマットし、フォーマットの違いによる無意味なdiffを排除してロジックのレビューに集中する
  • 圧縮されたJSX本番コードを整形し直し、本番環境の問題をトラブルシューティングする際に難読化されたコードを読む
  • 技術ブログやドキュメントを作成する前にJSXサンプルコードを整形し、コンテンツの専門性を高める
  • 異なるフォーマット設定の効果を比較し、チームのPrettier構成選択の参考にする
  • 教育プレゼンテーションでJSXコードが乱雑な状態から標準化された状態になるフォーマットプロセスを示す
  • Reactコードスニペットをオンラインでデバッグする際、まずフォーマットしてから構造を分析しバグを特定する
  • JSXコードを生成するコンポーネントライブラリのドキュメントで、サンプルコードのスタイルを統一して美しくする
  • 面接前に自分のReactプロジェクトコードを整理し、提出するコードサンプルのスタイルが規範に従っていることを確認する
  • AIが生成したJSXコードをフォーマットしてからプロジェクトに追加し、AI出力のフォーマットの不統一を解消する
  • React NativeやNext.jsプロジェクトを開発する際、オンラインでコンポーネントコードスニペットを迅速にフォーマットする

使い方

  1. 左側のエディターにJSX/TSXコードを貼り付けるか、アップロードボタンをクリックして.jsx/.tsxファイルをインポートするか、サンプルから直接読み込みます
  2. 設定ボタンをクリックしてフォーマットパラメータを調整します：インデントサイズ、セミコロン、クォート、末尾カンマ、印刷幅、JSXオプションなど。またはデフォルト設定のままにします
  3. 整形ボタンをクリックする（またはショートカットキーを押す）とフォーマットが実行され、右側のパネルにフォーマット結果が即座に表示されます。左右にドラッグしてパネル幅を調整できます
  4. 圧縮が必要な場合は、圧縮ボタンをクリックして圧縮モードに切り替えます。Terserエンジンが最小化されたJSXコードを出力します
  5. コピーボタンをクリックして結果をクリップボードにコピーするか、ダウンロードをクリックしてファイルとして保存するか、共有リンクで他の人に送信します

特徴

  • Prettier v3エンジン：業界で最も人気のあるPrettier v3 Standaloneをフォーマットエンジンとして使用し、Babelパーサーと組み合わせることで、VS CodeのPrettier拡張機能と同じフォーマット結果を実現し、チームのコードスタイルを統一
  • 12種類のフォーマット設定：インデントサイズ（2/4/8スペースまたはTab）、セミコロン、シングル/ダブルクォート、末尾カンマ（none/es5/all）、ブラケット間隔、アロー関数の括弧、印刷幅、JSXシングルクォート、JSXブラケット同一行、プロパティクォート戦略など12のパラメータを調整可能
  • JSXシンタックスハイライトエディター：CodeMirror 6ベースのプロフェッショナルなコードエディター。JSX/TSXのシンタックスハイライト、行番号、ブラケットマッチングをサポートし、左側の入力と右側の結果をリアルタイムで比較
  • JSX圧縮機能：Terser圧縮エンジンを内蔵。ワンクリックでJSXコンポーネントコードを最小サイズに圧縮。変数名の難読化（mangle）、デッドコード除去、console/debuggerのクリーンアップなどの高度な圧縮オプションをサポート
  • 7言語を自由に切り替え：JavaScript、TypeScript、JSX、TSX、CSS、HTML、JSONの7つのフロントエンドでよく使われる言語をサポート。1つのツールでフルスタックのフォーマットニーズに対応
  • ファイルアップロードとダウンロード：.jsx/.tsx/.js/.ts/.css/.html/.jsonファイルを直接アップロードしてフォーマット可能。処理後はダウンロードしてローカルに保存可能
  • 履歴記録パネル：最近のフォーマット記録を自動保存。過去のバージョンを遡って確認でき、異なる設定でのフォーマット効果を比較可能
  • ワンクリック結果コピー：フォーマットまたは圧縮後のコードをワンクリックでクリップボードにコピーし、IDEやプロジェクトに直接貼り付けて使用可能
  • URL共有機能：LZ-String圧縮によりコードと設定をURLハッシュにエンコード。リンクをコピーするだけで完全なコードとフォーマットパラメータを共有可能
  • 構文エラーのフレンドリーな通知：フォーマット失敗時に構文エラーとその他のエラーを区別し、位置情報を表示してコードの問題を迅速に修正するのを支援
  • ドラッグ可能な分割パネル：左右のパネル幅をドラッグで自由に調整可能。さまざまな画面サイズと読み取り習慣に適応
  • ブラウザローカル処理：すべてのフォーマット、圧縮、分析はブラウザのJavaScript内で完了。コード内容はどのサーバーにもアップロードされず、ソースコードのセキュリティを確保

よくある質問

JSXフォーマットの原理は何ですか？Prettierとの関係は？

このツールは基盤としてPrettier v3 Standaloneバージョンをフォーマットエンジンとして使用し、Babelパーサーを介してJSX構文を解析し、設定されたルールに従って整形されたコードを再出力します。Prettierは現在フロントエンドエコシステムで最も人気のあるコードフォーマットツールであり、React/Vue/Angularなどのプロジェクトで広く使用されています。このツールのフォーマット結果は、VS CodeにPrettier拡張機能をインストールしてJSXファイルをフォーマットした結果と基本的に一致しており、ローカルIDEを開かなくてもオンラインで迅速にフォーマットするのに適しています。

どのようなフォーマットオプションがサポートされていますか？インデントとクォートスタイルをカスタマイズできますか？

12種類のフォーマット設定をサポートしています：1）インデントサイズ：2スペース/4スペース/8スペースまたはTabを使用；2）セミコロンを使用するかどうか；3）シングルクォートまたはダブルクォート；4）末尾カンマ戦略：none（なし）/es5（配列とオブジェクト）/all（関数パラメータも含む）；5）オブジェクトの中括弧内にスペースを入れるかどうか；6）単一パラメータのアロー関数に括弧を付けるかどうか；7）印刷幅（1行あたりの最大文字数）；8）JSX属性にシングルクォートとダブルクォートのどちらを使用するか；9）複数行JSXの終了ブラケットをコンテンツと同じ行に置くかどうか；10）オブジェクトプロパティのクォート戦略：as-needed/preserve/consistent；11）HTMLのホワイトスペース感度；12）Tabインデントを使用する。設定パネルで自由に調整できます。

フォーマットはJSXコードのロジックを変更しますか？安全ですか？

フォーマットは空白文字（改行、インデント、スペース）とクォート、セミコロンなどの構文糖の形式のみを調整し、コードロジックを一切変更しません。Prettierは世界中の何百万人もの開発者によって検証された成熟したツールであり、フォーマット後のコードは元のコードと意味的に完全に同等です。ただし注意点があります：元のコード自体に構文エラーがある場合（ブラケットの不一致、タグの未クローズなど）、フォーマットは失敗して構文エラーが表示されます。その場合はまずコードの問題を修正してからフォーマットしてください。

JSX圧縮機能はどのように実装されていますか？どのような圧縮オプションがサポートされていますか？

JSX圧縮はTerserエンジン（業界で最も人気のあるJavaScript圧縮ツールの1つ）を使用してブラウザローカルで実行されます。圧縮には以下が含まれます：コメントと余分な空白の除去、変数名の短縮と難読化（mangle）、デッドコード除去（dead_code）、未使用変数の除去（unused）、関数/変数の巻き上げ最適化、条件式の単純化、ループ最適化など。圧縮はまずBabelを介してJSXを通常のJavaScriptにコンパイルし、その後圧縮最適化を実行します。注意：圧縮後のコードは可読性が大幅に低下するため、本番環境のデプロイに適しており、開発やデバッグには適していません。

TypeScript（TSX）はサポートされていますか？JSXとの違いは何ですか？

サポートされています。ツールのデフォルトはJSX言語ですが、左上隅の言語切り替えメニューからTSXモードに切り替えることができます。TSXモードはTypeScriptパーサーを使用し、TypeScriptの型注釈（interface、type、ジェネリクス、型アサーションなど）を正しく認識でき、型構文によってエラーが発生することはありません。JSXモードはBabelパーサーを使用し、純粋なJavaScriptのReactコンポーネントに適しています。TSX圧縮では、Terser圧縮を実行する前に自動的に型注釈が除去されます。

入力されたJSXコードはサーバーにアップロードされますか？プライバシーとセキュリティは大丈夫ですか？

完全に安全です。このツールのすべての機能（フォーマット、圧縮、構文検出、履歴記録）は、ブラウザ内でJavaScriptを介してローカルで実行され、コード内容はネットワーク経由で外部サーバーに送信されることはありません。PrettierとTerserはどちらも純粋なJavaScript実装のライブラリであり、ブラウザサイドで直接実行できます。オフライン状態でもこのツールを使用でき、すべての機能が正常に動作します。履歴記録はブラウザのlocalStorageに保存され、現在のデバイスでのみ表示されます。

履歴記録はどこに保存されますか？失われることはありますか？

履歴記録はブラウザのlocalStorage（ローカルストレージ）に保存され、特定のブラウザとデバイスに関連付けられています。ブラウザデータを消去したり、ブラウザを切り替えたり、プライベートモードを使用したりすると、履歴記録は失われます。履歴記録は、最近フォーマットしたコードスニペットをすばやく遡って確認し、異なる設定の効果を比較するのに便利です。重要なコードは自分でファイルとして保存し、履歴記録機能のみに依存しないことをお勧めします。

URL共有機能はコードをサーバーにアップロードしますか？

いいえ。URL共有機能は、コードと設定をLZ-Stringで圧縮し、URLのハッシュ部分（#記号の後の内容）にエンコードします。URLハッシュには重要な特性があります：HTTPリクエストと共にサーバーに送信されるのではなく、ブラウザローカルでJavaScriptによって読み取られて解析されます。受信者が共有リンクを開くと、ブラウザは直接ハッシュを解析して復号化し、コードを表示します。プロセス全体でサーバーの関与は必要ありません。ただし注意してください：共有リンクには完全なコード内容が含まれています。コードが機密性の高いものである場合は、公の場で共有しないでください。

フォーマットが失敗して構文エラーが表示された場合はどうすればよいですか？

フォーマット失敗の最も一般的な原因は、コード自体の構文エラーです：1）JSXタグが閉じられていない — すべてのタグが対になっているか、自己閉じタグが正しいか（<img>ではなく<img />）確認してください；2）ブラケットが一致していない — 中括弧{}、丸括弧()、角括弧[]が対になっているか確認してください；3）クォートが閉じられていない — 文字列のクォートが完全か確認してください；4）構文の誤り — 例えばJSXで許可されていない構文を使用しているなど。まずエラープロンプトの行番号とエラーメッセージを確認して問題の位置を特定するか、コードを単純化して段階的にトラブルシューティングできます。

印刷幅（printWidth）とは何ですか？どのくらいの値に設定すればよいですか？

印刷幅（printWidth）はPrettierのコアパラメータの1つであり、コードの1行あたりの最大文字数を表します。コードの行がこの幅を超えると、Prettierは自動的に折り返します。デフォルト値は80文字です。これは歴史のあるプログラミングの慣例です（パンチカードと端末の幅に由来）。一般的な設定値：80（クラシックで保守的）、100（より一般的）、120（ワイドスクリーン向け）。小さく設定しすぎるとコードが頻繁に折り返されてかえって読みにくくなり、大きく設定しすぎると1行が長すぎて狭い画面では読みにくくなります。チームの規範とモニターの幅に応じて80〜120の間の値を選ぶことをお勧めします。

末尾カンマ（trailing comma）の用途は何ですか？どのモードを選ぶべきですか？

末尾カンマとは、配列、オブジェクト、関数パラメータなどの複数行構造の最後の項目の後にもカンマを付けることです。利点には以下が含まれます：1）項目の追加/削除時に1行だけが変更されるため、Git diffがよりクリーンになる；2）カンマの付け忘れによる構文エラーを回避できる；3）一部の状況で解析がより安定する。Prettierは3つのモードを提供しています：none（末尾カンマなし、最も簡潔）、es5（ES5でサポートされている場所にのみ追加、つまり配列とオブジェクト、最も互換性が高い）、all（可能なすべての場所に追加、関数パラメータを含む、ES2017+またはBabel/TSのサポートが必要）。モダンなプロジェクトでは'all'モードの使用が推奨されており、BabelまたはTypeScriptのコンパイルと組み合わせれば完全に問題ありません。

JSXシングルクォートとJSXブラケット同一行の効果はそれぞれ何ですか？

JSXシングルクォート（jsxSingleQuote）：JSXの属性値にシングルクォートとダブルクォートのどちらを使用するかを制御します。デフォルトはオフ（ダブルクォート）で、これはHTML属性の慣例と一致しています。オンにすると、JSX内の属性文字列はシングルクォートを使用します。JSXブラケット同一行（jsxBracketSameLine）：複数行JSX要素の終了右角括弧（/>または>）を最後の行の末尾に置く（同一行）か、新しい行に置く（異なる行）かを制御します。デフォルトはオフ（新しい行）で、オンにすると右括弧が最後の属性と同じ行に配置されます。チームによって好みが異なりますので、プロジェクトと一致するスタイルを選んでください。

複数ファイルの一括フォーマットはサポートされていますか？

現在、ウェブ版ツールは主に単一ファイルの迅速なフォーマットシナリオ向けに設計されており、単一ファイルのアップロード処理をサポートしています。大量のJSX/TSXファイルを一括フォーマットする必要がある場合は、プロジェクトにPrettier CLIツールをインストールし、コマンドラインで一括処理することをお勧めします（例：npx prettier --write "src/**/*.jsx"）。このツールの基盤エンジンはPrettierと完全に一致しており、フォーマット結果も同じです。将来のバージョンで一括処理機能の追加を検討する可能性があります。

ESLintと併用できますか？

はい。実際のプロジェクトでは、Prettierにコードフォーマット（改行、インデント、スペース、クォートなど）を担当させ、ESLintにコード品質（未使用変数、潜在的なバグ、ベストプラクティスなど）を担当させることをお勧めします。両方を併用するためのベストプラクティスは：1）eslint-config-prettierをインストールして、Prettierと競合するESLintのフォーマットルールをオフにする；2）最初にPrettierでフォーマットし、次にESLintでチェックする。このツールはフォーマット（Prettierが得意とする部分）に特化しており、ESLintのコードチェック機能は含まれていません。

スマートフォンでも使用できますか？モバイルでの使い心地はどうですか？

モバイルブラウザで使用できます。このツールはレスポンシブデザインを採用しており、小さな画面のデバイスでは自動的にレイアウトが調整されます — 左右の分割パネルが上下の分割パネルになり、ツールバーのボタンはタッチしやすいサイズに最適化されます。ただし、モバイルでのコード編集の使い心地はデスクトップほど良くないため、主にコンピューターで使用することをお勧めします。モバイルデバイスで頻繁にコードを処理する必要がある場合は、Prettierをサポートするモバイルコードエディターアプリを使用することをお勧めします。

トラブルシューティング

フォーマットが失敗して構文エラーが表示された場合はどうすればよいですか？

まずコードが完全かどうかを確認してください：JSXコンポーネントは通常、exportが必要か、少なくともJSXを返す関数を含む必要があります。一般的な構文エラーには以下が含まれます：1）JSXタグが閉じられていない — 各開始タグに対応する終了タグまたは自己閉じマーカーがあるか確認する；2）中括弧が一致していない — JSX内の{}式のブラケットが対になっているか；3）文字列クォートが閉じられていない — すべてのシングルクォート/ダブルクォート/バッククォートを確認する；4）JSXで予約語を使用している — 例えばclassはclassName、forはhtmlForと書く必要がある；5）複数のルート要素 — JSXは1つのルート要素のみ許可され、複数の要素は<>...</>または<div>で包む必要がある。エラーメッセージには通常、行番号と理由が表示されるので、それに基づいて位置を特定できます。

ファイルをアップロードしても反応がないか、フォーマットが間違っていますか？

まずファイル拡張子が正しいか確認してください — .jsx/.tsx/.js/.ts/.css/.html/.jsonファイルはすべてアップロード可能です。ファイル拡張子が標準的でない場合、ツールが言語フォーマットを正しく認識できず、フォーマット結果が期待通りにならない可能性があります。解決方法：1）ファイル拡張子が標準形式であることを確認する；2）アップロード後、左上隅の言語選択が正しいか確認し、正しくない場合は手動で切り替える；3）ファイル内容がバイナリではなくプレーンテキストであることを確認する；4）ファイルが大きすぎる（1MB超）とブラウザがカクつく可能性があるため、デスクトップツールでの処理をお勧めします。

フォーマット後のコードがローカルのPrettierの結果と違いますか？

考えられる原因：1）バージョンの違い — このツールはPrettier v3を使用しています。プロジェクトがv2バージョンを使用している場合、一部の詳細が異なる可能性があります（末尾カンマのデフォルト値の変更など）；2）設定の違い — 印刷幅、インデント、クォート、末尾カンマなどのパラメータがプロジェクトの設定と一致しているか確認する；3）パーサーの違い — JSXはBabelパーサー、TSXはTypeScriptパーサーを使用しているので、正しく選択されているか確認する；4）プラグインの違い — ローカルのPrettierに追加のプラグイン（prettier-plugin-tailwindcssなど）がインストールされている場合、このツールにはこれらのプラグインは含まれていません。このツールの設定をプロジェクトの.prettierrcと一致するように調整することをお勧めします。

JSX圧縮後にコードが正常に動作しませんか？

JSX圧縮はTerserエンジンを使用しており、まずJSXを通常のJavaScriptにコンパイルしてから圧縮します。圧縮後にコードが動作しない場合は、以下を確認してください：1）圧縮設定が攻撃的すぎないか — 例えばtoplevelを有効にするとモジュールの動作が変わる可能性がある；2）コードでevalまたは動的プロパティアクセスを使用していないか — 変数の難読化により名前の不一致が発生する可能性がある；3）特定の関数名またはクラス名に依存していないか — その場合は、keep_fnamesまたはkeep_classnamesオプションを有効にする必要があります。本番環境の圧縮は、プロジェクトのビルドツール（Vite/Webpack）を使用して行うことをお勧めします。それらの方が設定とプラグインのエコシステムがより充実しています。

用語集

JSX
JavaScript XMLの略。Reactによって導入されたJavaScriptの構文拡張で、JS内にHTMLのようなタグ構造を記述でき、コンパイル後にReact.createElement()呼び出しに変換される。
Prettier
現在最も人気のある独断的な（opinionated）コードフォーマットツール。JS/TS/JSX/TSX/JSON/CSS/HTML/Markdownなどをサポートし、フロントエンドコードフォーマットの事実上の標準となっている。
Babel
JavaScriptコンパイラ。ES6+/JSX/TSなどの新しい構文を古いブラウザと互換性のあるES5コードに変換でき、PrettierがJSXを解析するための基盤エンジンとしても機能する。
Terser
業界で最も人気のあるJavaScript/JSX圧縮ツール（minifier）。変数の難読化、デッドコード除去、コード圧縮などをサポートし、Webpack/Viteなどのビルドツールのデフォルト圧縮ツールである。
Print Width
Prettierのコアパラメータの1つ。コードの1行あたりの最大文字数を表し、この幅を超えると自動的に折り返す。デフォルト80文字、一般的な設定は80/100/120。
Trailing Comma
配列、オブジェクト、関数パラメータなどの複数行構造の最後の項目の後にカンマを付けること。Git diffをよりクリーンにし、構文エラーを回避できる。Prettierはnone/es5/allの3つのモードをサポート。
Mangle
コード圧縮における変数名/関数名の短縮技術。意味のある長い変数名をa/b/cなどの短い名前に置き換え、コードサイズを縮小すると同時に、可読性も低下させる。
Dead Code Elimination
圧縮ツールの最適化技術。決して実行されないコード（false条件下のコード、未使用の変数と関数など）を削除し、プロダクションビルドのサイズを縮小する。
CodeMirror
このツールが使用するブラウザサイドのコードエディタコンポーネント（バージョン6）。シンタックスハイライト、行番号、ブラケットマッチングなどのプロフェッショナルな編集機能を提供し、各種オンラインIDEで広く使用されている。
LZ-String
JavaScriptで実装されたLZ圧縮アルゴリズム。URLハッシュにコード内容を効率的に圧縮して保存するために使用される。圧縮率が高く復号速度が速いため、共有リンクのシナリオに適している。
localStorage
ブラウザが提供するローカルキーバリューストレージAPI。容量は約5-10MBで、データは（明示的に消去しない限り）永続的に保存される。このツールではフォーマット履歴記録の保存に使用されている。
ESLint
JavaScript/TypeScriptの静的コードチェックツール（Linter）。主にコード品質とベストプラクティスを担当し、通常はPrettierと併用される（Prettierがフォーマットを管理し、ESLintが品質を管理する）。

サポートされている言語とファイル形式

ツールは7種類のフロントエンドでよく使われる言語をサポートし、左上隅のメニューから自由に切り替えられます：

言語ファイル拡張子フォーマットエンジン圧縮エンジン
JavaScript.js, .mjs, .cjsPrettier (Babel)Terser
TypeScript.ts, .mts, .ctsPrettier (TypeScript)Terser (types removed first)
JSX.jsxPrettier (Babel)Terser
TSX.tsxPrettier (TypeScript)Terser (types removed first)
CSS.cssPrettier (PostCSS)CSSO
HTML.html, .htmPrettier (HTML)Custom implementation
JSON.jsonPrettier (JSON)JSON.stringify

フォーマット設定項目一覧

12種類の設定可能なフォーマットパラメータとその効果：

設定項目選択可能な値デフォルト値説明
tabWidth インデントサイズ2 / 4 / 8 / Tab2 spacesインデントレベルごとのスペース数、またはTab文字を使用
semi セミコロンtrue / falsetrueステートメントの末尾にセミコロンを付けるかどうか
singleQuote シングルクォートtrue / falsefalse (double quotes)JS文字列にシングルクォートとダブルクォートのどちらを使用するか
trailingComma 末尾カンマnone / es5 / alles5複数行構造の最後の項目の後に末尾カンマを付けるかどうか
bracketSpacing ブラケット間隔true / falsetrueオブジェクトの中括弧の内側にスペースを入れるかどうか
arrowParens アロー括弧always / avoidalways単一パラメータのアロー関数に括弧を付けるかどうか
printWidth 印刷幅number (recommended 80-120)801行あたりの最大文字数、超えると自動折り返し
jsxSingleQuote JSXシングルクォートtrue / falsefalseJSX属性値にシングルクォートを使用（デフォルトはダブルクォート）
jsxBracketSameLine JSXブラケット同一行true / falsefalse複数行JSXの右ブラケットを最後の属性と同じ行に置くかどうか
quoteProps プロパティクォートas-needed / preserve / consistentas-neededオブジェクトのプロパティ名にいつクォートを付けるか

JSX圧縮前後の比較

典型的なReactコンポーネントを例に、圧縮前後のサイズ変化を示します：

比較項目フォーマット（開発）圧縮（本番）圧縮率
コードサイズ約 2.5 KB約 0.8 KB~68%
行数約 80 行1 行~99%
変数名意味のある名前a/b/c/d 単一文字—
コメントすべてのコメントを保持すべて削除—
可読性高（デバッグ可能で読みやすい）非常に低（機械可読のみ）—
ユースケース開発、デバッグ、レビュー本番デプロイ、CDN配布—

Privacy & Security

このJSXフォーマッターツールのすべての操作は完全にブラウザローカルで完了します：入力またはアップロードしたコードは、ブラウザのJavaScript内でフォーマットと圧縮処理が行われるだけで、ネットワーク経由で外部サーバーに送信されることはありません。PrettierとTerserはどちらも純粋なJavaScriptライブラリであり、ブラウザサイドで直接実行できます。履歴記録はブラウザのlocalStorage（ローカルストレージ）に保存され、現在のデバイスとブラウザでのみ表示されます。URL共有機能は、コードをLZ-Stringで圧縮してURLハッシュ部分（#以降の内容はサーバーに送信されない）にエンコードします。ページはCookieトラッキングを使用せず、ユーザーが入力したコード内容を収集しません。オフライン状態でもこのツールを使用でき、コア機能は正常に利用可能です。

Authoritative References