Hello! Uchii.code

【npm/yarn】未経験からフロントエンドエンジニアになる方法 #7

2023-09-03に公開

まえがき

まず初めに、パッケージマネージャーとは何でしょうか。
パッケージマネージャー(Package Manager)は、ソフトウェア開発やコンピュータプログラムの管理に使用されるツールの一種です。主な役割は、ソフトウェアパッケージ(コード、ライブラリ、モジュール、プラグインなどの再利用可能なコードの塊)のインストール、更新、削除、依存関係の管理、バージョン管理などです。多くのプロジェクトでは開発段階で様々なライブラリやモジュールをインストールし使用します。数多くのライブラリをインストールすることで、それぞれの依存関係が複雑になります。依存関係を解決しないと、適切にライブラリが動作しない可能性が高まります。それらを勝手に解決してくれるのがパッケージマネージャーになります。

今回はその中でもnode.jsに焦点を絞って、npmyarnの違いについてまとめていきます。どちらもJavascript言語を用いた開発では必須なので調べながらでも使えるようにしておきましょう。

1. パッケージマネージャーの基本

1-1. npmとは何か?

npm(Node Package Manager)は、JavaScriptエコシステムで広く使用されているパッケージマネージャーです。npmは、JavaScriptライブラリやモジュールのインストール、更新、削除を簡単に行うためのツールです。JavaScript開発者にとって欠かせない存在であり、豊富なライブラリがnpmレジストリで提供されています。npmの特徴は、コマンドラインを介して簡単に操作できることと、パッケージのバージョン管理が柔軟であることです。npmを使用することで、プロジェクトの依存関係を管理し、スムーズな開発作業を実現できます。

1-2. yarnとは何か?

yarnは、npmと同様にJavaScriptエコシステムのためのパッケージマネージャーです。Facebookが開発したツールで、パフォーマンスの向上とセキュリティの強化を目指しています。yarnはnpmと同じくライブラリやモジュールのインストール、更新、削除をサポートし、コマンドラインを通じて利用できます。yarnの特徴は、パッケージのキャッシュを活用して高速な依存関係の解決を行うことができることです。また、パッケージのインストールと更新が並行して行われるため、効率的な開発環境の構築が可能です。

1-3.ではどちらを使用するべきか

結論から言いますと、npmとyarnのどちらを選ぶべきかを決定する際の基準は、プロジェクトの要件やチームの好みによって異なります。しかし、これではなんだかすっきりしないのでそれぞれの利点をお伝えします。

npmの利点:多くのプラットフォームで利用可能であり、さまざまな環境に適している。また、大規模なプロジェクトや企業で広く採用されており、それに伴う経験とサポートが利用可能です。

yarnの利点:yarnはセキュリティ強化に焦点を当てており、セキュリティの面で利点があります。また、パッケージのキャッシュ管理が重要な場合、yarnは依存関係を高速にキャッシュする機能を提供します。

  • npmとyarnはどちらもライブラリやモジュールのインストール、更新、削除を簡単に行うためのツール
  • どちらを選ぶべきかを決定する際の基準は、プロジェクトの要件やチームの好みによって異なる
  • npmの利点は多くのプロジェクトで採用されていること。yarnの利点はセキュリティ面とキャッシュを利用したパフォーマンス

2. npmの基本的な使い方

2.1. npmのインストール

npmを利用するためには、まずNode.jsをインストールする必要があります。Node.jsをインストールすると、npmも同時にインストールされます。以下は、npmをインストールする手順です:

  1. 1.Node.jsの公式ウェブサイトから最新の安定版をダウンロードします。
  2. 2.インストールプロセスに従って、Node.jsをインストールします。
  3. 3.インストールが完了したら、コマンドラインでnpm -vと入力して、npmのバージョンを確認します。

2.2. プロジェクトの初期化

```shell
npm init

このコマンドを実行すると、対話型のプロジェクト初期化プロセスが開始され、プロジェクトの設定情報を入力できます。最終的に、package.jsonというプロジェクトの設定ファイルが生成されます。npm initの対話に関しては以下の記事を参考にしてみてください。ちなみに、npx create 〜でreactやNext.jsのプロジェクトを始める際は初期化のコマンドを流す必要はありません

2.3. パッケージのインストール

```shell
npm install パッケージ名

このコマンドを実行すると、指定したパッケージがプロジェクトにインストールされます。また、依存関係が自動的にpackage.jsonファイルに記録されます。アンインストールしたい場合は以下のコマンドです。

```shell
npm uninstall パッケージ名

また、基本的には開発中のプロジェクトのvscodeでcommand + J(設定による)を押すとターミナルが出現するので、そちらでコマンドを流します。


3. yarnの基本的な使い方

3.1. yarnのインストール

yarnを利用するためには、まずyarnをインストールする必要があります。以下は、yarnをインストールする手順です

npm install -g yarn

このコマンドは、npmを使用してyarnをグローバルにインストールします。これにより、どのディレクトリからでもyarnコマンドを実行できるようになります。

3.2. プロジェクトの初期化

こちらもnpmと同様です。

  1. 1.プロジェクトフォルダを作成します。例えば、mkdir my-yarn-appなどでフォルダを作成します。
  2. 2.作成したフォルダに移動します。cd my-yarn-appなどでプロジェクトフォルダに移動します。
  3. 3.以下のコマンドを実行してプロジェクトを初期化します(こちらも、npx create 〜でreactやNext.jsのプロジェクトを始める際は不要。)
yarn init

3.3. パッケージのインストール

yarn add パッケージ名

このコマンドを実行すると、指定したパッケージがプロジェクトにインストールされ、依存関係が自動的にpackage.jsonファイルに記録されます。不要なパッケージをアンインストールするには、以下のコマンドを使用します。

yarn remove パッケージ名

まとめ

今回の#7ではパッケージマネージャーであるnpmとyarnについて触れました。個人的な感想としては、特別な理由がない限り、yarnを使用していくのがおすすめかなと思います。次回の#8ではReactの学習方法について説明していきます。

javascriptの学習方法としては、Progateもしくはドットインストール→Youtube(しまぶーのIT大学)→Udemy講座【JavaScript&CSS】ガチで学びたい人のためのWEB開発実践入門(フロントエンド編)の順番が個人的にはおすすめです。

プログラミング言語の人気オンラインコース

G e t i n T o u c h