piapia123
ja

JavaScript のインデント整形

整形

処理はすべてブラウザ内で完結します。データは送信されません

入力
出力

1行に圧縮された JavaScript を、波括弧とセミコロンを手がかりに組み直します:ブロックは1段ずつ深くインデントし、文はそれぞれ別の行に、} else { はひとまとまりのまま、短いオブジェクトリテラルは同じ行に残します。このツールはインデントだけを行い、構文解析はしません —— 正規表現リテラルの中の括弧やテンプレート文字列の中の式は構造判断に加わらないため、その種の書き方では結果が正確でないことがあります。文字列とコメントの中身はそのまま運び、空白以外の文字は一切変更しません。セミコロンの挿入も削除もしません。

機能

  • 波括弧の階層でインデントし、} は対応する階層に戻します
  • セミコロンで改行。for (;;) の中のセミコロンは区切りなので改行しません
  • } else {、} catch {、} finally { は同じ行のまま
  • オブジェクトリテラルは1行のまま(中にセミコロンがなく長くない場合)。コードブロックは展開します
  • クラス本体は必ず複数行に展開します
  • 文字列・テンプレート文字列(入れ子のテンプレートと ${} 式を含む)・コメントの中身はそのまま保持します
  • 行コメントの後は必ず改行し、後続のコードがコメントに飲み込まれないようにします
  • 空白を補うのは文法上曖昧さがない位置だけ:カンマの後ろ、制御キーワードと括弧の間
  • 演算子の周りの空白はそのまま。セミコロンの挿入も削除もしません
  • 既知の制限:字句解析をしないため、正規表現リテラルの中の括弧を構造の括弧として扱います

使い方

  1. JavaScript を入力欄に貼り付けます
  2. インデントの幅を選びます
  3. Ctrl/⌘ + Enter を押すか「実行」をクリックします
  4. 「コピー」で結果を取り出せます

よくある質問

正規表現リテラルで結果がずれるのはなぜですか?
スラッシュが除算記号なのか正規表現の開始なのかを判別するには、単項と二項の演算子まで含めた字句解析の仕組みが要ります。間違えると後ろのコードを丸ごと正規表現として飲み込んでしまいます。間違えるよりは、制限をはっきり書くほうがましだと考えています:正規表現の中に { } ( ) があると、インデントが不正確になることがあります。
演算子の周りの空白が補われないのはなぜですか?
a=b に空白を補うには、マイナスが単項か二項かを区別する必要があります(a - -b、i++、x=-1)。それも字句解析の範囲で、間違えればコードの意味が変わってしまいます。このツールはインデントだけを行うので、推測でコードを壊すことはありません。
コードの動作は変わりますか?
空白以外の文字は一切変更しません —— セミコロン、括弧、演算子、文字列の中身もそのままです。入力と出力から空白をすべて取り除いて比べれば、ご自分で確認できます。
コードは送信されますか?
いいえ。処理はすべてブラウザのメモリ内で完結し、ページはリクエストを一切送りません。オフラインでも使えます。

関連ツール