圧縮されたjsやcssのコードを元に戻す（Minify→Beautify）

圧縮（Minify）されたjsやcssを元に戻す方法

Webサイトを少しでも軽量・高速化するために、JavaScript（～.js）やCSS（～.css）などのファイルから無駄な文字列を削除するのがコード圧縮（Miniry）ですが、圧縮後のソースコードを編集するとなると見にくくてたまりません...。

そんな時は、以下のような方法でコードを圧縮前の状態に戻して見やすくできます。

こちら２つの方法をサクッとご案内します。
今回は例として圧縮された「jquery.min.js」のコードを元に戻してみました。

方法１．専用サイトでコードを圧縮前に戻す

まずオンラインサービス（サイト）を使ってコードを元に戻す方法。

ソースコードを圧縮したり、元に戻したりするオンラインサービスは無数にありますが、僕は「Pretty Diff」というサイト様がシンプルで使いやすいので、いつもこちらをメインに使わせてもらっています。至る所で紹介されている定番のサイトです。

上記のリンクからアクセスしたら後は簡単です。

１．サイト上部のタブで「Beautify」をクリック

サイトが開いたら、画面上部のタブで「Beautify」をクリックします。

２．コードをコピペして「Execute」ボタンを押す

あとは左側（Beautiry code sample）のところに圧縮されたコードを入力。
その後、下にある「Execute」ボタンを押せばOKです。

これだけで画面右側（Beautify output）に改行を含む見やすいコードを出力してくれます！あとは綺麗になったコードをコピペしてエディターなどで編集しましょう。

圧縮したいときは「Minify」を選んで「Execute」を押せば、そのソースコードを圧縮してくれます。便利すぎ・ｗ・

補足：Pretty Diffのツール画面のURLが変わった？

「Pretty Diff」のURLについて補足です。
該当ツールのURLが以前お気に入りに登録していたURLから変更されていました。

今までアクセスしていたURLが以下のはずですが、ホーム画面に飛びました。

https://prettydiff.com/?m=beautify

現在、ツール画面へのURLは以下に変更されているようです。

https://prettydiff.com/tool.xhtml

「Pretty Diff」のコード整形ツールを上の旧リンクのまま紹介しているところが多い様子なので、ご注意下さい。

「Pretty Diff」以外のコード整形ツール

上で紹介した「Pretty Diff」の他にも使いやすいWebサービスは結構あります。
日本語なら以下のサイト様が特におすすめです。

こちら、コードをコピペするだけで自動的に圧縮（Minify）したり美化（Beautify）してくれるので便利でした・ｗ・

方法２．Chromeでコードを圧縮前に戻す

続いてChromeを使って圧縮されたjsやcssのソースコードを元に戻す...というか確認する方法です。ChromeのデベロッパーツールにもBeautify機能が備わっています。

圧縮されたjsやcssを見やすいコードにして確認する方法は以下の通り。

１．Chromeのデベロッパーツールを開く

まずChromeのデベロッパーツールを起動しましょう。
サイトを開いて「右クリック」→「検証」を押すか、F12でも起動できます。

２．確認したいファイルを開く

デベロッパーツールが開いたら上部のタブで「Sources（ソース）」に移動。
続いて「.min.js」や「.css」という確認したいファイルまで辿ります。

３．「Pretty print」ボタンを押す

圧縮されたjsやcssが開いたら、コードの下にある

こんなアイコン、Pretty printボタンを押せばOK！

圧縮される前のコードが確認できた

するとChromeがBeautifyしたソースコードを表示してくれます。

まとめ

以上、圧縮されたjsやcssを圧縮前の綺麗な状態に戻す（確認する）方法でした。

JavascriptやCSSファイルは本番サイトなら圧縮したコードを使っていることが多いと思いますが、同じ手順でインライン化されたHTMLを元に戻すこともできます。

圧縮されたjsやcssのソースコードを見やすい形に戻す（Beautify）方法は簡単ですが、知らないとプログラミングエディターとか探してしまいそうな内容ですね～
ではではこのへんで・ｗ・