HTMLを編集するなら、WYSIWYGとコードエディタのどっち

この問いの「対」が、そもそもの躓きです。リングを組んでしまうけれど、そこに試合なんてない。ビジュアルエディタとコードエディタ、どちらかが丸ごと勝つわけではありません——勝敗を決めるのは、いまあなたがしている変更のほうです。見出しを、リンクを、写真を直す？ビジュアルのほうが速い。構造を組み替える、正確な属性を置く、タグがどう噛み合っているかを理解する？それはコードの仕事。そして、私が実際に手を伸ばす道具は、その両方を並べて渡し、しかも同期させ続けてくれます。

だから、二つを敵どうしに仕立てるのはやめて、仕事のほうで仕分けてみます。

二つの道具は、別々の問いに答えている

WYSIWYG エディタ——「what you see is what you get」、見たままが手に入る——は、レンダリングされたページを見せて、その上でクリックし、打ち込ませてくれます。言葉を変え、画像を落とし込み、ボタンの色を塗り替える。下のマークアップは、あなたがタグを一つも読まないうちに更新されます。あなたが編集しているのは、結果のほう。

コードエディタが見せるのは、ソースです。どの <div> も、どのクラスも、どの属性も、手で変えられるように平文でそこにある。あなたが編集しているのは、その結果を生む指示書のほう。

分かれ目は、それだけです。片方はページに触れさせ、もう片方はページを作るコードに触れさせる。「どっちがいい？」と訊くのは、じつはページとその裏のコード、どちらが上か、と訊いているのと同じで——意味をなさない。要るのは、いま頭の中にある変更に、ちょうど噛み合うほうです。

ファイルを開いて変えるやり方の、もっと大きな地図がほしいなら、HTMLファイルを編集する方法に広げておきました。この記事は、その道の分かれ道を一つ——ビジュアルか、コードか——だけ扱います。

変更ごとに、しかるべき列へ

よくある仕事を、私ならこう仕分けます——どちらの道具が「強力か」ではなく、どちらが摩擦少なくそこへ連れていってくれるか、で。

あなたがする変更	手に取るのは	なぜ
言葉、リンク、画像を直す	ビジュアル / WYSIWYG	直したそばから結果が見える。タグ探しがいらない
構造を組み替える——入れ子、並べ替え、セクション追加	コードエディタ	タグそのものを見て、動かす必要がある
正確な属性を置く（aria-label、data- 値、きっかりした幅）	コードエディタ	ページ上に見える取っ手がないものは、クリックでは掴めない
HTML が実際どう動くかを学ぶ	コードエディタ	狙いはタグを読み書きすること。隠すことではない
コードを書かない人に渡して、文章を直してもらう	テキスト専用のビジュアルモード	レイアウトをロックするので、言葉の変更がデザインを壊さない
目に見えるものの裏のコードを見つける	双方向・同期のエディタ	その要素をクリックすれば、対応する行へ飛ぶ

ビジュアルかコードか、の言い争いのほとんどは、じつは二人がこの表の別々の行を思い浮かべながら、噛み合わないまま話しているだけです。

コードエディタに、正当な評価を

私が作っているのはビジュアルな道具です。だからこそ、向こう側にはフェアでいたい——それだけの値打ちがあるので。

構造にかかわることなら、コードが勝ちます。しかも僅差ではない。あるセクションを別の上へ動かす、三つの要素を新しいコンテナで包む、インデントを整えてやっと読めるようにする——こういうときは、タグを目の前に置いておきたい。ビジュアルエディタは、ここであなたに手こずらせることがあります。クリックしても、自分がどの要素を掴んだのか、いまひとつ確信が持てない。

正確な属性も、同じ話です。aria-label や data-id に対応するボタンなんて、ページ上にはありません。だから、クリックする先もない。コードなら、そのまま打つだけ。

そして、もし狙いが HTML を学ぶことなら、ビジュアルエディタは教室を間違えています。それはタグを隠すために作られている。学ぶとは、タグを見て、壊して、直すこと。無料で使えるおすすめの HTML エディタで私が一つずつ試したようなコードの遊び場は、そのためなら、どんなポイント&クリックより上です。

だから、いいえ。コードエディタはもう時代遅れだ、なんて言いに来たのではありません。本物の仕事の、かなりの部分にとって、それは正しい道具です。

たいてい、途中で切り替えたくなる

これが、「対」の隠しているところです。本物の編集のほとんどは、どちらか一方ではありません。両方——同じ五分のうちに。

たとえば、AI が生成したページを仕上げているとします。見出しを打ち直す——ビジュアル、二秒で片づく。次に、ボタンが間違った先を指しているのに気づく。しかもそのリンクは目に見える文字ではなく、タグの奥に埋もれた href。となると、今度はコードがほしい。それから、ちゃんと収まっているかもう一度ページを眺めたくなる。ビジュアル、コード、ビジュアル——ぜんぶ、一つの小さな作業の中で。

もし二つの道具が別々なら——見るためのブラウザ、ソースのためのテキストエディタ——あなたはこの編集を、保存して、Alt+Tab して、再読み込みして、で費やします。この切り替えの代償は、一回ごとには小さくて、午後いっぱいでは大きい。「どっちがいい？」が間違った問いである、本当の理由がこれです。あなたは二つのうち一つがほしいのではない。二つのあいだを行き来するたびの通行料を、払うのをやめたいのです。

どちらかを選ばなくていい版

これが、HTML Tweak を作った、その隙間です。ビジュアルなページとコードを隣り合わせに、同期させて置く——ページを変えればコードが追い、コードを変えればページが追う。目に見えるものをクリックすれば、対応するコードを代わりに見つけてくれる。タグ探しの大半は、これで消えます。

コードを書かない人のためには、構造とスタイルをロックするテキスト専用モードがあります。だから同僚は文章を書き直せても、レイアウトは物理的に動かせない。もっと深く入りたいときのために、「まず確認する」モードとフルモードも用意してあります。

それから、縁のところ。開くのは一つの .html ファイル——複数ファイルの React や Next プロジェクトを束ねる道具ではありません。ブラウザ内で無料で動き、手元に残せる一つのオフラインファイルとしても動く。最初の読み込みだけネットが要り、あとはキャッシュされて、なくても動きます。Chrome か Edge なら、あなたのファイルへ直接保存。ほかのブラウザは、ダウンロードしたコピーを渡します。どちらにしても、登録は不要。

サイトを丸ごと作るなら、コードエディタの代わりにはなりません。一枚のページを仕上げるときの、あの Alt+Tab の代わりになります。

いちばんよく見かける間違い

無駄は、たいてい一つの反射にたどり着きます——「ビジュアルかコードか」を、仕事全体について一度きり決める判断だと思い込むこと。変更ごとに新しく決め直す、のではなく。それは三つの形で顔を出します。

仕事全体に一本のレーンを決めてしまう。「これはコードの仕事」と決めて、五秒で済む文字の変更を生のタグの中ですり潰す。あるいは「これはビジュアルの仕事」と決めて、取っ手のない、たった一つの属性が設定できなくなる。仕事にレーンはありません。一つひとつの変更に、あるのです。

レイアウトが大事なページで WYSIWYG を走らせて、ずれていくのを眺める。ビジュアルエディタの中には、編集のたびにマークアップを書き換えるものがあり、文章のひと直しで余白が一段ずれます。デザインを保つことが目的なら、ほしいのは構造をロックした編集で、好き放題ではありません。

学ぶのに、間違った道具へ手を伸ばす。HTML を理解したいなら、ビジュアルエディタの下に埋めないこと——タグを読むこと。そして逆も同じだけ言えます。クリック一つで終わる仕事をコードの中ですり潰すのも、方向が逆なだけで、同じだけあなたの一日を無駄にします。

そこで、ささやかな挑発を一つ。次にビジュアルとコードを天秤にかけている自分に気づいたら、その問いを拒んでください。HTML Tweak でファイルを開いて、コードをページの隣に置いたまま、変更が求めるたびに、二つを行き来してみてください。