コード整形
HTML、CSS、JavaScriptコードを整形して読みやすくします
ソースコードと整形
整形はブラウザー内で実行されます。コードはこのデバイス内に留まります。
JSONの整形ではドキュメントの検証も行います。
Pythonでは既存のインデントを保持し、空行を正規化します。
SQLの整形では引用符で囲まれた値とコメントをそのまま保持します。
整形済みコード
コードを貼り付けるか、サンプルを読み込んで整形してください。
無料オンラインコード整形・フォーマッター
このコード整形ツールは、圧縮されたコードや書式が乱れたコードを、読みやすくインデントの整った出力に変換します。1行にまとまったJavaScriptのバンドルでも、折りたたまれたHTMLテンプレートでも、このオンラインコードフォーマッターがすぐにコードを整え、読みやすく、デバッグや保守もしやすくなります。
JavaScript、TypeScript、HTML、CSS、JSON、XML、SQL、Python、Java、PHPの10の主要な言語に対応し、言語に合わせた整形ルールを適用します。JSONの整形では構文も検証し、本番環境に出る前にエラーを検出します。CSSとHTMLのフォーマッターは入れ子のセレクターやタグの階層を処理し、汎用エンジンはJavaやPHPなど波括弧で区切る言語を正しくインデントします。
すべてお使いのブラウザー内で動作し、サーバーへのアップロードはありません。ソースコードがお使いのデバイスの外に出ることはないため、このコード整形ツールは、社外秘のプロジェクト、社内API、機密データにも安心して使えます。インデントのスタイル(スペースまたはタブ)とサイズ(2、4、8)をチームのコーディング規約に合わせて設定し、結果をワンクリックでコピーまたはダウンロードできます。
主な機能
- 10言語に対応しています。JavaScript、TypeScript、HTML、CSS、JSON、XML、SQL、Python、Java、PHPのコードを整形できます
- 入力しながらコードを整形するリアルタイム整形
- スペース(2、4、8)またはタブから選べるインデント設定
- 整形中に行う、組み込みのJSON構文検証
- HTMLとXMLの階層構造に沿ったタグのインデント
- CSSのセレクターとプロパティブロックの整形
- SQLキーワードの大文字化と句の分離
- ワンクリックのクリップボードコピーと、正しい拡張子でのファイルダウンロード
- 元のコードと整形後のコードの文字数の統計
- すぐに試せるサンプルコードをあらかじめ読み込み済み
コード整形の使い方
- 言語を選ぶ: ドロップダウンからプログラミング言語を選ぶと、フォーマッターが正しいルールを適用します。
- インデントの設定: スペースかタブを選び、プロジェクトのスタイルガイドに合うインデントサイズを選びます。
- コードを貼り付ける: 圧縮された、または整形されていないコードを入力欄に入力するか貼り付けます。整形は自動的に始まります。
- 出力を確認: 整形されたコードが右側のパネルに、適切なインデントと構造で表示されます。
- コピーまたはダウンロード: 「コピー」で結果をクリップボードに入れるか、「ダウンロード」で適切な拡張子のファイルとして保存します。
活用例
- 圧縮された本番コードのデバッグ: 圧縮されたJavaScriptやCSSのバンドルを展開し、バグをより速く見つけます。
- コードレビュー: プルリクエストのスニペットを整形し直して、レビュアーが詰め込まれた1行コードに苦労せずにロジックを追えるようにします。
- 学習と指導: 学生は、対応しているどの言語でも、適切なインデントのパターンを確認できます。
- チームのスタイルの統一: 古いファイルを、更新されたコーディング規約に合わせてすばやく整形し直せます。
- APIレスポンスの確認: RESTエンドポイントから返されたJSONペイロードを整形して、分析しやすくします。
- データベースクエリの整理: DBAに共有する前に、SQLクエリのキーワードの位置を揃えて整形します。
- ウェブテンプレートの整理: 入れ子になったHTMLとXMLの構造をインデントして、テンプレートを保守しやすくします。
- ドキュメントの作成準備: 技術ドキュメントやブログ記事に、きれいに整形されたコードスニペットを載せられます。
よくある質問
このコード整形ツールは無料で使えますか?
はい、このツールは完全に無料で、登録は不要です。対応している10の言語のどれでも、無制限にコードを整形できます。
データは安全ですか?
はい。整形はすべてお使いのブラウザー内で行われます。コードがサーバーに送信されることはなく、機密性の高いソースコードや社外秘のソースコードのプライバシーと安全性が完全に守られます。
整形によってコードのロジックが変わることはありますか?
いいえ。このツールが調整するのは、空白、インデント、改行だけです。変数名の変更、文の並べ替え、コードの機能の変更は一切行いません。
JSONが無効な場合はどうなりますか?
言語にJSONを選ぶと、整形中に構文が検証されます。JSONが不正な場合は出力欄が空のままになり、解析エラーがあることを知らせるので、修正できます。
スペースの代わりにタブを使えますか?
はい。設定パネルでインデントの種類を「Tabs」に切り替えてください。タブを選ぶと、タブの幅はエディターやビューアーで決まるため、インデントサイズの選択は無効になります。
ヒントとベストプラクティス
- プロジェクトのスタイルガイドに合わせる: コードを貼り付ける前にインデントの種類とサイズを設定しておくと、出力をそのままコミットできます。
- サンプルの読み込みを使う: 自分のコードを貼り付ける前に、「サンプルを読み込む」をクリックして、各言語がどのように整形されるかを確認します。
- 先にJSONを検証する: APIレスポンスを整形するときは、JSONの言語モードを選ぶと、構文エラーを検出できます。
- 文字数を確認する: 元のコードと整形後のコードの文字数を比べると、空白がどれだけ増えたかがわかります。
- 大きなファイルはダウンロードする: 整形後の出力が長い場合は、コピーする代わりに「ダウンロード」ボタンで適切な名前のファイルとして保存します。
- 差分チェックと組み合わせる: ファイルの2つのバージョンを整形してから差分チェッカーを使うと、変更点を読みやすい形で比較できます。