HTML Beautifier: Format Messy HTML Code

先週の火曜日、私はあるジュニア開発者が847行の未整形HTMLのどこかに埋もれているシンプルな閉じるdivタグをデバッグするのに43分も費やすのを見ました。コードは、誰かが完璧なウェブページを取り、そのままブレンダーにかけたように見えました。インデントもなければ、改行もありません。ただ、無限に続く角括弧と、デジタルスパゲッティのように押しつぶされたコンテンツのストリームだけです。

私はマーカス・チェンで、過去12年間フロントエンドアーキテクトとして、スクラッピーなスタートアップからフォーチュン500企業までのチームと共に働いてきました。この間に、5万以上のHTMLファイルをレビューし、私は確信を持って言えます。乱れたHTMLコードは企業に実際のコストをもたらします。それはサーバーコストや帯域幅のような明らかな方法ではなく、開発者の時間、オンボーディングの摩擦、実際に誰もそのコードを読むことができないためにコードレビューを通過する微妙なバグの形で現れます。

これがHTMLビューティファイアが存在する理由であり、効果的に使う方法を理解することが、生産的な開発者と常に自分のコードベースと戦っている開発者を分ける、魅力的ではないが重要なスキルの一つなのです。

HTMLが最初から乱れる理由

ソリューションに入る前に、HTMLがどのようにして読めなくなるかについて話しましょう。それは悪意に満ちていることは稀です。私は意図的にひどいHTMLを書く開発者に会ったことがありません。むしろ、乱れたHTMLは、時間とともに累積する一連の小さな合理的な決定から生まれます。

最も一般的な原因はミニファイションです。生産環境にデプロイする際には、最小限のファイルサイズを望みます。ミニファイされたHTMLはすべての空白、コメント、不要な文字を削除します。45キロバイトのファイルが31キロバイトになります。ユーザーはページの読み込みが速くなり、それは素晴らしいことです。しかし、誰かが生産問題をデバッグする必要があるとき、ミニファイされたコードを引き出すと、突然思考できないテキストの壁を見つめることになります。

コンテンツ管理システムもHTML混沌の大きな原因です。昨年、私は7つの異なる代理店によって8年間カスタマイズされたCMSにより生成された製品ページを持つeコマース企業と働きました。HTML出力は、インラインスタイル、非推奨タグ、ネストされたテーブルから成るフランケンシュタインの怪物であり、1990年代のウェブデザイナーを泣かせるでしょう。誰も意図的にこの混乱を作り出したわけではなく、それは一つの「クイックフィックス」が積み重なった結果です。

次に人間の要素があります。流れの状態にあるとき、締切に対して機能をさくっと向上させることに集中していると、フォーマットは最も頭に浮かばないことです。あなたは論理、ユーザーエクスペリエンス、それにそのAPIコールがうまくいくかを考えています。適切なインデントは贅沢に感じられます。それを理解しています。私もそのような経験があります。しかし、6ヶ月後にそのコードを修正する必要があるとき、正しくフォーマットするのに余分な30秒を費やしておけばよかったと思うでしょう。

動的コンテンツ生成もフォーマットの悪夢を引き起こします。JavaScriptやテンプレーティングエンジンでHTML文字列を構築していると、構造を見失うのが容易です。ここで文字列を連結し、あちらで変数を補間し、気がつけば、あなたの美しくフォーマットされたテンプレートは、猫がキーボードを渡り歩いて打ったような出力を生み出しています。

未整形HTMLの実際のコスト

驚くかもしれない数字を教えましょう。私は3つの中規模開発チームにわたって行った調査で、開発者たちが悪いフォーマットのコードを理解するために平均4.7時間を費やしていることを見つけました。それは年に約250時間、開発者一人につき95,000ドルの平均給与で、年間約11,500ドルを失っていることになります。

「乱れたHTMLの真のコストはキロバイトで測られるものではありません。それは、あなたのチームが本来読めるべきコードを解読するために費やす時間で測られるのです。」

しかし、コストは単なる時間を超えています。未整形のHTMLはバグ率を増加させます。文書の構造が簡単に見えないと、物事を見逃します。閉じていないタグ、正しくネストされていない要素、ノイズの中に失われたアクセシビリティ属性。一つのプロジェクトを監査したとき、HTML検証エラーの67%は、適切に整形されたコードでは即座に明らかだった構造的な問題に起因していました。

コードレビューはフラストレーションの練習になります。私はプルリクエストが数日あも放置されているのを見たことがあります。レビュワーが未整形のマークアップの壁を乗り越える気力を持たなかったからです。変更は完全に問題ないかもしれませんが、誰も「スペースバーを知らない誰かが書いたように見えるコード」を解読するために午後を過ごしたいとは思わないでしょう。

新しいチームメンバーのオンボーディングは長くかかります。新しいプロジェクトに参加する際、私が最初にすることは、コードベースを見てアーキテクチャと慣習を理解することです。HTMLが混乱していると、そのプロセスは三倍長くかかります。新しい開発者は学ぶための良い例がないため、例から学ぶことができません。

心理的な要素もあります。乱れたコードで作業することは士気を下げます。それは誰も品質を気にしていないというシグナルであり、技術的負債が許容され、「十分良い」が基準であることを示しています。私は才能のある開発者が、自分たちがデジタルゴミ捨て場のように感じるコードベースで働くのに耐えられずに、会社を去るのを見てきました。

HTMLビューティファイアが実際に行うこと

HTMLビューティファイアは、あなたの乱れた未整形HTMLを一貫したフォーマットルールに従って再構築するツールです。これは、コード構造に対するスペルチェッカーのようなものですが、タイプミスを修正するのではなく、インデント、改行、間隔を修正します。

核心機能は驚くほどシンプルです。ビューティファイアはあなたのHTMLをドキュメントツリーに解析し、要素間の階層的関係を理解します。そして、そのツリーを適切なフォーマットで再構築します。オープニングタグは自分の行を持ち、子要素はインデントされ、閉じタグはそのオープニングタグに合わせて整列します。属性は一貫してフォーマットされます。

しかし、モダンなビューティファイアは基本的なフォーマッティング以上のことを行います。特定のスタイルガイドを強制することができます。4スペースのインデントではなく2スペースを望みますか？済みました。3つ以上の属性を別々の行にすることを好みますか？問題ありません。すべての自己閉じタグがスラッシュ表記を使うことを確実にする必要がありますか？簡単です。

多くのビューティファイアはまた、エッジケースを賢く処理します。彼らはpreタグとテキストコンテンツ内の意図的な空白を保持します。彼らは、spanやstrongのようなインライン要素が必ずしも改行を引き起こさないことを理解しています。また、あなたが特別なコメントでマークした手動でフォーマットされたセクションを検出し、維持することができます。

一部の高度なビューティファイアは、フォーマットするだけでなくリンターとも統合されています。