コンテンツにスキップ
🛠️
Whiz Tools

無料コードフォーマッター: JavaScript、Python、HTML などを整形

JavaScript、Python、HTML、CSSなど12以上のプログラミング言語のソースコードを、適切なインデントと空白の入った読みやすい形に自動整形するツールです。整形処理はすべてブラウザ内で完結し、サーバーへのコードのアップロードや会員登録は不要で、無料で何度でも利用できます。

コードフォーマッター

シングルクリックでコードをフォーマットします。言語を選択し、コードを貼り付けて、適切にフォーマットされたコードを取得します。

使用方法：

  1. ドロップダウンからプログラミング言語を選択します。
  2. 入力エリアにフォーマットされていないコードを貼り付けます。
  3. 「コードをフォーマット」ボタンをクリックします。
  4. 出力エリアからフォーマット済みの結果をコピーします。
ローディング計算機...
📚

ドキュメンテーション

コードフォーマッターとは何ですか？

コードフォーマッターは、コードの動作を変えずに、ソースコードのインデント、改行、空白を統一して書き換えるツールです。このコードフォーマッターはウェブブラウザー上で動作します。JavaScript、Python、HTML、CSSなど、12種類のプログラミング言語に対応しています。

このコードフォーマッターの仕組み

このツールは、言語ごとに異なるルールセットを使用します。JSONを除き、コード全体の構文木を構築するものはありません。

  • JSONはブラウザー組み込みのJSONパーサーで解析され、その後、2スペースのインデントで出力されます。JSONが無効な場合、ツールはエラーを報告し、出力を表示しません。
  • **JavaScript、TypeScript、Java、C、C++、C#**では、同じフォーマッターを使用します。コードを1文字ずつ走査し、中括弧、括弧、セミコロンを追跡します。{が現れるたびに新しいインデントブロックを開始し、}または;が現れるたびに改行します。コメントと引用符で囲まれた文字列は、そのままコピーします。このフォーマッターは、元のコードにない演算子の前後やコンマの後の空白を追加しません。改行とインデントだけを再構成します。
  • Pythonは各行の既存のインデントを読み取り、Python言語自体が使用するのと同じネスト規則に従って、一レベルにつき四スペースで再構成します。長い行の分割、空行の追加、演算子の前後への空白の追加は行いません。各行のインデントの深さだけを統一します。
  • CSSは余分な改行と空白を削除し、{と;の後、および}の前に改行を追加します。
  • HTMLとXMLは、標準的な自己終了タグである<br>、<img>、<input>などを認識し、ネストしたタグの階層ごとに改行と2スペースのインデントを追加します。
  • SQLは、SELECT、FROM、WHERE、JOIN、ORDER BYなど、固定されたキーワードを大文字に変換し、主要な句の前で改行します。

入力を実際に解析するのはJSONの処理だけなので、その他のフォーマッターは、括弧の不足や閉じられていない文字列などの構文エラーを検出しません。実行できないコードであっても、与えられたテキストをそのまま整形します。

対応言語

言語一般的なファイル拡張子インデント幅
JavaScript.js2スペース
TypeScript.ts2スペース
HTML.html2スペース
CSS.css2スペース
Python.py4スペース
Java.java4スペース
C.c4スペース
C++.cpp4スペース
C#.cs4スペース
SQL.sql句ごとに改行
JSON.json2スペース
XML.xml2スペース

コードを整形する方法

  1. ドロップダウンメニューからプログラミング言語を選択します。
  2. 整形前のコードを入力ボックスに貼り付けます。
  3. 「コードを整形」を選択します。
  4. 整形後の結果を出力ボックスからコピーします。

整形処理はすべてブラウザー内で行われます。コードがサーバーに送信されることはありません。

JavaScriptの整形例

整形前：

1function add(a, b) {
2    if (a > 0) { return a + b; }
3    return 0;
4}
5

整形後：

1function add(a, b) {
2  if (a > 0) {
3    return a + b;
4  }
5  return 0;
6}
7

フォーマッターは{ }内のコードを独立したインデント付きの行に移し、1レベルにつき2スペースのインデントに統一しました。a > 0とa + bの周囲の空白は、元から存在していたため、見つかった状態のまま残しました。

Pythonの整形例

整形前：

1def calculate_average(numbers):
2  if len(numbers) == 0:
3    return 0
4  total = sum(numbers)
5  return total / len(numbers)
6

整形後：

1def calculate_average(numbers):
2    if len(numbers) == 0:
3        return 0
4    total = sum(numbers)
5    return total / len(numbers)
6

元のコードでは、インデントの一レベルに二スペースを使用していました。フォーマッターは、Python公式スタイルガイドであるPEP 8に合わせ、一レベルにつき四スペースで各行のインデントを再構成しました。すべての行の順序を維持し、行内の空白には手を加えていません。

コードの整形が重要な理由

インデントが統一されていないと、関数、ループ、条件の終わりが分かりにくくなります。複数の人が編集したコードでは、タブとスペースのインデントが混在したり、所属するブロックと行の位置がそろっていなかったりすることがあります。フォーマッターに通すと、すべてのファイルの視覚的な構造が統一されるため、内容をすばやく確認でき、位置を誤った括弧も見つけやすくなります。

制限事項

  • 入力サイズ：このツールは最大50,000文字のコードを受け付けます。これを超える入力は、整形開始前にエラーメッセージとともに拒否されます。
  • ほとんどの言語では構文チェックなし：解析および検証を行うのはJSON入力だけです。その他の11言語のコードは、括弧が不足していたり文字列が閉じられていなかったりしても、そのまま再整形されます。その場合、エラーとして示されず、インデントが不正になることがあります。
  • 演算子の前後の空白は変更しない：JavaScript、TypeScript、C系言語のフォーマッターは、改行とインデントだけを並べ替えます。+、=、!==の前後や、もともと空白がない場合のコンマの後に、空白を挿入することはありません。
  • PHPは未対応：対応していない言語を選択すると、コードは変更されずに返されます。

よくある質問

このツールはコードの構文エラーをチェックしますか？ JSONの場合のみチェックします。JSON入力は解析されるため、無効なJSONではエラーメッセージが表示されます。その他の対応言語のコードは、正しい構文かどうかを確認せずに再整形されます。

コードをサーバーに送信しますか？ いいえ。整形処理はJavaScriptを使用してすべてブラウザー内で実行されます。コードがアップロードされたり、どこかに保存されたりすることはありません。

整形できるコードの最大量はどのくらいですか？ 50,000文字です。それを超える量を貼り付けると、整形開始前にエラーが表示されます。

演算子の前後やコンマの後に不足している空白を追加しますか？ JavaScript、TypeScript、Java、C、C++、C#では追加しません。これらのフォーマッターは、中括弧とセミコロン周辺のインデントと改行だけを再構成し、各行のその他の部分は記述どおりにコピーします。

どのようなインデントを使用しますか？ JavaScript、TypeScript、HTML、CSS、JSON、XMLでは2スペースです。Python、Java、C、C++、C#では4スペースです。

整形後もコードがほとんど同じに見えるのはなぜですか？ 入力ですでに空白と括弧の使い方が統一されている場合、フォーマッターが主に再構成するのはインデントなので、変化は小さくなります。インデントが混在しているコードや、ごく少ない行に圧縮されたコードで特に役立ちます。