ツール
入力
結果
結果はここに表示されます。圧縮されたバンドル、バグ報告に貼られた 1 行のスニペット、DevTools からコピーしたスクリプト。どれを理解するにも、まず読める JavaScript にすることが第一歩です。このツールは、beautifier.io や数多くのエディタープラグインの背後にある整形ツール js-beautify を実行します。js-beautify はプログラム全体を理解しなくても、トークン単位でコードをインデントし直します。そのため、完全なパーサーなら拒否するような断片や、少し壊れたコードにも対応でき、JavaScript と同じように JSON も整形できます。
動作のしくみ
- 波かっこのスタイルは js-beautify 自身のものに対応しています。同じ行、同じ行で短いブロックはインラインのまま、すべての波かっこを独立した行に（Allman）、または else と catch を新しい行へ移す、の 4 つです。
- ブロック間に入れた空行は保持され、連続する空行は 1 つにまとめられます。オフにすることもできます。
- 整形で戻るのはレイアウトであって名前ではありません。圧縮で e になった変数は e のままです。
- 入力は検証されないため、構文エラーは報告されず、ほかの部分と一緒に整形されます。
データの行き先
どこにも行きません。このツールは完全にブラウザ内で動作します。貼り付けたテキストはページが処理し、サーバーに送信されることも、ログに記録されることもありません。
このツールは無料で登録不要です。結果は開いているページの中にだけあり、どこにも保存されません。
必要なポイント
このツールは無料です。ログインもポイントも必要ありません。
よくある質問
- 圧縮された本番コードを元のコードに戻せますか？
- 戻せるのはレイアウトだけです。ミニファイアはローカル変数の名前を変えてコメントを削除するため、その情報はファイルから完全に失われています。サイトがソースマップを配信していれば、ブラウザの DevTools で圧縮コードを元のソースに対応付けられます。名前を取り戻す現実的な方法はそれしかありません。
- js-beautify と Prettier、どちらを使うべきですか？
- Prettier はコードを完全にパースしてから出力し直し、1 つの統一されたスタイルを強制します。リポジトリ内ではそれが望ましい挙動です。js-beautify は空白とインデントを調整するだけなので、Prettier がパースを拒否するような断片も含め、コミットしないコードをさっと読むのに向いています。
- TypeScript や JSX も扱えますか？
- 確実には扱えません。js-beautify が理解するのは JavaScript で、TypeScript の多くはほぼ偶然うまく処理できますが、型注釈、ジェネリクス、JSX タグはおかしなインデントになることがあります。どちらも正しくパースできる Prettier のほうが適しています。
背後にあるオープンソース
このツールは beautifier/js-beautify（MIT）の上で動作しています。同じ処理を自分のプログラムに組み込みたい場合は、そのライブラリを使ってください。
beautifier/js-beautify別の呼び方
- javascript 整形
- js beautify オンライン
- javascript 難読化 解除 整形
- javascript フォーマッター
- js コード 整形
- javascript 見やすく