パッケージマネージャ

npm install -g yarn みたいなよくわかんないやつら

npm

🤔 言われるがままに叩くやつ

• Node.js のパッケージマネージャで、npm 自体も JavaScript 製
• 2020 年に GitHub に買収された

😗 Node.js のパッケージマネージャなので、使うには Node.js が必要

npx

🤔 npm をやってたはずなのにいつのまにか npx になってるやつ、zenn-cli とかもそう

• 2017 年ごろから npm に同梱されているコマンド
• ローカルインストールしたコマンドを実行する
• ローカルの Node.js モジュールのパスからコマンドを探し実行する
• ローカルになければインストールし、実行後に削除する
• package.json と npm で入れ npm run-script で実行していたが、それを簡略化する

😗 npx だと package.json とか node_modules がいらないから楽ってことか

Yarn

🤔 プロジェクトによって npm か Yarn を使ってるイメージ、でも npm で入れるイメージ

• 2016 年に Facebook 公開した Node.js のパッケージマネージャ
• npm と互換があり、同じ package.json が使える
• 速く、安全で、バージョン固定がしやすい

😗 ベター npm という理解でよさそう

Bower

🤔 聞いたことがあるよーな、ないよーな

• npm は Node.js のためにあるから、フロントのパッケージ管理には適さないと考えられた
  • e.g. Node.js のモジュールは npm で管理する
  • e.g. jQuery や Angular などは Bower で管理する
• が、今は npm や Yarn の機能が充実してきたことで、作者からも非推奨とされている

😗 知識として知っていれば十分なのかな、使うことになったら深追いしよう

バージョンマネージャ

正直知識として軽く抑えておけば十分な気がする、今は大体 Docker なのでは...

nodist

🤔 全く聞いたことない...

• Windows 向けの Node.js と npm のバージョンマネージャ
• 要するに Node.js 用の pyenv や rbenv みたいなもの
• インストーラや chocolatey などで nodist を入れ、それで Node.js を入れる
• 2019 年ごろから開発は止まっている

😗 Windows 向けだったのか、知らないわけだ

nodenv

🤔 よくわからず適当な手順に従うと入るやつ 1、僕は zenn-cli が使いたいだけなのに...

• macOS 向けの Node.js と npm のバージョンマネージャ
• Homebrew などで nodenv を入れ、それで Node.js を入れる

😗 なるほど、これは macOS 向けだったのか

nodebrew

🤔 よくわからず適当な手順に従うと入るやつ 2、zenn-cli の前にいくつ入れるんだ...

• macOS 向けの Node.js と npm のバージョンマネージャ
• Homebrew などで nodebrew を入れ、それで Node.js を入れる

😗 これも macOS 向けなのか、使い分けがわからないけど Docker を使うので今はいいか

n

🤔 なにこれ知らないめっちゃ ggr 辛そう

• macOS や WSL や Linux 向けの Node.js と npm のバージョンマネージャ
• PowerShell や Git Bash や Cygwin では動かないらしい
• macOS では Homebrew などで n を入れ、それで Node.js を入れる
• Node.js がある場合は npm でも n を入れられる

😗 今は大体これでいいってことなのかな、なんとなく npm install -g n って気持ち悪いけど...

ちょっとまとめ

こういうこと...??

\	Windows	macOS	Linux
nodist	o	x	x
nodenv	x	o	x
nodebrew	x	o	x
n	o ( WSL )	o	o

Node.js はとりあえず Docker 使って入れてあるけど、必要になるときはあるのかな？

速いからホスト OS に直接入れちゃうってこともあるのかな
今は 1 プロジェクトしか関わってないからそのまま Homebrew で入れてもいっかな

実装サポート

知っておかないとコミットが整わない

ESLint

🤔 よく聞こえる何か 1、名前的に多分リントするやつ

• JavaScript のリンタ
• リンタなので、コードの問題を指摘する静的解析ツール
  • e.g. 未使用変数を警告する
  • e.g. 到達し得ない if や for のブロックを警告する
  • e.g. 再代入を警告する
• ある程度はコードフォーマットの問題も検出できる

😗 想像通り

Prettier

🤔 よく聞こえる何か 2、会話の流れ的に多分フォーマットするやつ

• JavaScript や JSX や TypeScript のフォーマッタ
• フォーマッタなので、コードの整形をするツール
  • e.g. インデントや改行を統一する
  • e.g. 括弧や空白を統一する
• ESLint でもある程度のフォーマットはできるが、Prettier の方が対応できる形が多い
• Prettier は構文解析は行わない

😗 想像通り

Husky

🤔 シベリアンのやつ...?? 🐶 woof!

• Git のコマンドを監視して任意の処理を前後で実行することのできる npm パッケージ
• npx husky-init などで入れて、ESLint や Prettier と連携させて使う

😗 Git hooks を npm で導入できるのか、便利だ

ちょっとまとめ

ESLint はエラーに該当したら修正、Prettier は基本のスタイルに整形、という違いだと思う

リンタとフォーマッタなので両方必要だ、実行を忘れないように Husky でキックするといいぞ

ということだろう

まとめ

この辺は特に流行り廃りが激しい気がするので、その関係が把握できるとかなり楽だと感じた

結局使うものは絞られていくと思うので今はマッピングだけしておけば十分