JavaScriptをオンラインで整形
圧縮された.jsファイル、webpackのバンドル、1行のコードを貼り付けると、右側のパネルにインデントされたJavaScriptが表示されます。Prettierがブラウザー内で整形するため、コードが外部に送信されることはありません。
JavaScriptが読みにくくなる理由
現在のビルド処理では、配信前にJavaScriptを圧縮するのが一般的です。Terser、esbuild、SWCなどのツールは、空白やコメントを削除し、ローカル変数や関数の名前を1文字に短縮し、入れ子のブロックを連結した式にまとめ、アプリケーション全体を一つか二つのファイルに統合します。読みやすいソースファイル300個から始まったReactアプリも、ブラウザーに届くときには数百KBの長い1行になっています。動作は正常でも、読もうとすると構造の手がかりがない文字の塊に見えてしまいます。
整形によって取り戻せるもの
バンドルを整形すると、コードを読み進めるための構造が戻ります。文がそれぞれ独立した行に分かれ、1行目の24815列目を指していたスタックトレースの周辺も探しやすくなります。入れ子が見えるようになり、関数の開始と終了、条件による分岐、コールバックの連なりを追えます。文字列、URL、エンドポイント名も見つけやすくなるため、自分のコードのデバッグだけでなく、外部スクリプトの監査にも便利です。
新しいJavaScript構文にも対応
このフォーマッターは、古い構文の一部だけでなく、現在のJavaScriptを解析します。アロー関数、クラス、asyncとawait、ジェネレーター、オプショナルチェーン、Null合体演算子、テンプレートリテラル、分割代入、スプレッド構文、動的インポート、ESモジュールを適切に整形します。変換されずに残ったReactコンポーネントを読む際に役立つJSXにも対応しています。Prettierを使用しているため、普段のエディターが適用するものと同じ書式で出力されます。
できることには限界があります
圧縮コードの整形は、元の実装を完全に復元する作業ではありません。コメントは削除され、変数名は変更されているため、現在nという名前の変数が以前remainingRetriesだったと推測することはできません。プロジェクトがソースマップを公開している場合は、ブラウザーの開発者ツールで読み込んでください。それが本来のソースに戻るための方法です。また、単に圧縮されたのではなく意図的に難読化されたファイルでは、構造が読みやすくなっても、処理の意図まで明確になるとは限りません。
よくある質問
webpackやViteのバンドルも整形できますか？
はい。バンドルを貼り付けるか、「ファイルを選択」で開くと、ほかのJavaScriptファイルと同様に整形できます。大きなバンドルは端末内で処理するため数秒かかることがありますが、インデントによってモジュールの構造を確認しやすくなります。
JavaScriptの難読化を解除できますか？
難読化されたコードを整形して読みやすくすることはできますが、難読化そのものは解除しません。エンコードされた文字列、人工的な制御フロー、意図的に追加された不要なコードはそのまま残ります。
整形によってコードが壊れることはありますか？
フォーマッターはプログラムの動作を保つように処理しますが、空白以外にも変更が加わる場合があります。適用するルールに応じて、引用符、セミコロン、括弧などが変わることがあります。元のファイルを残し、出力を確認してください。整形後のコードを実行したりプロジェクトに組み込んだりする場合は、そのプロジェクトで通常行う検証を実施してください。