デザイナーのためのFish Shell入門(Mac編)

前置き

大抵の黒い画面が苦手って言う人ってコマンド覚えられないとか、なんか間違ったもの打つと怖いとか、ディレクトリの移動とかよくわかんないってなると思うんですよ。わかるわかる。そんなわけでデザイナーやコマンド叩き始めたけど難しいめんどくさい黒いのヤダヤダ怖いって人向けの記事です。

※ この記事は2018年に書きかけのまま発酵させていたものですが多分そのまま行けると思います。ダメだったら教えて。

tl;dr（長すぎるから読みたくない）

1. Fish shellを使うとコマンドの打ち間違いとかが減るから使おう
2. まずHomebrew をいれて
3. Fish shell をいれる
4. 黒い画面に fish って書いてreturnキーを押したら
5. おわり
6. VSCodeとか入れるといいよ（フロントエンド沼へ、ようこそ！）

デザイナーを取り巻く昨今のあれこれ

最近はデザイナーもcui（ターミナル、コマンド、黒い画面と呼ばれしモノ）使わされることが増えてきましたね。コードも書く人なら特に。sass/scssとか使う環境だとか、タスクランナーが必要だとか。node.jsとか使ったり、Git使ったり。主にwebですね。
ただ、デフォルトだととても使いづらい。そしてプログラマーは環境整備までは面倒見てくれない事が多いです。わからないことがわからないので教えられないってのもありますね。しかたない。しかたなくねぇよ。

多数派はbash/zsh

コマンドラインの入門ってなるとデフォルトになってることが多いbashや、多数派に釣られてzshつかうと思うんですよ。ぼくはzsh。
bashやzshが悪いって言ってるわけじゃないです。設定すればいいでしょって話ですよね。
ただ、デザイナーがコマンドを触るとかそのくらいの感覚だとzshを導入して色々設定してっていうのが本当に最適かなぁってなると違うかなーって思うんです。もっと簡単に済ませられるはずだ。

どうしろというのか

これをつかえ → Fish shell

Fish shellをインストールしよう

Homebrewを入れよう

Homebrew* が入ってると便利ですよね。入ってる人は飛ばしていいです。

まずはターミナルを起動します。cmd + space とかで Spotlight を開き、Ter とか打てば出てきます。
これで黒い画面が開いたと思います。

次に Homebrew を開き、ページ上部にあるコマンドを黒い画面に打ち込みましょう。
このステップ以降はもう怖いことはありません。大丈夫。一旦落ち着きましょう。リラックス。
途中で Y/n と表示されたら何も考えずに y でいいはずです。
一通り終わった気がしたらbrew -vと打ってみてください。 Homebrew 2.x.x のように表示されていればOKです。
*Homebrew では他にNode.jsのバージョン管理など便利なものがたくさんあります。覚えておくといいでしょう。
はい、怖い操作はここまでです。よく頑張りましたね。

Fish shellを入れよう

黒い画面に brew install fish と入力します。
たまに Y/n と聞かれたら、何も考えずY でいいはずです。これでインストールは終わりです。簡単ですね。

外見を変えよう

黒い画面に fish と入力します。なんとなく黒い画面が変わった気がしましたか？
これで黒い画面は一時的にFishを使うように変更されました。
続いて fish_config と入力します。
fish_configと入力した時点でブラウザが自動で開いてるかもしれません。開いてない人は黒い画面に謎のファイルパスが出たと思います。出ましたか？ブラウザのURL欄にコピペしてみましょう。何か出ましたね。これがFishのコンフィグ画面です。

はい。なんとブラウザから編集できるんです。凄いですね。
さて、いくつかタブ分けされているのに気が付くと思います。基本使うのは2つまでかと。

1. Colors

• シンタックスハイライトのパターンを設定します
• 見やすい色に変えましょう。もう黒い画面とは言わせません

1. Prompt

• ディレクトリ名とか名前とか出るやつですね。ここもお好みで変えましょう
• Gitを使っている場合、ブランチ名などを表示することが出来ます

これらを変更するだけでだいぶそれっぽくなります。

使ってみよう

まずは簡単に触ってみましょう。黒い画面を開いたら fish と入力してみてください。
これでfish shellに切り替わったはずです。

ディレクトリを移動してみよう

黒い画面で cd まで打って、Tabキーを押してみましょう。
はい、ディレクトリ名がずらっと出たかと思います。これは今黒い画面で開いている場所、つまりユーザー（あなた）のディレクトリ直下のはずです。
パス的には、ぼくであれば/user/rTachibanaですね。
ここで何かしらの文字を打ってからTabキーを押すと、存在するディレクトリの中からその文字を含むディレクトリないしファイルで絞り込めます。便利ですね。
これはコマンドでも利用できます。たとえば今いるカレントディレクトリ（場所）が知りたいときはpwdを使いますが、p を打った時点で予測で出ているはずです。これがFish shellを勧める理由です。
要は、あなたのコマンド入力を協力にサポートしてくれるわけです。この機能を使ってディレクトリの移動とかしていれば間違いを減らしつつ作業効率は上げられるはずです。

コマンドの打ち間違いって怖いよね

上記でおわかりと思いますが、Fish shellを導入するだけで一気に難易度は下がるはずです。
なんか間違ったこと書いたらデータ吹っ飛びそうとか、黒い画面に疎いデザイナーさんはそう思うことも多いかと思います。仕方ないね。
ですが、最近は割とデザイナーにそういった操作を求めることも増えてるのが事実かと思います。デザイナーなのにGitを黒い画面で操作させられて苦労した人を知っています。それは極端かもしれませんが、多少触れたほうがいいのは事実。なので使いやすい環境を作ってしまいましょう。
ただし、間違ったコマンドを打ったらまずいかもという気持は大事にね。

ついでにおすすめするもの

Mac使ってるエンジニアさんの大半はiTerm2っていう黒い画面を使ってると思います。あとはVSCodeっていうエディタが黒い画面内蔵みたいな便利ツールなので本当におすすめです。調べてみてね。
使い方を覚えた頃にはきっと、フロントエンド沼に足を踏み入れていることと思います。給料上がってるといいね。

おしまい。