この記事では、自身も実際に活用させてもらっているHTML/CSS/JavaScriptのコード整形ツールを備忘録ついでに紹介いたします。
コード整形
最初に、コードの整形について少し説明。
どんな言語であってもプログラミングには『コーディング規約』というものが存在します。これは環境（職場やチーム）によって異なることがありますが、規約に則ったコードは見やすく、後々の改修作業などが行いやすい！という利点があります。
逆に、ルールを設けずプログラムされたコードや、圧縮されたコードはとても見づらく、そのまま編集するのはとても大変です。
こういった時に、活躍するのがコードの整形ツールです。
マニュアルで解読してコードを直していくのはとても時間がかかってしまうので、ツールを活用して標準的なフォーマットに一瞬で整形しましょう。
HTML
SYNCER：https://lab.syncer.jp/Tool/HTML-PrettyPrint/
・長すぎる行の改行
・改行の保持
インデント（字下げ）や改行について、整形前にルールを設定することができます。
自身の環境にあったルールで整形することが可能ですね。
改行場所についても、他のツールでは</li>などの閉じタグの判定がうまくいかず、結局マニュアルで一部直さないといけない。といったことがありましたが、、「SYNCER」では大丈夫そうです。
CSS
SYNCER：https://lab.syncer.jp/Tool/CSS-PrettyPrint/
・セレクタ間の改行
・ルール間の改行
・記号周りのスペース
・改行を保持
JavaScript
SYNCER：https://lab.syncer.jp/Tool/JavaScript-PrettyPrint/
・ユニコード文字のアンエスケープ
・長すぎる行の改行
・厳格なフォーマット
・改行を保持
コード圧縮
ページのロード時間はユーザの利用体験を改善するのに大変重要なポイント。読み込みに時間がかかってしまうとユーザはそのサイトから離脱してしまいます。
そういったことを避けるため、ファイルは圧縮して使用するようにしましょう。
TM – WebTools：http://tm-webtools.com/
圧縮（Minify処理）ツールの使い方。
- STEP.1コードの種類を選択メニューより圧縮したいコードの種類を選択してください。
- STEP.2軽量化したいコードを入力画面上側の入力フォームに軽量化させたいコードを入力してください。
- STEP.3実行「軽量化を行う」ボタンで実行。
不要な要素が全て削除されたコードが出来上がります。
さいごに
コードの整形/圧縮ツールは様々ありますが、筆者が使いやすいと思ったものを紹介させていただきました。
サイトの裏方であるコードは普段は目に見えませんが、後々メンテナンスする方のために、見やすくいじりやすい、美しいコードにするように心掛けましょう。
