WordPressには、いくつかのプログラム言語が利用されています。
具体的には以下のような言語です。
- PHP
- HTML
- CSS
- JavaScript（jQuery）
細かなことを言えば、他にも使用されているものはありますが、ユーザーが編集するものと言えば大体はこの4つです。
今回は、これら4つの言語のコードを綺麗に整形してくれるツールの紹介です。
目次
コード整形ツールとは
コード整形ツールとは、書き方の定まっていないプログラムコードなどを、記法を統一して綺麗に書き直してくれるツールです。
WordPressテーマ作成や、カスタマイズで、コードをググッてよそからコピペ編集で使うときなどに、自分に合った記法に変換して使えます。
例えば、以下のようなことを、まとめて行いたい時に使うと、手動でやるより編集時間を大幅に短縮できます。
- コードに適切なインデントを自動で設定する
- インデントをタブからスペースに変換する
- インデント幅を変更する
- 括弧の囲み方を変更する
- コメントを取り除く
- 空行を取り除く
主に利用する機能は、上に書いたようなものが多いですが、言語によってはさらに細かな設定を行うことができます。
PHP整形ツール
まずは、Wordpressの動作をつかさどるPHPの整形ツールです。
PHP Formatter
PHP Formatter – PHP Beautifier – PHP Pretty Printer – Home
PHP整形ツール。「STYLE」からかなり細かな整形ルールを設定することができます。
PHP Beautifier
かなりシンプルなPHP整形ツール。括弧のスタイル、インデントスタイルを整形するのみならば、こちらが手軽
PHPコードの整形（phpCodeBeautifier）
PHPコードの整形（phpCodeBeautifier） | Magonote-tools
こちらは、あらかじめ整形ルールが決められています。選択することはできません。
HTML整形ツール
WordPressコンテンツの構造部分となるHTMLの整形ツールです。
ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）
日本語で利用できるHTML整形ツールです。インデントや、属性改行などの設定を行えます。
Online JavaScript beautifier
HTMLとJavaScriptを綺麗に整形してくれるツールです。インデントレベル、改行文字数など細かな整形ルールを設定できます。
Dirty Markup
Dirty Markup · Tidy up your HTML, CSS, and JavaScript code
HTML、CSS、JavaScriptを整形できるツールです。HTMLは、インデントや文字数を設定できます。
HTML Tidy Online
かなり細かなHTMLの整形ルールを設定できるとともに、不適切な書き方なども指摘してくれます。
Free Online HTML Formatter
Free Online HTML Formatter – FreeFormatter.com
インデントレベルを設定することができます。
Online Code Beautifier
Online Code Beautifier for JavaScript, HTML, CSS and PHP
こちらはJavaScriptで素早く変換。PHP、CSS、JavaScriptまじりのHTMLを整形してくれます。
Best Online HTML Viewer
Best Online HTML Viewer,Editor,Beautify,Minify,Formatter,Test Output
HTMLの整形もできるけど、コードの縮小も行えます。
Best Online HTML Viewer
Best Online HTML Viewer, HTML Editor, HTML Formatter, Beautify
CSS整形ツール
WordPressのスタイル担当、CSSの整形ツールです。
ProCSSor
「ProCSSor（現在サービス中止）」
CSSの書き方のかなり細かな部分まで設定することができます。
詳しい使い方などは、以前書きました。
CSS整形ツール「ProCSSor」が便利、CSS記法を綺麗に統一し最適化してくれる
Code Beautifier
Code Beautifier: CSS Formatter and Optimiser
こちらも細かな記法の設定が可能です。
Format CSS Code
こちらもいろいろ設定可能。
Dirty Markup
Dirty Markup · Tidy up your HTML, CSS, and JavaScript code
先程、HTMLの方でも紹介したけど、CSSも整形できます。インデントや改行文字数を設定できます。1画面で、HTML、CSS、JavaScriptを手軽に整形できるのが魅力。
Best Online CSS
Best Online CSS Viewer,Editor,Beautifier/Formatter,Validator,Minifier,Compress
CSSの整形以外にも縮小化ができます。
Free Online CSS Beautifier
Free Online CSS Beautifier / Formatter
JavaScript整形ツール
WordPressのブラウザ側での動作担当、JavaScriptの整形ツールです。
Javascript Beautifier
Javascript Beautifier and Formatter – Dan’s Tools
JavaScriptで動作するので、ソースコードを動的に整形することができます。オプションも豊富で、インデント、トークン間の許容する改行数、改行文字数、括弧の囲み方、その他いろいろな設定が行えます。
Online JavaScript beautifier
こちらもJavaScriptで動的に動作を見ながら整形を行うことができます。設定も豊富です。
Dirty Markup
Dirty Markup · Tidy up your HTML, CSS, and JavaScript code
多少設定項目は少ないですが、HTML、CSS、JavaScriptを整形することができるので、ブックマーク管理が楽です。
Best Online JavaScript Tool to View
Best Online JavaScript Tool to View,Beautify,Formatter,Minify,Obfuscator Javascript Code
JavaScriptの整形と縮小化。細かな設定はできません。
JavaScript Beautifier online
まとめ
「コードなんて自分しか読まないので読めればそれでいい」と言われてしまえば、そうなんです。
けど、コードを綺麗にしていると気持ちが良いですし、見やすいので、なにより作業効率が上がります。とはいえ、僕も100％自分の記法を守って書けているわけではないです。
ただ、「分らないところをググって出てきたコードがインデントされていない」なんて時には、インデントさせるだけに使用しても、これらのツールは十分便利です。
ファイル内のすべてのコードを整形するなんて時は、実行前に必ずバックアップを取ることをお勧めします。
すばらしいコンテンツを共有してくれて、ありがとう。 ツールは素晴らしいです。 ここにあなたのリストのために、私はいくつかのツールもお勧めしたいと思います。 以下のリンクをご覧ください
CSSフォーマットの場合
https://url-decode.com/tool/css-beautifier
HTMLフォーマット用
https://url-decode.com/tool/html-beautify
JavaScriptフォーマット用
https://url-decode.com/tool/javascript-beautifier
これらのツールの追加は、ユーザーがより多くのツールを評価するのにも役立ち、Web開発だけでなくWeb最適化にも役立ちます。