最近、コードを書くということが以前とは本当に変わってしまった。以前は一行ずつ打たなければならなかったが、今ではAIが数秒で大量のHTMLを吐き出してくれる。使えないかというと、ブラウザで動かせばページはちゃんと表示される。そのまま使えるかというと、ソースを開くと、もうめちゃくちゃだ。
最近引き継いだプロジェクトがあって、フロントエンドのページが全部AI生成だった。最初は結構良かった、効率が高いから一日に何ページも作れる。ところが公開前日に、テスト担当の同僚がやってきて、あるボタンがスマホで押せないと言う。コードを開いてみると、なんと、divが七八層も入れ子になっていて、インデントはぐちゃぐちゃ、タグの閉じはブラウザ任せ。半日探してやっと問題を特定した。タグが一つ閉じられていなくて、ブラウザが自動修復するときに後ろの構造を全部崩していたのだ。
この出来事以来、教訓にしている。AI生成のコードは、どんなに正常に見えても、公開前に必ずHTMLフォーマットツールを通さなければならない。
なぜフォーマットが必要なのか？いくつか実用的な理由を話そう。
第一に、フォーマット後はコード構造が一目瞭然になる。AIがコードを書くときの悪い癖で、すべてを一箇所に詰め込みたがる。改行すべきところで改行せず、インデントすべきところでインデントしない。フォーマットツールを一度通せば、親子関係がはっきりし、どのタグがどのタグを包んでいるかが一目でわかる。バグを探すときの効率が何倍も違ってくる。
第二に、隠れたエラーを発見できる。閉じられていないタグや、間違って書かれた属性は、コードが乱れているとまったく見えない。フォーマットツールを通せば、構造がおかしい箇所がすぐに露呈する。これは部屋の整理と同じで、物が散らかっているときは全部大丈夫だと思っていても、片付けてみると、ここに不要な箱が一つ多く、あそこに蓋が一つ足りないとわかるのだ。
第三に、チームで協力するとき、フォーマット済みのコードでなければレビューしにくい。考えてみてほしい。同僚がAI生成のコードの山を提出してきて、インデントはめちゃくちゃ、改行は気まま、君は見るのか見ないのか？見れば頭が痛い、見なければ不安だ。統一フォーマット後は、みんな同じ基準に従うので、誰が何を変えたかが一目瞭然になる。
第四に、ブラウザに優しい。ブラウザのエラー許容能力は高いが、それはブラウザが尻拭いしてくれているだけだ。コード構造が明確で、タグの閉じが正しければ、ブラウザのレンダリング効率も高くなる。特にモバイル端末は、もともと性能が厳しいのだから、これ以上ブラウザに負担をかけないでほしい。
今の私のワークフローはこうだ。AIがコードを生成したら、まずエディタにコピーし、HTMLフォーマットツールを通し、それから目で構造を一通り確認し、問題がなければプロジェクトに入れる。余分にかかるのは二分もないが、節約できるデバッグ時間は、二分どころの話ではない。
フォーマットなんて、インデントを入れて改行するだけだろう、何の役に立つの？と思う人もいるかもしれない。こう言おう。文章を書くときも段落分けするだろう、段落のない文章を読むのは疲れないか？コードも同じだ。フォーマットは見た目のためではなく、問題を隠れ蓑のないようにするためだ。
もう一つ注意してほしいのは、AI生成のコードには時々おかしな属性や余分なタグが含まれることがあり、フォーマット後はそうした冗長なものが特に目立つ。ついでに削除できて、ページの読み込み速度もほんの少し速くなる。この少しを侮ってはいけない、塵も積もれば山となる、ユーザー体験はこうやって少しずつ積み上げていくものだ。
だから、手を抜かないでほしい。AIがコードを書いてくれるのは良いことだが、公開前の最後の関門は、自分でしっかり守らなければならない。HTMLフォーマットというツールは、地味に見えて、いざというとき本当に助けてくれる。少なくとも私は今や手放せない、一度フォーマットしないと、どうも落ち着かない。