Vim操作方法

[Vim問題] HTMLタグの値を簡単に変更する方法はなに?

VimでHTMLタグの値を変更する
記事内に広告が含まれています。
スポンサードリンク

この記事では、Vim/neovimに関するキー操作「オペレータ+モーション」について、詳しくご紹介します。

今回はプラグインなしのVim/neovimで「HTMLタグの値を簡単に変更する」キー操作です。

スポンサードリンク

[解答] cit

VimでHTMLタグの値を変更するオペレータ+モーション cit

(ノーマルモード)
cit

こちらは次のような意味合いになります。

  • c -> 「変更」のオペレータ
  • it -> カーソルのあるHTMLタグの値を指定するモーション(移動)

このとき、カーソルがある位置はHTMLタグでも値の位置でも、どちらでも構いません。

VimでHTMLタグの値を変更する
VimでHTMLタグの値を変更する

このようにHTML編集では、非常に頼りになるキー操作になります。

この他にも次のようなキー操作で、編集速度を上げることができます。

VimでHTMLタグの属性値を変更するオペレータ+モーション ci”

(ノーマルモード)
ci"

こちらは次のような意味合いになります。

  • c -> 「変更」のオペレータ
  • i” -> カーソルのあるHTML属性値を指定するモーション(移動)

このとき、カーソルがある位置はHTMLタグの属性値の位置にある必要があります。

VimでHTMLタグの属性値を変更する
VimでHTMLタグの属性値を変更する

HTML属性だけでなく、HTMLファイルに含まれる CSS や JavaScript の “”ブロックの編集にとても便利ですね。

VimでHTMLタグを削除するオペレータ+モーション dat

(ノーマルモード)
dat

こちらは次のような意味合いになります。

  • d -> 「削除」のオペレータ
  • at -> カーソルのあるHTMLタグ全体を指定するモーション(移動)

このとき、カーソルがある位置はHTMLタグでも値の位置でも、どちらでも構いません。

VimでHTMLタグを削除する
VimでHTMLタグを削除する

このキー操作だと、タグと値が丸っと削除できるので便利です。

とっさに手が動くようになるまで練習しましょう!

Vimで思考のスピードで編集する技術の1つ:モーション(移動)+オペレータ

先にもご紹介した通り、Vim / neovim を使って高速に編集するテクニックの1つとして、次の組み合わせを使いこなすことが挙げられます。

(ノーマルモード)
オペレータ + モーション

適用する編集内容と範囲について数個のキーで実行できる仕組みとなります。

vim ヘルプでは次のように表現されています。

移動コマンドはオペレータコマンドの後に続けることができ、カーソルが移動する間のテキストにそのオペレータコマンドを施すことができます。つまりは移動前と移動後のカーソル位置の間のテキストです。

motion – Vim日本語ドキュメント

少ないキー入力(ステップ)で、多彩な機能が実行できる Vim / neovim の便利さを象徴する機能とも言えますね。

この仕組みを最大限に生かすためには、数あるオペレータとモーションを覚える必要があります。

オペレータとは

オペレータ(オペレータコマンド)は、削除や変更などの編集機能(オペレーション)を指定するために使われます。

主なオペレータはこちら。

キーオペレーション(実行内容)
c変更
d削除
yヤンク
~
g~
大文字/小文字の入れ換え
gu小文字にする
gU大文字にする
>インデント下げ
<インデント上げ
zf折り畳み作成

他にもいくつかありますが、使い方が非常に複雑になるため省略しています。詳しくは Vim ヘルプをご覧ください。

“inner” モーションとは

モーションとは、通常は「カーソルの移動」を指します。しかし、オペレータなどと組み合わせる場合には、その適用範囲を示すことになります。

その中でも、今回紹介するのは “inner” が付くモーションです。

キーモーション(移動)
左 iW
右 iw
カーソル下にある単語
(スペース含まず)
左 aW
右 aw
カーソル下にある単語
(スペース含む)
is
as
カーソル下にある文
(i: スペース含まず、a:スペース含む)
ip
ap
カーソル下にある段落
(i: スペース含まず、a:スペース含む)
a) / a( / ab
i) / i( / ib
a} / a{ / aB
i} / i{ / iB
a” / a’ / a`
i” / i’ / i`
a> / a<
i> / i<
カーソル下にある各記号のブロック
(i: スペース含まず、a:スペース含む)
at
it
カーソル下にあるタグブロック
(i: スペース含まず、a:スペース含む)
後方 (
前方 )
1段落
後方 ]]
前方 [[
1セクション
次 ]m / ]M
前 [m / [M
メソッド

モーションはオペレータよりも更に沢山あります。

用途によっても利用要否が変わってきますので、こちらを一読して必要なモーションだけピックアップしておくのも1つの上達法でしょう。

利用例

次のようにバリエーションが非常に豊富です。

キー処理内容
dis カーソル下にある一つの文章を削除する
ci” カーソル位置にある””ブロックの中身を削除する
ca(カーソル位置にある()ブロックを丸ごと削除する

補足情報

  • 利用頻度5.0
  • 便利さ5.0
  • 覚え易さ3.0

関連するVimヘルプ

Vimからは、下記のコマンドでヘルプを確認できます。

:help motion.txt
:help operator

ヘルプで検索するときは、通常は大文字小文字は識別されませんので、どちらでも構いません。

参考書籍

こちらの書籍でも 「オペレータ+モーション」 が詳しく紹介されていますので、ぜひ確認しましょう。


Vim/neovim関連の書籍で、もっとも評判が良くてバイブルと呼んでる人もいる一冊です。Vim/neovimのバージョンに依存しない沢山のTips形式で、その表題通りに「思考のスピードで編集」できるようになるノウハウが詰まっています。その高い評価は Amazon のレビューからも分かる通りです。Vimmer なら必ず一度は読んでおいて間違いありません。


こちらもVim関連の書籍で評価が高い書籍の一冊です。vim-jpで見かける上級Vimmer(Vimサポーターズ)の皆様による、Vimを実践で使ったノウハウからプラグイン関連の情報が詰まっています。日本の Vim界隈を知る上でも是非一読しておきたい一冊です。

Vim/neovim の設定ファイルやプラグインなど、Vim script に関するノウハウがいくつも詰まった一冊です。日本で Vim Script をここまで深く解説している唯一の書籍と言えます。Vim力を伸ばしたいと考えるなら、絶対に避けては通れない書籍でしょう。

プロフィール
管理人
Vim太郎

Vim力アップして、そろそろ上級 Vimmer の仲間入りしたいIT系エンジニアの端くれです。読んでくる訪問者の皆様と一緒に、Vim力を上げていくことができる記事が書ければと考えています。

\フォローする/
スポンサードリンク
関連記事