HOME > TECHNOLOGY > 開発環境

Node.jsパッケージはyarnで管理する【WEBデザイナーのためのMac強化計画 #3】

Mac強化計画③

前回、Node.jsノードジェイエス環境の導入の記事を書きました。

Node.js環境を手に入れよう!【WEBデザイナーのためのMac強化計画②】
なんと私は、HTMLをコーディングするのに閉じタグを書いたことがありません。
そういった決まりきった作業は、全てNode.js実行環境を通して全て自動化しているためです。
作業の効率化のためにも、WEBデザイナーであれば、是非導入したいですね!

既にNode.js環境を手に入れたあなたのMacは、間違いなくイケてるWEBデザイナー仕様にアップグレードしています

後はNode.jsパッケージをインストールして、動かしていくだけなのですが、パッケージ?インストール?どっかで聞いたような…。
そうですよね、Mac強化計画1で既にHomebrewを導入してますよね!

Homebrewはコマンドラインツールのパッケージ管理システムと説明しました。
パッケージ管理システムはrepositoryリポジトリと呼ばれる保管場所を持っていて、そのrepository内にあるパッケージをインストール/管理することを目的としています。

実は、Node.jsのパッケージはそこにはありません。
一般的に利用されるNode.jsのパッケージは、npmjs.comというrepositoryで公開されています。(例外はあります)
そのため、Homebrewではなく、別の専用パッケージマネージャ(管理システム)を使って管理することになります。

少しややこしくなってきたので、整理しますね。

Node.jsのパッケージマネージャ npm

実はNode.jsを導入済みのあなたのMacには、既にNode.jsのパッケージマネージャも導入されています。
その名をnpm(Node Package Manager)と言います。

試しにターミナルに以下コマンドを入力してみてください。

$ npm -v
6.13.7

npmのバージョンが表示されると思います。

はい、既にあなたのMacは武装済みです。

yarnという別の選択肢があるよ!

Node.jsのパッケージ管理はnpmでできます。
ところがこのnpm、かつてはあまり評判が良くありませんでした。
パッケージのインストールやアップデートに異常に時間がかかった時期があったのです。

Node.jsのパッケージはnode_modulesというディレクトリにインストールされます。
後々インストールをしてみると、一つパッケージをインストールだけのはずが、なんかわかんない色んなパッケージが入っていて(ディレクトリに分かれている)ビビってしまうと思います。
これは、あるパッケージを機能させるのには、別のパッケージやモジュールもインストールしないと動かないといったことを、パッケージ管理システムが上手にやってくれているためです。
これを依存関係と言いますが、かつてのnpmは異なるバージョンのパッケージやモジュールを重複してインストールしてしまったりするなどパフォーマンスに問題がありました。

実はこのnode_modulesというディレクトリ、ものすごく肥大化します。
といってもファイルサイズというよりは、内包するファイル数が膨大になるという意味です。
想像を絶するファイル数です。(万単位なんてざらです)
インターネット間の通信は、ファイル数が多ければ多いほど、手続きが増え時間がかかってしまいます。
そのため、ダウンロードパフォーマンスが非常に悪かったのですね。

そこで、FaceBookが中心となり、新しいNode.jsのパッケージマネージャーが開発されるに至ったのです。

yarn

それがyarnです。 yarn Website

npmに比べyarnのメリットは以下になります。

  • npmと同じpackage.jsonが使えるので移行が簡単
  • npmと比べるとキャッシュインストールが爆速
  • locファイルでパッケージのバージョンを固定

npmもバージョン6でだいぶyarnに寄せてきて、あまり差はなくなっていますのでyarnが優れてるとは断言できませんが、package.jsonはどちらでも利用できるので、現状はyarnを利用するのがおすすめです。

yarnはnpmからもインストールできますが、Homebrewでインストールした方が良いです
nodebrewでNode.js本体を切り替えると、グローバルのnpmのモジュールディレクトリも変わってくるので、その分yarnをインストールする必要があります。

$ brew install yarn

例の通り、一応確認します。

$ yarn -v
1.22.0

これで、yarnが利用できるようになりました。


あなたのMacはもうPROのWEBデザイナー仕様です!

近年のWEBデザイナーにとって、Javascriptエコシステムは切っても切り離せないものになっています。
pug/ejs/sass/stylusなど、もはや素のHTML/CSS書いてるWEBデザイナーなんて見つけることすらできないかもしれません。
さらに、ReactVueといったSPAへの挑戦際にも必ず必要になってきます。

ここまで3回のMac強化計画をお届けしてきましたが、既にあなたのMacはそれらエコシステムを自由に組み合わせて爆速コーディングできる、開発マシーンと化しています!

次回は最後の切り札Gitについてお話ししたいと思います。

是非お楽しみに!


田畑を耕しながら田舎でのんびりWEB開発?
若い頃から準備すれば誰にでもできますよ!
今に疲れているクリエイターの方々の少しでも参考になれば嬉しいです。