
便利そうなプログラムをインストールしようとして、WEBサイトの解説を見たら、
npmコマンドでgulp-cliをグローバルにインストールする
npm install --global gulp-cli
と書いてある。ここでnpm、gulp-cli、グローバルという単語は抜きにして、コードみたいなものが出てきた瞬間に「これは無理だわ」と、あきらめてしまう人が多いのではないだろうか。
このコードみたいなものはコマンドと呼ばれ、マウスを使わずキーボードのみを使い、PCに指示を与える。
コマンドには様々な使い方があり奥も深い。普段使い慣れている人が使うせいか、基本的な事が省かれていたり、分かりにくかったりする場合が多い。しかし、これからはSassでCSSを書く場合や、Markdownで書かれたテキスト原稿を流し込み、InDesignでDTP組版を行う事も多くなる。これらを実行する場合、コマンド入力は必須である。もはやコマンド入力を避けて仕事をする事ができなくなってきている。そこで最低限必要なコマンドの知識を説明するのが、今回の記事である。
PowerShellまたはターミナルを起動
コマンド入力は、Windows 10であればPowerShell、Macであればターミナルで行う。これらはOSをインストールすると、標準で搭載されている。ちなみにWindowsでもMacでも入力するコマンドは同じ。
Windows 10の場合は、タスクバーの検索から「powershell」と入力すればすぐに見つかる。


Macであれば「ターミナル」「terminal」で検索すれば見つかる


Windows 10にはPowerShellとコマンドプロンプトという同じ機能を持つ、2つのCUI(Character User Interface)が標準搭載されている。PowerShellは、Windows 7時代のコマンドプロンプトを置き換えるもので、機能が拡張されている。
ここで使用するコマンド入力は、どちらでも問題なく使うことができる。しかしPowerShellの方は、テキストをコピー&ペーストできて、コマンドプロンプトは出来ない。何が困るのかというと、コマンド入力では、頻繁にファイルやフォルダのある場所をフルパスで指定する必要があり、その場合日本語が入っている場合や階層が深い場合、コピー&ペーストが出来ないと非常に不便なのだ。これは作業効率に大きな差が出てくる。
ちなみにPowerShellにはMac版もある。
Windows 7を使用していた頃は、これがとても不便なのでコマンドプロンプトを代替するものとして、Cmderというソフトを使用していた。これはテキストのコピー&ペーストが使用できる他、さまざまなカスタマイズができる。もちろんWindows 10でも利用可能。
とりあえずcdコマンドだけ分かればいい
例えば、JavaScriptなどのスクリプト(プログラム)を動かす場合
- どこにあるスクリプトを展開(インストール)するのか
- そのスクリプトをどこに展開するのか
- スクリプトの処理終了後、どこに結果を保存するのか
これらの場合、JavaScriptを理解していなくても全く問題ないのだが、コマンドを使用して場所を指定しなければならない。
コマンドの最も基本的な操作は、現在地(Current Directory)の指定方法であり、とりあえずこれだけ知っていれば大体は事足りる。他のインストール方法や操作方法などの必要なコマンドは、書いてあるのが普通。
PowerShellを起ち上げると、先ず以下のように表示される。

PSはPowerShellのこと。その後の文字列は、現在の場所を表している。
この場合は、Cドライブ内のUserフォルダを示す。
Macのターミナルの場合、先ず以下のように表示される。
MBA:pictures cond$
MBAの部分はコンピューター名。マシンによって当然異なる。その後は現在の場所。PowerShellのようにフルパスで示されるのではなく、現在のフォルダ名が表示されるだけ。この場合はpicutureフォルダ。その後のcond$はユーザー名でこの場合はcond。
フォルダ名だけ示されても現在地が分からないのでその場合は、pwdを入力すればパスが表示される。
この例の場合は、/Users/cond/Picturesで実際のフォルダ名は、ユーザ>cond(ユーザー名)>ピクチャ
MBA:pictures cond$ pwd
/Users/cond/Pictures
一番最初に覚えなければならないのは、任意の場所指定の方法である。
以下は、PowerShellもMacターミナルも同じ。
例えば、インストールしようとするプログラムが置いてある場所を指定する場合、普段はマウスを使い、ウィンドウ内のフォルダをクリックして開いてゆき「フォルダを選択」ボタンを押すなどで指定するが、これらの一連の操作を全てキーボードだけを使い、文字で指定しなければならない。この場所指定のコマンドをcdコマンドと言う。
例えば、現在地がEドライブ>Worksフォルダ>yonemoto_flyerフォルダだとする。
ここからyonemoto_flyerフォルダ内にあるsample-dataフォルダに移動したいとする。
その場合は、cd(半角スペース)sample-dataと打ちEnterを押せば良い。現在地が以下のようにEドライブ>Worksフォルダ>yonemoto_flyerフォルダ>sample-dataとなっているはず。

現在地がEドライブで、直接その中のsampleフォルダを指定する場合は、フォルダの区切りを/(半角スラッシュ)で区切れば良い。ちなみにPowerShellでこの区切りの入力は、/(半角スラッシュ)でも\(半角バックスラッシュ)どちらでも良い。いずれの入力でもPowerShell上では¥(半角円記号)で表示される。

逆に、一段階上に移動したい場合は、cd(半角スペース)../
二段階上に移動したい場合は、cd(半角スペース)../../

デスクトップに移動するには、そのまま以下のようにcd(半角スペース)desktopと入力してEnterキーを押す。

正常にデスクトップに移動できれば、以下のような表示になる。

Macのターミナルで同じ操作をすると以下のようになる。


他に良く使用するパス(階層)指定方法は以下のようになる。
cd ../ -----1つ上の階層に移動
cd ../../ -----2つ上の階層に移動
cd / -----今いるドライブのルート(最上階)に移動
cd -----今いる階層を表示(Windows)
pwd -----今いる階層を表示(Mac)
階層が深く、パスが長くなる場合は、タイプミスもあり得るので、パスをコピーしてから、cdコマンド(半角スペース)を入力し、その後にペーストすれば簡単で間違いも少ない。



Windowsの場合は、目的のフォルダをShift+右クリックでコンテキストメニューの中に、PowerShell ウィンドウをここで開くと、その下にパスのコピーというメニューが表示されるので、これらを使用する方法もある。

Macの場合は、指定する階層のフォルダをcd(半角スペース)入力後に、直接フォルダごとドラッグ&ドロップしてもパスが自動的に入力される。



上の例でも分かるように、フォルダ名に半角スペースが入っている場合、バックスラッシュを入れないと認識されないので、パスは手打ちでなく、コピーまたはドラッグした方が良さそうだ。
異なるディスクを移動する場合
コマンド入力がまだ慣れていない頃につまずいたのが、ディスク間を移動する場合である。外付けUSBハードディスクやUSBメモリ内部のフォルダを指定する場合だ。
PowerShellの場合は、
set-location(半角スペース)(ドライブ):を入力。
例えば、Cドライブ内のUsersフォルダからEドライブに移動したい場合は、以下のようになる。

Macターミナルの場合は、
/volumes/(ドライブ)を入力。
例えば、Macintosh HDフォルダ>ユーザー>cond(ユーザー名)>ミュージック>iTunesフォルダからbootcampドライブに移動したい場合は、以下のようになる。
MBA:iTunes cond$ cd /volumes/bootcamp
MBA:bootcamp cond$
再びMacintosh HDドライブに戻る場合は、cd(半角スペース)/usersを入力すれば元に戻る。
MBA:bootcamp cond$ cd /users
MBA:users cond$
少しMacターミナルの方が面倒
まとめ
これだけ分かれば、あとはコマンド入力を必要とするスクリプトの利用ができるようになる。例えば、冒頭にあった以下ような記述が本にあれば、このままコマンドを入力すれば良い。
npmコマンドでgulp-cliをグローバルにインストールする
npm install --global gulp-cli
以前は、これだけ書いてあっても、何を使ってどの様にすれば良いのか分からなかったはずだが、ここまでくればこれだけで分かるはずだ。
近いうちに、今回のコマンド入力とBracketsの利用が必須であるMarkdown原稿をInDesignに流し込むまでの工程とSassのコンパイル環境構築の記事を書く予定である。今回はそのための準備でもあった。
Sass関連の書籍は少ない。出版年月が少し古いのだが、Sass記法を学ぶのに最適な本。ここにはコマンド入力の方法から書かれていて、初心者にもお勧めの一冊。今回の記事でも参考にした。