公開日: 2021年02月21日

Vimの操作を覚えよう

プログラミング学習を始めた方の中には、コマンドプロンプトやターミナルを使ったLinuxのコマンド操作に苦手意識をお持ちの方もいるのではないでしょうか。

そこで今回はLinuxのテキストエディタである『Vim（ビム）』の基本操作について分かりやすく解説していきます。Linuxコマンドを自由に扱えるようになると作業効率が上がるので、ぜひこの機会に手を動かして覚えてみましょう。

Vimをインストールしてみよう
Vimをインストールしよう
Vimでファイルを開く＆保存してみよう
Vimのカーソル操作を覚えよう
Vimでコードをコピペしよう
練習問題
まとめ

Vimをインストールしてみよう

『Vim』とはLinux向けのテキストエディタで、ターミナル（コマンドプロンプト）上でファイルの操作やコードの編集ができる便利なツールです。実際の開発現場でも頻繁に遭遇します。

Vimは通常のメモ帳などのテキストエディタと違い、特殊なコマンド操作が求められます。最初はとっつきにくいと感じるかもしれませんが、本記事で実際にVimを操作して慣れていきましょう。

Vimをインストールしよう

それではVimをインストールしていきましょう。ターミナル（コマンドプロンプト）を開き、下記コマンドを実行します。

vi --version

//実行結果（以下は実行する必要ありません）
VIM - Vi IMproved 8.1 (2018 May 18, compiled Jun  5 2020 21:30:37)
macOS version.....
(以下省略)

実行結果のような結果が返ってきた方は、既にVimをインストールできているので、次の章に進んでください。結果が異なる方は、下記コマンドを実行して、インストールしていきましょう。

yum install vim

ちなみに『yum』とは便利なパッケージをインストールしたり、パッケージのバージョンを管理するツールです。パッケージは、スマートフォンのアプリのようなものだという理解で問題ありません。

Vimをインストールできたか確認するために、下記コマンドを実行してください。

vim

実行結果が下画像のようになれば、vimの起動に成功した証拠です。Vimの操作を終了させるために、ターミナルで「:q」と実行しましょう。

:qはVimのコマンドの一部で、ファイルの内容を保存せずにVimを終了するという意味になります。このコマンドは頻繁に使用するので、覚えておきましょう。

Vimでファイルを開く＆保存してみよう

この章では、Vimを使ってファイルの編集・保存する方法について解説していきます。まずはLinuxのコマンドを使って、サンプルのディレクトリ・ファイルを作成していきましょう。

Vimを終了できたことを確認した後、下記コマンドを実行してください。

cd
mkdir vimpractice
cd vimpractice
vim sample.txt

下画像のように再度Vimが起動します。Vimであるファイルを開くには、vimコマンドの後に、ファイルのパスを入力しましょう。

vim ファイルのパス

sample.txtを開いたままで、下記文章をコピーして貼り付けてください。

これは1行目です。
これは2行目です。
これは3行目です。
これは4行目です。
これは5行目です。

これでsample.txtの中にテキストが入力された状態になりました。ファイルの内容を保存するには、「:wq」コマンドを実行します。

ここでVimの操作画面が「INSERT」モードになっていないことを確認して、「:wq」コマンドを実行してください。仮に「INSERT」モードになっている場合は、キーボードで「esc」を実行しましょう。

Vimのカーソル操作を覚えよう

この章では、Vimのカーソル操作について解説していきます。冒頭でもお伝えした通り、Vimには特殊なコマンドが用意されています。

下表に頻繁に使用するカーソル操作のコマンドをまとめておきました。実際にコマンドを入力して挙動を確認してみてください。

では、下記手順にしたがってカーソル操作を行っていきましょう。

①sample.txtをvimで開く。（既にファイルを開いている方は、不要です。）
②「INSERT」モードになっていないことを確認する。モードを切り替える場合は、「esc」キーを実行する。
③「gg」コマンドを実行して、1行目の先頭に移動する。
④「j」コマンドで5行目に移動する。
⑤「l」コマンドで5行目の末尾まで移動する。
⑥再度「gg」コマンドを実行して、1行目の先頭に移動する。

Vimでコードをコピペしよう

次にVimでコードをコピー＆貼り付けする方法について解説していきます。

ちなみにVimでは、コピーやペーストという言葉ではなく、「デリート」や「ヤンク」といった特別な呼び方があります。

ではここまで学んできたコマンドを使いながら、テキストをコピー＆ペーストしていきましょう。sample.txtを開いていない方は、ターミナルで「vim sample.txt」を実行して、Vimを起動してください。

ファイルを開けたら、下記手順に沿って操作を行っていきましょう。コマンド操作を誤った場合、「u」コマンドで前の状態に戻れます。

①「INSERT」モードになっていないか確認する。モードを切り替える場合は、「esc」キーを実行する。
②「gg」コマンドで1行目の先頭にカーソルを移動する。
③「d」と「$」を同時で実行して、1行目をカットする。
④「これは5行目です。」の行末にカーソルを合わせる。
⑤「p」コマンドを実行する。
⑥カットした「これは1行目です。」のテキストが、最後の行に貼り付けされる。

下画像のようになれば成功です。

練習問題

ここまで学習してきたコマンドを使い、練習問題に取り組んでみましょう。

①好きな場所に「vim_sample」という名前のディレクトリを作成。
②「vim_sample」ディレクトリの中に、「index.html」を作成。
③vimで「index.html」を開き、下記コードを貼り付ける。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

④コードを貼り付けられたら、保存してVimを終了する。

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら