VimでHTMLタグの中身・属性値を書き換える（cit / dat）
HTMLやJSXを編集していると、タグの中身だけを修正したい、あるいはタグごと丸ごと削除したい場面が頻繁にあります。タグを1つ直すのに開始タグと終了タグを両方さわるのは手間なので、まとめて書き換える方法を押さえておくと速くなります。括弧・引用符と同じ考え方で、タグ専用のテキストオブジェクトtを使えば手早く編集できます。
目次（10項目）
| キー | これだけ覚える |
|---|---|
| cit | タグの中身をまるごと書き換え |
| dat | タグごと削除（開始〜終了タグまで） |
| dit | タグの中身だけを削除（タグ自体は残す） |
| ci" | 属性値・文字列の中身を書き換え |
タグの中身を書き換える：cit
c（変更）とit（inner tag、カーソルのあるHTMLタグの中身）の組み合わせです。カーソルが開始タグ・終了タグ・中身のどこにあっても、タグの中身全体が対象になります。
<p>古いテキスト</p>
<p>新しいテキスト</p>
<h2> の中で cit を押して打ち直したところ。タグ自体は残るタグごと削除する：dat
datd（削除）とat（around tag、開始タグから終了タグまで丸ごと）の組み合わせです。中身だけでなく開始・終了タグ自体も含めて削除されます。不要になったブロックごと消したいときに使います。
| コマンド | 対象 |
|---|---|
| cit / dit | タグの中身のみ |
| cat / dat | 開始タグ〜終了タグまで丸ごと |
属性値を書き換える
タグの中身ではなく、属性値だけを書き換えたい場合は引用符のテキストオブジェクトがそのまま使えます。
<div class="old-class">
<div class="new-class">
カーソルが属性値の引用符の内側にある必要がある点は、通常の文字列リテラルと同じ扱いになります。HTML内に埋め込まれたCSSやJavaScriptの文字列を書き換えるときにも、この考え方がそのまま応用できます。
入れ子になったタグでの挙動
タグが入れ子になっている場合、cit/datはカーソルに最も近い（内側の）タグを対象にします。外側のタグ全体を対象にしたいときは、カーソルを外側のタグの開始タグ・終了タグ・またはその間の位置まで動かしてから実行します。深くネストしたJSXなどでは、意図した階層を狙うのに慣れが必要になります。
カウントを前置きすれば、階層を1段ずつ外側へ広げて対象を選べます。
2dat " 1つ外側のタグごと削除カーソルをいちいち外側のタグまで移動させなくても、数値で階層を指定すれば同じ結果が得られます。ネストが深いコンポーネントを編集するときほど、この指定方法の恩恵が大きいです。
実務での組み合わせ例
| コマンド | 用途 |
|---|---|
| dis | カーソル下の1文を削除 |
| ci" | 属性値・文字列の中身を書き換え |
| ca( | 関数呼び出しの括弧ごと削除 |
JSXのコンポーネントを書き換えるとき、中身だけ差し替えたいのかタグごと消したいのかで毎回cit/datを使い分けています。以前は終了タグの位置を目で確認してから範囲選択していましたが、テキストオブジェクトを覚えてからはカーソル位置を厳密に合わせる必要がなくなり、編集のテンポが上がりました。
cit が効かない条件
it と at は開始タグと終了タグの対を探します。そのため <br> や <img> のように閉じないタグは対象になりません。カーソルがそこにあっても、囲んでいる外側のタグが対象になります。
閉じ忘れがあるHTMLでも、意図しない範囲を掴みます。想定より広い範囲が消えたときは、そのあたりのタグが正しく閉じているかを疑ってください。v で選んでから at を押せば、実行する前に反転表示で範囲を確かめられます。
範囲が違えば、もう一度 at を押すと1つ外側へ広がります。目的の範囲になったところで d や c を押す、という手順にすれば取り違えません。
タグ名だけを書き換える
<div> を <section> にしたいときのように、中身はそのままでタグ名だけを変えたい場面があります。開始タグと終了タグの両方を直す必要があるので、素の機能では2か所を触ることになります。
cit を使わずに
1. 開始タグの名前の上で ciw で書き換える
2. % で対応する終了タグへ飛ぶ（matchit が要る）
3. ciw でもう一度書き換えるこの作業を1キーで済ませたいなら vim-surround の cst があります。タグの中にカーソルがある状態で cst と打つと新しいタグ名を聞かれ、開始タグと終了タグが同時に変わります。頻度が高い人は入れる価値があります。
JSXで気をつけること
JSXでは、タグの中に {} で囲んだ式が入ります。cit はタグの中身を丸ごと対象にするので、式ごと消えます。式だけを書き換えたいなら ci{ のほうが範囲が合います。
属性値も同じで、className="btn" なら ci"、onClick={handle} なら ci{ です。何で囲まれているかを見てテキストオブジェクトを選ぶ、という考え方はHTMLでもJSXでも変わりません。ブロックの一部を変更するでも同じ考え方を扱っています。
まとめ
HTMLタグの中身を書き換えるならcit、タグごと削除するならdat。属性値の書き換えには通常の引用符テキストオブジェクトci"がそのまま使えます。citのtもテキストオブジェクトの1つなので、オペレータ+テキストオブジェクトという形は単語や括弧のときとまったく同じです。1つ覚えれば残りは記号を差し替えるだけで済みます。citも、開始タグより手前にカーソルがあれば前方を探して中身を掴みます。効かないのは閉じタグより後ろへ行ってしまったときで、この場合はタグの対応が決まらず何も起きません。押しても無反応なら、カーソルが要素を通り過ぎていないかを先に確かめてください。
ここで扱ったキーは、ブラウザ上で動くVim道場の段落とタグをまとめて狙うでそのまま試せます。インストールもログインも要りません。