npmの復習

# 目次

[1.この記事の目的](#1-この記事の目的)
[2.概要](#2-概要)
[3.パッケージ管理システム](#3-パッケージ管理システム)
[4.もしnpmがなかったら](#4-もしnpmがなかったら)
[5.npmの使い方](#5-npmの使い方)
[6.便利なコマンド](#6-便利なコマンド)
[7.最後に](#7-最後に)
[8.参考記事](#8-参考記事)

---

## 1. この記事の目的

- npmに関する知識の復習
 - もやっとした理解だったため記事を読んで理解を深め言語化する

- 実務でも使えそうな+αの知識を紹介
　- 調べる中で、便利なコマンドなどを学べたので紹介

- 読んでくれる人の理解の手助けになれば

---

## 2. 概要

### npmとは？
「Node Package Manager」の略。
Node.jsのパッケージ管理を行うツール。

### Node.js
サーバーサイドで動くJavaScript。

#### 特徴

- 大量のデータ処理が可能
 - C10K問題に対応
     - Apache HTTP Serverなどウェブサーバーとクライアント通信においてクライアントが約１万台に達するとウェブサーバーのハードウェア性能に余裕があるにもかかわらず、レスポンス機能が大きく下がる問題
- メモリ消費が少ない
 - イベントループ（詳細省略）
- 処理速度が速い
 - Google V8 JavaScript Engine
      - Googleが開発したコンパイルエンジン
      - Chromeなどで使用
      - 中間コード、インタープリタを搭載せず、最初の実行時からコンパイルされる
      - JIT（Just-In-Time Compiler）
         - ソフトウェアの実行時にコードのコンパイルを実行。実行速度の向上を図るコンパイラ
         - （AOTコンパイラ）
             - 事前コンパイラ
- サーバーサイドでJavaScriptが使える
  - 「サーバーサイドは新しい言語」ではなく、クライアント側で使用するJavaScriptをそのままサーバーサイドで使用できるため基礎的な書き方は同じ。

### パッケージ

#### あらかじめ用意された便利な機能をまとめたもの
#### 代表例

- Express
  - Node.jsのMVCフレームワーク
- promiss、async
 - 非同期処理

など

---

## 3. パッケージ管理システム

一つの環境で各種ソフトウェアの導入や削除、依存関係を管理するシステムのこと。

### 機能

主に4つの機能がある！

- リポジトリの購読

 - インターネット上のパッケージリポジトリを指定し、必要に応じてパッケージリストを更新

- ソフトウェアパッケージのインストール・削除

 - ソースコードや設定ファイルをパッケージ化してインストール可能

- 依存関係の解決

 - あるパッケージに必要なソフトウェアを自動的にインストールしたり更新することができる
 - 同時にインストール、更新できないソフトウェアパッケージのインストールや更新を回避できる

- 設定管理
 - 設定スクリプトを使って自動的に設定を行える
     - npmならpackage.json、composerならcomposer.jsonとか
 - 競合する機能を持つソフトウェアで、どちらを優先して使うかを設定できる

言われてみたら「確かにな」って感じるけど、言語化するとしっくりくる。

---

### 4. もしnpmがなかったら

開発するのに色々手間暇時間がかかります。
→「手間暇かけるのが愛情」が正だとすると、別のところに愛情を使えるようになる

- 使用するパッケージ、ライブラリなどをいちいち公式サイトなどからダウンロードしないといけない

- 作ったnpmパッケージをチームで共有したいが共有や更新などの管理などが面倒

つまり、楽に速くコードを書くことができるようになりサービスの開発時間の短縮や他のことに時間をかけられるようになる。

---

### 5. npmの使い方

#### Node.jsのダウンロード
[公式サイト](https://nodejs.org/en/)からダウンロード。
Node.jsをダウンロードしたらnpmもダウンロードされます

#### バージョンの確認

ダウンロードしたら

```:terminal
npm --version
```
でnpmのバージョンを確認します
（npmのパスが通ってなかったら通してください）

#### 使用するパッケージをインストールする
ここでは例でjQueryをインストールします

```:プロジェクトルート配下
npm install jquery -g
```
※ 「-g」などのオプションは後述

#### 既にpackage.jsonがあるプロジェクトの場合

package.jsonに記述されているパッケージを復元（インストール）します
（package.jsonはパッケージ管理スクリプトの一つ。詳細は後述）

```:package.jsonがディレクトリ
npm install
```

#### パッケージの更新

- 未更新パッケージの確認

```:未更新パッケージを確認
npm outdated
```

---

#### ※パッケージの最新バージョンを使用するにはpackage.jsonに記述が必要※

パッケージを更新する際、いちいちpackage.jsonに内容を確認、記述するのが面倒。
→パッケージのバージョンを一括で最新にしてくれるパッケージnpm-check-updatesが便利！

```:npm-check-updatesをインストール
npm install -g npm-check-updates
npm-check-updates -u
```

```:インストール後、アップデートで最新になる
npm update
```

これでnpmパッケージのバージョン管理が楽になる。

---
## オプションについて

たくさんあるけど、この資料で使う分を紹介。

### -g
グローバルインストール。どのディレクトリでも使えるようにパッケージをインストールする
（グローバルインストールについては後述）

```:-g
npm install jquery -g
```

### --save

package.jsonのdependenciesに依存関係が追加される。
要は「このpackage.jsonが入ったプロジェクトに必要なパッケージ」
（dependenciesについては後述）

```:--save
npm install jquery --save
```

### --save-dev
package.jsonのdevDependenciesに依存関係が追加される。
要は「パッケージの開発をするときに必要なパッケージ」。テストするためのパッケージとか。
（devDependenciesについても後述）

---

ここでnpmの説明から離れた小休憩。

## グローバルインストールとローカルインストールの違い

恥ずかしながら、二つの違いをはっきり理解できていなかったため復習。

### グローバルインストール
npm installするときに「-g」オプションをつけることで実行可能。
***「npm」のルート配下にあるnode_modules***にパッケージがインストールされるため、一度グローバルインストールしたパッケージはどのディレクトリのプロジェクトでも使用することができる

### ローカルインストール
npm installした時に何もオプションを付けなかった時はデフォルトでローカルインストールされる。
インストールされるパッケージの場所は***プロジェクトルート配下にあるnode_modules。***

従って、どのプロジェクトでも使いそうなパッケージをインストールするときはグローバルインストール、既存のプロジェクトを始めるとき（package.jsonが既にあったら）ローカルインストールの方が良い…のか？
※要確認

---

小休憩になるかわからないがnpmから直接離れてもう一度休憩。

## package.jsonのdependenciesとdevDependencies

### dependencies
npmパッケージを使うときに必要なパッケージ。
これがないとこのパッケージが動かない。
必要なパッケージ=依存しているパッケージ

```:dependenciesはインストールされる
npm install [パッケージ名]
```
これでもインストールされる。


### devDependencies
npmパッケージを開発する時に必要なパッケージ。
package.jsonがあるディレクトリで```npm install```をしないとインストールされない。
例えば
「jQuery」のパッケージを```npm install```でインストールした時は「jQuery」を開発する上でのテスト関係のパッケージなどはインストールされない。
（パッケージをテストするためのパッケージ）

---

#### パッケージのアンインストール

##### グローバルインストールされたパッケージのアンインストール

```:グローバルインストールされたパッケージ
npm uninstall jquery -g
```

##### ローカルインストールされたパッケージのアンインストール

```:ローカルインストールされたパッケージ
npm uninstall jquery
```

##### package.jsonのdependenciesから依存関係を削除する場合

```:依存関係を削除
npm uninstall jquery --save
```

##### package.jsonのdevDependenciesから依存関係を削除

```:devDependenciesから削除
npm uninstall jquery --save-dev
```


##### ちなみに※uninstallは省略記号も使える

```:uninstallを省略
npm un jquery
```

---

### 6. 便利なコマンド

#### npm dedupe

パッケージの依存関係を整理してくれる.
##### 例

- モジュールBがCに依存

- モジュールDがCに依存

 - 上記がそれぞれ別々の記述だった場合、記述が重複してバージョンが異なると不整合が起きる
- これらを「モジュールB、DがCに依存」というふうに書き換えてくれるのがnpm dedupe

→パッケージをいくつか個別でinstallした後にやっておくと便利？
→npmに依存関係解決してくれる機能が既にあるから今はあまり使わない？


#### david
モジュールの最新安定バージョンをとってきてくれるツール
※依存モジュールの依存モジュールは最新にしない

```:david
npm install david -g
```

```
david update
```

オプションに```-u```を付けたら安定バージョンではない、最新のバージョンをとってきてくれるツール.

#### audit

依存関係でトラブった時にterminalでこのコマンド叩いてくださいって言われるやつ。

依存関係でトラブった時に解決手段を表示してくれる

```
npm audit 
```

依存関係でトラブった時に解決してくれる

```
npm audit fix
```


---

### 7. 最後に

参考記事を読んで僕なりにまとめてみましたが、もやっとしたところが言語化されて理解がスッキリした…かも。笑
特にグローバルインストールとローカルインストール、dependenciesとdevDependenciesははっきり理解できてなかったからとても勉強になりました。
あと便利コマンドも役に立ちそうだ！積極的に使って身につけていこう。

僕が下記の参考記事によって助けられたように
この記事が少しでも誰かの手助けになりますように。
ありがとうございました。

---

### 8. 参考記事

- [便利なパッケージ管理ツール！npmとは【初心者向け】](https://techacademy.jp/magazine/16105)
- [npmとは](https://qiita.com/akitxxx/items/05f973df9c54cec23419)
- [npm入門](https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea)
- [【いまさらですが】package.jsonのdependenciesとdevDependencies](https://qiita.com/chihiro/items/ca1529f9b3d016af53ec)
- [初めてのnpm パッケージ公開](https://qiita.com/TsutomuNakamura/items/f943e0490d509f128ae2)
- [NPM / Bower / Composer-違いは？](https://www.it-swarm.jp.net/ja/npm/npm-bower-composer%E9%81%95%E3%81%84%E3%81%AF%EF%BC%9F/1046574457/)
- [npmのあまり知られていない機能10選](https://yosuke-furukawa.hatenablog.com/entry/2014/06/10/100410)

Wikipedia
- [npm](https://ja.wikipedia.org/wiki/Npm_(%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB))
- [パッケージ管理システム](https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)