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

この記事はNIJIBOX Advent Calendar 2019の掲載記事です。

はじめに

なぜこの記事を書いたのか

以前勤めていた会社ではサーバーサイド言語と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月現在）¹
  • デスクトップOSとして大人気のLinux MintもLinuxディストリビューションの人気ランキング世界第4位（2019年12月現在）¹

• 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)（超初心者向け）

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参照。直近１年のデータより。 ↩ ↩²