HTML5手習い

vimのコマンド紹介

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
本コースでソースコードの編集に使用する、ターミナル環境で使用できるテキストエディタのひとつであるvimの使用方法について説明します。このレッスンでは、カーソルの移動、ファイルを開く方法、ファイルの保存、文字の編集、検索、アンドゥ、ヴィジュアルモード、コピーペーストといった、必要最低限の操作について学びます。
講師:
12:15

字幕

このレッスンでは Vim の 主要なキー操作やコマンドを紹介します レッスンを開始する前に ホームディレクトリにアセットから long.html というファイルを コピーしておいて下さい それでは Vim を起動して long.html を開きましょう vim long.html 1つ目のパラメータに ファイル名を与えれば そのファイルを Vim で開くことが可能です Enter ファイルが開きました Vim には多様なカーソルの 移動方法があります これによりソースコードの中を 素早く動き回ることができます 基本的なカーソルの移動は h, j, k, l キーを使います 「 h 」を押すと カーソルを1文字左へ 「 l 」を押すとカーソルを 1文字ずつ右へ 「 j 」を押すとカーソルを 1行ずつ下へ 「 k 」を押すとカーソルを 1行ずつ上へ 移動できます 手元でやってみて下さい h で左 l で右 j で下 k で上 という形になります 「 w 」キーを押すとカーソルを 次の単語の位置まで どんどん進めることが可能です このように単語の区切りに応じて カーソルが どんどん進んでいきます 逆に「 b 」を押すと1つ前の単語まで カーソルが戻ります Ctrl + f を押すとカーソルを 次のページに進めることができます また Ctrl + b でカーソルを 前のページに戻せます Ctrl + f を押すと カーソルを次のページへ Ctrl + b でカーソルを 前のページへ また行の途中で ^ (キャレット)キーを押すと カーソルを行の先頭へ 移動させることができます 例えば行の末尾にカーソルを移動して ^ キー このようにカーソルが一気に 行の先頭に移動しました 逆に $ キーを押すとカーソルが 一気に行の末尾へ移動します ^ で行の先頭へ $ で行の末尾へ移動 コマンドモードで gg と2回押すと カーソルがファイルの先頭にジャンプします 逆に大文字Gを押すと カーソルが一気にファイルの末尾へ飛びます gg でファイルの先頭へ 大文字 G でファイルの末尾へ このように多様なカーソルの 移動方法を使用することで ファイルの中を素早く移動することができます ファイルの保存と読み込みには 「 :w 」というコマンドと 「 :e 」というコマンドを使います 例えばこの long.html の中身を 別のファイル名で保存してみましょう コマンドモードで「 :w 」と入力して スペースで区切り 保存したいファイルの名前を指定します long2.html にしてみましょう これでファイルの保存ができました ターミナルに戻って確認してみましょう Vim の終了は「 :q 」でした Enter を押して終了 ls コマンドでファイルが作成されて いるかどうか確認してみましょう ls Enter すると long2.html というファイルが 作成されていることが分かります では今度はファイル名を指定しないで Vim を起動しましょう vim Enter すると何もファイルが読み込まれないまま Vim が起動されます この状態で「 :e 」と押して 読み込みたいファイル名を指定してみましょう 先程保存した long2.html を指定して Enter すると このようにファイルが読み込まれました 「 :q 」で Vim を 終了することができますが 編集中の内容がある場合には 終了することができませんでした その場合には保存と終了を同時にする― 「 : wq 」コマンドを使用すれば 保存してから 終了ができます ファイルをまずは編集してみましょう 「 :q 」で Vim を 終了することができますが 編集中の内容がある場合には 終了することができませんでした この場合には「 :w 」コマンドで保存してから 「 :q 」で終了するか もしくは「 :wq 」で 保存と終了を同時に行うこともできます 何か編集をしてみましょう i キーで挿入モードに変更をし 文字を入力します そして Esc キーで コマンドモードに戻り この状態で「 :q 」を押してみます 編集中の内容があるので 終了することができませんでした では「 :wq 」 そして Enter すると保存をすると同時に 終了することができました 保存がされているかどうか 確認してみましょう vim long2.html 確かに保存されています キーワードの検索をするには / コマンドを使います コマンドモードで「 / 」と打つと このように下部に / が現れます この状態で検索したいキーワードを入力します 例えば list と検索すると このようにハイライトされます そしてこの状態で n キーを押すと マッチしたキーワードの間を 次へ次へと移動していきます 逆に大文字 N を押すと マッチしたキーワードを さかのぼっていきます n で次へ 大文字 N で前へ キーワードを変えたい場合には 再度 / を押して 今度は item と入れてみます Enter を押すと検索がされ ハイライトが変わります ハイライトを解除するためには 「 :noh 」 no highlight の略です これを打って Enter を押すと ハイライトが解除されます 文字の削除を行うコマンドとしては x dw db d$ d^ dd などの コマンドがあります 削除したい文字の上に カーソルを合わせて x を押すと そのカーソルの下の文字が1文字削除されます 再度 x を押せば次々と 文字が削除されていきます また dw と押せば そのカーソルの位置から その次の単語の位置までの文字が 全て削除されます dw で次の単語の位置まで削除 また db と押せば 前の単語の位置まで削除 db でカーソルの位置から前の単語の 位置までの文字を全て削除 です また同様に d$ と押せば カーソルの位置から行末まで全て削除 逆に行末などで d^ と押せば カーソルの位置から行頭まで全て削除 あるいは dd と2回押せば その行を全て削除 dd で現在行の文字を全て削除 編集した内容を 1つ前に戻したい場合には u キーを使います またリドゥをしたい場合には Ctrl + r を使います いくつかの文字を削除した状態で u を押すと 直前の編集が取り消されます 再度 u を押すとその前の状態に どんどん さかのぼることができます 逆に Ctrl + r を押すと再実行 これも何度もできます コマンドモードで v キーを押すことで ヴィジュアルモードに入ることができます この状態で 例えばカーソルを 行の途中にもってきて 小文字の v を押します するとヴィジュアルモードになります この状態でカーソルを h, j, k, l などで移動させると 範囲を選択することができます ヴィジュアルモードは 範囲を選択する為のモードです そして Esc を押すと ヴィジュアルモードを抜けます Esc を2回押して下さい また大文字 V を押すと 今度もまた ヴィジュアルモードに入りましたが この場合は行ごとに選択される ヴィジュアルモードになります 小文字 v の場合は行の途中からでも 選択できるヴィジュアルモードでした 大文字 V ですと このように h, j, k, l を押しても 該当する行が 全て選択された状態になります ヴィジュアルモードで範囲を選択した状態で d, y, p などを押すことによって コピー&ペーストが可能です 今この範囲が選択されている状態で d を押すと このように行が削除されました 削除された内容はクリップボード Vim の場合はレジスターと呼びますが その中に保存されていて カーソルを移動して 例えば p と押すと このクリップボードの中に入っている 内容がペーストできます また再度ヴィジュアルモードで選択をして 今度は y を押すと 削除せずにコピーだけできます そしてまた p を押せば 今コピーした内容をペーストできます ヴィジュアルモードとこれらのキーを使えば コピー&ペーストができます このレッスンでは Vim の主要な キー操作やコマンドを紹介しました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。