コードをオンラインで整形して読みやすく

形式を指定してコードを整形

各形式の専用ページで、その言語に合わせた詳しい使い方を紹介しています。

• JavaScriptを整形JavaScript
• CSSを整形CSS
• HTMLを整形HTML
• XMLを整形XML
• JSONを整形JSON

コードの圧縮とは？

開発者は、ほかの開発者にも読めるようにコードを書きます。コメントやインデントを入れ、ブロックの間に空行を置き、何が入っているか分かる変数名を付けます。こうした工夫は人間には役立ちますが、ブラウザーには必要ありません。コードの圧縮、いわゆるミニファイは、機械に不要な情報をビルド時に取り除く工程です。空白、改行、コメントに加え、多くの場合は元の変数名や関数名も1文字に置き換えます。プログラムの動作は変わらず、変わるのは見た目だけです。

効果は小さくありません。圧縮されたJavaScriptのバンドルは、元のコードより通常30〜70％ほど小さくなります。通信量が減り、初期表示が速くなり、Core Web Vitalsの改善にもつながります。ほとんどの本番サイトが圧縮済みのJS、CSS、HTMLを配信するのはそのためです。一方、サイトから取得したファイルは、誰にも読み解けないような長い1行になります。その内容を理解したり、不具合を調べたり、実際の動作を監査したりするには、まず読みやすく整形する必要があります。

このコード整形ツールでできること

LFUnminifyは、圧縮されたコードを読みやすい構造に整えます。インデントを復元し、文ごとに改行し、ブロックや演算子の間に適切な空白を加え、検出した言語に合った一貫した書式を適用します。4,000文字が1行に詰まったバンドルも、入れ子構造が分かる数百行のコードになり、スクロールや検索をしながら内容を理解できます。

内部では、多くのJavaScript開発チームが利用するフォーマッターPrettierを、ブラウザー内で直接実行しています。そのため、普段のエディターで通常のソースファイルを整形したときと同じような、なじみのある仕上がりになります。形式は自動検出されます。コードを貼り付けると、JavaScript、CSS、HTML、XML、JSONのどれかを判定してから、適切な形式で整形します。

ただし、できないこともあります。圧縮コードの整形は逆コンパイルではありません。コメントや元の変数名、開発者のメモはビルド時に削除されているため、どのツールでも復元できません。得られるのは、圧縮時の短い名前を残したまま、構造が分かりやすく読み進めやすいコードです。それでも実際には、処理の流れを追い、関数を探し、スクリプトが何をどこへ送っているかを確認するのに十分役立ちます。

対応するコード形式

一つのエディターで五つの言語に対応します。LFUnminifyは貼り付けた内容から言語を判定し、その構文専用のパーサーで解析します。メニューから形式を選ぶ必要はなく、拡張子が間違っているファイルでも内容に応じて処理します。

• JavaScript：ES6以降の構文、モジュール、非同期処理、JSXに対応。webpack、Vite、esbuild、Terserなどで生成されたバンドルの確認に便利です。
• CSS：新しい構文、カスタムプロパティ、メディアクエリー、入れ子のルールに対応。Tailwind、Sass、PostCSSで生成されたスタイルシートの確認に適しています。
• HTML：文書内のscriptやstyleブロックも、長い1行のまま残さず、マークアップと一緒に整形します。
• XML：サイトマップ、RSSフィード、SVGファイル、SOAPエンベロープ、改行のない設定ファイルなどに対応します。
• JSON：深く入れ子になったAPIレスポンス、パッケージのマニフェスト、設定ファイル、ログのペイロードなどに対応します。

コード整形が役立つ場面

圧縮コードを整形する理由は、単なる好奇心とは限りません。自分が書いていないコードや、自分で書いたものの読めなくなったコードについて、具体的な疑問に素早く答えるために役立ちます。

• 本番環境の不具合を調べるとき。スタックトレースがバンドルの1行目、24815列目を指していても、ファイルを整形すれば読みやすい行番号が付き、実際にエラーを発生させた関数を探しやすくなります。
• 外部スクリプトを監査するとき。アクセス解析タグ、チャットウィジェット、アフィリエイト用スクリプトをサイトに追加する前に整形すれば、収集する情報、接続するドメイン、ブラウザーのストレージに書き込む内容を確認できます。
• コンパイル済みスタイルシートを読むとき。ユーティリティ型フレームワークは、巨大な1行のCSSを出力します。整形すればカスケードを追い、どのルールが優先され、なぜ自分の指定が反映されないのかを調べられます。
• APIレスポンスを確認するとき。ネットワークタブからコピーしたJSONペイロードは、そのままでは読みにくいものです。整形すると、構造や入れ子の深さ、欠けているフィールドをすぐに把握できます。
• 実際のコードから学ぶとき。よく設計されたライブラリーが問題をどう解決しているか読むことは、上達への近道です。整形されたファイルなら、無理なく読み進められます。

LFUnminifyの使い方

コードを読み込む方法は三つあります。左側のパネルに直接貼り付けるか、「ファイルを選択」から端末内のファイルを開くか、入力欄へファイルをドラッグ＆ドロップしてください。公開サイトのファイルを調べる場合は、view-sourceやブラウザーの開発者ツールで開いてコピーし、ここに貼り付けます。.js、.css、.html、.xml、.jsonファイルとして保存し、「ファイルを選択」から開くこともできます。

整形は自動で始まるため、ボタンを探す必要はありません。入力が止まると、ツールが言語を判定し、右側のパネルに構文を色分けした結果を表示します。出力全体をワンクリックでクリップボードにコピーしたり、適切な名前のファイルとしてダウンロードして普段のエディターで開いたりできます。

長いファイルでは二つの機能が役立ちます。位置を正確に示したいときや、二つの版を比較したいときは、行番号を表示してください。この設定は次回の利用時にも引き継がれます。また、予想と異なる形式が検出された場合は、それ自体が手がかりになることもあります。JSONのつもりがJavaScriptとして認識されたファイルは、JSONPレスポンスや、代入文で包まれた設定データである場合があります。

コードが端末の外に出ることはありません

この点は明確にお伝えします。整形は、ページと一緒に読み込まれるJavaScriptを使って、ブラウザー内でローカルに実行されます。コードをアップロードしたり、サーバーの処理待ちに入れたり、データベースへ保存したり、ログに記録したりすることはありません。ページを読み込んだ後でネットワークを切断しても整形を続けられることが、外部に送信していない何より分かりやすい証拠です。

そのため、非公開のコード、社内向けバンドル、クライアントの案件、構造を外部に見せたくない設定ファイルも安心して貼り付けられます。貼り付けたり開いたりした内容がブラウザーの外に出ることはなく、ツールが代わりにファイルを取得することもありません。どのコードやサイトを調べているかが、当サービスのサーバーに伝わることもありません。アカウント登録は不要で、入力内容の追跡も行いません。

LFUnminifyが無料で使える理由

LFUnminifyは、Ludovic Frankが開発する無料ツール群の一つです。ほかにも、パスワード生成、ファビコン作成、配色パレット作成などのツールがあります。開発者が週に何度も使う小さな道具に、登録フォームや大量の広告、利用回数の制限は必要ないと考えています。このツールには、アカウントも利用枠も、有料プランへの誘導もありません。

これらのツールは、実際の開発力を見ていただくための場でもあります。どれもクライアント案件と同じように開発・保守している本物のアプリケーションであり、ポートフォリオの説明以上に私たちの仕事を伝えます。オーダーメイドのWeb開発、テンプレートでは対応できないアプリケーション、技術相談が必要な場合は、フッターのリンクからお問い合わせください。

よくある質問