Appleの発表会が終わったばかりの頃、私たちのフロントエンドグループではiPhone 17のカラーやカメラについて話していたのに、誰かがスクリーンショットを投げ込んだんです。そこにはきれいにフォーマットされたHTMLコードが写っていて、そこからグループの話題が完全に脱線して、このHTMLフォーマットツールについて話し始めました。正直、普段からみんな使っているものなんですけど、その日は特に盛り上がりました。発表会を見て疲れたから、サボる口実を探していたのかもしれません。
事の発端は、グループのある人が外注案件を受けたときのこと。相手から古いシステムからエクスポートしたHTMLファイルを大量に渡されたんですが、そのコードがもうめちゃくちゃで。タグのネストはぐちゃぐちゃ、属性の引用符はあったりなかったり、インデントは気まぐれで、ある場所では7〜8個のスペースが空いていたり、別の場所では全部詰め込まれていたり。彼はファイルを開いた瞬間、猫に遊ばれた毛糸玉を見たような気分だったと言っていました。手動で整理しようとしたけど、30分かけてやっと1ページ終わったところで、目が潰れそうになったそうです。その後、誰かがHTMLフォーマットツールを彼に教えて、コードを貼り付けてワンクリックしたら、コード全体がすぐにすっきりと整い、改行すべきところは改行され、インデントすべきところはインデントされ、タグの階層が一目瞭然になりました。彼はその瞬間の気持ちは、発表会を見終わったときよりも爽快だったと言っていました。
実はHTMLフォーマットというのは、大したことではないようで、意外と重要です。普段コードを書くときは、エディタにフォーマット機能が標準で付いていることが多く、あまり気にしないかもしれません。しかし、他人のコードを修正したり、どこかから圧縮されたHTMLをコピーしてきたときには、フォーマットツールがないと本当に崩溃します。特に1行に圧縮されたHTMLは、何千文字も詰め込まれていて、divの閉じタグを探すことすらできず、目で1行ずつ追うしかなく、効率は恐ろしく低いです。
グループでは、フォーマットツールの中には細かい設定ができるものもあると話題になりました。例えば、インデントにスペースを使うかTabを使うか、スペースなら2つか4つか、属性を改行するかどうか、空タグを自己閉じにするかどうか、さらには大文字小文字を統一できるものもあります。これらのオプションは地味に見えますが、実際に使うときにはかなり手間を省けます。例えば、チーム内でTabを使う人とスペースを使う人がいて、コードをコミットした後にフォーマットが衝突する場合、統一してフォーマットツールを一度走らせれば、みんな快適になります。
もう一つよく話題になったのは、オンラインHTMLフォーマットツールの中にはURLを直接貼り付けたり、ファイルをアップロードしたり、甚至プロジェクト全体の複数ファイルを処理できるものもあるということです。古いコードを一括で整理する必要がある場合、この機能は非常に実用的です。1つ1つのファイルを手動でコピー＆ペーストする必要がなく、節約できた時間で発表会のニュースを何本も見られます。
ただし、グループのメンバーからは、オンラインツールを使うときは注意が必要だという指摘もありました。ツールによってはコードをサーバーにアップロードするものがあり、社内プロジェクトや機密情報を含むコードの場合は、ローカルのフォーマットツールか、エディタ付属のプラグインを使った方が良いです。コードのセキュリティについては、気を遣っておいて損はありません。
話し合いの最後には、ほぼ全員が一致した結論に達しました：HTMLフォーマットツールは、普段は使うことを思い出さないかもしれないが、いざというときには本当に命を救ってくれる。特に発表会が終わったばかりでみんな早く帰りたいときには、ワンクリックでできることは絶対に手動でやらない方がいい。グループの外注を受けた彼は後で、そのツールをお気に入りに入れて、今後は案件を受けたらまずフォーマットしてから修正するようにしたら、とても楽になったと言っていました。
だからほら、Appleの発表会の話をしていたのに、最後にはフロントエンドツールの紹介現場になってしまいました。でもまあ、少なくともスマホのスペックをただ話すよりはずっと面白いですから。