インストール
- homebrew を入れる。
- nodebrew を入れる。
- node を入れる。
- npm を update する。
- express を入れる。
- express-generator を入れる (必要なら)。
参考
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 に置いても警告が出なくなる。
つづく?