JavaScriptフォーマッター・圧縮ツール

JavaScript整形とは？

主な機能

サンプル

function add(a,b){return a+b}const doubled=[1,2,3].map(x=>x*2);console.log(doubled)

async function load(id){const r=await fetch(`/api/${id}`);if(!r.ok)throw new Error('bad');return r.json()}

const cfg={retries:3,timeout:5000,headers:{'Content-Type':'application/json'},onError(e){console.warn(e)}}

class Counter{#n=0;inc(){this.#n++}get value(){return this.#n}}

よくある使用場面

圧縮コードの解読

圧縮または難読化されたスクリプトを美化して、理解してデバッグできる状態にします。

コードレビュー

プルリクエスト前にJavaScriptを整形し、一貫した差分を確認できるコードにします。

軽量なバンドル配信

本番用JavaScriptをTerserで圧縮してバイト数を削減し、読み込みを高速化します。

スニペットの整理

コンソールやGistからコピーしたコードを整形して、きれいで読みやすいコードにします。

技術的詳細

js-beautifyによる美化

実績のあるjs-beautifyエンジンを使用し、予測可能で設定可能なインデントとスペースを提供します。

Terserによる圧縮

TerserはデファクトスタンダードのJavaScript圧縮ツールで、ローカル変数をリネームし、デッドコードを削除し、動作を保持しながらコメントを取り除きます。

ブラウザベース

完全にクライアントサイドで動作し、コードが端末外に出たりサーバーに送られたりすることはありません。

ベストプラクティス

ソースは整形、本番は圧縮

リポジトリには可読性の高いコードを保持し、ビルド時にTerserで圧縮します。

新しい構文の圧縮は慎重に

Terserは標準JavaScriptを対象とします。非常に新しいプロポーザルは圧縮前にトランスパイルが必要な場合があります。

圧縮済み出力を手編集しない

リネームされた変数は圧縮済みコードのメンテナンスを困難にします — ソースを編集してから再圧縮してください。

よくある質問