webデザイナーによるターミナル入門

デザイナー → 自己学習 → webデザイナー
という手順を踏んでwebデザイナーなった身として、いまだにターミナルが怖い...

そんな中、webデザイナーチームの勉強会にてターミナル入門を動画学習したので、
その際のメモ＋調べて学び直しし、覚書としてこちらに記事を残していきます！

はじめに（基礎の基礎）

ターミナルについて、私はwebのコーディング周りを勉強するまで全くのノータッチでした。
そもそも何をするものなのかも理解していませんでした。
現在はさまざまな操作がテキストのみでできる便利なもの、だけどちょっと触るのは苦手。という認識に少し進歩。
改めてきちんと調べてみると、概要としては

ターミナルとは、
コマンドラインインターフェイス（CLI）を使ってMacオペレーティングシステムとやりとりできる、上級ユーザおよびデベロッパ向けのアプリです。

ということです。
私は今まで基本的にグラフィカルユーザーインターフェイス（GUI）（macで言うFinder）で操作していた、ということですね。何のためにテキストのみでOSとやり取りするのかいまだに理解はできておらずできれば全ての操作をGUIでできればと思っていますが、現状GUIでできないことがたくさんCLIでできるという状況だから仕方ない。

私のwebコーディングの師匠は、iTerm2を使用していたなと思い出しつつ、
会社PCにはインストールされていなかったので、学習自体はターミナルアプリを使用しました。

※この記事を書きながら、iTerm２をインストールしてその後使っています！
※こちらの記事を参照しながらiTerm2を導入、カスタマイズしました！
https://qiita.com/ryamate/items/075c34fcf29d0889c15a

iTerm2は複数タブ開けたり、自分の見やすいテーマを利用できるのでめちゃくちゃ使いやすいです！

ターミナルでできること

ターミナルでは、グラフィカルユーザーインターフェイス（GUI）でやると時間のかかるような作業を一気に行ったりすることができます。
また、GUIでできないような高度な設定や操作ができるものとなります。
現状私の仕事の範疇ではgitを強制操作したい時やデプロイ作業などの際にしか使っておりませんが、Finderで名前を一気に変更したい時やフォルダをたくさん作りたい時などにもっと活用できるのではと感じているところです🤔

メリットとしては、まとめると下記が挙げられます

• 一括で操作ができる　→　たくさんのファイルを一気に操作できる
• 作業の効率化　→　一括操作が可能なため、かなりの効率化が測れる
• 処理動作が軽い → GUIに比べて、処理時に使用するメモリ量が少ないためにスムーズな動作が可能
• タスクの自動化が可能に　→ シェルスクリプトを作れば、自分の好きなようにタスクを自動化できる
  極めたらめちゃくちゃ便利！

よく使う・基礎的なコマンド+α

ここでは、私が実際に勉強会で学んだ基礎的な操作についてを記していきます。

cd ： change directry

ディレクトリの移動
半角スペースを空けて、ディレクトリ名を入力し実行すると入力した名前のディレクトリに移動できる

• cd or cd ~ ： ホームディレクトリへの移動（/Users/Hoge←のHoge部分に該当）

• オプション

  • cd ./ ： 現在のディレクトリ
  • cd .. ： 一つ上の階層のディレクトリへ移動
  • cd ../ or cd - ： 一つ前にいたディレクトリへ移動

ls ： list segments

ファイル・ディレクトリの一覧を取得

• オプション
  • ls -a ： 隠しファイルも表示
  • ls -F ： ディレクトリには末尾に/を表示し、ファイルとディレクトリがわかりやすくなる
  • ls -l ： 詳細表示［-(種別)rw-(オーナー)r—(グループ)r—(その他)］
    • -rwx———：ファイルのオーナーのみ読み書き実行できる
    • -rw-rw-rw-：誰でも読み書きできる。実行は不可

オプションを複数使いたい際は、-laや、-alとすることで省略することができる

pwd ： print working directory

今いる階層（カレントディレクトリのフルパス）の表示

cat ： catenate

テキストファイルの中身を表示する

• オプション
  • cat n：行番号をつけて表示する

mkdir ： make directory

ディレクトリを作成
スペース区切りで複数作成可能
ディレクトリの名前にスペースを含みたい場合は“”で囲む

• オプション
  • mkdir -p：パスの表記方式でディレクトリを作成できる ex.( makedir -p images/top

touch

新規ファイル作成
ファイルの最終アクセス時刻・変更時刻を変更
ファイルが存在しない場合は新規作成。スペース区切りで複数作成可能
→空のファイルを作成する副作用の方が利用される

• オプション
  • touch -c：ファイルが存在しない場合新規作成しない
  • touch{hoge,huga,foo}.html：複数ファイルの作成

  出力結果

  • hoge.html
  • huga.html
  • foo.html
  • touch{a..e}.txt：連番ファイルの作成

  出力結果

  • a.txt
  • b.txt
  • c.txt
  • d.txt
  • e.txt

cp：copy

コピーする
cpコマンドは、デフォルトが上書きだが上書きするかどうかの確認がないので、
必ずオプションcp -iで上書きの確認を行いたい。

• オプション
  • cp -a：元ファイルの属性とディレクトリの構成を保持してコピーする
  • cp -b：上書きされるファイルのバックアップを作成する
  • cp -r：コピー元にディレクトリを指定した場合、サブディレクトリも含めてコピーする
  • cp -P：ディレクトリ構造ごとコピーする
  • cp *.拡張子 hoge/：すべての指定拡張子のファイル(*)を、フォルダ(hoge/)にコピーする

alias hoge：エイリアス

ショートカットのような短縮コマンドを登録できる
ex.)alias ls='ls -a'でエイリアスを登録すると、lsと入力するだけでオプションを含めた状態で実行される
\hoge：登録したエイリアスを一時的に無視する
unalias hoge：エイリアスを削除する
※エイリアスは、ターミナルを再起動すると消えてしまいます。永続的に利用したい場合、下記記事を参照すると良きです！
https://qiita.com/nakaji0210/items/19f541fb3d9c494a2de4

よく使うショートカット

• Tabキー：補完
• ↓キー：履歴
• control+L：clear（今までの記述をクリアして画面を綺麗にする）

ターミナルへの苦手意識を無くしていきたい

私みたいなバックボーンの方はターミナルが苦手な人も多いと思います。
が、基本的な操作ややってはいけないことを叩き込めばかなりハードルが低くなるなと思います！
最近少しだけgitの操作をvsCode内のターミナルを利用してするようになりました。
フロントエンドエンジニアはgit操作みんなターミナル使うんだろうなと思いながらsourcetreeやgitHubDesktopなどのGUIに頼りっぱなしでしたが、少しでも慣れ親しむためにgit操作などの小さなところから始めていければと思っております。

今回書いたコマンドを覚えるだけでも相当な効率化が見込めそうなので、実際に使っていけたらと思っています。

個人的にプライベートで同人誌の自炊をしようと思っているので、その際のファイルネームを変更するなどの作業にもかなり応用できそうなので使っていけたらと考えています！