先日、仕事でとあるjQueryプラグインを実装する機会がありました。その時に、そのプラグインのカスタマイズが必要になったんですが、どうもコアファイルをいじらないと対応できないような様子。で、プラグインの本体ファイル(jsファイル)を開いてみるんですが、minify化されてて改行されてないし、読みづらい…。

そこで、カスタマイズしたいコードを検索掛けてみると該当語句が6箇所もある。「あぁ、これは解読していかないと分からないわ…。」と。ただ、改行のないスクリプトを読んでいくのって難儀な作業で。特に人の書いたコードならなおさら。場合によっては意味が分からないこともあります。。

どうにか改行をうまく改行を入れてくれるツールってないのか、と思い探してみるんですが、あるんですね、そういうの。ということで、その時に見つけたツールをご紹介。というよりも個人的な備忘録。

圧縮・縮小されたファイルを読みやすくするツール

CSSファイル

styleneat
アップロード、URL指定、直接入力に対応。整形後のコードはファイルとしてダウンロードも出来るし、コピーも可能。今回ご紹介するツールでは一番使いやすかったです。
Code Beautifier
URL指定、直接入力に対応。試してみたところ、整形後のコードを勝手に最適化(例えば#f00→redとか)してくれましたが、ちょっとそれは迷惑…。ということで、これを停止させる場合は入力フォーム右の「compress colors」のチェックを外します。ただ、整形後のコードのコピーがうまくいかなかった。。
Clean CSS

Javascriptファイル

Online JavaScript beautifier
インデント幅やifの後のスペースなど、コードの整形オプション付き。可読性を上げたい場合に。
JavaScript Beautifier
こちらは設定とかは何にもなく、ただコードを入力して「Beautify」ボタンを押すだけで整形。サクッと整形したい場合に。

これ系のツールって、あまり使ったことがなかったので調べてみたんですが、結構な数があるんですよね。色々と試してみましたが、どのツールもおおよそ機能は一緒なので、上記2つづつに絞りました。