データ

JavaScript フォーマッター

圧縮されたバンドルは、名前を縮められた変数と剥ぎ取られた空白からなる一本の長い行です。配信には完璧でも、読むのは絶望的です。ベンダーのスクリプトを理解したいとき、サードパーティのウィジェットが何をするのか追いたいとき、あるいは貼り付けたコードをただ整えたいとき、この整形ツールが構造を組み直します。JavaScript を構文木に解析し、本物のインデント・改行・空白を付けて出力し直すので、一行に詰め込まれていたロジックが追える形になります。動作は同一で、変わるのは体裁だけです。インデント・クォート・セミコロンの流儀を選べて、すべてブラウザー内で完結します。

  • 圧縮や一行の JavaScript を、適切なインデントと改行のある読めるコードに展開
  • 解析済みの構文木から整形するので、コードの動作は以前とまったく同じで、見た目だけ明快に
  • インデント幅・折り返し幅・セミコロン・シングル/ダブルクォートを制御してプロジェクトに合わせる
  • 完全にブラウザー内で動作し、バンドル・ベンダースクリプト・非公開コードも端末から出ない
工具/JavaScript フォーマッター
整形エンジンを読み込み中
8%
Prettier エンジンは一度だけのダウンロードで、この訪問の間はキャッシュされます。
インデント
幅

概要

自分が書いていないコードや、バンドラーが潰したコードを理解するには、その構造を見ることから始まります。このツールはコードの動作を変えずに、その構造を取り戻します。

  1. 01

    パーサーベースの再整形

    JavaScript は出力前に構文木へ解析されるので、改行位置を推測するのではなく本物の構造から再整形します。だからインデント・ブロック・文の境界が常に正しい位置に収まります。

  2. 02

    一貫して決定的なスタイル

    インデント・空白・改行・括弧の位置は終始ひとつの規則に従います。同じ入力は常に同じ出力になり、読み・共有・diff に安定した結果です。

  3. 03

    プロジェクトに合うオプション

    2 スペース・4 スペース・タブを選び、折り返し幅を設定し、文をセミコロンで終えるか、文字列をシングルかダブルかを決めて、出力をコードベースの流儀に合わせます。

  4. 04

    最新構文に対応

    アロー関数・クラス・async/await・テンプレートリテラル・分割代入・オプショナルチェーンなどの最新 JavaScript はすべて、プレーンテキスト扱いではなく正しく解析・整形されます。

  5. 05

    行数とバイト数

    出力パネルには整形後のコードが何行に展開され、どれくらいの大きさかが表示され、元がどれだけ詰まっていたかの目安になります。

  6. 06

    コピー・ダウンロード・アップロード

    クリップボードから貼り付け、ディスクから .js ファイルを開き、整形済みコードをコピーしたり保存したりできます。すべて端末内で完結し、サーバーには届きません。

使い方

詰め込まれた読めないスクリプトを、整った一貫スタイルの JavaScript に数ステップで変えます。

  1. 01

    圧縮された、または雑然とした JavaScript を入力パネルに貼り付けるか、「アップロード」で .js ファイルを開きます。

  2. 02

    インデントの種類と折り返し幅を設定し、セミコロンとシングルクォートを使うか選びます。

  3. 03

    右側で整形されたコードを確認します。適切なインデントと文 1 行ずつで並び直され、オプションの変更に合わせて更新されます。

  4. 04

    結果をコピーするか .js ファイルとしてダウンロードし、エディターで開いて読む・デバッグする・作業を続けます。

詳細

整形結果を信頼でき、扱いやすくする細部です。

  • Prettier と Babel パーサーをベースに、パターンマッチではなく本物の構文木からコードを再整形します。
  • 入力やオプションの変更に合わせて即座に整形され、結果はその場で更新されます。
  • 構文エラーはその場でメッセージとともに報告され、半端な整形や空の出力にはなりません。
  • 入力も整形結果も完全な JavaScript シンタックスハイライト付きで、ライト・ダーク両テーマに対応します。
  • アップロードもログもありません。貼り付けたコードはブラウザー内に留まり、タブを閉じれば消えます。

活用シーン

詰め込まれた JavaScript を読めるコードに戻すことが効いてくる場面です。

  1. 圧縮バンドルを読む

    スクリプトの入手できる控えが圧縮済みの本番ファイルだけのとき、ここで整形すれば制御フローを追い、部品がどう組み合わさるか見えます。

  2. サードパーティのウィジェットを調べる

    解析スニペット・埋め込み・ベンダー SDK は圧縮で配信されます。整形すれば、サイトで信頼する前に何に触れるかをレビューできます。

  3. スタックトレースからデバッグ

    本番のエラーはしばしば一本の詰まった行を指します。そのファイルを整形すれば周囲のロジックが読め、本当の原因を見つけられます。

  4. 貼り付けた断片をそろえる

    ドキュメント・フォーラム・チャットからコピーしたコードはインデントやクォートがバラバラです。一度通せば自分のスタイルに揃います。

  5. コミット前の整理

    下書きをプロジェクトのインデント・クォート・セミコロンの流儀に整形してからレビューへ。一式のツールチェーンを組まずに済みます。

  6. 読みやすい例を共有する

    一貫して整形された断片は、チュートリアル・issue・プルリクエストで、場当たりな空白のものよりはるかに説明しやすくなります。

関連情報

読むのではなく配信する番なら、JavaScript 圧縮 が同じコードを逆向きに圧縮します。スタイルシートにはCSS フォーマッター が CSS を同じように読みやすく整えます。

整形と圧縮

整形と圧縮は同じコードを逆向きに動かし、どちらもエンジンが無視する文字だけを変えます。一方はコードを読みやすくする空白を戻し、もう一方はバイト節約のためそれを取り除きます。

  1. 整形は動作を変えない

    インデント・改行・空白は JavaScript エンジンには見えません。再整形は人にとっての見え方を整えるだけで、計算する内容は変えないので、整形済みスクリプトは元と同じように動きます。

  2. バンドルが読めない理由

    圧縮器は空白を剥ぎ、ローカル変数名を縮め、できるだけ少ない行に詰め込みます。結果は小さくダウンロードも速い一方、文の境界がすべて消えた密な一行になります。

  3. 元の名前は戻らない

    整形が戻すのはレイアウトであって、捨てられた意味ではありません。圧縮で a や b に改名された変数はそのままで、剥がれたコメントも戻りません。得られるのは読める構造で、作者の元ソースではありません。

  4. べき等でコミットに安全

    整形済みコードを再整形しても、まったく同じテキストになります。出力が決定的なので、保存ごとやコミットフックで実行しても、履歴にノイズだけの変更を作りません。

  5. 読むためのもので、実行しない

    整形ツールはテキストを並べ直すだけで、スクリプトを実行したり import を解決したり、実行時の挙動を追ったりはしません。コードを読みやすくして、判断はあなた自身に委ねます。

  6. 読むなら整形、配信なら圧縮

    読めるコードはエディターとリポジトリに、圧縮コードは本番に属します。このツールはその対の「読む」側で、圧縮器の鏡像です。

使い方のヒント

JavaScript の整形を活かしきる習慣です。

  • 整形ツールは見慣れない・詰まったコードの読みとレビューに使い、自分の読める元ソースは原本を正とします。
  • プロジェクトごとにインデント・クォート・セミコロンの流儀を 1 つに決めれば、整形済みファイル同士がきれいに diff できます。
  • 整形が戻すのはレイアウトだけだと忘れずに。圧縮された変数名や剥がれたコメントは戻りません。
  • 自分のコードベースには、エディターやコミットフックから整形を走らせれば、手で貼らなくてもファイルが揃います。
  • 整形したサードパーティスクリプトは「読む」手段として扱い、配信された版の安全な置き換えとはしないでください。

制限事項

このツールがすること、他の工程に委ねることです。

  • JavaScript の 1 つの断片を再整形します。コードの実行・import の解決・モジュールのバンドル・構文のトランスパイルは行いません。
  • 戻すのはレイアウトで、情報ではありません。圧縮された変数名は短いままで、剥がれたコメントは戻りません。
  • TypeScript 固有の構文や JSX は、ここの JavaScript パーサーの想定外です。それ用に設定したツールで整形してください。
  • 構文エラーは整形を止めて報告されるので、大きく壊れた入力が半端な出力を出すことはありません。

よくある質問

JavaScript の整形と、いつ使うかについてのよくある質問です。

整形するとコードの動作は変わりますか？

いいえ。空白・改行・一貫した間隔を足すだけで、いずれも JavaScript エンジンは無視します。文・式・ロジックはそのままなので、整形後のコードは貼り付けたものとまったく同じように動きます。

バンドルを元のソースへ逆圧縮できますか？

戻せるのは読めるレイアウトで、元のソースではありません。インデントと改行は戻りますが、圧縮で 1 文字に改名された変数はそのままで、剥がれたコメントも消えています。読んで追えるコードにはなりますが、作者が書いた内容のバイト単位の複製ではありません。

どんな整形オプションを制御できますか？

2 スペース・4 スペース・タブでインデントでき、折り返し幅を 80・100・120 に設定し、文をセミコロンで終えるか、文字列をシングルかダブルクォートにするかを選べます。

最新の JavaScript 構文に対応していますか？

はい。アロー関数・クラス・async/await・テンプレートリテラル・分割代入・スプレッド・オプショナルチェーンはすべて正しく解析・整形されます。ただし TypeScript と JSX はそれ用に設定したパーサーが必要で、ここでは対象外です。

サードパーティのスクリプトを通しても安全ですか？

整形は安全で、すべてブラウザー内で行われます。コードは実行されず、テキストとして並べ直されるだけです。結果はスクリプトを読み・監査する手段として扱い、元々配信されたファイルの検証済みの置き換えとはしないでください。

コードはどこかにアップロードされますか？

いいえ。すべてブラウザー内で動作します。貼り付けた JavaScript も開いたファイルもローカルで処理され、送信も保存もされず、タブを閉じれば消えるので、バンドルや非公開コードは端末内に留まります。

関連ツール

データと変換のツールキットの続きへどうぞ。