madokaのブログ

勉強したことのoutput先として使ってます。内容はpythonがらみが多いかもです。

yarnとnpmの違いって?

新しく配属されたプロジェクトでパッケージマネージャはyarn使ってるからーと言われて、今までnpmしか使ったことがなかったのでなんなのそれってことで調べてときの記録を書くます。ついでにnode.js使ってるわりにサーバ側のjsくらいの知識しかなかったのでこちらも一緒に。 ​

Node.jsとは

JavaScriptは本来クライアントサイドで動く言語であり、HTMLで書かれたページに動きをつけたりします。 しかしこれに対してNode.jsはサーバサイドで動くJavaScriptです。 ​ https://nodejs.org/ja/about/

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。 以下の「Hello World」の例では、たくさんの接続を同時に処理することができます。 各接続ごとにコールバックは発火され、何もすることがない場合、Node.js はスリープします。

とあり、サンプルコードは下記のように記されていました。

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

その他利点としては下記のものが挙げられているようです。

  • 大量のデータ処理が可能
    • ノンブロッキングI/Oモデル
    • C10K問題(クライアント1万台問題)に対応
  • メモリの消費が少ない
    • イベントループ
  • 処理速度が早い
  • サーバサイドでjsが使える

​ ちょっと待って、C10K問題ってなに、、ということで↓。

クライアント1万台問題

https://ja.wikipedia.org/wiki/C10K%E5%95%8F%E9%A1%8C

C10K問題(英語: C10K problem)とは、Apache HTTP ServerなどのWebサーバソフトウェアとクライアントの通信において、クライアントが約1万台に達すると、Webサーバーのハードウェア性能に余裕があるにも関わらず、レスポンス性能が大きく下がる問題である。 ​

https://ja.wikipedia.org/wiki/Node.js

非同期処理のNode.jsではクライアント1万台問題は起きない。Node.jsでこの問題を解決した技術の中核は、シングルスレッドにおける非同期処理を容易に実装可能にしたイベント駆動型プログラミング環境である。 ​

node.js 上の有名なフレームワーク

この辺もNode.jsのフレームワークと言えるはず

requireってなんなん

https://codezine.jp/article/detail/10967

一応、新しいモジュールシステムが出てきた経緯から説明すると、もともとNode.jsにはCommonJSという昔ながらのモジュールの仕組みがあったんですね。これは、requireを使って特定のファイルやフォルダを取ってくるというものです。 これまではずっとそれを使ってモジュールの仕組みを実現していたんですが、ES2015からES Modulesという仕様が新しく定義されて、言語側の機能でモジュールのimport/exportができるようになりました。 ​

普通に使っているimportやexportの位置付けだったようです。 ​ ​

npm

  • Node.jsのパッケージマネージャ
  • Node Package Manager(npm)

yarnとは

ここでやっとyarnについてです。

https://qiita.com/lelouch99v/items/c97ff951ca31298f3f24

  • 2016年にFaceBookが公開したJavaScriptのパッケージマネージャです。
  • npmとの互換性があり、package.jsonが使えます。

yarnのメリット

https://qiita.com/lelouch99v/items/c97ff951ca31298f3f24#yarn%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88

  • npmよりインストールが速い
    • 約半分になる場合もあるそう
  • npmより厳密にモジュールのバージョンを固定できる
    • yarn.lockファイルで、各パッケージのインストールバージョンを固定できる。
  • npmと一緒に使える
    • npmと同じのpackage.jsonが使えるため、同一プロジェクトでnpm or yarnで固定しなくて良い。 ​

yarnのインストール

$ sudo npm install -g yarn

まさかのnpmでinstallできます。 もちろんhomebrewなどでも可能です。 ​

npmとyarnのコマンド対応

  • npm init -> yarn init
  • npm install -> yarn
  • npm install [パッケージ名] --save -> yarn add [パッケージ名]
  • npm install [パッケージ名] --save-dev -> yarn add [パッケージ名] --dev
  • npm uninstall [パッケージ名] -> yarn remove [パッケージ名]
  • npm install -g [パッケージ名] -> yarn global add [パッケージ名] ​

https://engineering.fb.com/web/yarn-a-new-package-manager-for-javascript/

npmはインストールパッケージの一貫性、パフォーマンス、セキュリティに問題があり、この問題を解決することを目的として開発されたそうです。 Yarn開発者が直面したnpmの問題解決を目的としています。 ​

https://www.webprofessional.jp/yarn-vs-npm/

npmはパッケージごとにインストールが完了するまで待つのに対し、yarnは並行して実行するためパフォーマンスが向上しています。

まとめ

yarnはnpmの苦手なところを克服したパッケージマネージャでした。こういった背景を知ったことで、これからはnpmよりもyarnの方を積極的に使っていこうと思いました。