Linux基礎教養 for フロントエンドエンジニア

この記事は[NIJIBOX Advent Calendar 2019](https://qiita.com/advent-calendar/2019/nijibox)の掲載記事です。

## はじめに
### なぜこの記事を書いたのか
以前勤めていた会社ではサーバーサイド言語とDBを2年ほど触り、
今の会社に入ってからフロントエンドにジョブチェンジし、ちょうど1年が経ちました。
この1年学んだことはそれはもう大量にあるのですが、1つ気づいたことがあります。それは、
`「フロントエンドエンジニアでも、Linuxって結構触る機会があるな。」`ということです。

フロントエンド開発においてLinuxの詳細を知らないことは致命的であるとは思いません。
だからと言って「**Linux知らない」ではすまされない。知らず知らずのうちに使っている**。
Linuxってフロントエンドエンジニアにとってそんな分野じゃないかなと思うのです。
しかしエンジニア未経験で入ってきたフロントエンドエンジニアの後輩に**わざわざ時間をかけてLinuxを説明するのもなんかちょっと違う・・・**。

そんなときに「**この記事見とけばひとまず大丈夫**」と後輩に渡せる記事を目指して書こうと思います。

### Linuxの知識が役立つ場面
- 開発環境を作る・操作するとき（ほぼこれ）
- macOSの操作

大規模サービスで用意された開発環境を操作・調査しなくてはいけないときなど、Linuxの知識がないと恐ろしくて何もできません。
`docker`や`VirtualBox`など、個人開発でもかなりお世話になる機会があるはずです。
macOSは厳密にはUnixの知識がベースとなるのですが、詳しくは後述します。

## Linuxとは
### WindowsやmacOSと同じように、OSの1つ
- 現在は主にサーバー用OSとして広く使われている
- **OSS（オープンソースソフトウェア）であるため無料、誰でも自由に入手・改変・再配布が可能**

### Linuxの前身は、Unix
- Unixとは1969年にアメリカで開発された、非常にシンプルで使いやすいOS
- 使いやすい＆無料だったため人気OSとなったが、その後ライセンス料をとるようになった
- **macOSはUnixベース**に作られているので**ターミナル操作もほぼUnixコマンドで行うことができる**

### そこで生まれたLinux
- 使いやすかったUnixがライセンスなど面倒になってしまったため、フィンランドの学生リーナス・トーバルズが**UnixみたいなOSをオリジナルで作成した、それがLinux**（Linus（リーナス）×Unix）
- Linuxのコードは無料で配布されたため、たちまち人気OSに
- 今ではAWSの各種サービスに使われることが多いAmazon LinuxやAndroidもLinuxベースのOSが使われいる

## CentOSもUbuntuもLinux
### Linuxディストリビューションとは
- 仕事でよくお世話になる`CentOS`は正確には「**Linuxディストリビューションの１つ**」である
- リーナスが作ったLinuxは、正確には`Linuxカーネル`と呼ばれる
- Linuxディストリビューションは`Linuxカーネル`をもとに、すぐ使えるようにライブラリをひとまとめにしたもの
- 様々な企業や団体が開発を行なっており、有償・無償で配布されている

### 3つの系統
Linuxディストリビューションには大きく分けて3つの系統があります。

- **Red Hat系**
    - レッドハット社によって開発されていた`Red Hat Linux`の流れを組むディストリビューション
    - 有償で企業向けの`Red Hat Enterprise Linux（通称RHEL）`や、無償の`Cent OS`や`Fedora`が有名
  
- **Debian系**
    - `Debian GNU Linux`から派生したディストリビューション
    - 使いやすさを重視した`Ubuntu`は大人気OSで、Linuxディストリビューションの人気ランキング世界第4位（2019年12月現在）[^1]
    - デスクトップOSとして大人気の`Linux Mint`もLinuxディストリビューションの人気ランキング世界第4位（2019年12月現在）[^1]
    
- **Slackware系**
    - `Slackware`から派生した一番古いディストリビューション
    - 初心者はちょっととっつきづらい

## 覚えておきたいコマンド

### cd
change directoryの意。指定したディレクトリへ移動します。
これがわからないとどこへも行けません。

```
$ cd ディレクトリ名
$ cd /app/src/components/
```

ホームディレクトリへの移動

```
$ cd ~
```

１つ上のディレクトリへ移動

```
$ cd ..
```

ちなみにディレクトリ名の入力途中でtabキーを押すと、入力補完が効きます。


### pwd
present working directoryの意。パスワードの省略形ではありません。
現在自分がいる位置を教えてくれます。迷子になったら打ちましょう。

デスクトップにいるとき

```
$ pwd
/Users/username/Desktop
```


### ls
list segmentsの意。ディレクトリやファイルの情報を表示します。

```
$ pwd
/Users/username/Documents/my-app/
$ ls
README.md               package-lock.json       public
node_modules            package.json            src
```

このlsコマンドについては、下記2つのオプションを覚えておきたいところです。

#### ls -a
隠しファイルも表示させます。

```
$ ls -a
.                       .git                    node_modules            public
..                      .gitignore              package-lock.json       src
.DS_Store               README.md               package.json
```

#### ls -l
権限、ファイル数、ユーザー、サイズ、更新日時なども表示させます。

```
$ ls -l
total 1048
-rw-r--r--     1 username  staff    2881  9  7 13:03 README.md
drwxr-xr-x  1011 username  staff   32352  9 14 16:41 node_modules
-rw-r--r--     1 username  staff  526882  9 14 16:38 package-lock.json
-rw-r--r--     1 username  staff     702  9 14 16:38 package.json
drwxr-xr-x     9 username  staff     288  9 14 16:38 public
drwxr-xr-x     8 username  staff     256  9 14 16:38 src
```

同時にオプションを複数指定したい場合は下のように書きます。

```
$ ls -la
```

### touch
新規ファイルを作成します。

```
$ touch ファイル名
$ touch sample.js
```

### mkdir

make directoryの意。新規ディレクトリを作成します。

```
$ mkdir ディレクトリ名
$ mkdir actions
```

### mv

moveの意。ファイル（ディレクトリ）の移動/ファイル名の変更を行います。

ファイルの移動

```
$ mv 移動前のファイル/ディレクトリ 移動後のファイル/ディレクトリ
$ mv index.js src/
```

ファイル名の変更

```
$ mv 変更前のファイル名/ディレクトリ名 変更後のファイル名/ディレクトリ名
$ mv changeBefore.html changeAfter.html
```

### cp
copyの意。ファイルやディレクトリを複製します。

```
$ cp 複製元のファイル名/ディレクトリ名 複製先のファイル名/ディレクトリ名
$ cp sample.text sample_copy.text
```
#### cp -r
ディレクトリを中身ごとコピーしたいときに使うオプションです。

```
$ ls
dir1

$ cd dir1/

$ ls
dir2

$ cd ..

$ cp -r dir1/ dir1_copy/

$ ls
dir1		dir1_copy

$ cd dir1_copy/

$ ls
dir2
```

### rm

removeの意。ファイルやディレクトリを削除します。

```
$ rm ファイル名/ディレクトリ名
$ rm sample_copy.text
```

ディレクトリを削除したい場合は`cp`コマンドと同じように`-r`オプションをつけます。

### cat

concatnateの意。ファイル内容を連結したり、表示したりします。

ファイルの表示

```
$ cat ファイル名
$ cat index.html 
<h1>Hello, world!</h1>
```

ファイルの内容を連結表示
（標準出力上で連結されるだけで、ファイルを直接上書きしない）

```
$ cat sample.html 
<p>This is a sample program.</p>

$ cat index.html  sample.html 
<h1>Hello, world!</h1>
<p>This is a sample program.</p>
```

### diff
2つのファイルを比較し差分を見ることができます。

```
$ cat index.html 
<h1>Hello, world!</h1>
<p>This is first document.</p>

$ cat index2.html 
<h1>Hello, world!</h1>
<p>This is second document.</p>

$ diff index.html index2.html 
2c2
< <p>This is first document.</p>
---
> <p>This is second document.</p>
```

## 知っておくとよいかもなコマンド
### chmod
change modeの意。チョモドとか言われますよね。
ファイルやディレクトリのパーミッションを変更します。

```
$ chmod 変更したいパーミッション ファイル名
```

誰でも読み取り、書き込み、実行できるようにしたい場合

```
$ ls -l
total 16
-rw-r--r--   1 1 username  staff   54 12 15 14:02 index.html
（省略）

$ chmod 777 index.html

$ ls -l
total 16
-rwxrwxrwx   1 username  staff   54 12 15 14:02 index.html
（省略）
```

パーミッションの読み方については下記の記事がわかりやすいです。
[Linuxの権限確認と変更(chmod)（超初心者向け）](https://qiita.com/shisama/items/5f4c4fa768642aad9e06)

### chown
change ownerの意。チョウンとか言われがちです。
ファイルやディレクトリの所有者を変更します。

```
$ chown 所有者 ファイル名/ディレクトリ名
```

ファイルの所有者を変える場合

```
$ ls -l
-rwxrwxrwx   1 username  staff   54 12 15 14:02 index.html

$ chown user01 index.html

$ ls -l
-rwxrwxrwx   1 user01  staff   54 12 15 14:02 index.html
```

ディレクトリごと権限を変更

```
$ chown -R user01 src/
```


### ssh
SSH接続でリモートホストにログインします。

```
$ ssh ユーザー名@ホスト名
$ ssh user@192.168.10.108
```

### vi
ファイルを編集できます。

```
$ vi ファイル名
$ vi index.html
```

上記コマンドで下のような画面に切り替わります。

```
<h1>Hello, world!</h1>
<p>This is first document.</p>
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
"index.html" 2L, 54C

```

普通のテキストエディタのようには編集できないので注意が必要です。
キーボードの`i`を押すと挿入モードとなり、文字を追記したり消したりすることができます。
挿入モードを終了するには`esc`キーを押してください。
`:q`で保存しないで終了、`:w`で保存、`:wq`で保存して終了です。
`vi`コマンドによる編集方法は様々なキー操作がありますが、ここでは割愛します。

## おわりに
Linuxとは何なのかと必須コマンドが一緒になった記事はあまり見ないなと思い書いてみました。
初学者が覚えておきたい最低限を詰め込んだつもりです。
「初学者・フロントエンドといえどもこれも知っていてほしい」というものがありましたらコメントください。
これでもう黒いターミナルも怖くない！！！！


## 参考URL
- https://eng-entrance.com/unix_linux
- https://www.atmarkit.co.jp/ait/articles/1602/16/news016.html
- https://gihyo.jp/dev/serial/01/js-foundation/0013



[^1]: [DistroWatch Page Hit Ranking](https://distrowatch.com/dwres.php?resource=popularity)参照。直近１年のデータより。