JavaScript整形ツールの使い方 - コードを美しく整える方法

minify（圧縮）されたJavaScriptコードや、他の開発者が書いたフォーマットの異なるコードを読む必要がある場面は多くあります。JavaScript整形ツールを使えば、一瞬で読みやすいコードに変換できます。この記事では、コード整形の重要性からスタイルガイドの選び方、自動整形ツールとの違いまで詳しく解説します。

コード整形の重要性

コードの整形（フォーマッティング）は、プログラムの動作に直接影響しませんが、開発効率とコード品質に大きく関わります。整形されたコードには以下のメリットがあります。

可読性の向上：インデントと改行により、コードの構造が一目で把握できます。特にネストの深い条件分岐やコールバック関数で効果を発揮します。

バグの早期発見：整形されたコードでは、閉じ括弧の不一致やセミコロンの欠落などの構文エラーを見つけやすくなります。

チーム開発の効率化：統一されたスタイルにより、コードレビューがスムーズになり、Git diffの不要な変更を減らせます。

整形前後の比較

整形前（minified）

function fetchData(url,opts){return fetch(url,{method:opts.method||"GET",headers:{"Content-Type":"application/json",...opts.headers},body:opts.body?JSON.stringify(opts.body):null}).then(r=>{if(!r.ok)throw new Error("HTTP "+r.status);return r.json()}).catch(e=>{console.error("Fetch error:",e);throw e})}

整形後（beautified）

function fetchData(url, opts) {
  return fetch(url, {
    method: opts.method || "GET",
    headers: {
      "Content-Type": "application/json",
      ...opts.headers,
    },
    body: opts.body ? JSON.stringify(opts.body) : null,
  })
    .then((r) => {
      if (!r.ok) throw new Error("HTTP " + r.status);
      return r.json();
    })
    .catch((e) => {
      console.error("Fetch error:", e);
      throw e;
    });
}

セミコロン・インデントのスタイル

JavaScriptのコーディングスタイルにはいくつかの流派があります。主要なスタイルガイドを比較してみましょう。

項目	Airbnb	Standard	Google
セミコロン	あり	なし	あり
インデント	スペース2	スペース2	スペース2
クォート	シングル	シングル	シングル
末尾カンマ	あり	なし	あり
人気度	非常に高い	高い	高い

ESLint/Prettierとの違い

ツール	種類	主な機能	使い分け
オンライン整形ツール	Webツール	インストール不要で即座に整形	単発の整形、圧縮コードの確認
Prettier	コードフォーマッター	コードの整形（スタイル統一）	プロジェクトの継続的な整形
ESLint	リンター	コード品質のチェック+一部整形	バグ検出、ベストプラクティスの適用

おすすめ：プロジェクトではPrettier（整形）+ ESLint（品質チェック）を併用するのが主流です。単発でコードを整形したい場合はオンラインツールが便利です。

よくある質問

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

通常は変わりません。整形は空白・改行・インデントの調整のみで、ロジックには影響しません。ただしASI（自動セミコロン挿入）に依存したコードで改行位置が変わると稀に動作が変わる可能性があるため、整形後はテストを実行することをお勧めします。

minify（圧縮）されたコードを元に戻せますか？

整形ツールで読みやすくすることは可能です。ただし、変数名が短縮（a, b, c等）されている場合は元の意味のある名前に戻すことはできません。ソースマップ(.map)がある場合はブラウザのDevToolsで元のコードを確認できます。

TypeScriptも整形できますか？

多くのJavaScript整形ツールはTypeScriptにも対応しています。型注釈やインターフェース定義を含むコードも適切に整形されます。Prettierは公式にTypeScriptをサポートしています。