Vim初心者によるVim基礎解説

はじめに


今回はマウスレスなテキストエディタであるVimについて学習を行ったので備忘録も兼ねて初学者の方へ向けてVimの基本操作について解説します。

なぜVimを学ぶのか

冒頭でも説明した通りVimテキストエディタですがCUIで操作が可能です。
エンジニアは環境構築等でサーバーにアクセスしCUIで操作を行うことがあります。
VimLinuxであれば大体入っているのでVimを用いてファイルの編集を行うことができます。
Vimしか使えないような環境もあるためVimの基礎習得はエンジニアにとって必須です。

またVimはコマンドで操作できるのでテキストを高速で移動、編集することができます。 操作を極めることで作業効率が上がります。

基本操作


Vimは操作ごとにモードを切り替えながら使用します。 代表的なモードは以下の4つです。

  • NORMAL
  • INSERT
  • VISUAL
  • COMMAND

NORMAL MODE

Vimの基本となるモードです。このモードではテキストの入力は行えません。
主にカーソルの移動やテキストのコピペなどができます。
また他のモードへの移行はNORMAL MODEからとなります。

INSERT MODE

テキストの入力を行うモードです。

VISUAL MODE

テキストの選択を行うモードです。 テキストを範囲指定してコピーしたり削除したりできます。

COMMAND MODE

ファイルの保存やVimの終了などの操作を行うことができます。

MODEの切り替え

それぞれのMODEへ移行するためのキーの例です。

esc : NORMAL MODEへ移行
i : カーソル上でINSERT MODEへ移行
a : カーソルの1文字後ろに移動してINSERT MODEへ移行
A : カーソルのあたっている行の最後に移動してINSERT MODEに移行
o : カーソルのあたっている行の1行下に移動してINSERT MODEに移行
O : カーソルのあたっている行の1行上に移動してINSERT MODEに移行
v: VISUAL MODEへ移行
: : COMMAND MODEへ移行

移動コマンド

キー 動作
h 左にカーソルを一つ移動
j 下にカーソルを一つ移動
k 上にカーソルを一つ移動
l 右にカーソルを一つ移動
w カーソルから空白を含む単語の末尾へ移動
e カーソルから空白を含まない単語の末尾まで移動
0 カーソルを行の先頭に移動
$ カーソルを行の末尾に移動
gg ファイルの一番上に移動
G ファイルの一番下に移動
任意の数字 + gg 任意の数字の行へジャンプ

削除系コマンド

キー 動作
x カーソル上の文字を削除
dd カーソル上の行を削除
dw カーソルから空白を含む単語の末尾を削除
de カーソルから空白を含まない単語の末尾まで削除
d$ カーソルから行の末尾まで削除
cc 行を削除してINSERT MODEに変更
r カーソル上の文字を入力された文字に置換

保存・終了コマンド

キー 動作
:w 変更を保存する
:wq 変更を保存してウィンドウを閉じる
:q 変更を破棄してウィンドウを閉じる

その他操作

キー 動作
y 選択されている範囲をコピーする
yy カーソルのあたっている一行コピーする
p コピーしたテキストを貼り付ける
u 直前の状態に戻す
/ + 任意の文字列 任意の文字列を下方向に検索する
? + 任意の文字列 任意の文字列を上方向に検索する
:s/aaa/bbb カーソルのあっている行の最初のaaaをbbbに置換する
:s/aaa/bbb/g カーソルのあたっている行のすべてのaaaをbbbに置換する
:%s/aaa/bbb/g ファイルの中のすべてのaaaをbbbに置換する

おわりに

以上Vimの基本操作解説でした。
Vim初心者に向けた記事ですがコマンドの説明だけを見てもピンとこなかったのではないでしょうか?(私は最初そうでした。)
Vimには「vimtutor」というチュートリアルが用意されており私はそれを使って手を動かしながら学習しました。 基本的なコマンドを学習できるので初心者の方はこのチュートリアルのコマンドが使用できるようになることを第一目標に設定してみてはいかがでしょうか。
私自身まだまだ使い始めの身なのでどんどん使ってVimに慣れていこうと思います!
ご閲覧いただきありがとうございました。

参考記事
https://qiita.com/Hiyajo/items/9f87c5687652da42f275

Web技術の基礎中の基礎用語解説

はじめに


今回はWeb技術に関する書籍のoutputとして表題の通りWeb技術を学ぶ上で外すことのできない基礎中の基礎用語を解説します。

以下を解説していきます。

1. プロトコル
2. ステートフル
3. ステートレス
4. クッキー
5.リクエスト
6.レスポンス
7.ポート番号

1.プロトコル

プロトコルとはインターネット上で「データをやり取りするための取り決め」(ルール)です。
身近な例だとChromeやEdgeといったWebブラウザで検索を行いWebページを閲覧するという際にもHTMLのやり取りを行うためのHTTPというプロトコルが使用されています。
よく目にするhttps://~というURLはSSLという通信を暗号化する技術を用いてHTTPを暗号化したHTTPSというプロトコルを使用していることを表しています。

2.ステートフル

ステートフルとは「状態を保持する」という意味です。 ステートフルなWebアプリとはログイン状態の保持や、ショッピングカート内容の保持が可能なアプリケーションを指します。 アクセスやログインした人によってWebページの状態を変化させることができます。

3.ステートレス

ステートレスとは「状態を保持しない」という意味です。 ステートフルとは対の意味合いです。 プロトコルの解説に登場したHTTPプロトコルはステートレスなプロトコルです。 ステートレスなプロトコルは状態を保持しないのでステートフルなプロトコルに比べシンプルで通信手順が簡素化されています。

4.クッキー

ステートレスなHTTPプロトコルで状態を保持するために考えられた技術です。 例えばWebアプリケーションなどでログインを行うとWebサーバーからクライアント側へCookieが送られPC上で保管されます。 ログイン後は画面遷移などをする度にPC上のCookieの情報をWebサーバー側に送信することによって認証を行い状態を保持することができます。

5.リクエス

WebブラウザなどからWebサーバー側に送信される要求を指します。 ブラウザで調べ物をしていて何らかのページを開くときでもリクエストは発生しています。
ブラウザに表示された検索結果をクリックすることによって「この検索結果のページを表示してください。」とWebサーバー側に要求が送られます。
この要求を送ることを「リクエス」といいます。

6.レスポンス

レスポンスはリクエストを受けてWebサーバー側が応答を返す動作のことを指します。 Webサーバーはブラウザから「この検索結果のページを表示してください。」というリクエストに対しHTMLをレスポンスとして返しています。 Webアプリケーションは無数のリクエストとレスポンスのやり取りで構成されています。

7.ポート番号

情報を受け取る側のアプリケーションの情報の受け口のことです。 受け取る情報はPCの適切なアプリケーションが処理を行わなければなりません。それがどこなのかを示しているのがポート番号です。 情報を送信する際にIPアドレスに加えポート番号を指定することで情報の受取先で適切なアプリケーションが処理を行うことができます。

おわりに

以上Web技術の基礎中の基礎用語解説でした。
初めてのアウトプットだったのでお見苦しい文章となっていると思いますがご容赦ください。 人に見ていただく文章にするのは難しいことですが自分の理解も深まっていることを感じました。 ご閲覧いただきありがとうございました。

参考文献
『プロになるためのWeb技術入門』――なぜ,あなたはWebシステムを開発できないのか 基本情報などの分厚い参考書が苦手ですが技術がなぜ必要とされたのかなどの背景が解説されていて本書は情報が頭に入ってきやすかったです。

堕落した人間がどこまで変われるか

人生初ブログをはじめてみました。

私はwebアプリケーション開発会社に勤める歴4年のアラサーエンジニアです。
スキルが高くないことを自覚しているのですが、今まで勉強をしてきませんでした。
現在はスキルアップのためHappinessChainというプログラミングスクールで勉強中です。

スクール生は皆さんモチベーションが高くハイレベルなカリキュラムをやり通すという共通の目標に向かって進んでいます。 今まで勉強を避けてきた人生だったのでこのような場に身を置けたことが自分にとって大きな一歩だと感じます。

このブログもスクールのアウトプット課題の一環で開設しました。 Qiitaも開設したので使い分けながらHatena Blogでは書く癖をつけるために技術系の話だけではなく様々なことについて投稿したいと思っています。

やるもやらないも自分次第なので頑張っていきたいと思います!