の中に3つの
が入っている場合、本来は階層ごとにずらすべきだが、全部が最初の列に押し込まれて、どれがどれの親かさえ分からない。そんなとき、フォーマッターツールを使えば、ワンクリックで自動的にインデントが追加され、入れ子関係が一目瞭然になる。どのタグがどのタグの親なのか、どれが閉じ忘れているのかがすぐに分かり、バグ修正の効率が倍増する。
さらに、このツールはコードの「美化」だけではない。タグの閉じ忘れもチェックしてくれる。大量のコンテンツを書いていて、
を一つ忘れた場合、ブラウザーは無理やりレンダリングするかもしれないが、レイアウトは完全に崩れてしまう。フォーマッターツールを実行すると、自動的に補完してくれたり、どこが切れているかを赤く表示してくれたりする。これで節約できるのは時間だけでなく、画面に向かって頭を抱えるイライラもだ。
使い方も非常に簡単で、高級なソフトウェアをインストールする必要は一切ない。ブラウザーを開いて「HTMLフォーマッター オンラインツール」と検索すれば、たくさん出てくる。適当に一つクリックして入ると、左側に大きなテキストボックスがあるので、その粥のようなコードを全部貼り付けて、「フォーマット」ボタンをクリックするだけ。瞬く間に、右側または下に、きれいに整列された新しいコードが表示される。それをコピーして戻せば完了だ。このプロセス全体、手が速ければ、本当に3分もかからず、30秒で十分だ。
もちろん、「自分の使っているエディター（VS Codeなど）にはフォーマット機能が内蔵されていて、ショートカットキーを押すだけだ」と言う人もいるだろう。それがもちろん良いが、多くの場合、例えばスマホでチュートリアルを見ているとき、一時的にウェブページを修正するとき、同僚がドキュメント内のコードスニペットを送ってきたときなど、エディターを開いていない状況では、オンラインツールが最も便利な選択肢だ。しかも、これらのツールは基本的に無料で、登録不要、開いたらすぐ使えて、使い終わったらすぐ閉じる、清潔で潔い。
もう一つ小さなコツがある。一部のフォーマッターツールは、コード内の余分な空行や行末のスペースを自動的に削除して、ファイルサイズを少し小さくしてくれる。今はネットワークが速いので数KBを気にする必要はないが、コードがきれいだと、見ていて気持ちがいいだろう？特にフロントエンドの開発者は、毎日HTMLやCSSと向き合っているので、整ったコード構造は、午後の気分に直接影響する。
最後に一言注意しておくと、フォーマッターツールは万能ではない。それは配置と基本的なチェックのみを担当し、ロジックエラーを修正してはくれない。例えば、タグの`href`を間違えて書いても、それは関知しない。しかし、「スッキリ片付ける」という目標に関しては、間違いなく手頃な優れたツールだ。次回またあの粥に遭遇したら、無理に飲み込まず、直接ツールを使おう。3分で、さっぱりと、なんて素晴らしいことか。
覚えておいてほしい、良いコードは単に動作するだけでなく、人が読み続けられるものでなければならない。そう思わないか？
319 閲覧
·