# JavaScriptパッケージマネージャーをnpmからYarnへ移行しました URL: https://webrandum.net/yarn/ 公開日: 2018-09-16 更新日: 2019-01-01 カテゴリー: 作業効率化 タグ: npm, yarn 出典: Webrandum（著者: サイトウ マサカズ） JavaScriptのパッケージマネージャーといえば「npm」が有名です。npmを使用している人も多いとは思いますが、Facebookが開発した「Yarn」というパッケージマネージャーが非常によく、1度使うとnpmに戻れなくなりました。 本記事ではYarnの魅力と導入方法、簡単な使い方まで一気に解説していきます。 ## Yarnの魅力 そもそも自分は少し前からYarnを知ってはいたものの、npmに慣れていたため使う気はあまりありませんでした。しかし試しに一度使ってみると、そのインストールの早さに驚きました。 他にもメリットとしては、npmを使ったことがある人であればすぐに理解出来る学習コストの低さと、生成されるpackage.jsonにnpmとの互換性があるという点です。 - パッケージのインストールが早い - 学習コストが低い（npmを使ったことがある人ならすぐ使える） - npmとpackage.jsonの互換性がある こう考えると、npmから乗り換えても問題は無さそうですし、Yarnのインストールスピードを考えると、試してみる価値は十分にあると思います。 ## Yarnのインストール方法 ![Yarn](https://webrandum.net/wp/wp-content/uploads/2018/09/yarn_web.png) YarnはOSごとにインストールも違いますし、幾つか方法があるのですが、今回は既にnpmをインストールしている人向けの「npmを利用する方法」と「Homebrewを利用する方法」の2通りをご紹介します（僕の場合はnpmを利用してインストールしました）。 その他のインストール方法やWindowsの場合等は[Yarnの公式サイト](https://yarnpkg.com/ja/docs/install#mac-stable)をご覧下さい。 ### npmを使った方法 まずnpmを使用した方法からですが、前提としてnpmが必要なのでnode.jsがインストールされている必要があります。最新のnode.jsがインストールされているか確認して、もし最新版でなければ最新版をインストールして下さい。 ``` $npm -v ``` 最新版がインストールされている事を確認したら、下記コマンドをYarnをインストールしましょう。 ``` npm install -g yarn ``` これでインストールは完了です。 ### Homebrewを使った方法 npmをインストールしていなく、Yarnのみを使用したいという場合はHomebrewを使用した方法もあります。Homebrewがインストールされたmacで下記コマンドを入力するだけです。 もし、Node.jsがインストールされていない場合は一緒にインストールしてくれます。 ``` brew install yarn ``` ## Yarnの使い方 まずはpackage.jsonの作り方ですが、npmだと`npm init -y`ですがYarnの場合はnpmをyarnに置き換えるだけです。 ``` yarn init -y ``` これでデフォルトの設定が記述されたpackage.jsonが生成されます。 次に、パッケージのインストール方法ですが、npmでpackageのインストールを行う場合は`npm install パッケージ名`を下記のように変えるだけです。 ``` yarn add パッケージ名 ``` devDependenciesのパッケージとしてインストールしたい場合はオプションに「-D」を付けるだけでOKです。 また、グローバルにインストールすることは、最近のWebフロントエンドでは少なくなったと思いますが、もしグローバルインストールがしたい場合は下記コマンドを入力するとインストールできます。 ``` yarn global add パッケージ ``` Yarnを使ってインストールを行うと、ディレクトリ内に「yarn.lock」というファイルが生成されます。これはパッケージのバージョンを固定するためのファイルで、Yarnを使用している人同士で開発を行う場合は、この「yarn.lock」ファイルを共有することで、パッケージのバージョンをnpmより厳格に管理する事ができるのです。 もちろん、npmを使っている人には関係のないファイルですので何も反応しません。 ### package.jsonがある場合の使い方 既にpackage.jsonがある場合は、package.jsonのあるディレクトリで`yarn`のみ入力すればOKです。 もし、yarn.lockファイルがない場合は生成され、現在のパッケージのバージョンが固定されます。 ## ここまでで簡単そうと思った人は… npmを普通に使っている人はここまでの説明を聞いて、「ちょっとコマンド変えるだけだじゃん」と思いませんでしたか？もし、思ったのであれば是非試してみて下さい。 インストールした時のスピードは圧巻です。 今回npmからYarnに移行してみて思ったのが、「Web業界は満足したら終わりだな」という事です。 いつの間にか、もっと便利なものが生まれていますし、スピードはどんどん早くなっています。ついて行こうとすると非常に疲れますが、「とりあえずまずは試してみよう」と軽い気持ちで試してみる精神は大切だなと感じました。