vi 基本ガイド

Webbieより

最初から全部覚えなくて大丈夫です。

ホームページ作業で最初に必要なのは、開く・入力する・保存する・終了する・検索する、の基本です。まずはそこだけ覚えれば十分です。

vi とは何ですか？

vi は、Linux や Unix 系サーバーでよく使われる文字編集ソフトです。 PuTTY などでサーバーに入ったあと、ファイルを直接開いて編集できます。

つまり、ホームページの

ちょっとした文字修正
リンクの修正
画像パスの修正
タイトルや見出しの修正

などにとても役立ちます。

vi が最初わかりにくい理由

vi には「モード」があります。これが最初の壁です。

通常モード

最初に入るモードです。この状態ではキーが「文字入力」ではなく「命令」になります。

入力モード

実際に文字を打ち込むモードです。i などを押して入ります。

コマンドモード

: を押して入る保存や終了のためのモードです。

大事

迷ったら `Esc` を押してください。

vi がおかしく感じたら、たいてい今いるモードが思っているものと違います。そんなときは Esc を1回か2回押してください。まず通常モードに戻るのが基本です。

最初に覚えるべき基本コマンド

コマンド	意味	使いどころ
`vi index.html`	ファイルを開く	ページを編集したいとき
`i`	入力モードに入る	文字を入力したいとき
`Esc`	通常モードに戻る	保存や終了の前
`:w`	保存	変更を保存したいとき
`:q`	終了	vi を閉じたいとき
`:wq`	保存して終了	一番よく使う
`:q!`	保存せず終了	失敗してやり直したいとき
`dd`	1行削除	いらない行を消すとき
`yy`	1行コピー	行を複製したいとき
`p`	貼り付け	コピーした行を下に入れるとき
`/word`	検索	文字や class 名を探すとき
`n`	次の検索結果へ	検索を続けるとき

ファイルを開く

まずはサーバーの正しいフォルダへ移動してから、vi でファイルを開きます。

cd /home/youruser/public_html/ja/tools
vi vi-basics.html

すでにファイルがあればそれを開きます。なければ、保存したときに新しく作られます。

文字を入力する方法

vi を開いた直後は、ふつう通常モードです。文字を入力するには i を押します。

i = カーソル位置から入力
a = カーソルの後ろから入力
o = 下に新しい行を作って入力

最初は i だけ覚えても十分です。

例

たとえば新しいHTMLを書き始めたいなら、i を押してから次のように入力します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>私のページ</title>
</head>
<body>
  <h1>こんにちは</h1>
</body>
</html>

入力が終わったら、Esc を押して通常モードに戻ります。

保存と終了

Esc を押して通常モードに戻ったら、次を使います。

:w = 保存
:q = 終了
:wq = 保存して終了
:q! = 保存せず終了

いちばんよく使う形

Esc
:wq

安心ポイント

`:q!` は逃げ道です。

変なことになった、やり直したい、保存したくない。そんなときは :q! で保存せずに閉じれば大丈夫です。

ファイルの中を移動する

矢印キーが使えることも多いですが、昔ながらの vi の移動キーもあります。

h = 左
j = 下
k = 上
l = 右

最初は矢印キーでもかまいません。

1行削除する

消したい行の上にカーソルを置いて、通常モードで次を押します。

dd

例

<h2>ツール</h2>
<h2>ツール</h2>
<p>PuTTY と WinSCP と vi を学びます。</p>

2つ目の不要な <h2>ツール</h2> の上で dd を押せば、その行が消えます。

1行コピーして貼り付ける

通常モードで:

yy = 今いる行をコピー
p = 下に貼り付け

例

<a href="/ja/tools/">ツール</a>

この行を複製したいなら、行の上で yy、そのあと p を押します。その後、複製された行の文字だけ直せばよいので楽です。

検索する

通常モードで、スラッシュ / のあとに探したい文字を入れます。

/site-footer

Enter を押すと、その文字列へ移動します。

n = 次の検索結果
N = 前の検索結果

HTML では検索はとても便利です。たとえば:

hero
site-header
webbie
画像ファイル名
見出し文字列

ホームページ作業で vi が役立つ場面

見出しの誤字修正
画像URLの修正
ナビゲーションリンクの修正
電話番号やメールアドレスの修正
タイトルや説明文の微調整
1行追加・1行削除

大きな全面改造はローカルでやる方が楽なことが多いですが、ちょっとした修正には vi はとても強いです。

例：画像URLを直す

たとえば、次の行が古い画像を指していたとします。

<img src="/images/old-hero.jpg" alt="Website planning">

これを新しい画像に変えたい:

<img src="https://website.co.jp/images/website-planning-chatgpt.jpg" alt="Website planning">

流れはこうです。

/old-hero で検索
i で入力モードに入る
URL を直す
Esc
:w で保存

よくある実務の流れ

PuTTY などでサーバーへ入る

まずサーバーにログインします。

正しいフォルダへ移動する

cd で目的のディレクトリへ行きます。

vi でファイルを開く

例: vi vi-basics.html

必要な場所を検索する

/ で class 名や文字を探します。

小さく直す

i で直して、Esc で戻ります。

保存する

:w または :wq を使います。

バックアップを取ってから直すのも大事

重要なファイルを直す前には、コピーを作ると安心です。

cp vi-basics.html vi-basics.html.bak

これで、もし失敗しても元に戻しやすくなります。

vi を使う前に便利なコマンド

コマンド	意味
`pwd`	今いる場所を表示
`ls`	ファイル一覧を表示
`ls -l`	詳しい一覧を表示
`cd foldername`	フォルダ移動
`cp file file.bak`	バックアップ作成

よくある失敗

1. 入力モードのまま保存しようとする

:wq が文字としてファイルに入ってしまったら、入力モードのままです。 Esc を押してからもう一度やってください。

2. 保存したつもりで閉じてしまう

ウィンドウを閉じるだけでは保存されません。必ず :w か :wq を使います。

3. 間違ったフォルダのファイルを直してしまう

先に pwd と ls を見て、本当に正しい場所か確認してください。

4. 大きな改造を無理に vi でやろうとする

vi は小修正には強いですが、大改造はローカルでやった方が楽なことも多いです。

実務の考え方

vi は苦しむための道具ではありません。

「自分でちょっと直せる」状態になるための道具です。小さな修正を他人任せにしなくてよくなる、そこが大きな価値です。

最小チートシート

vi filename.html   ファイルを開く
i                  入力モード
Esc                通常モードへ戻る
:w                 保存
:q                 終了
:wq                保存して終了
:q!                保存せず終了
dd                 1行削除
yy                 1行コピー
p                  貼り付け
/searchword        検索
n                  次の検索結果

確認

この6つができれば十分なスタートです。

完了: 0/6

vi でファイルを開ける

i で入力モードに入れる

Esc で通常モードへ戻れる

:w で保存できる

:wq か :q! を使い分けられる

/ で検索、または dd で行削除ができる

次のおすすめ ファイルのアップロードやサーバー上の整理を視覚的にやりたいなら、次は WinSCP の基本へ進んでください。

次へ: WinSCP 基本ガイド