JS Beautifier

How to Use the JS Beautifier

This free online JS Beautifier reformats messy or minified JavaScript (and JSON) with consistent line breaks and indentation. Paste your code, pick 2-space or 4-space indentation, and click "整形" (Format). The tool never touches the inside of string literals or comments, so your code's actual content is preserved exactly — only whitespace, line breaks, and indentation change.

Features

• Token-based reformatting with selectable 2-space or 4-space indentation
• String literals (single, double, template) and comments (//, /* */) are copied verbatim — never parsed or altered
• Braces { and brackets [ drive indentation; parentheses stay inline so function calls and arguments are not needlessly split
• Works for JSON too, since JSON is a subset of JavaScript object/array literal syntax
• Runs 100% in your browser — no code is ever uploaded

What This Beautifier Is (and Isn't)

This is a lightweight, dependency-free beautifier: it tokenizes the input into strings, comments, and structural characters, then rebuilds line breaks and indentation from the nesting of {/} and [/]. It is not a full parser or an AST-based tool like Prettier or ESLint — it does not validate syntax, rename variables, or enforce a strict style guide. What it guarantees is the one thing that matters most for safety: it never rewrites the inside of a string or a comment, so pasting production code carries no risk of corrupting embedded data such as URLs, regular expressions written as strings, or multi-line template text.

JS Beautifierの使い方

1行に圧縮されたJavaScriptや、インデントが崩れたコードを入力欄に貼り付け、インデント幅(2または4スペース)を選んで「整形」を押すと、改行と字下げが自動で付け直されます。文字列リテラル('...' / "..." / `...`)とコメント(// / /* */)の中身は一切解析せずそのまま出力するため、URLや正規表現風の文字列などが壊れる心配はありません。

整形の基準は { と [ の入れ子の深さで、丸括弧 ( ) はインデントの計算にのみ関与し、改行は強制しません。そのため array.map((x) => { のような書き方でも、関数呼び出し部分は1行に保たれつつ、その中の処理ブロックだけが正しくインデントされます。

制限事項

• ASTベースの本格的なパーサーではないため、Prettierのような厳密なスタイル統一(演算子前後の空白ルールなど)は行いません。
• 構文チェッカーではなく、壊れたJavaScriptもエラーにせずそのままの構造で整形します。
• 正規表現リテラル専用の解析は行わないため、まれに /* を含む正規表現がブロックコメントと誤認される可能性があります。

実務での活用例

1. 圧縮・難読化されていないminifyコードを読める形に戻す

本番ビルドの中には難読化まではされていないものの、1行に圧縮された(minifyされた)JavaScriptが混ざっていることがあります。ブラウザの「ソースを表示」や DevTools からコピーしたコードを本ツールに貼り付ければ、ネスト構造を目で追える形に戻せます。より高度な逆難読化が必要な場合はブラウザの DevTools 内蔵Pretty-printも検討してください。

2. コードレビュー前のインデント統一

Slackやチケットに貼られた断片的なコードスニペットは、インデントがタブ・2スペース・4スペースで混在しがちです。レビューコメントに引用する前に本ツールで整形しておくと、差分がインデントの違いだけで埋もれるのを防げます。

3. APIレスポンスのJSONを素早く可読化

curlやログから取得したJSON断片を、専用の検証機能なしにサッと整形したいときにも使えます。厳密な検証やスキーマチェックが必要な場合は JSON Formatter & Validator を使ってください。

よくあるエラーと対処 / Common Errors and Fixes

整形結果が期待通りにならない場合によくある原因と対処法です。

Common reasons the formatted output looks off, and how to fix them.

言語別コード例 / Code Examples by Language

同等の整形をローカル環境で再現する場合の代表的なツールです。

Common tools to reproduce equivalent formatting in your own environment.

Node.js (Prettier)

npx prettier --parser babel --write app.js
// または / or programmatically
import * as prettier from "prettier";
const pretty = await prettier.format(code, { parser: "babel", tabWidth: 2 });

Python (jsbeautifier パッケージ)

pip install jsbeautifier
python -m jsbeautifier --indent-size 2 app.js

VS Code

// コマンドパレット / Command Palette
Format Document (Shift+Alt+F on Windows, Shift+Option+F on Mac)

Before / After 実例 / Before & After

1行に圧縮されたコードを整形 / Reformat a single-line function

function greet(name,age){const message="Hello, "+name+"!";if(age>=20){console.log(message,"adult");}else{console.log(message,"minor");}return{name:name,age:age};}

↓ 整形(2スペース)

function greet(name, age) {
  const message="Hello, "+name+"!";
  if(age>=20) {
    console.log(message, "adult");
  } else {
    console.log(message, "minor");
  }
  return {
    name: name,
    age: age
  };
}

= や + など演算子前後の空白は入力のまま保持されます(, と : の後、{ の前のみ自動でスペースを補います)。

Spacing around operators like = and + is preserved as-is from the input — only the space after ,/: and before { is inserted automatically.

Why browser-only? / なぜブラウザ完結か

JavaScript snippets pasted into a formatter are often production code — API client logic with embedded endpoint URLs, feature-flag conditions that reveal unreleased features, or business logic a company would rather not disclose. A server-side beautifier receives all of that in its request body and, typically, its access logs. This tool tokenizes and reformats code entirely with client-side JavaScript running in your browser tab. No network request is made when you click "Format" — verify it yourself in DevTools → Network — and the page keeps working offline once loaded.

整形にかけるJavaScriptは、APIエンドポイントのURLや未公開機能のフラグ条件など、社外に出したくない本番コードであることが少なくありません。サーバ型の整形ツールはそれらをリクエストボディとして受け取り、多くはアクセスログにも残ります。本ツールはトークン解析と整形の全工程をブラウザ内のJavaScriptだけで実行し、ネットワーク通信を一切行いません。DevToolsのNetworkタブが空のままであることで、誰でもその場で検証できます。