HTMLの変更をリアルタイムでプレビューする方法

ボタンひとつのパディングを直す。保存。ブラウザに切り替えて、更新して、うまくいったか身を乗り出して確かめる。いってない——だから数値をひと目盛りずらして、保存、切り替え、更新。もう一度。この四拍子のすり足ダンスで、午前を半分溶かして、それでも二ピクセルずれたままのボタンが手元に残る、なんてことになります。

直し方自体は、いまさらの話です——ライブプレビュー——自分が発明したふりをする気もありません。できるエディタは山ほどあって、無料の HTML エディタは別のところで比べておきました。だからこれは、どれか一つを売り込む話ではありません。あの小さなすり足が、見た目の数秒よりずっと高くつく——その理由の話です。

遅いというより、ねばつく

更新のダンスが奪うのは、秒だけではありません。奪われるのは、あなたが握っていた糸のほうです。

alt-tab で切り替えて再読み込みするたびに、居場所を見失います——スクロールの位置、次に何を試そうとしていたかという半分だけできた考え、さっき目が乗っていた、まさにその一点。四手先にようやく出てくる反応は、それを引き起こした変更と、だんだん結びついて感じられなくなります。だから、試すのをやめてしまう。色を五つ、さっと試すのは、ほぼタダであるべきです。なのに一つごとに保存-切り替え-更新がかかると、四つは自分で自分を説き伏せて手を引き、最初の一つで妥協します。

ライブプレビューは、その隙間をゼロまで詰めます。打てば、描画されたページが動く。変更と結果がすぐ隣に並び、あいだに遅れはありません。しかも素の .html ファイルなら、下に機械仕掛けは何もない——立ち上げる開発サーバーも、走らせるビルドも、ターミナルでうなり続ける監視タスクも、なし。エディタはブラウザの中で本物のページを描画し、キーを打つたびに塗り直します。

フレームワークのプロジェクトは、別の生き物です。React や Next のアプリには、ホットリロード付きの開発サーバーが本当に要りますし、それがその仕事のための正しい道具です。でも、一枚のページで見出しが変わるのを見るためだけに、それを立ち上げなきゃいけない道理はありません。

更新した瞬間、すべてを忘れるライブプレビュー

ここでひとつ注意を。ほとんどの人が、少なくとも一度はこれに引っかかるからです。

Chrome でページを開いて、右クリック、「検証」を選べば、DevTools の中でそのまま HTML を編集して、ライブで変わるのを見られます。答えのように感じます。でも、違います。その編集は、その一つのタブの中だけで生きている——更新すれば消えますし、ディスク上のファイルには一度も触れていません。DevTools は、手元に残せないライブプレビューです。ページをつついて、ある変更がどう見えるか確かめるには、すばらしい。でも、その変更を定着させるには、役に立ちません。編集を保存したいなら、必要なのはファイルへ書き戻すエディタで、再読み込みで作業を捨ててしまうブラウザのパネルではありません。

そこをクリック、そのコードに着地

ループの半分は、変更を見ること。もう半分は、どこで直すかを見つけることです。

あの感覚、覚えがあるでしょう。プレビューがおかしい——その見出し、サイズが違う——それで、どれも似たり寄ったりの四十個のタグの中から、正しい一つを探して、マークアップをスクロールしはじめる。この探し物は、それ自体がひとつの税で、しかも静かな税です。

双方向のエディタは、それを消します。プレビューでその要素をクリックすれば、裏のコードが光ります。HTML Tweak はこれを「クリックで位置へ」と呼びます——ページ上の見出しをクリックすると、エディタがその正確な行へ飛んで、そこを強調します。両方向に働きます。コードで打てばプレビューが更新され、プレビューでクリックすればコードがついてくる。ビジュアルなページとソースが横に並び、いつも同じものを語っています。並べるのが好みでなければ、上下に重ねてもいいし、片方を隠してコードだけ、あるいはページだけで作業してもいい——目の前の変更が求めるやり方で。

目を細めて見比べる、その大半は、これで終わります。「何が変か」と「ファイルのどこにあるか」のあいだを、もう翻訳しなくていい。同じ一つのクリックです。

同じページを、スマホの幅で

ノートパソコンでは仕上がって見えるページが、スマホでは崩れることがあります。

これは、更新ループがいちばんうまく隠してしまうものです。なぜなら、あなたはちょうど一つのサイズでしか試していない——たまたま今、目の前に座っている画面のサイズで。そしてページが世に出ると、狭い画面ではナビが折り返し、見出しが端からはみ出し、横に並ぶはずだった二段が、ぐしゃりと積み上がります。

ライブプレビューは本物のブラウザの中の本物のページなので、何も追加で入れずに、小さいサイズを確かめられます。ウィンドウを狭く引いて、何が組み変わるかを見る。あるいは、ブラウザ自身のレスポンシブモードを開く——Chrome と Edge では、それは DevTools の中のデバイスツールバーです——スマホ、タブレット、デスクトップの幅を、順に切り替えていく。探すのは、箱からあふれる文字、二行に折り返すボタン、そして画面の端をはみ出す、あらゆるもの。三日後にクライアントから届くスクリーンショットではなく、ここで、自分の机で捕まえましょう。

ライブプレビューまでの六手

開くところから保存まで、通しでいきます。そもそもファイルを開くところが不安なら、HTML ファイルを編集するやり方を別に書いておきました。

1. ページとコードを一緒に見せるビジュアルエディタで、.html ファイルを開きます。HTML Tweak では、自分のパソコンから直接開きます——何もアップロードされません。
2. 二つのペインを横に並べて、両方を一度に見られるようにします。
3. 編集をはじめます。ページ上の言葉を変えても、コードのタグを直しても——どちらの側も、打つそばからもう一方をライブで更新します。あいだに保存と更新はありません。
4. プレビューで変えたいものをクリックすれば、「クリックで位置へ」があなたをそのコードの上に降ろします。
5. 狭くして確かめます。ウィンドウを引き寄せるか、ブラウザのレスポンシブモードを使って、レイアウトがスマホで持ちこたえるかを見ます。
6. 保存します。Chrome か Edge なら、変更はそのまま元のファイルへ書き戻されます。ほかのブラウザなら、編集済みのコピーがダウンロードされます。どちらにしても、ビルドもなし、登録もなし。

プレビューに嘘をつかせる、小さなこと

ライブプレビューは、あなたのファイルをかなり近く映します——でも、完璧にではありません。ほんの数えるほどのことが、少しだけ本当でないものを見せてくることがあります。どれか一つが一時間を奪う前に、知っておく価値があります。

• キャッシュの中の古い CSS や画像。 ページがスタイルシートや画像を読み込んでいると、ブラウザが古いコピーにしがみつくことがあります。HTML はライブで更新されているのに、古い背景画像が居座り続ける。土台のページを強制リロード——Ctrl+Shift+R——すれば、片付きます。
• いつまでも一つの幅でしか試さない。 上で言ったとおり、それでもこれが、いちばんよくある見落としです。ノートでは完璧、スマホでは崩れる。狭くして確かめるのを、後回しの一手ではなく、習慣に。
• プレビューと、保存したファイルを取り違える。 ライブの表示は、打った瞬間にあなたの編集を映します。ディスク上のファイルは、保存したときだけ変わります。保存せずに閉じれば、ページは古い中身のまま——ライブプレビューがあろうとなかろうと。
• 要らないビルドツールに手を伸ばす。 一つの .html ファイルは、開発サーバーも、バンドラーも、ライブリロードのプラグインも欲しがりません。色ひとつが変わるのを見るには、ひと山のセットアップです。それは、本物のプロジェクトのために取っておきましょう。

いま開いているページがあって、うまくいったか確かめるために何度も更新している変更があるなら——ライブプレビューで開いて、打つそばから動くのを見てください。更新キーには、午後を休みにしてもらいましょう。