mac で express, node, yarn のメモ (罠回避ルート)

# インストール

- homebrew を入れる。
- nodebrew を入れる。
- node を入れる。
- npm を update する。
- express を入れる。
- express-generator を入れる (必要なら)。

参考

- [install nodebrew, node and yarn](https://qiita.com/morikiyo/items/cd219a0b7aaed5b23d51)
- [NodebrewでNodeをインストールする](https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498)


## homebrew

下記を参照のこと。
- https://brew.sh/index_ja

2020/4 時点では、ターミナルで下記コマンドでインストールできる。

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

## nodebrew

古い node, yarn, npm が入っているかもしれないので、削除してからインストールする。

```
$ brew uninstall yarn
$ brew uninstall node
$ npm uninstall npm -g
```

nodebrew 本体をインストール。

```
$ brew install nodebrew
```

bash なら ~/.bash_profile に、zsh なら ~/.zhenv にパスを追加し、nodebrew の setup をする。

```
$ echco 'PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bach_profile
$ source ~/.bash_profile
$ nodebrew setup
```

## node をインストールする。

インストールできる `node` のバージョンを確認してから、インストールしたいバージョンの `node` をインストールする。たとえば `v14.1.0` なら、

```
$ nodebrew ls_remote
$ nodebrew install v14.1.0
$ nodebrew use v14.1.0
```

とする。[install nodebrew, node and yarn](https://qiita.com/morikiyo/items/cd219a0b7aaed5b23d51) には `install` でなく `install-binary` でないと遅いとあるけど、`nodebrew 8.9.4` では少なくともインストールはすぐ終わった。

インストールされているバージョンを確認するのは `ls` オプション。バージョンを変更するのは `use` でやる。v12.16.2 (LTS) に変更するには、

```
$ nodebrew use v12.16.2
```

とする。これでバージョンが切りかわらない場合は、古い node や npm が入ったままの可能性がある。npm, node, nodebrew, yarn をすべて uninstall して最初からやりなおし(怒)。

## npm の update

```
$ npm install npm -g
```

## yarn のインストール

yarn を homebrew で普通にインストールすると、node の最新版がいっしょにインストールされてしまってめちゃくちゃになる。で、[install nodebrew, node and yarn](https://qiita.com/morikiyo/items/cd219a0b7aaed5b23d51) にあるように homebrew で依存関係を無視してインストールしようとすると、
```
$ brew install yarn --ignore-dependencies
```

mac 10.15.4 では `Error: No available formula with the name "–ignore-dependencies` とか言われてしまう。これはダメだな…。とりあえず今回は `npm` でインストールした。

```
$ npm install yarn -g
```

これで、特に問題なく `yarn` は使えるようになった。

## express のインストール

express 自体は下記のコマンドでインストールできる。

```
$ cd ~/workspace/
$ mkdir project_dir
$ cd project_dir
$ yarn add express
```

express コマンドは、express-generator をインストールしないと使えない。これは結構な罠。

```
$ yarn add global express-generator
```

これで express コマンドが使えるようになる。

```
$ cd ~/workspace
$ express project_dir --view=pug
```

`--view=pug` を付けないとテンプレートエンジンが `jade` になります。ただし、`jade` は将来的にデフォルトではなくなるから `--view=pug` オプションをつけたほうがいいよ、というワーニングが出ます。jade は `pug` という名前に改名されただけのもので基本的に同じなので、2020.4 現在は `--view=pug` を付けたほうが良さそう。

`express-generator` は生成時に一度しか使わないので、global にインストールしなくてもいい。たとえば。

```
$ cd ~/workspace
$ mkdir express_gen
$ cd express_gen
$ yarn add express-generator --view=pug
$ node_module/.bin/express ../project_dir
$ cd ../project_dir
$ rm -rf .//express_gen
```

こんな感じで、ローカルにインストールしたあとに、アプリの雛形を生成したら削除しても問題ない。

# アプリの実行

```
$ express project_dir --view=pug
```

で project_dir には下記のファイルが作成される。

```.sh
project_dir
├── app.js          # アプリのメインファイル
├── bin
│   └── www            # yarn start 時に node bin/www として実行されるファイル
├── package.json       # ライブラリ等の依存関係やバージョン情報を格納したファイル
├── public          # static なファイルを置くフォルダ
│   ├── images         # http://localhost:8000/images 
│   ├── javascripts    # http://localhost:8000/javascripts 
│   └── stylesheets    # http://localhost:8000/stylesheets
│       └── style.css  # http://localhost:8000/stylesheets/style.css
├── routes          # router (ミドルウェア) 置き場
│   ├── index.js       # http://localhost:8000/ (トップページ)
│   └── users.js       # http://localhost:8000/users
└── views           # テンプレートファイル置き場
    ├── error.pug      # エラー時のテンプレート
    ├── index.pug      # index.js 用のテンプレート
    └── layout.pug     # index.pug や error.pug に読みこまれるテンプレート
```

作成されたら、下記コマンドを最初に実行しておく。これで package.json に書かれているパッケージがインストールされる。

```
$ yarn install
```

実行は下記コマンド。ポートを指定しないとデフォルトでは 3000 になっている(はず)。

```
$ PORT=8000 yarn start
```

ブラウザで `http://localhost:8000` を開く。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/8389c9ab-7a60-9055-def6-ccf760c1c19d.png"  width="60%"/>

こんな画面が出たら成功している。


```
$ PORT=8000 yarn start
```

## 微修正

git に push するときは、https://gitignore.io などで node 用の `.gitignore` を作って置く。自作するなら `.gitignore` には `npm_modules` ディレクトリと `yarn-error.log` を最低限入れておく。

## 余談

`express-generator 4.16.1` で generate したアプリを github に置こうとすると、`yarn.lock` 内の `clean-css` のバージョンが低くてセキュリティ上問題があると言われる。アプリ内で実際に `clean-css` を使っていなければ問題ないはずだけど、どうしても消したいなら次のようにすれば消せる。

`package.json` の `dependencies` の中に下記の行を追加する。

```.json
    "clean-css": "~4.1.11",
```

このあと `yarn install` すると、`yarn.lock` が更新されて github に置いても警告が出なくなる。

つづく?