これだけ覚えておくと便利！フロントエンジニアのためのコマンド（ライン）

コーダーにとって黒い画面（コマンドライン）で敷居が高いですよね？

私がターミナルでよく使うスクリプトをまとめてみました。初心者でこれだけ覚えていればハッピーになれること間違いなし。Mac前提で進めていきます！

この記事を書いた人

かみーゆ/フロントエンドエンジニア

資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。

Read More

コマンドラインってなんぞ？

コマンドラインとはキーボードを使い命令を入力して操作するツールのことを指します。
イラレやフォトショのようにマウスで直感的に使えるアプリケーションとは違い、Windows・Macともにテキストのやりとりだけで操作するのが特徴。
プログラミングの環境構築したり実際にプログラムを実行したりする際に使い方を覚えておくと便利です。

余談ですが、イラレやフォトショのようにマウスで操作できるアプリケーションのことをGUI（Graphical User Interface）、テキストだけで操作するものを CUI（Character User Interface） と言います。

コマンドを起動

少し前はiTermを使っていましたが、現在はVS CodeのTerminal機能を主に使っているのでそちらを使っていることを前提に説明します。

Mac の VS Codeでのターミナルはショートカット control + shift + @ で起動可能です。
上部メニューの Terminal > New Terminal からでもOK!!

※ ちなみにWindowsの人は「コマンドプロンプト」（ショートカットWindowsキー+ｓでcmdと入力すれば起動可能）で十分事足りると思います。

コマンドには実行すること以外にそれに対するオプションも多数あるのでそちらも合わせて紹介します。

「cd」コマンドで階層の移動

cdコマンドは参照したいディレクトリへ移動したい時に使います。

「ls」コマンドで現在のディレクトリの構造を調べる

lsコマンドを使いましょう。 たまに不可視ファイ（先頭に.があるファイルなど）があってなんのこっちゃってことありますが、そんなとき便利。

$ ls

lsコマンドの便利なオプション:-a（すべて表示）

参照ディレクトリ内のファイルをすべて表示してくれます。
とりわけ見つけにくいのが先頭に.（ピリオド）があるファイルなどです。
作ったはずのファイルがファインダー（Macのファイル管理のアプリ）でみても見つからないなんてことはプログラミング初学者に陥りやすいケースですね。

$ ls -a

lsコマンドの便利なオプション:-l（詳細の表示）

どんなステータスのファイルがあるかを調べる時に便利です。

$ ls -l

ステータスは以下の通り。
なんでこのファイル書き込めないの？って悩んだ時に使えるコマンドです。

• ファイルタイプ
• パーミション
• ハードリンクの数
• オーナー名
• グループ名
• バイトサイズ
• タイムスタンプ
• ファイル名

lsコマンドの便利なオプション:-1（縦に表示）

これは敬愛するしろたん師匠が言ってたコマンドです。
とりあえずどんなファイルがあるかみたい時、一列に並べれば数量が把握しやすいです。

$ ls -1

「history」忘れんぼうさんのためのお助けコマンド

「前回どんなコマンド使ったっけ？」ってなる人に必須のコマンドはhistoryです。
今まで打ち込んだコマンドの履歴をたどれます。

デフォルトだとhistoryの履歴って1000件らしいです。
今回履歴保存方法は割愛します。

$ history

「fillall finder」MacのFinderの表示がおかしくなった！！

たまにマックのFinderに表示されるべきものが表示できないのにlsコマンドを叩くとあるってなことがあります。
そんなときは再起動が一番。

アップルの設定からも再起動可能ですが、コマンドから以下を叩くだけで再起動可能なので便利です。

$ fillall finder

「rm -R」とにかくディレクトリごと有無も言わずに削除したい

とにかく有無も言わずにすべて削除したい時は以下のコマンドを使いましょう。

rm -R ディレクトリ名

ただこのコマンド、ラピュタの「バルス」 ぐらいの破壊力があると思ってください。
一度消すと復活は不可能です。

かみーゆ

昔、うっかり必要なファイルも決して地獄を見ました。

「which」でファイルやアプリケーションの格納場所を探せ

which ***

たとえば、dockerがどこにあるか探したい時は？

whitch docker

「sudo」管理者権限の切り替え

スーパーユーザーで実行する。
パスワードを求められますがほとんどのコマンドはこれで実行可能。

sudo コマンド

「chmod」で権限変更

権限問題は大抵ローカルで立てたものも含めサーバー側で起こります。

かみーゆ

あれ？ファイルが変更できない！権限かなぁ。。

権限（パーミッション）変更で困った場合はchmodが使えます。

chmod モード 対象ファイル名

|モード(数字)|モード(アルファベット)|権限| |-|-| |4|r|読み取り| |2|w|書き込み| |1|x|実行| 合計値を「所有者」「所有グループ」「その他」の順で入力し、パーミッションを変更できます。

変更後は ls コマンドで権限がちゃんと変わっているか確認します。

ls -l

764の場合は

• 「所有者」に対し「読み取り」「書き込み」「実行」を付与
• 「所有グループ」に対し「読み取り」「書き込み」を付与
• 「その他」に「読み取り」を付与

アルファベットでも指定可能

アルファベットで指定することもできます。こちらの方が直感的にできるかもです。

chmod u+x test.txt

変更方法は以下です。

exit / command + c:作業を抜ける

意外と紹介されていないので。
ショートカットcommand + cもしくはexitと入力すれば大抵の実行中の作業は抜けられます。

まとめ

現在現役フロントエンドエンジニアとして最低このくらい知ってたら便利かなーというコマンドをまとめてみました。

実際はもっと、もーーーーっと使います。
黒い画面は倦厭されがちですがまじでなんでもできますのでぜひ積極的にできるところから使うことをオススメします。
この記事がみなさんのコーディングライフの一助となれば幸いです。

最後までお読みいただきありがとうございました。