Vimはじめました(2019/12〜)

HTMLの課題でお題通りのものを作る、というものがありました。

先生がチェックする項目は
①背景色
②コンテンツが 960px×500px か
③画像のサイズがheight200px か

一番に出来たというのにコンテンツのセンタリングを忘れたぬるです。
marginを指定してセンタリングし直して再度みてもらうとOKをもらえました。爪が甘いのがポイントです。

HTMLも大丈夫で、CSSは、「これだけ？」って驚かれました。
何で画像を丸くできているのか聞かれ、imgにborder-radiusをかけてるのを伝えるとそれも驚かれました
overflowとか使わずにできるのか、imgにかけるだけでいいのか。知らなかった。って言われました。(overflowって何だろうと、そちらのやり方を知らなかっただけだったり)

ただ相対パスが指定できなすぎて、imagesフォルダ作って画像突っ込んだのはくやしかった。

そういった問題も解きつつHTML/CSSで準備運動をし、Javaを学ぶための環境設定がスタートです。

まずGitをインストールしてGitbashを使えるようにしました。

そしてvimを教わることに。

vimtutor [ヴィムチューター]
vim の チュートリアル

pwd [プリントワーキングディレクトリ]
今いる場所

cd [チェンジディレクトリ]
指定した場所へ

ls [リスト]
ファイル一覧
ls -l
縦表示(d は ディレクトリ(フォルダ)、- は ファイル)
ls -la
隠しファイルも含めて表示

cat [キャット]
中身が見れる

mkdir [メイクディア(メイクディレクトリ)]
フォルダを作る

start chrome index.html
クロームでファイルを開ける

vi [ヴィム]
ヴィムの中に入る

source [ソース]
+ ファイル名で ファイルの読み込み(適用させる為)

<ESC>:q!<ENTER> [クイット]
変更を破棄してヴィムから出る

<ESC>:wq!<ENTER> [ライトアンドクイット]
変更を保存してヴィムから出る
(大文字)ZZでも同じ

i [インサート(挿入)]
カーソル位置に追加
Shift + i
先頭に挿入

a [アペンド(加える)]
行末に追加

o [オープン]
下に追加

Shift + o
上に追加

p [プット(置く)]

カット(削除)、コピー、貼り付け
カット(削除)　x dd 3dd
貼り付け p
コピー yy 3yy

u [アンドゥ(一操作前の状態に戻す)]
u(小文字) 前回の動作を取り消す
U(大文字) 行全体の変更を取り消す
CTRL-R 取り消しの取り消し
x []

d [削除コマンド(デリート)]
d + モーション
Shift + d
モーション(何に対して働きかけるか)
w カーソル位置から空白を含む単語の末尾まで
e カーソル位置から空白を含まない単語の末尾まで
$ カーソル位置から行末まで
%

dd 行全体を削除
オペレータ [数値] モーション
オペレータ(削除 d の類で何をするか)
数値(そのコマンドを何回繰り返すか)
モーション(w(単語)や $(行末)などの類でテキストの何に対して働きかけるか)

w [ワード(単語)]
単語単位で移動
b　との違いは？？→調べる
2w [ツーワード]
2つ分の単語前
3e []
3つ目の単語
o []
行頭

移動系のコマンド(ノーマルモード)

gg: 先頭へ
G: 終わりに

CTRL+f /CTRL+b 画面単位の移動

w /b 単語単位の移動

^:行頭
$:行末
f(文字):文字までジャンプ、;で次にいきます。
%: 対応するかっこにジャンプ

f[ファインド]

CTRL + G [ゴー]
ファイル名と行番号を表示

G [Shift + G]
最下行に移動

行の番号 + G(大文字)
その行に移動

gg []
ファイルの先頭

検索
/ [下方向]

? [上方向]

n(小文字)
同じ語をもう一度検索

N(大文字)
逆方向に語句を検索

CTRL + o [元の場所]

CTRL + I [前方向]

% [対応する括弧]

置換

:s/old/new/

複数行から見つかる文字を変更するには
:#,#s/old/new/g
#,# には置き換える範囲の開始と終了の行番号を指定

g は行全体
gc は毎回チェックしながら
:%s/old/new
はファイル全体

検索 /
n:下方向
N:上方向
* # :今カーソルがある位置の単語を検索

置換
:s/old/new/
:s/old/new/g
:s/old/new/gc
:%s/old/new/

<ESC> もしくは Ctrl + c
ノーマルモード

移動

Shift + H [ハイ]
上部に移動

Shift + M [ミドル]
中程に移動

Shift + l [ロウ]
下部に移動

Shift + V [ヴィジュアルモード]
J で下方向に複数行選択

Shift + >
インデント(増やす)

Shift + <
インデント(減らす)

v: 文字単位のビジュアルモード
V: 行単位
CTRL+v:短形単位
gg V G:全選択

:set nu [セットナンバー]
行番号表示

:set nonu
行番号非表示

:sp ウィンドウ分割
:vs 横に分割
:close 分割を閉じる
CTRL+W +W :ウィンドウ間移動

:tabnew
:tabdo %s/old/new/g
vim -p filename filename

CTRL+n 補完

CTRL+V →行頭を選択 → I → (文字) → ESC
行頭に一気に文字を追加挿入

cit 一気に文字変更(テキストオブジェクト)
c/d/y:change (delete&insert)

ci" だと""の中
ci( だと()の中

i/a:中身か全体か

t/"/)/]:tag
<title></title>

黒い画面(ターミナル・コマンドプロンプト)でプログラミングを学べるとは思わず、めっちゃくちゃ興奮したことを今でも覚えています。

いきなり統合開発環境で学んでも私の場合、多分身につかないだろうなぁと思っていて、Javaの予習の時もターミナルでやっていたので、本当にうれしかったです。

ここから本格的にプログラミングの勉強がスタートしました。