JavaScriptパッケージマネージャーをnpmからYarnへ移行しました

JavaScriptのパッケージマネージャーといえば「npm」が有名です。npmを使用している人も多いとは思いますが、Facebookが開発した「Yarn」というパッケージマネージャーが非常によく、1度使うとnpmに戻れなくなりました。
本記事ではYarnの魅力と導入方法、簡単な使い方まで一気に解説していきます。
Yarnの魅力
そもそも自分は少し前からYarnを知ってはいたものの、npmに慣れていたため使う気はあまりありませんでした。しかし試しに一度使ってみると、そのインストールの早さに驚きました。
 他にもメリットとしては、npmを使ったことがある人であればすぐに理解出来る学習コストの低さと、生成されるpackage.jsonにnpmとの互換性があるという点です。
- パッケージのインストールが早い
 - 学習コストが低い(npmを使ったことがある人ならすぐ使える)
 - npmとpackage.jsonの互換性がある
 
こう考えると、npmから乗り換えても問題は無さそうですし、Yarnのインストールスピードを考えると、試してみる価値は十分にあると思います。
Yarnのインストール方法

YarnはOSごとにインストールも違いますし、幾つか方法があるのですが、今回は既にnpmをインストールしている人向けの「npmを利用する方法」と「Homebrewを利用する方法」の2通りをご紹介します(僕の場合はnpmを利用してインストールしました)。
 その他のインストール方法やWindowsの場合等はYarnの公式サイトをご覧下さい。
npmを使った方法
まずnpmを使用した方法からですが、前提としてnpmが必要なのでnode.jsがインストールされている必要があります。最新のnode.jsがインストールされているか確認して、もし最新版でなければ最新版をインストールして下さい。
$npm -v最新版がインストールされている事を確認したら、下記コマンドをYarnをインストールしましょう。
npm install -g yarnこれでインストールは完了です。
Homebrewを使った方法
npmをインストールしていなく、Yarnのみを使用したいという場合はHomebrewを使用した方法もあります。Homebrewがインストールされたmacで下記コマンドを入力するだけです。
 もし、Node.jsがインストールされていない場合は一緒にインストールしてくれます。
brew install yarnYarnの使い方
まずは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業界は満足したら終わりだな」という事です。
 いつの間にか、もっと便利なものが生まれていますし、スピードはどんどん早くなっています。ついて行こうとすると非常に疲れますが、「とりあえずまずは試してみよう」と軽い気持ちで試してみる精神は大切だなと感じました。

 PC作業をする上でのちょっとした小技 #1日1Tips – 2019年6月 
 ソート時の「昇順・降順」どっちがどっちか迷わないための覚え方や対策 
 Alfred 4で使えるシステムコマンドのまとめ 
 コーディング初心者が入力ミスを減らすためにできる設定 
 Alfredを最大限活用する、ブラウザのブックマーク管理方法について 
 一瞬で日時を取得するKeyboard Maestroのタイムスタンプ機能についてまとめる 
 BetterTouchToolの設定ファイルをエクスポート・インポートする方法 
 AlfredでKarabiner-Elementsのプロファイルを切り替えるWorkflowの作り方 
 macOS Mojaveのログイン周りの設定まとめ(ゲストユーザのオフ、ログイン時の壁紙変更) 
 Alfredで複数のアプリケーションを一気に起動できるようにする 
 iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない 
 Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法 
 iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法 
 iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法 
 Keynoteで有効にしているはずのフォントが表示されない現象 
 MacのKeynoteにハイライトされた状態でコードを貼り付ける方法 
 AirPodsで片耳を外しても再生が止まらないようにする方法 
 iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ 
 DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること 
 Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する 
 1つのノートアプリにすべて集約するのをやめた理由|2025年時点のノートアプリの使い分け 
 Notionログイン時の「マジックリンク」「ログインコード」をやめて普通のパスワードを使う 
 AlfredでNotion内の検索ができるようになるワークフロー「Notion Search」 
 Gitで1行しか変更していないはずのに全行変更した判定になってしまう 
 Macでアプリごとに音量を調節できるアプリ「Background Music」 
 Macのターミナルでパスワード付きのZIPファイルを作成する方法 
 MacBook Proでディスプレイのサイズ調整をして作業スペースを広げる 
 SteerMouseの「自動移動」機能で保存ダイアログが表示されたら自動でデフォルトボタンへカーソルを移動させる 
 iPhoneでタッチが一切効かなくなった場合に強制再起動する方法