Web Tools Collection

JavaScript Beautifier

入力

使い方

このJavaScript Beautifierは、読みにくいJavaScriptコードを整形し、可読性の高いコードに変換します。

主な機能：

  • 適切なインデントの自動追加
  • 一貫したスペースと改行の適用
  • コードの構造化と整理
  • 長い行の自動折り返し

使用方法：

  • テキストエリアにJavaScriptコードを入力または貼り付け
  • 「整形する」ボタンをクリック
  • 整形されたコードが表示されます
  • 「コピー」ボタンで整形されたコードをクリップボードにコピー

JavaScript Beautifierとは

JavaScript Beautifier（JSビューティファイアー）は、圧縮・難読化されたJavaScriptコードを読みやすい形式に整形する無料ツールです。ミニファイされたライブラリのデバッグ、他者のコードの解読、コードレビューなど、様々な開発シーンで活躍します。

整形前（ミニファイ済み）

function add(a,b){return a+b;}const result=add(1,2);console.log(result);

整形後（読みやすい）

function add(a, b) {
  return a + b;
}
const result = add(1, 2);
console.log(result);

よくある質問（FAQ）

TypeScriptやJSXにも使えますか？

本ツールはJavaScript（ES5/ES6+）の整形に最適化されています。TypeScript（.ts/.tsx）やJSX（.jsx）も基本的なインデント・改行は整形できますが、型アノテーション（`: string`）やJSX構文（`<Component prop="value" />`）で予期しない改行になることがあります。これらの言語専用には Prettier の使用を推奨します。Prettier は VS Code に統合されており、保存時自動整形が可能です。

インデントのサイズは変更できますか？

本ツールは2スペースインデントで固定です。4スペースやタブが必要な場合は、整形結果をエディタにコピーしてエディタ側の「インデント変換」機能（VS Code の "Convert Indentation to Tabs"）を使うのが効率的です。チームで統一する場合は `.editorconfig` ファイルで `indent_style` `indent_size` を指定するのが標準的なプラクティスです。

BeautifyとPrettifyの違いは何ですか？

基本的に同じ意味で使われ、両方とも「コードを人間に読みやすい形に整形する」処理を指します。Beautify（美化）、Prettify（整形）、Format（フォーマット）の3つの言葉はほぼ同義で、ツール名やコマンド名の違いに過ぎません。Prettier は人気の整形ツールで、JavaScript / TypeScript / CSS / JSON / Markdown / Yaml など多言語対応します。

コードは外部に送信されますか？

いいえ、本ツールは js-beautify ライブラリを使ってすべての処理をブラウザ内で完結させます。入力したJavaScriptコードがst0z.comのサーバーや第三者に送信されることはなく、社外秘のフロントエンドコード、未公開のロジック、APIキーを含むコードも安全に整形できます。

minify（圧縮）されたJSも整形できますか？

はい、UglifyJSやTerserで圧縮された一行JS（minified JS）も読みやすい形に展開できます。例えば `function(a,b){return a+b}` のような圧縮コードを、複数行にインデントされた形式に戻せます。本番環境のWebサイトの調査・デバッグや、難読化されていないライブラリのコード解析に便利です。

コメントは保持されますか？

はい、シングルラインコメント（`// comment`）とマルチラインコメント（`/* comment */`）の両方が保持されます。コメントの位置はコードの論理的な位置に応じて再配置されることがあります。重要なコメント（ライセンス情報、JSDoc コメント `/** ... */`）は整形後に必ず確認してください。

ESLintやPrettierとの違いは？

ESLint はコードの品質チェック（スタイルだけでなく潜在的バグも検出）、Prettier は整形に特化、本ツールは Prettier 同様に整形のみ行います。プロジェクトでは Prettier + ESLint の組合せが標準で、本ツールは「素早くワンショットで整形したい」「Webブラウザだけで完結させたい」用途向きです。CI/CDパイプラインでは ESLint + Prettier をご利用ください。

整形後のJSはそのまま実行できますか？

はい、整形（インデント・改行追加）はJSの動作を変更しません。整形前後のコードは機能的に等価です。ただし注意点として、(1) JavaScriptの自動セミコロン挿入（ASI）に依存したコードは、整形により改行位置が変わると挙動が変わる可能性があります（特に return文の後の改行）、(2) Tagged Template Literalの改行は意味を持ちます。整形後はテストで動作確認を推奨します。

関連ブログ記事

JavaScript整形ツールの使い方