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業界は満足したら終わりだな」という事です。
いつの間にか、もっと便利なものが生まれていますし、スピードはどんどん早くなっています。ついて行こうとすると非常に疲れますが、「とりあえずまずは試してみよう」と軽い気持ちで試してみる精神は大切だなと感じました。

macOSのシステム環境設定「アクセシビリティ」内にあるVoiceOverの設定見直し
Path Finderのファイル比較ツールをKaleidoscopeに変更する方法
PNG画像の圧縮をpngquantとAutomatorを使って右クリックメニューからできるようにする
Path FinderとFinderをいい感じに共存させるための設定
テキストを画面いっぱいに表示できるAlfredのLarge Type機能の設定項目
IllustratorとPhotoshopとXDのツール系のショートカットキーを統一させる
Path Finderで選択したファイルを特定アプリケーションで開く方法
Keyboard Maestroのバージョン9.0がリリース!ダークモード対応やJSON関連のアクションが追加
Alfred 4.0.8からAirDropやiCloud DriveをすばやくFinderで開けるように!
ウェブのGoogle Drive上でコピーアンドペーストのショートカットキーが使えるように!
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でタッチが一切効かなくなった場合に強制再起動する方法