Appleの発表会がまた来た。フロントエンド開発者は夜更かししてコードを修正するとき、フォーマットを忘れずに
Appleの発表会が始まると、テック業界はお祭り騒ぎだ。SNSはスクロールしても関連投稿で埋め尽くされ、トレンド検索も独占。普段は野菜の値段しか気にしないおばさんまで「あの新しいスマホはいくら？」と聞いてくる。しかし、我々フロントエンド開発者にとって、発表会にはもう一つの意味がある——公式サイトの更新、特集ページの公開、上司の「Apple風に一版作って」の一言で、素直にPCの前に座り、コードと格闘しながら深夜まで作業することになる。
夜更かししてコードを修正するのは、フロントエンド開発者にとっておなじみだ。プロダクトマネージャーが横で急かし、UIデザイナーが18版目の注釈を送り、バックエンドのAPIはまだ連携テストが通っていない。文句を言いながらキーボードを叩く。ようやくページをほぼ調整し、ブラウザで見ても綺麗に表示された。しかし、コードをコミットして同僚がプルすると、レイアウトが完全に崩れている。なぜか？HTMLを書くときに手を抜いたからだ。タグのネストはめちゃくちゃ、インデントは行き当たりばったり、属性の順序は感覚任せ。自分で見る分には問題ないが、別のPCやエディタに変えると、すぐに本性を現す。
ここでHTMLフォーマットというツールについて話そう。多くの人はフォーマットはショートカットキーを押すだけ、エディタに標準搭載されている機能だと思っている。何を語る必要がある？しかし、よく考えてみてほしい。あなたは自分のHTMLコードを真剣に整理したことが最近あるか？書くときは速さを優先し、1行に10個以上のタグを詰め込み、divの中にdiv、さらにdiv。最後には自分でも閉じタグがどこにあるか分からなくなる。要件変更のとき、該当箇所を探すのに時間を費やし、最初から追い直すしかない。時間はすべてコード探しに無駄になる。
HTMLフォーマットがやることはとても簡単で、コードを再配置するだけだ。インデントすべきところはインデント、改行すべきところは改行、属性を揃えるべきところは揃え、タグを閉じるべきところは閉じる。小さなことに見えるが、もたらすメリットは実に大きい。コード構造が明確になり、目的のものを早く見つけられ、バグ修正もスムーズになる。さらに重要なのは、チームで協力するとき、皆のコードスタイルが統一され、コードレビューでスペースや改行のことで言い争う必要がなくなり、節約した時間で30分多く寝られる。
特にAppleの発表会のようなタイミングでは、フロントエンドのプレッシャーはもともと大きい。公式サイトの特集ページは要求が高く、アニメーションは滑らかで、レスポンシブは完璧で、さまざまな変なブラウザにも対応しなければならない。深夜2時まで起きていると、頭はもう回らない。そんなときにコードがぐちゃぐちゃだったら、まさに泣きっ面に蜂だ。習慣にして、一段落書いたらフォーマットし、ツールにコードをきれいに整理してもらおう。この動作を軽視してはいけない。手戻りの時間をかなり節約できる。
フォーマットするとコードが壊れるのでは？と心配する人もいるかもしれない。安心してほしい。正規のHTMLフォーマットツールはレイアウトを調整するだけで、ロジックには触れない。タグはそのまま、属性もそのまま、ただ見た目がすっきりするだけだ。もちろん、信頼できるツールを選ぶ必要がある。``タグの中身まで乱すようなものは避けよう。市販の一般的なフォーマットツールはどれも成熟している。オンライン版、エディタプラグイン、コマンドラインツールなどがあるので、使いやすいものを選べばいい。
結局のところ、フロントエンドという仕事では、コードは我々の腕前だ。腕前が良いかどうかは、機能が実装されているかだけでなく、コードが美しく書かれているかにもよる。Appleの発表会は毎年あり、夜更かししてコードを修正する日々もなくならない。避けられないなら、自分を楽にしよう。コードを修正したらついでにフォーマットし、翌朝ファイルを開くと、すっきりしていて気分も半分良くなる。
だから、今夜も残業なら、コーヒーを淹れてヘッドホンをつけ、コードを書き終えたらすぐにコミットしないで。まずフォーマットし、確認して、それから安心して寝よう。Appleは新機種を発表し、我々は自分のコードを守る。これがフロントエンド開発者の品位だ。