JavaScript のインデント整形
整形処理はすべてブラウザ内で完結します。データは送信されません
1行に圧縮された JavaScript を、波括弧とセミコロンを手がかりに組み直します:ブロックは1段ずつ深くインデントし、文はそれぞれ別の行に、} else { はひとまとまりのまま、短いオブジェクトリテラルは同じ行に残します。このツールはインデントだけを行い、構文解析はしません —— 正規表現リテラルの中の括弧やテンプレート文字列の中の式は構造判断に加わらないため、その種の書き方では結果が正確でないことがあります。文字列とコメントの中身はそのまま運び、空白以外の文字は一切変更しません。セミコロンの挿入も削除もしません。
機能
- 波括弧の階層でインデントし、} は対応する階層に戻します
- セミコロンで改行。for (;;) の中のセミコロンは区切りなので改行しません
- } else {、} catch {、} finally { は同じ行のまま
- オブジェクトリテラルは1行のまま(中にセミコロンがなく長くない場合)。コードブロックは展開します
- クラス本体は必ず複数行に展開します
- 文字列・テンプレート文字列(入れ子のテンプレートと ${} 式を含む)・コメントの中身はそのまま保持します
- 行コメントの後は必ず改行し、後続のコードがコメントに飲み込まれないようにします
- 空白を補うのは文法上曖昧さがない位置だけ:カンマの後ろ、制御キーワードと括弧の間
- 演算子の周りの空白はそのまま。セミコロンの挿入も削除もしません
- 既知の制限:字句解析をしないため、正規表現リテラルの中の括弧を構造の括弧として扱います
使い方
- JavaScript を入力欄に貼り付けます
- インデントの幅を選びます
- Ctrl/⌘ + Enter を押すか「実行」をクリックします
- 「コピー」で結果を取り出せます
よくある質問
- 正規表現リテラルで結果がずれるのはなぜですか?
- スラッシュが除算記号なのか正規表現の開始なのかを判別するには、単項と二項の演算子まで含めた字句解析の仕組みが要ります。間違えると後ろのコードを丸ごと正規表現として飲み込んでしまいます。間違えるよりは、制限をはっきり書くほうがましだと考えています:正規表現の中に { } ( ) があると、インデントが不正確になることがあります。
- 演算子の周りの空白が補われないのはなぜですか?
- a=b に空白を補うには、マイナスが単項か二項かを区別する必要があります(a - -b、i++、x=-1)。それも字句解析の範囲で、間違えればコードの意味が変わってしまいます。このツールはインデントだけを行うので、推測でコードを壊すことはありません。
- コードの動作は変わりますか?
- 空白以外の文字は一切変更しません —— セミコロン、括弧、演算子、文字列の中身もそのままです。入力と出力から空白をすべて取り除いて比べれば、ご自分で確認できます。
- コードは送信されますか?
- いいえ。処理はすべてブラウザのメモリ内で完結し、ページはリクエストを一切送りません。オフラインでも使えます。
関連ツール
CSS 整形
整形CSS をオンラインで整形・圧縮:ルールブロックを展開し、宣言は1行ずつ、セレクタのリストは1項目ずつ改行。圧縮は構造上の空白だけを削除します。
JSON 整形
整形JSON をオンラインで整形・圧縮し、構文エラーは行・列まで特定。キー名の再帰的な並べ替えにも対応。解析はすべてブラウザ内で行い、送信しません。
JSON → コード
整形JSON サンプルから TypeScript interface、Go struct、Java class、Rust struct を生成。欠けたキーは任意に、型の衝突は共用型に。すべてブラウザ内で処理します。
SQL 整形
整形SQL をオンラインで整形:キーワードの大文字小文字を統一し、SELECT / FROM / WHERE などの句ごとに改行。圧縮は余分な空白とコメントを削除します。
XML 整形
整形XML をオンラインで整形・圧縮:タグの階層ごとにインデントし、コメント・CDATA・DOCTYPE はそれぞれ別の行に。属性値の中の空白はそのまま保持します。
HTML 整形
整形HTML をオンラインで整形・圧縮:タグの階層ごとにインデントし、テキストとインライン要素は同じ行のまま。script と pre の中身はそのまま保持します。