Web プログラミング

【もりけん塾65日目】Macのターミナルでvimのtutorial

フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。

 

もりけん先生(@terrace_tech)に以前vimの説明を受けました。

 

しかしそのときは全然理解できずに放置…

 

しかしコードを打つと時間がかかる事がわかり、vimが必要だと感じたので今日はmacのターミナルでvimを学んだのでまとめていきます。

macのターミナルでvimのtutorial

vimを使ってコーディングをしたいと思いmacのターミナルにあるvimtutorを受けました。

 

開き方は、

  1. macでターミナルを開く
  2. 「vimtutor」+Enter

これだけです。

 

すると以下のようなチュートリアル画面が開きます。

 

 

vimtutorの3ステップ

レッスンは1~7まであります。

 

レッスンごとに

  1. 読んで
  2. やって
  3. 要約されている

形になるので覚えやすいです。

 

レッスンの内容

レッスンの内容について簡単にご紹介していきます。

 

  1. カーソルの移動、vimの起動と終了、テキスト編集と削除、挿入、追加
  2. 削除、オペレータとモーション、カウント、行の操作、やり直しコマンド
  3. 貼り付け、置き換え、変更
  4. 位置とファイルの情報、検索、対応する()の検索、間違いを変更
  5. 外部コマンドを実行、他ファイルの書き込み、ファイルの取り込みと合併
  6. オープンコマンド、追加、置換方法、コピペ、オプションの設定
  7. ヘルプコマンド、起動スクリプト作成

 

25~30分ほどで学べるようになっています。

操作方法

操作方法についてまとめていきます。

①モード

モードは以下の4つ。

 

4つのモード 機能 モード切り替え
通常モード(コマンドモード) カーソル移動、コピペ、削除 Escで通常モードへ
挿入モード 入力、貼り付け、単語削除 iなどで挿入モードへ
ビジュアルモード 範囲選択、コピー、削除、フィルター vなどでビジュアルモードへ
コマンドラインモード 保存、終了 :などでコマンドラインモードへ

 

モードの切り替え方法は以下の画像がわかりやすかったのでお借りしました。

 

引用:はじめてのVim 〜 Vimはいいぞ!ゴリラと学ぶVim講座(1)

 

macキーボード左上にある「Esc」ボタンを押すと通常モードに戻ります。

 

VSコードでコピーをすると勝手にモードが変わるので「Esc」だけをとりあえず覚えておくと良かったです!(初心者なもので…)

②コマンド

コマンドについてまとめていきます。

カーソル移動

h,j,k,lでカーソル移動をしていきます。

 

方向
h 左へ移動
j 下へ移動
k 上へ移動
l 右へ移動
gg ファイル先頭へ
G ファイルの最後へ

 

Google Chromeでvimiumを使っている方には馴染みあるコマンドだと思います。

 

Google上でもvim(キーボードのみ)で済ますようにしてくれるので便利なツール。

削除

削除方法です。

 

削除内容
x 一文字の削除
dw 単語の削除
d$ 文末までの削除
d 削除コマンド
dd 行全体の削除

 

Deleteもテキスト編集時に使用可能でした!

貼り付け

貼り付け方法です。

 

内容
通常モードでp 貼り付け
yy 一行コピー

 

検索

次は検索。

 

内容
通常モードで「/」 検索
n 同じ語で検索したいとき

 

テキスト

テキストについて。

 

内容
i テキスト挿入
a テキスト編集

 

その他のコマンド

そのほかのコマンドです。

 

内容
w カーソルから空白含む単語の末尾まで
e カーソルから空白を含まない単語末尾まで
$ カーソル位置から行末まで
u やり直しコマンド
shift+u 全てやり直す
w 単語
$ 行末
r 置き換え
% ()に移動、デバッグ時に役立つ
0 行頭に移動
:q1 チュートリアル終了
2w 単語2つ前に移動
3e 3つめの単語の終端に移動
Control+R 取り消しの取り消し
cw 変更コマンド、挿入も行える
!lsか!dir シェルプロントのようにディレクトリ一覧

 

他にもたくさんあります!

 

VSCodeで始めるVimの記事がより多くのコマンドについての紹介があったので詳しくはこちらをご覧ください。

おわりに

vscodeで範囲選択をして一度に編集したいので今回vimを学びました。

 

しかしまだ範囲選択で編集する方法がよくわかっていないのでやりながら探していこうと思います。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada