コード整形ツール

ブラウザでJSON、JavaScript、HTML、CSSを整形または圧縮できます。コードの貼り付けやファイルのドロップ時に言語を自動検出します。

フォーマット結果

ステータス

準備完了

コードを貼り付けるか、ドロップまたは入力し、整形または圧縮をクリックしてください。

文字数: -
行数: -

使い方

コード整形ツールは、整っていないソースやミニファイされたソースを適切な改行とスペースで再インデントします。ミニファイヤーは空白を取り除いてファイルを圧縮し、本番環境用にサイズを小さくしますが、コードの動作は変更しません。

コードを貼り付ける、ドロップする、または入力する
ファイルを貼り付けるかドロップすると、言語の自動検出も試行されます。
言語を確認する
JSON、JavaScript、HTML、またはCSSです。推測が間違っている場合は手動で切り替えてください。
整形 / 圧縮
整形はインデントを再調整し、圧縮は空白を最小限にします。結果をコピーまたはダウンロードしてください。

整形と圧縮の違い

整形は空白や改行を追加してコードを読みやすくし、デバッグを容易にします。圧縮は不要なスペース、改行、コメントを削除してファイルを小さくし、読み込み時間を短縮するためにWebサイトで一般的に使用されます。どちらの処理もロジックは変わらず、変更されるのは空白とコメントのみです。

JavaScriptフォーマッターが安全に処理できるもの

JavaScriptフォーマッターおよびミニファイヤーは、シングルクォート、ダブルクォート、バッククォートのテンプレートリテラル文字列を不透明なテキストとして処理するため、${...}テンプレート式内を含む文字列内に記述された中括弧、セミコロン、コメント文字は、コードとして再フォーマットされずに入力されたまま保持されます。JavaScriptを完全に解析するわけではないため、PrettierやESLintのようなスタイルガイドではなく、構造的なインデントを適用します。

すべての処理はデバイス上で完結します

フォーマットおよびミニファイは、ドロップまたは選択したファイルを含め、すべてブラウザ内で実行されます。ハードコードされたシークレット、APIエンドポイント、ビジネスロジックを含むコードがデバイスの外部に送信されることはないため、プロプライエタリコード、内部設定、検査対象のミニファイ済み本番バンドルでもこのツールを安全に使用できます。

よくある質問

オンラインで乱雑なJavaScriptやHTMLコードをフォーマットして整形するにはどうすればよいですか？

コードを貼り付けるかドロップし、検出された言語を確認するかドロップダウンから選択して、「フォーマット」をクリックしてください。ツールは選択した言語に適切なインデントを適用します。HTMLにはタグのネスト、JavaScriptにはブロックインデント、CSSにはプロパティのグループ化です。結果に応じて文字数と行数が更新されます。

このコードフォーマッターを使用すると、ソースコードはサーバーに送信されますか?

いいえ。すべてのフォーマットおよびミニファイ処理は、ドロップまたは選択したファイルを含め、完全にブラウザ内で実行されます。コードがデバイスの外部に送信されることはないため、プロプライエタリコード、内部設定、または検査対象のミニファイ済み本番バンドルでも安心してこのツールを使用できます。

このツールはバッククォートを使用したJavaScriptテンプレートリテラルを正しく処理できますか？

はい。バッククォートで区切られたテンプレートリテラルは、その内部の`${...}`補間も含めて、単一の不透明な文字列として扱われます。テンプレートテキスト内に記述された中括弧やセミコロンはコードとして再フォーマットされず、入力されたまま保持されるため、以前に発生していた文字列の実際の値が損なわれる問題を回避できます。

このツールで本番環境用のJavaScriptやCSSを圧縮できますか？

このツールは空白、改行、コメントを削除することでファイルサイズを削減する基本的なミニファイ機能を提供します。ツリーシェイキング、デッドコード削除、変数名の変更などの高度な最適化は実行しません。本番環境レベルのミニファイには、JavaScript用Terser、CSS用cssnano、またはwebpackやViteなどのバンドラーといった専用ツールを使用してください。

このコードビューティファイアと別のJSONフォーマッターツールの違いは何ですか？

JSONフォーマッターはJSON専用で、文字位置を含む正確な検証エラーメッセージを表示します。このコードビューティファイアーは、JavaScript、HTML、CSSに加え、JSONを含む4つの言語に対応しています。JSONのみを扱い、最も詳細な検証を行いたい場合は、専用のJSONフォーマッターをご利用ください。