コーダーの方であればコーディングしている時に、別の人が書いたソースコードを編集したりする機会があるかと思います。
そんな時に、コーディング規則が無くインデントやスペースが滅茶苦茶なコードに出会うこともあります。
残念ながら仕事として受けてしまった以上は、今後コードの保守作業を頼まれる可能性もありますので、まずは読みやすいようにコードを整形する必要があります。
「Gulp」「Grunt」などを使えばコードの整形はある程度可能ですが、Node.jsの知識が必要ですし、そもそも対応していないプロジェクトにタスクランナーを導入することは慎重になった方が良いでしょう。
そこで、1ファイル単位でHTML・CSS・JavaScriptなどのソースコードを簡単に整形できて、オプションも選べるツールを紹介をしていきたいと思います。
HTML整形ツール
「HTML整形ツール」はHTMLのソースのインデントを綺麗に調節 (タブ、0~3スペース) したり、ソースコードの圧縮も自動的に行ってくれるサービスです。
また、既存の改行を維持する機能も備えているので、様々な状況で役立つことが期待できます。
ちなみに、ソースコードの整形はサーバーサイドではなく、フロントエンドで行っているのでセキュリティの面でも安心して使うことができます。
CSS整形ツール
「CSS整形ツール」はCSSのインデント (タブ、0~3スペース) や圧縮などの自動調節だけでなく、セレクタ間の改行 (例：h1, h2)、ルール間の改行 (例：.class_a{} .class_b{}) などのオプションも備えられているサービスです。
CSSはコーディングルールが定められていないとコードが非常に読みにくくなるので、これらの機能を駆使することでコードの視認性を上げて作業の効率化が図れます。
JavaScript整形ツール
「JavaScript整形ツール」も他のツールと同様に、インデント (タブ、0~3スペース) とソースコードの圧縮や既存の改行を保持する機能やオプションなどが備えられています。
JavaScriptを整形する機会はあまりないかもしれませんが、ソースをminify化するなどの圧縮・軽量化が必要な場面で使うのも良いかもしれません。
JSON整形ツール
「JSON整形ツール」はJSONデータを綺麗に整形してくれるサービスです。
このサービスもインデント (タブ、2~3スペース) と圧縮を自動で行う機能が備えられているのと、リアルタイムの構文チェックがついているのでデータのエラー箇所を直ぐに確かめることができます。
まとめ
今回は色々なコード整形ツールを紹介しましたが、お気に入りのサービスは見つかりましたか？
コードの視認性の確保は今後の保守作業にかかる時間に大きな影響を及ぼすので、できるだけ早いうちに整形処理を済ませておきましょう。
また、コーディング初心者の方は正しいコーディング方法を理解する方法として、今回紹介したツールを活用するのも一つの手段かもしれません。