クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > 開発環境 > 黒い画面だけでWebページを作成-後編：viエディタでコーディング！

黒い画面だけでWebページを作成-後編：viエディタでコーディング！

開発環境 HTML CSS JS

「前編」の続きです。前編ではフォルダ作成（mkdir）、ファイル作成（touch）・複製（cp）・移動（mv）・削除（rm）を行いました。後編ではいよいよテキストエディタを使わず、黒い画面だけでコーディングを行います。ターミナルの中に内蔵されているviエディタを使います。

【目次】

※参考：前編はこちら
黒い画面だけでWebページを作成する - 前編：ファイル、フォルダの作成 - クモのようにコツコツと

作成したファイルの中身はまだない…

さて、現状では作成したファイルの中身はまだ空です。こちらはテキストエディタでindex.htmlを開いた画面。 f:id:idr_zz:20181126231554j:plain

これをテキストエディタを使わずに黒い画面だけでファイル編集をしたい。

まずはターミナルを開きcdコマンドでhtmlディレクトリへ移動

$  cd Desktop/html

もし「前編」の最後（jsディレクトリ）のままの方は親（html）ディレクトリへ移動

$  cd ../

エンターで実行！

コンピュータ名:html ユーザ名$

ディレクトリがhtmlに移動します。

viコマンドでHTMLファイルを開く

黒い画面だけでファイル編集するのはviコマンドです。VisualまたはVisual Interfaceという意味のようです。

$ vi ファイル名

viコマンドでindex.htmlを開く

$ vi index.html

viエディターが開きました！ f:id:idr_zz:20181122220514j:plain

viエディターが開いた初期の「コマンドモード」はReadonly（読み込みのみ）のためファイルを編集ができません。

ファイルを編集するには「入力モード」にします。以下の5種類です。

iキー：現在のカーソル位置に文字を挿入する
Rキー：現在のカーソル位置から文字を上書きする
Aキー：現在のカーソル行の最後に文字を追加する
Oキー（大文字）：現在のカーソル行の前の行に行を挿入する
oキー（小文字）：現在のカーソル行の次の行に行を挿入する

※参考：viコマンドについて詳しくまとめました 【Linuxコマンド集】

iキーで文字を挿入

さあ、ここにコードを打っていきます。ファイルに文字を挿入するにはiキーを打ってinsertという意味です。

i

エンターで実行！ f:id:idr_zz:20181126234325j:plain 画面の最後の行に[insert]という表示が！

HTMLのコードを挿入します。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
<title>黒画面でコーディング</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<article>
<h1>黒画面だけでコーディングはできるのか？</h1>
<p>テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。</p>
<p>テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。</p>
<p>テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。</p>
</article>
<script src="js/script.js"></script>
</body>
</html>

※参考：HTML、CSS、JSの基本はこちら
【HTML、CSS、JSの書式】これを読めばコードが読める！書ける！まとめ！（基本5+応用1記事） - クモのようにコツコツと

/headタグの直前でCSSファイルを読み込んでます。

<link rel="stylesheet" href="css/style.css">
</head>

/bodyタグの直前でJSファイルを読み込んでます。

<script src="js/script.js"></script>
</body>

viエディターの画面ではこんな見た目です。 f:id:idr_zz:20181126234604j:plain viエディターはシンタックスハイライト（プログラミング言語の固有の単語、記号に色がつく）がないんですね。。

viエディターを閉じる

「入力モード」の終了にはESCキーを押します。最後の行の[insert]が消えてコマンドモードに戻ります。

f:id:idr_zz:20181126235614j:plain

viの編集内容を保存して閉じるには:wqと打ちます。wは保存、qは終了を意味します。（もしエラーになる場合は:wq!と打つと確実に終了ができます）

※参考：TEMPEST: Fedoreの技 viでwなしで上書きするには

:wq

f:id:idr_zz:20181127001244j:plain

エンターで実行するとviエディターが閉じて、画面は先ほどのターミナルの画面に戻ります。

index.htmlをテキストエディタで開くと編集内容が反映されています！

f:id:idr_zz:20181127001645j:plain

ブラウザで開いくとこんな感じです！

f:id:idr_zz:20181127001719j:plain

viエディターで文字を打ち替えみる

ちょっと実験で、文字の打ち替えをやってみましょう。再度viエディターを開きます。

$ vi index.html

開いたらiキーで「編集モード」に。h1タイトルの文字を打ち替えます。 f:id:idr_zz:20181127002803j:plain

ESCキーで「コマンドモード」に戻り、:wq（またはwq!）でviエディターを保存して閉じる。 f:id:idr_zz:20181127002909j:plain

ブラウザで見ると編集が反映されました！ f:id:idr_zz:20181127002937j:plain

viエディタでCSSファイルを編集

次はCSSファイルを編集します。基本的にはHTMLと同じ流れです。

まずcdコマンドでcssディレクトリへ移動。

$ cd css

ディレクトリがcssに変わります。

コンピュータ名:css ユーザ名$

style.cssをviエディタで開く

$ vi style.css

viエディター画面 f:id:idr_zz:20181127003404j:plain

iキーで「編集モード」に f:id:idr_zz:20181127003538j:plain

スタイルを書きます。

h1 {
color: red;
}

viエディター画面 f:id:idr_zz:20181127003923j:plain スタイルがうまく当たれば見出しh1が赤くなるはずです。

ESCキーで「編集モード」終了 f:id:idr_zz:20181127004003j:plain

:wqでviエディタを保存して閉じる f:id:idr_zz:20181127004026j:plain 画面はターミナルに戻ります。

CSSファイルをテキストエディタで開くとちゃんとCSSスタイルが追加されてます！ f:id:idr_zz:20181127004241j:plain

ブラウザで開くとh1のスタイルが変わっています！ f:id:idr_zz:20181127004319j:plain

viエディタでJSファイルを編集

JSファイルも同じ流れでいけます！

cdコマンドでjsディレクトリに移動（cssディレクトリと並列な位置にあるので親ディレクトリ../を入れます）

$ cd ../js

ディレクトリがjsに変わります。

コンピュータ名:js ユーザ名$

script.jsをviエディタで開く

$ vi script.js

viエディター画面 f:id:idr_zz:20181127004657j:plain

iキーで「編集モード」に f:id:idr_zz:20181127004906j:plain

スクリプトを書きます。

alert("はろー、黒い画面");

viエディター画面 f:id:idr_zz:20181127005029j:plain スクリプトがうまく動けば「はろー、黒い画面」というアラートが開くはずです。

ESCキーで「編集モード」終了 f:id:idr_zz:20181127005317j:plain

:wqでviエディターを保存して閉じる。 f:id:idr_zz:20181127005506j:plain 画面はターミナルに戻ります。

JSファイルをテキストエディタで開くとこちらもスクリプトがちゃんと追加されました！ f:id:idr_zz:20181127005712j:plain

ブラウザをリロードするとアラートが開きました！ f:id:idr_zz:20181127005846j:plain

最後に

ということで、テキストエディタを使わずにターミナルのviコマンドだけでWebページ（HTML、CSS、JSファイル）を作成、編集することができました！

とはいえターミナルだとシンタックスハイライトがないのでテキストエディタの方が使い勝手は良さそうです。

ゼロからの構築ではなくても、ターミナルで作業してていてコードの一部をちょっと編集したいときには有効かもしれませんね！

これまでの作業はPCローカルの作業のみでしたので、今度はターミナルから別サーバにアクセスしてみたいですね。以前アカウントを作ったっきりになっている「GitHub」上に今回のファイルをアップしてみようかと思っています。それではまた！

※参考：ぎっとはぶ（GitHub）、始めてました。 - クモのようにコツコツと

※参考：Web開発環境の記事まとめ
qiita.com