インストール

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

参考

• install nodebrew, node and yarn
• NodebrewでNodeをインストールする

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 には 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 にあるように 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 には下記のファイルが作成される。

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 を開く。

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

$ 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 の中に下記の行を追加する。

    "clean-css": "~4.1.11",

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

つづく?