JavaScript整形
スクリプトをインデントして読みやすくします。すべてブラウザ内で処理され、あなたが書いた改行を削除することはありません。
すべてブラウザ内で動作します。アップロード、記録、保存は一切行いません。
圧縮された、またはインデントの崩れたスクリプトを貼り付けて、きちんと読める形にしましょう。整形はブラウザ内で行われ、空白以外は何も変更しません。
仕組み
スクリプトをコメント、文字列、テンプレートリテラル、正規表現、数値、名前、演算子、括弧、波括弧といった部品に分けてから書き直します。ブロックには専用の行と1段階のインデントが、文には1行が、複数行にわたるオブジェクトリテラルには1行に1項目が割り当てられます。
あなたが書いた改行は決して削除しません。ほかのすべてはこのルールから導かれます。JavaScriptでは行末が文の終わりになることがあり（自動セミコロン挿入）、2行を1行にまとめるとプログラムの動作が変わったり、解析できなくなったりします。改行は追加するだけです。ブロックの波括弧の前後、文のセミコロンの後、オブジェクトの項目の間、閉じ波括弧と次の文を始める単語の間です。どれも意味を変えることはありません。
ソースコードで文の途中で改行されている行（メソッドチェーン、長い条件、条件演算子の分岐）は、上の行より1段階深くインデントされ、その続きとして読めるようにします。
例
| ケース | 入力 | 結果 |
|---|---|---|
| 1行で書かれた関数 | function add(a,b){const total=a+b;return total} | function add(a, b) { const total = a + b; return total } |
よくある質問
コードはどこかに送信されますか？
いいえ。整形ツールはこのページ上で動くJavaScriptです。アップロードも記録も保存もされません。ネットワークを切断してもツールは動き続けます。
書き忘れたセミコロンを追加してくれますか？
いいえ。書かれていないセミコロンは、書いてはいけないセミコロンであることもあり、それを見分けるにはレイアウト処理ではなくパーサーが必要です。整形ツールはこの問題には手を出しません。セミコロンを追加することも改行を削除することも決してないので、セミコロンなしで書かれたコードもまったく同じように動き続けます。
圧縮（minify）もできますか？
いいえ。これは見落としではなく判断です。圧縮とは、名前の変更、書き換え、どの改行に意味があるかの判断を行うことです。このツールはまさにその3つの判断をしないために存在します。どれか1つでも間違えるとプログラムが壊れ、それは本番環境で初めてわかる形で起こります。
TypeScriptやJSXに対応していますか？
部分的に、そして正直に対応しています。どちらもトークンとして読むので何も失われず、括弧や波括弧のネストも保たれますが、型注釈やタグはレイアウト処理がその形を知っているものではありません。慣用的な結果よりも、無難な結果を期待してください。
スクリプトが正しいかどうか教えてくれますか？
いいえ。文法を持たないので、できません。コードの部品がどこで終わり次がどこから始まるかはわかりますが、それはファイルをレイアウトするには十分でも、正しさを判断するには不十分です。まったく読めないファイル（閉じられていない文字列、コメント、テンプレートリテラル）は、もっともらしい形に整形せずに受け付けません。
知っておきたいこと
- 出力には、入力に含まれていた部品がそのまま含まれます。何も追加せず、何も削除せず、何も並べ替えません。動かすのは部品の間の空白だけです。
- スラッシュは除算か正規表現の始まりのどちらかで、文法なしにどちらかを確実に見分けられるトークナイザーはありません。このツールは直前のトークンから判断し、改行をまたぐことになるリテラルは除算として読みます。正規表現には改行を含められないからです。推測を誤っても見た目が冗長になるだけで、それ以上の害はありません。すべての部品は書かれたとおりにコピーされるからです。
- テンプレートリテラルは、バッククォートからバッククォートまで1文字ずつそのまま戻されます。その中の空白はページに表示されるテキストそのものなので、整形ツールが触ってよい空白ではありません。
- レイアウトは決定的です。同じスクリプトに同じオプションを指定すれば常に同じ出力になり、整形済みのスクリプトを整形しても何も変わりません。