JavaScriptのパッケージマネージャーnpmとYarnについて解説します!

JavaScriptフレームワークのパッケージ管理ってどうすればいいんだろう。
npmやYarnという名前は良く聞くけど、実際どんなものかな。

こんにちは。HTMLやJavaScriptの開発歴8年の著者が、JavaScriptのパッケージ管理の方法、特にnpmやYarnというパッケージマネージャーについてご紹介します。

現在、Web開発において主流のプログラム言語となっているJavaScriptですが、多くのプロジェクトで開発の効率化のためにフレームワークが導入されています。そのフレームワークをインストールする際に、パッケージマネージャーというものを使って管理しています。

パッケージマネージャーというものに全く触れたことがない方にとっては、フレームワークのインストール時などでつまづきやすいこともありますので、この記事を参考にしていただければと思います。なお、この記事はmacOSの使用を前提にしていますが、基本的なコマンドなどは各OSで違いはありません。

JavaScriptのパッケージマネージャーとは

JavaScriptのフレームワークは、基本的に大量のプログラムで構成されています。その大量のプログラムを一まとめにしたものをパッケージと呼び、そのパッケージを管理するツールがパッケージマネージャーです。

パッケージマネージャーを使うと、フレームワークのインストールなどを高速に、正確に行うことができます。現在、パッケージマネージャー無しでフレームワークをインストールすることは、ほとんど無いというほど普及しています。

パッケージマネージャーが誕生した経緯

JavaScriptはもともと、ブラウザでの画面表示部分、つまりフロントエンドで使用されることを前提に作られたプログラム言語です。ですので、データベースへのアクセスなどサーバーサイドの処理はできませんでした。

しかし時代が進むにつれ、JavaScriptはそのようなサーバーサイドの処理でも使用できる言語として進化します。それがNode.jsの誕生です。

Node.jsが開発されてサーバーサイドでJavaScriptが使えるようになったおかげで、JavaScriptのフレームワークが開発されるなど、飛躍的な進歩を遂げることができました。ただ、実際にそれらを使っていくためには、フレームワークのインストールなどを簡単にする工夫が必要でした。

例えば、全部で1000個のプログラムで構成されているフレームワークをインストールするとします。そのフレームワークが動くために必要なプログラムを全て手作業でサーバーの適切な場所にコピーし、特定の設定ファイルを書き換え、正常にインストールできたかを確認するのは、かなり困難だということが想像できるでしょう。

ましてやそのバージョン管理なんて、とても無理です。それらの管理を簡単にするためのツールとして、パッケージマネージャーが登場しました。

パッケージマネージャーを使用することで、簡単なコマンドの入力だけでインストールが完了します。

現在主流のパッケージマネージャー

Node.js上で動作するパッケージマネージャーとしては、現在、主に次の2つが使われています。それは、npmYarnです。

どちらも似たようなコマンドでフレームワークのインストールや管理ができますが、いくつか特徴の違いがあります。次の章でそれぞれの違いをご紹介したいと思います。

パッケージマネージャーnpmとは

npmとは、Node Package Managerの頭文字を取ったもので、Node.js上のパッケージを管理するものとして一番有名なものです。2009年にNode.jsがリリースされた後、2010年1月にはnpmがリリースされています。

では、npmではどのようなことができるのでしょうか。

npmの特徴

npmで一番使われる機能は、パッケージのインストールでしょう。パッケージのバージョンを指定して、サーバーの任意の場所にコマンド一つで簡単にインストールすることができます。

また、その他にもパッケージの更新やアンインストール、バージョン管理など、以下のような機能があります。

 機能コマンド例
1Help機能npm help
2npm のバージョン表示npm -v
3パッケージインストールnpm install [パッケージ名]
4インストール済のパッケージ一覧の表示npm list
5パッケージアップデートnpm update [パッケージ名]
6パッケージアンインストールnpm uninstall [パッケージ名]

簡単な機能だけの紹介ですが、npmではこのような管理が可能です。

また詳しいnpmの使用方法については、次の記事もぜひ参考にしてください。

npmのインストールの方法

実は、npmはNode.jsがインストールされていれば一緒にインストールされているはずです。なので、npmがインストールされていなければNode.jsもインストールされていないはずですので、まずはNode.jsをインストールします。

Node.jsのインストールについては、次の記事を参考にしてください。

Node.jsのインストール後に、コマンドラインでnpmのバージョンを確認してみましょう。バージョンが表示されれば、インストールが完了しているということです。

これでnpmを使う準備が整いました。

npmでのパッケージのインストールの方法

では、npmを使ってNode.jsの代表的なフレームワークであるExpressをインストールしてみましょう。

まずは、ルートディレクトリにtestnpmというディレクトリを作成します。後で、ここにExpressをインストールすることになります。

これでtestnpmディレクトリを作成し、移動することができました。次はこのプロジェクトの設定ファイル(package.json)を作成する必要があります。

次のようなコマンドで設定ファイルを作成します。

このコマンドを実行すると、次のような質問が表示されます。英語が読めないと、ここから先へ進むのが怖くなってしまうかもしれませんが、このままEnterキーを押してもらって大丈夫です。

次から次へと同じように質問が続きますので、全部Enterキーを押します。最後まで行くと、このようになると思います。

この状態でEnterキーを押すと、testnpmディレクトリにpackage.jsonファイルが作成されているのが確認できると思います。


package.jsonが作成された

ちなみに、先ほどEnterキーを押し続けたいくつかの質問は、package.jsonの内容を確認するための質問でした。今回はデフォルト設定にしましたが、package.jsonの内容は、任意に変更できます。

次に、このようなコマンドを入力すると、Expressがインストールできます。


expressがインストールされた状態

これで、package.jsonの内容に沿ってExpressがインストールされました。後はこのフォルダ内にindex.jsを作成してプログラムを作成していくのですが、その詳しい方法については以下を参考にしてください。

以上が、簡単なnpmの使い方となります。

パッケージマネージャーYarnとは

Yarnとは、2016年にリリースされたnpmと互換性のある新しいパッケージマネージャーです。やはり新しく作られたものですので、npmと比べてYarnの方が使いやすい印象があります。

では、Yarnにはどんな特徴があるのか詳しく見ていきましょう。

Yarnの特徴

Yarnの特徴としては、次のものが挙げられます。

  • npmと互換性がある
  • インストールが速い
  • セキュリティが高い
  • 強固なバージョン管理が可能
  •  
    npmと互換性があるため、npmと同様のコマンドが使用可能です。また、npmで使用していたプロジェクト設定ファイル(package.jsonファイル)も同じものが使えるので、簡単に言うとnpmとほぼ同じ感覚で使うことができます。

    Yarnで使用されるコマンドの一般的な例は次のものです。

     機能コマンド例
    1Help機能yarn help
    2Yarn のバージョン表示yarn -v
    3パッケージインストールyarn add [パッケージ名]
    4インストール済のパッケージ一覧の表示yarn list
    5パッケージアップデートyarn upgrade [パッケージ名]
    6パッケージアンインストールyarn remove [パッケージ名]

    そして、Yarnはインストールの速度がnpmと比べて非常に速く、状況にもよりますが、数倍のスピードでインストールができます。npmでは直列でインストールし、Yarnでは並列でインストールできるためです。

    さらにセキュリティもYarnは強固で、インストール時にパッケージが不正に変更されていないかなどをチェックサムを用いて検証することができます。そのため、安全なパッケージのインストールが可能です。

    最後にバージョン管理についても優れています。Yarnではパッケージのインストール後に、yarn.lockというファイルが作成され、インストールしたパッケージが使用している別のパッケージ(依存パッケージ)のバージョンが明確に書き込まれます。

    こうすることで、依存パッケージをその後再度インストールしてもバージョンの整合性が保たれるので、バージョン不一致でプロジェクトが動かなくなる危険性が無くなります。Yarnにはこのような特徴があります。

    Yarnのインストールの方法

    Yarnをインストールするには、次のようなコマンドを入力します。

    これだけでYarnをインストールできます。次のコマンドを入力してバージョンを確認できたら、インストール完了です。

    非常に簡単だと思います。

    Yarnでのパッケージのインストール方法

    ではYarnを使って同じようにNode.jsの代表的なフレームワークであるExpressをインストールしてみましょう。やり方はnpmの時とほとんど同じですので少し省略して説明します。

    まずはtestyarnディレクトリと、package.jsonファイルを作成しましょう。

    yarn initを実行するとnpmの時と同じようにpackage.jsonのファイル内容に関する質問が続きますので、今回も全てEnterキーを押して設定します。

    次に、いよいよExpressをインストールします。


    YarnでExpressをインストール

    npmとは違って、yarn.lockというファイルが作られているのが分かると思います。あとはnpmでインストールした時と同じように、Expressを使ってプログラムを作成するだけですね。

    Yarnでのインストールも、簡単にできたのではないでしょうか。

    まとめ

    JavaSciprtにおけるパッケージ管理について、パッケージマネージャーそのものに関する説明と、現在主流のパッケージマネージャーであるnpmとYarnについて解説しました。

    npmとYarnの特徴については次の違いや共通点があるということでしたね。

     項目npmYarn
    1リリース時期2010年2016年
    2パッケージのインストール速度遅い傾向速い傾向(数倍のスピードになることも)
    3安全性パッケージの整合性チェックなどはないパッケージの整合性チェックがあり、安全性が高い
    4バージョン管理バージョン違いの依存パッケージをインストールしてしまう可能性があるyarn.lockファイルによってバージョン管理が強固になり、バージョン違いの依存パッケージのインストールの心配がない

    これだけを見ると、Yarnの方が優れているという結論になりそうです。npmは現時点で多くのプロジェクトで使われているという意味では信頼性が高いとも考えられますが、それでもやはりYarnの方がnpmよりも高い評価を得ているようです。

    以上がJavaScriptにおけるパッケージ管理についての簡単な説明でした。これからパッケージ管理を考えている方は、ぜひ参考にしていただければと思います。

    現役フリーランスエンジニアによる無料体験レッスン実施中!

    もし、あなたが、

    • 経験、年齢、学歴に不安がある
    • 挫折しない学習方法が知りたい
    • アプリ開発で困っている
    • エンジニアの”生”の声が聞きたい!
    • 仕事獲得の仕方がわからない
    • エンジニアに転職したいが何をすればいいかわからない

    など、プログラミング学習やキャリアのことでお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

    あなたにとって、最適の解決策をご提案させていただきます。

    詳しくは下の画像から詳しいサービス内容をご確認ください。

    cta_mtm3

    LINEで送る
    Pocket

    書いた人

    Tatsuya

    Tatsuya

    プログラム歴10年のシステムエンジニアです。
    経験のある言語はHTML,JavaScript,PHP,VB,VBAなど。
    WEB系の開発が得意です。

    おすすめコンテンツ

    あなたにぴったりなプログラミング学習プランを無料で診断!

    プログラミング学習の効率を劇的に上げる学習メソッドを解説