お袋さんのプログラミングスクール学習の記録

プログラミングスクールで学習した内容をアウトプットしていきます!

vimの基本操作について

今回はテキストエディタの一種であるvimについて学びましたので、基本操作についてまとめていきます。

そもそもVimとは... Viエディタの拡張版として開発されました。Viエディタの使いやすさと高速性を維持しながら、機能の拡張、改善、強化を行い、テキストエディタの進化を遂げました。

Vimは一般的なテキストエディタとは異なる操作方法がありますが、慣れるとマウスを使わずに高速なテキスト編集が可能になります。私も使いこなせるようになるため、練習中です!

今回の解説はvimtutorでも学べる範囲ですので、ぜひ実際に手を動かして練習してみてください!テキストだけでなく、イメージと一緒に解説しているので、わかりやすいと思います。

vimtutorとは... Vimを始めて学ぶ初心者向けのチュートリアルプログラムです。ターミナル(コマンドライン)からvimtutor(日本語訳版はvimtutor ja)を実行することでチュートリアルが開始可能です。

モード変更について

Vimには以下のモードが存在しており、それぞれのモードで可能な操作が異なります。

ノーマルモード(Normal Mode)

Vimのデフォルトモードで、他のモードからEscキーを押すとノーマルモードに戻ります。ノーマルモードでは、テキストを編集するためのさまざまなコマンドが実行できます。

インサートモード(Insert Mode)

テキストを挿入・編集するモードはインサートモードと呼ばれ、ノーマルモードの状態で以下のコマンドを入力することで移行できます。

コマンド 動作内容
i 編集モードに入る(カーソル位置)

コマンド 動作内容
a 編集モードに入る(カーソル位置の右隣)

コマンド 動作内容
A 編集モードに入る(行末から)

コマンド 動作内容
o 編集モードに入る(カーソル行の下に新しい行を追加して挿入)

コマンド 動作内容
cw カーソル位置から単語の終わりまでを削除して、編集モードに入る

ビジュアルモード(Visual Mode)

このモードは、テキストの選択を行うためのモードです。選択したテキストをコピーまたは削除することができます。ノーマルモードで以下のコマンドを入力することで、このモードに移行できます。

コマンド 動作内容
v ビジュアルモードに切り替える

このモードに切り替えることで、カーソルを移動してテキストを選択し、範囲を選択してコピーまたは削除することができます。

コマンド 動作内容
V ビジュアルラインモードに切り替える

このモードでは、カーソル位置から行全体を選択することができます。

コマンド 動作内容
Ctrl + V ビジュアルブロックモードに切り替える

このモードでは、矩形範囲を選択することができます。複数の行の任意の位置からカーソルを移動し、矩形範囲を選択できます。

コピーや削除コマンドと併用することで、効率的な操作が可能です。

コマンドラインモード(Command-Line Mode)

コマンドを入力するモードです。:を入力することで、コマンドラインモードに移行できます。ファイルの保存や検索・置換などのコマンドを入力・実行できます。

カーソル移動のコマンド

カーソル移動のコマンドはモーションと呼ばれます。以下のコマンドでカーソルを移動できます。また、削除などのコマンドと組み合わせることで、「行末まで削除」「単語単位で削除」が可能です。

1マス移動

コマンド 動作内容
h(←) カーソルを左に移動する
j(↓) カーソルを下に移動する
k(↑) カーソルを上に移動する
l(→) カーソルを右に移動する

単語ごとの移動

コマンド 動作内容
w カーソル位置から空白を含む単語の末尾まで移動する
e カーソル位置から空白を含まない単語の末尾まで移動する

行頭、行末への移動

コマンド 動作内容
0 行の先頭に移動する
$ 行の末尾に移動する

ファイルの先頭、末尾への移動

コマンド 動作内容
gg ファイルの先頭に移動する
G ファイルの末尾に移動する

カウント

この機能は、特定の回数だけコマンドを繰り返し実行するためのものです。カウントを使用することで、同じコマンドを複数回実行したり、範囲を指定して操作したりすることができます。 以下のイメージでは前述の移動のコマンドと組み合わせて、移動のコマンドを複数回実行しています。

コマンド 動作内容
2w カーソル位置から空白を含む2単語目の末尾まで移動する
2e カーソル位置から空白を含まない2単語目の末尾まで移動する

削除関連のコマンド

以下のコマンドを使用すると、テキストを削除できます。 ただし、削除されたテキストは削除レジスタに保存されるため、一般的なテキストエディタのカット機能と同じように機能します。後でペーストする必要がある場合は、後述のペーストコマンドを使用して任意の場所に挿入できます。

1文字単位で削除

コマンド 動作内容
x カーソル位置の1文字を削除する
X カーソル位置の前の1文字を削除する

単語単位で削除

コマンド 動作内容
dw カーソル位置から単語の終わりまでを削除する

コマンド 動作内容
2dw(d2w) カーソル位置から空白を含む2単語目の末尾までを削除する
2de(d2e) カーソル位置から空白を含まない2単語目の末尾までを削除する

カーソル位置から行末まで削除

コマンド 動作内容
d$ カーソル位置から行末までを削除する

行単位で削除

コマンド 動作内容
dd カーソルがある行を削除

コピー関連のコマンド

以下のコマンドでコピーが可能です。コピーしたテキストは一時的に「レジスタ」に格納され、後でペーストする必要がある場合は、後述のペーストコマンドを使用して任意の場所に挿入できます。

コマンド 動作内容
yy カーソル位置の1行をコピーを行う
yw カーソル位置から単語の末尾までのコピーを行う

ペーストコマンド

前述の削除やコピーコマンドによってレジスタに格納されたテキストを、以下のコマンドを使用することで任意の位置に挿入できます。

コマンド 動作内容
p カーソル位置にコピーまたはカットしたテキストの挿入を行う

undo、redoのコマンド

以下はテキスト編集において変更の取り消しと再実行を行うためのコマンドです。間違って編集した部分を取り消したり、取り消した変更を元に戻したりすることで、テキストの編集をより柔軟に行うことができます。

コマンド 動作内容
u undo(一つ前の操作を取り消す)

コマンド 動作内容
Ctrl + r undoで取り消した操作を再実行する

検索関連のコマンド

以下のコマンドを使用すると、指定した検索文字列の検索、対応する括弧を検索することができます。

コマンド 動作内容
/検索文字列 テキスト内で検索文字列にマッチする文字列を前方検索する
n 検索中に入力することで次のマッチを検索する
N 検索中に入力することで逆方向に次のマッチを検索する
Ctrl + o 元の場所に戻る

※n, N, Ctrl + o については後述の後方検索コマンドでも同様

コマンド 動作内容
?検索文字列 テキスト内で検索文字列にマッチする文字列を後方検索する

コマンド 動作内容
% 対応する括弧を検索する

置換関連のコマンド

コマンド 動作内容
r カーソル位置の1文字を置換する

コマンド 動作内容
:s/検索文字列/置換文字列/ カーソル位置から行末までで、最初に検索文字列マッチしたテキストを置換文字列に置換する
:s/検索文字列/置換文字列/g カーソル位置から行末までで、検索文字列にマッチした全てのテキストを置換文字列に置換する

コマンド 動作内容
:%s/検索文字列/置換文字列/g ファイル全体で、すべての行において検索文字列にマッチしたテキストを置換文字列に置換する
:%s/検索文字列/置換文字列/gc ファイル全体で、検索文字列を置換文字列に置換しますが、置換前に確認を求めるようにします

外部コマンドの実行

:を押してから!を入力し、その後に実行したい外部コマンドを入力します

コマンド 動作内容
:!任意のコマンド 外部コマンドを実行する

ファイルの保存

以下のコマンドを使用することで、他のテキストエディタでいうところの上書き保存や、名前を付けて保存を行うことが可能です。

コマンド 動作内容
:w 現在開いているファイルに加えた変更を保存(ファイルの上書き保存)

コマンド 動作内容
:w {ファイル名} 現在のファイルに加えた変更を別名で新しいファイルに保存する(名前を付けて保存)

Vimの終了方法

以下のコマンドを使用して、Vimの使用を終了することが可能です。

コマンド 動作内容
:q Vimを終了する(未保存の変更がある場合は、保存していないと終了できない)

コマンド 動作内容
:q! Vimを強制終了する(未保存の変更がある場合でも、終了可能です)

別のファイルの内容を挿入する

以下のコマンドを使用することで、現在編集中のテキストに外部ファイルの内容を追加することが可能です。

コマンド 動作内容
:r ファイル名 カーソルの位置にファイル名で指定したファイルの内容を挿入する

検索に関連する挙動を制御する

以下のコマンドを使用することで、より柔軟な検索や検索体験の向上が可能です。

コマンド 動作内容
:set ic 検索時の大文字と小文字を区別しないようにする

コマンド 動作内容
:set hls ハイライト表示を有効する

コマンド 動作内容
:set is インクリメンタルサーチを有効にする(検索文字列を入力するたびにマッチする結果をリアルタイムに表示する)

補完

:(コロン)に続いてコマンドを途中まで入れた状態でTabキーを押すと、コマンドの候補を表示することができます。

ヘルプコマンド

コマンド 動作内容
:help Vimの内部ヘルプを参照する

:q コマンドで終了できます。

おわりに

ここまで読んでいただき、ありがとうございました!

以上、Vimの基本操作についてまとめてみました。 興味を持たれた方は、ぜひ詳しく調べてみて、色々なコマンドを試してみてください! Happy Vimming!

Webアプリケーションで使用されている技術について

Webアプリケーションで使用されている技術や用語について整理してみました。

現在、私自身が初学者であることから、そのレベルでの理解度で記載しています。学習を進めるにつれて理解度が深まり、自分の中の情報のアップデートがあれば適宜更新していきます!

また、ここでは触れられなかった技術についてもたくさんありますので、別途記事にて紹介したいと思っています!

ステートフル

後述の「クッキー」と呼ばれる技術を使用して実現されています。この技術により、サーバ側がクライアント側の情報を保持し、クライアントが何度もサーバにリクエストを送信し、その都度サーバがリクエストに応じた情報を返信することで、状態を持ったWebアプリケーションを作成することができます。

ステートレス

サーバーがクライアントの状態を保持しておらず、リクエストに対してレスポンスが返されたら、それ以降の通信においてクライアントの情報が保持されません。HTTPプロトコルなどで使用されます。

リクエス

クライアント⇒サーバへの要求のことで、以下の要素が含まれる。

リクエストライン

このリソースが欲しい旨の情報に加えて、リクエストの種類(GET or POST)やプロトコルのバージョン情報が含まれている。

メッセージヘッダ

リクエストの付加的な情報で、以下の要素などが含まれます。

  • クライアント側が受け取ることのできるテータや言語の種類
  • リクエスト元のブラウザの種類
  • リクエストの送信先ホスト名やポート番号
メッセージボディ

POSTリクエストの際に、ユーザが入力して情報が含まれます。

レスポンス

サーバ⇒クライアントへの応答のことで、以下の要素が含まれる。

ステータスライン

リクエストの結果とそのステータスコードが含まれており、ステータスコードを見れば、リクエストが成功したかどうかだけでなく、失敗した場合の大まかな原因もわかるようになっています。

メッセージボディ

リクエストしたデータが含まれており、HTMLをリクエストした場合はHTMLファイルがそのまま含まれ、画像ファイルなどを要求した場合はバイナリ形式でデータが含まれています。

クッキー

Webアプリケーション⇔Webブラウザでデータのやり取りをできるように作られた仕組みで、ステートフルなアプリケーションを作成するのに必要な要素です。

一般的には、あるサイトにアクセスした際のレスポンスでWebブラウザにセッション情報が設定され、次回同じサイトにアクセスした際にはそのCookie情報はリクエストヘッダに含まれて送信されます。

このように、Webサーバ側でそのセッション情報を突合することによって、対象のユーザを判別し、セッションの状態を維持することができます。例えば、一度ログインしたらしばらくは何度もログインしなくてもよいようにします。

プロトコル

通信を行う上での共通のルールです。このルールがあることによって、異なる通信機器同士でも通信が可能になっています。

ポート番号

アプリケーション毎に一意で設定され、どのプロトコルで受信したか、どのアプリケーションで処理すべきか、をTCP/IPで判別することができます。

代表的なプロトコルにはwell-known portと呼ばれるポート番号が既に決まっています。宛先にポート番号が指定されていない場合は、対象のプロトコルが分かった時点で自動的にそのプロトコルに紐づいたポート番号が設定されます。

ブログ開設しました!

プログラミングスクール Happiness Chain への入会を機にブログを開設しました!!

このブログでは主に学習を通じてのアウトプットや、自分用のメモや備忘を投稿していく予定ですので、 気になる方はぜひ閲覧していただければと思います!

簡単ですが、ブログ開設のご挨拶でした。 どうぞよろしくお願いします。