はじめての板芸 #7 ― コマンドでファイルを作る

「はじめての板芸 #6 ― コマンドで道具を用意する」の続きです。前回はコマンドプロンプト（ターミナル）を開き、デスクトップに「hangei-cli」フォルダを作りました。今回はそのフォルダの中にファイルを作り、文字を書き込んでブラウザで表示させます。引き続き、操作の主役はキーボードです。

1. フォルダに移動する

前回と同じように、コマンドプロンプト（ターミナル）を開いてください。

開いたら、前回作った「hangei-cli」フォルダに移動します。コマンドは大文字・小文字・スペース・綴りを、記事の通りに正確に打ってください。1文字でも違うとエラーになります。

Windows の場合

1. 次のコマンドを打って Enter を押す

   cd Desktop\hangei-cli

Mac の場合

1. 次のコマンドを打って Enter を押す

   cd ~/Desktop/hangei-cli

2. 「"ターミナル"から"デスクトップ"フォルダ内のファイルにアクセスしようとしています」というポップアップが出たら、「OK」を押す（初回のみ。#6で許可済みなら出ない）

これで、今いる場所が「hangei-cli」フォルダの中に変わりました。#1〜#5で「hangei」フォルダをダブルクリックして開いたのと同じことです。~（チルダ）をつけると、ターミナルを開いた直後にどこにいても確実にデスクトップへたどり着けます。

2. ファイルを作って文字を書き込む

#2では、テキストエディタを開いて文字を打ち、「名前を付けて保存」しました。今回は、コマンド1行でファイルの作成と書き込みを同時に済ませます。

Windows の場合

1. 次のコマンドをそのまま打って Enter を押す

   echo ^^こんにちは^ > index.html

Mac の場合

1. 次のコマンドをそのまま打って Enter を押す

   echo '<meta charset="UTF-8"><h1>こんにちは</h1>' > index.html

「こんにちは」の部分は、自分の好きな言葉に変えて打ってください。名前でも、今日の気分でも構いません。

3. 中身を確認する

ファイルが作れたか、コマンドで確認します。

Windows の場合

1. ファイルの存在を確認する

   dir

2. ファイルの中身を表示する

   type index.html

Mac の場合

1. ファイルの存在を確認する

   ls

2. ファイルの中身を表示する

   cat index.html

さきほど打った内容がそのまま表示されたら成功です。テキストエディタで「ファイル→開く」をしなくても、コマンドだけで中身が読めます。

4. ブラウザで開く

最後に、作ったファイルをブラウザで開いて画面に文字が出ることを確認します。これもコマンドでできます。

Windows の場合

1. 次のコマンドを打って Enter を押す

   start index.html

Mac の場合

1. 次のコマンドを打って Enter を押す

   open index.html

ブラウザが立ち上がり、大きな文字で「こんにちは」（または自分が書いた言葉）が表示されたら成功です。

ファイルを作る → 中身を確認する → ブラウザで開く。#2ではマウスで何度もクリックした工程が、コマンド数行で終わりました。

5. まとめ

• cd Desktop/hangei-cli でフォルダの中に移動する
• echo 〇〇 > index.html で、ファイルの作成と書き込みを1行で済ませる
• type（Windows）/ cat（Mac）でファイルの中身を画面に表示して確認する
• start（Windows）/ open（Mac）でブラウザ表示もコマンドでできる
• マウスに一度も触れずに、ファイル作成から表示確認までたどり着ける