デザイナーの為の黒い画面入門（前）

2017年12月15日 13:00 （2017年12月15日 13:51 更新）

この記事は賞味期限切れです。（更新から1年が経過しています）

Web制作の現場で「黒い画面」を使うことは、近年ではごく当たり前な事になってしまいました。フロントエンドエンジニアの方はもちろん、マークアップエンジニアの方ならば抵抗は無いでしょう。しかし、デザイナーさんには未だに「黒い画面」は苦手意識がある方も少なくないのではないでしょうか。その苦手意識を払拭する為に、少しばかり「黒い画面」への理解を深めてみましょう。

デザイナーが触れる「黒い画面」
「黒い画面」ことターミナルとは
「黒い画面」の基本
「黒い画面」の怖い話
Windows環境での「黒い画面」

デザイナーが触れる「黒い画面」

そもそもデザイナーが「黒い画面」に触れる事は数年前まではあまり考えられていませんでした。黒い画面上の作業はあくまでもバックエンドエンジニアやプログラマーの領域であって、デザイナーが触れるのはPhotoshopやIllustratorといったグラフィカルなアプリケーションまでに留まっていたと思います。

ところがWebの技術が度重なる変化・進化を遂げ、JavaScriptやCSSをビルドするようになったり、Node.jsが台頭してきたりで、プロジェクトの「黒い画面」への依存度が一気に上がってきました。マークアップエンジニアは勿論のこと、肩書がデザイナーの人間も「黒い画面」を触れるようになる必要が出てきたのです。

例えば、こんなケースであったり

人手不足でデザインに加えてマークアップもやる事になった。 CSSをビルドする為に「黒い画面」が必要だ。

また例えば、こんなケースもあるでしょう。

プロジェクトにデザイナーとしてジョインしたが、マークアップエンジニアが作った画面をレビューする為に「黒い画面」でコマンドを叩かなければならない。

「黒い画面」ことターミナルとは

まず「黒い画面」とは何なのか。その正体について軽く触れてみます。

Macにおける黒い画面である「ターミナル」は、GUI（グラフィカルインターフェース）によらず、 CUI（キャラクタユーザーインターフェース）、つまり文字列のコマンドでコンピュータを直接操作する為の物であると理解しておけば良いでしょう。

例えばMacでファイルを探し出すのにFinderを使用しますが、これはGUIによる機能ですね。ターミナルでは、CUIで謎の呪文こと、コマンドを打ち込む事でそれとほぼおなじ事をすることが出来ます。（勿論CUIなので見た目はただの文字列です） Finderをはじめとした、私達が普段パソコン上で使っているGUIアプリケーションは、ターミナルで行える処理を視覚的に見やすい形、そして操作しやすい形でラッピングされているのです。

ちなみに、MacOSXは元々Unix系のFreeBSD由来のOSで、 Unix系のコマンドの多くがそのまま使用できるのはその為です。（Windowsについては後述しましょう）

「黒い画面」の基本

まずは黒い画面を立ち上げて触ってみましょう。 Mac環境ならば「アプリケーション」 > 「ユーティリティ」 > 「ターミナル」と辿っていけば立ち上がります。あるいは Spotlight 検索で “term” あたりまで入力すれば出てくると思います。

ここまで「黒さ」を連呼していますが、Macでのデフォルトは白ベース黒文字の「白い画面」になっています。なんとなく、怖さが少し和らぎますね。

コマンドを入力してみる

黒い画面への入力については、キーボードで文字を入力するだけなので難しいことはないでしょう。試しに一つコマンドを打ってみましょう。

$ whoami
[your user name]

whoami コマンドは、現在ログインしているユーザーの名前を出力します。貴方のユーザー名が表示されましたか？

「何処」で「何」を対象に「何」するか

コマンドを覚えていく前に、次の3つの事を意識するようにしてみましょう。

現在どこのディレクトリにいるか
そこで何をするか
何を対象に行うか

例えばこんなコマンドを打ったとします。

$ mkdir myfolder

上の例では、現在いるディレクトリの中に myfolder という新しいディレクトリ（フォルダ）を作成しています。

もう少し詳しく見てみましょう。コマンドはコンピューターへの命令であり、文法で言うところの述語です。基本的に、コマンドは英語の文法に則っていて、述語であるコマンドの後には目的語を指定します。

この目的語は「引数（ひきすう）」と呼ばれ、上の例では myfolder が引数に値します。つまり、 myfolder という名前で、ディレクトリを作る命令（ mkdir ）を行ったわけです。

また、命令によっては目的語を持たない（あるいは省略できる）場合もあります。

$ # ユーザー名を出力するだけなので引数が必要ありません
$ whoami
$ # 引数を省略すると、ユーザーのホームディレクトリに移動します
$ cd

さらにまた、目的語を二つとる命令もあります。

$ # 目的語1（foo.txt）を、目的語2（bar.txt）として複製する
$ cp foo.txt bar.txt

ファイルやディレクトリを引数にする

先程言ったように、コマンドには目的語である引数を渡す事が多いのですが、その引数となるのはファイル名やディレクトリ名がほとんどです。

$ rm ./needless.txt

上の例では、今いるディレクトリにある “needless.txt” という名前のファイルを削除しています。ファイル名の前についている “./” は一体なんでしょうか？これは「今いるディレクトリにあるファイル」という事を明示的に指定しています。

Unixのファイルシステムでは、ファイルの場所（パス）について次のような表現を用います。

“.” … 現在のディレクトリ
“..” … 一つ上のディレクトリ
“/” … ディレクトリの境目
一番頭が “/” … ルートディレクトリからの絶対パス

つまり上の例では、「現在いるディレクトリ下にあるneedless.txt」を指定しているわけです。

ここで「”./”は要らないのではないか」という疑問が浮かんだのではないでしょうか。その通り、”./” は省略でき、次のように表現しても同じ処理を行います。

$ rm needless.txt

省略できるのならば、なぜ例示でわざわざ “./” を付けたのかというと、その方が安心出来るからです。 ファイルを指定する時は、”./” や “../” からはじまる相対パスで表現する事をお勧めしたいです。

特に、上で例に挙げている rm コマンドはファイルやディレクトリを削除してしまう破壊的なコマンドです。必ず “./” ではじめる事を意識すれば、現在いるディレクトリを誤ったり、朦朧としながら作業をしていて操作ミスをしたりして、処理してはいけないファイルを処理してしまう危険性をわずかばかりではありますが、和らげる事ができます。

$ rm /the/path/to/target # NG
$ rm target # NG
$ rm ./target # Good

「どのように」行うか（オプション）

多くのコマンドは、「オプション」を渡すことで挙動をコントロールする事ができます。ここでは ls コマンドを例に上げてみます。このコマンドは、ディレクトリ内にあるファイルをリスト表示してくれます。

$ ls
bar.txt         directory       foo.html

何もオプションを渡さない場合、ただファイルの名前のみが羅列されます。ファイル名だけだと情報が足りないので、l オプションを追加してみましょう。

$ ls -l
total 16
-rw-r--r--@ 1 mach3  staff  212 12 12 16:03 bar.txt
drwxr-xr-x@ 2 mach3  staff   68 12 12 16:02 directory
-rw-r--r--@ 1 mach3  staff  248 12 12 16:03 foo.html

色々な情報が詰まったフォーマットで出力されました。さらにドット（”.”）からはじまる隠しファイルも表示する為に、くわえて a オプションを指定してみます。

$ ls -la
total 16
drwxr-xr-x@ 6 mach3  staff  204 12 12 16:19 .
drwxr-xr-x@ 8 mach3  staff  272 12 12 16:01 ..
-rw-r--r--@ 1 mach3  staff    0 12 12 16:19 .hidden
-rw-r--r--@ 1 mach3  staff  212 12 12 16:03 bar.txt
drwxr-xr-x@ 2 mach3  staff   68 12 12 16:02 directory
-rw-r--r--@ 1 mach3  staff  248 12 12 16:03 foo.html

またさらに、t オプションを追加して更新時間順にソートしてみましょう。（デフォルトでは名前順です）

$ ls -lat
total 16
drwxr-xr-x@ 6 mach3  staff  204 12 12 16:19 .
-rw-r--r--@ 1 mach3  staff    0 12 12 16:19 .hidden
-rw-r--r--@ 1 mach3  staff  248 12 12 16:03 foo.html
-rw-r--r--@ 1 mach3  staff  212 12 12 16:03 bar.txt
drwxr-xr-x@ 2 mach3  staff   68 12 12 16:02 directory
drwxr-xr-x@ 8 mach3  staff  272 12 12 16:01 ..

オプションを指定するルールがお分かりいただけたでしょうか。オプションは主に1文字の英数字や短い言葉で指定し、ダッシュ（”-“）の後ろに続けて打ち込む事で複数のオプションを合わせて利用する事ができます。（このルールに則らないコマンドも存在するのでご注意ください）

各々のコマンドは、それぞれのオプションを持っています。とても全てを覚えきれる物ではないので、その説明は次回に持ち越す事にします。

「黒い画面」の怖い話

「黒い画面は怖くない」と言いたいところですが、残念な事に「黒い画面」は怖いのです。

GUIのアプリケーションで警告が発せられるような処理でも、「黒い画面」は警告を発してくれません。 GUIのアプリケーションなら行わないような危険な処理も、「黒い画面」は実行してしまいます。良く知らないままにコマンドを実行して、環境を壊してしまうなんていう悲劇も往々にしてあり得る事です。

うまく動かないからネットで検索したコマンドコピペして実行したら、パソコンが起動しなくなった

ジョークみたいな話ですが、実際に私の観測圏内で起こった出来事です。

ネットで拾ったコマンドを調べずに実行しては絶対にいけません。 コマンドがどのような処理を行う物なのか、渡している引数は何なのか、どのようなオプションで実行されているか、コピーしたコマンドはつまるところどういう命令なのか、それらを調べて理解したうえで実行しましょう。そして、インターネットは怖いところだという事を肝に銘じておきましょう。

Windows環境における「黒い画面」

Windowsにおける「黒い画面」は「コマンドプロンプト」と呼ばれる物ですが、これはおすすめできません。 WindowsはUnix由来でない為、Macで使えるような基本的なコマンドも使用できず、そもそもコマンド自体が非常に少なく、使い勝手がよくないのです。「他と違う」という事は、つまり問題が起きた時に調べても解決策にたどり着きにくいという事です。

いくつか代替の手段があるので、そちらを使うようにした方が良いでしょう。

1. Git Bash

Windows環境で開発作業を行うのならば Git for windows は恐らくインストールされているはずなので、これにバンドルされている「Git Bash」を活用します。インストールされてない場合は、インストールしましょう。Gitはもはや開発環境に無くてはならない存在です。

Git Bash は msys と呼ばれるエミュレータで動いており、いささかLinuxやMacとは使い勝手が違いますが、基本的なコマンドは使用する事ができます。（msysは、昔なつかしのcygwinからのフォークです）

Git Bashのメリットは、Windowsにおける実行ファイル（.exe）が容易に呼び出せる点です。ショートカット（.lnk）もちゃんと追随してくれるので、「好きな名前で好きなアプリを立ち上げる」なんていう設定も簡単にできます。（ここでは説明は割愛します）

$ # 現在いるディレクトリでエクスプローラーが立ち上がります
$ explorer .

2. Bash on Windows

Windows10ならば、Windows上でUbuntuが動作します。 Windows Subsystem for Linux（WSL）と呼ばれる仕組みで、まさにLinuxがWindows上で動作していると思って良いでしょう。

中身はUbuntuなので、apt で楽々パッケージを追加インストールできるのが大きな魅力で、参考になる情報もネットで収集しやすいです。

Bash on Ubuntu on Windowsをインストールしてみよう！ – Qiita

前編まとめ

デザイナーも「黒い画面」が必要な時代になった
「黒い画面」の基本的な使い方を学ぶ
「黒い画面」は怖いので用法を守って正しく使う
インターネットの情報は鵜呑みにしてはいけない
Windowsでの「黒い画面」は Git Bash または Bash on Windows を活用しよう

後編では最低限覚えておくと捗るコマンドと使い方を書くかもしれません。

コメントを書く