JS フォーマッター: オンラインで整形と圧縮

JS フォーマッターで JavaScript・TypeScript・JSX/TSX を Prettier で整形または圧縮。

コードは Prettier と Terser を使ってブラウザ内のローカルで整形され、サーバーにアップロードされることはありません。

開発・運営：Udit Agarwal

スタイルも整形したいですか? CSS Formatter を試してください。

JS / TS フォーマッター について

この js フォーマッターは、JavaScript・TypeScript・JSX/TSX をブラウザ内で直接整形または圧縮します。JavaScript 整形ツールとしては、充実したオプションパネルとともに Prettier を実行し、圧縮には Terser を使って本番向けにコードを縮小します。Auto パーサーで構文を自動検出するか、特定の TypeScript フォーマッターが必要なときは JS/JSX または TS/TSX を強制できます。セミコロン、クォートスタイル、タブ幅、印字幅、末尾カンマをプロジェクトのスタイルに合わせて調整できます。乱雑なスニペットを整える開発者、バンドル出力を確認する QA エンジニア、手軽な prettier オンラインの代替を求める人向けに作られています。すべてはブラウザ内のローカルで処理されるため、ソースコードが端末から外に出ることも、サーバーにアップロードされることもありません。

機能

• Prettier で JavaScript・TypeScript・JSX/TSX を整形
• Terser で圧縮し、本番向けにコードを縮小
• Auto パーサー検出に加え、明示的な JS/JSX・TS/TSX モード
• セミコロン、シングル/ダブルクォート、タブ/スペースを切り替え
• 設定可能なタブ幅（2 または 4）と印字幅（80・100・120）
• 末尾カンマを none・es5・all から選択
• オプションを変えるたびに即座に整形
• すべてブラウザ内で動作

JS / TS フォーマッター の使い方

1. 入力欄に JavaScript または TypeScript を貼り付けます。
2. 整形には Beautify、圧縮には Minify を選びます。
3. パーサーを選びます: Auto・JS / JSX・TS / TSX。
4. タブ幅・クォート・セミコロン・末尾カンマなどのオプションを調整します。
5. 結果パネルから整形済み出力をコピーします。

例

入力

const  greet=(name)=>{return 'hi '+name}

出力

const greet = (name) => {
  return 'hi ' + name;
};

デフォルトの Prettier オプション（2 スペースインデント、セミコロンあり）で整形。

よくあるエラーとトラブルシューティング

• 貼り付け後に出力が空、または構文エラーが表示される。 — スニペットが有効な JavaScript または TypeScript であることを確認してください。型注釈には TS / TSX、React 構文には JS / JSX にパーサーを切り替えます。
• Auto モードが TypeScript 固有の構文を誤って解析する。 — Auto はまず TypeScript パーサーを試し、Babel にフォールバックします。高度な型機能を使うファイルでは TS / TSX を明示的に強制してください。
• 圧縮された出力が読めない。 — それは仕様です。Terser は本番向けに空白を除去してコードを短縮します。読みやすい結果が欲しい場合は Beautify を使ってください。
• クォートやセミコロンが意図したものと違う。 — コピー前に Single quotes と Semicolons オプションを切り替えてください。変更するたびに Prettier が即座に再整形します。

よくある質問

JS フォーマッターとは何で、何ができますか?

JavaScript・TypeScript・JSX/TSX を整形または圧縮するブラウザベースのツールです。整形では充実したスタイルオプションとともに Prettier を実行し、圧縮では Terser を実行して本番向けにコードを縮小します。

JS フォーマッターで TypeScript や JSX を整形するには?

パーサーを JS / JSX・TS / TSX・Auto から選びます。Auto はまず TypeScript パーサーを試し、Babel にフォールバックするので、プレーンな JavaScript・JSX・TypeScript がすべて正しく整形されます。

JS フォーマッターは Prettier と Terser を使いますか?

はい。整形には Prettier、圧縮には Terser を使うため、出力は実際のビルドパイプラインで使うのと同じツールに一致します。

JS フォーマッターで制御できるスタイルオプションは?

シングル/ダブルクォートとセミコロンの切り替え、タブとスペースの切り替え、タブ幅 2 または 4 の設定、印字幅 80・100・120 の選択、末尾カンマ none・es5・all の選択ができます。

JS フォーマッターは私のコードをどこかに送信しますか?

いいえ。Prettier と Terser はどちらもすべてブラウザ内で動作するため、コードが端末から外に出ることも、サーバーにアップロードされることもありません。

関連ツール

• CSS / SCSS フォーマッター — CSS/SCSS/LESS の整形・圧縮、プロパティの並べ替え、重複の除去を行います。
• HTML フォーマッター — HTMLの整形・圧縮、インラインCSS/JSの整形、結果のプレビューを行います。
• JSON フォーマッター — JSONの整形・圧縮・検証を行い、エラー箇所も表示します。
• JSON から TypeScript — サンプルJSONから TypeScript のインターフェースを生成します。
• SQL フォーマッター — MySQL、PostgreSQL、SQL Server、SQLite、BigQuery、Oracle 向けにSQLを整形します。
• GraphQL フォーマッター — GraphQLのクエリやスキーマを整形・圧縮し、構文を検証してオペレーションを抽出します。
• XML フォーマッター — XMLの整形・圧縮・検証を行い、XML ↔ JSON を変換します。
• cURL から Fetch — curlコマンドを JavaScript の fetch() 呼び出しに変換します。

コードフォーマッターの他のツール

• HTML フォーマッター — HTMLの整形・圧縮、インラインCSS/JSの整形、結果のプレビューを行います。
• XML フォーマッター — XMLの整形・圧縮・検証を行い、XML ↔ JSON を変換します。
• SQL フォーマッター — MySQL、PostgreSQL、SQL Server、SQLite、BigQuery、Oracle 向けにSQLを整形します。
• GraphQL フォーマッター — GraphQLのクエリやスキーマを整形・圧縮し、構文を検証してオペレーションを抽出します。
• Dockerfile フォーマッター — Dockerfileを整形し、ベストプラクティスやlintの提案を表示します。
• MongoDB クエリフォーマッター — MongoDBシェルのクエリと集約パイプラインを整形します。
• コントラストチェッカー — 2色間のWCAGコントラスト比とAA/AAA合格を確認します。
• Mermaid 図レンダラー — Mermaid図（フロー、シーケンス、ガント）をブラウザ内でSVGにレンダリングします。
• SVG オプティマイザー — SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。
• MongoDB クエリ整形ツール — MongoDB のクエリや find() 文をブラウザ内で整形・インデントします。
• MongoDB 集計整形ツール — MongoDB の集計パイプラインをブラウザ内で整形・インデントします。
• MongoDB エクスプローラー — MongoDB のドキュメントやコレクションのサンプルを調べ、フィールドのスキーマと型を推測します。

コードフォーマッターのツールをすべて見る (32) · すべてのツール