エンジニアも活用!HTML/CSS/JavaScriptなどのコード整形/圧縮ツール(ブラウザ版)をご紹介。インデント(字下げ)の設定など細かいオプションも設定可能。

program

この記事では、自身も実際に活用させてもらっている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
    実行
    「軽量化を行う」ボタンで実行。
    不要な要素が全て削除されたコードが出来上がります。

さいごに

コードの整形/圧縮ツールは様々ありますが、筆者が使いやすいと思ったものを紹介させていただきました。
サイトの裏方であるコードは普段は目に見えませんが、後々メンテナンスする方のために、見やすくいじりやすい、美しいコードにするように心掛けましょう。