最近のWebのフロントエンド開発ではライブラリやパッケージの管理を行うパッケージマネージャーの採用が主流になってきています。例えば、タスクランナーのGulpやGruntであったり、SassやTypeScriptのコンパイルのためにNode.jsnpm)を導入している方は多いでしょう。

JavaScriptのパッケージマネージャーとしてはnpmが有名ですが、2016年10月にFacebookが新しいパッケージマネージャー「Yarnヤァン」を公開しました。このパッケージマネージャーの開発にはGoogle、Exponent、Tildeなどが協力しています。

Yarnはnpmと互換性のあるJavaScriptのためのパッケージマネージャーで、npmに対して「インストールが高速」「より厳密にバージョンを固定」「セキュリティが高い」といった特徴があり、魅力的です。本記事では、npmの経験者に向けてYarnの特徴とパッケージ管理についてご紹介します。

※npm v5からインストール高速化やバージョン固定機能が搭載されています。

161026_yarn_blog_capture▲ 参照記事「Code – Yarn: A new package manager for JavaScript

Yarnの特徴とは

高速なインストール

一度インストールしたらパッケージがキャッシュ化されるため、オフラインでも再インストールできます。また、npmでは直列にインストールしていましたが、Yarnでは効率的にリクエストキューを発行し、並列にインストールを行います。これにより、高速にパッケージをインストールできます。

より厳密にバージョンを固定

Yarnではロックファイルを作成することで依存しているパッケージのバージョンが固定化され、より正確なバージョンで管理できます。また、正確なアルゴリズムですべてのマシンに同じファイル構造でインストールされるため、インストールの再現が可能です。複数人での開発時に「一部の人のみエラーが発生する」といったバグを発生しにくい環境にできます

セキュア

パッケージのインストール前にチェックサムで整合性を確認します。パッケージに誤りがないかをチェックできるため、信頼性が高まります。

インストールに失敗しづらい

ネットワークへの接続に失敗した場合でも自動的に再試行されるため、インストールに失敗しづらい設計がされています。

フラットモード

同パッケージの別バージョンの重複を作成せず、単一のバージョンにすることもできます。これにより、パッケージがインストールされるnode_modulesフォルダー内の肥大化が防げます。

161026_yarn_consoleyarn --flatコマンドを使って、フラットモードでインストールしている様子。重複しているバージョンがある場合にバージョンを選んでインストールできる

シンプルなコマンドライン出力

多くの絵文字を使用し、シンプルで読み取りやすいコマンドライン出力がされます。

161026_yarn_console_gif ▲ Yarnからパッケージをインストールしている様子

Yarnをインストールしてみよう

Yarnはnpmコマンドからインストールできます。コマンドライン(Windowsではコマンドプロンプト、macOSではターミナル.app)を立ち上げ、以下のコマンドを実行します。成功するとYarnがグローバル環境にインストールされ、yarnコマンドを実行できるようになります。

npm install -g yarn

※ その他の方法でもインストール可能です。公式のドキュメント「Installation」を参照ください

Yarnでプロジェクトを管理しよう

Yarnのコマンドはnpmのコマンドと異なります。ここでは頻繁に使用するコマンドについて紹介します。

はじめからyarnを使ってみる場合(package.jsonがない場合)

パッケージ管理ファイルの作成にはyarn initコマンドを使用します。このコマンドを実行すると、対話形式でプロジェクト名やバージョン情報が聞かれ、package.jsonファイルが作成されます。このファイルを共有することで、プロジェクトにインストールするパッケージの設定情報を他の人と共有できます。中身はnpmで作るpackage.jsonファイルと同じものなので、Yarnで設定したものをそのままnpmで使えます。

yarn init

※ npmコマンドのnpm initと互換のコマンド

161026_yarn_init

yarn initコマンドを実行した時の様子

既存のプロジェクトでYarnを使用する場合(package.jsonがある場合)

既存のpackage.jsonファイルから必要なモジュールをインストールするにはyarnコマンドを使用します。パッケージの情報が記載されている状態で実行するとパッケージのバージョンを固定するためのyarn.lockファイルが作成されます。

yarn

npm installと互換のコマンド

プロジェクトに必要なパッケージをインストールしてみよう

プロジェクトに必須なパッケージをインストールする場合

プロジェクトに必須なパッケージをインストールする場合、yarn addコマンドを実行します。このコマンドを実行すると、node_modulesフォルダーにパッケージがインストールされ、package.jsonファイルのdepenciesの箇所にパッケージ名とバージョンが記載されます。また、パッケージのバージョンを固定するためのyarn.lockファイルが作成されます。

yarn add [package名]

※ npmコマンドのnpm install --saveと互換

なお、npmではnpm install [モジュール名]のように--saveオプションを使用せずにモジュールのバージョンをpackage.jsonに記載しない方法がありましたが、Yarnでは必ずバージョンが記載されます。これは依存状態がわからないパッケージが紛れ込まないようにする配慮のようです。

開発者が使用するパッケージをインストールする場合

開発用のツールなど開発者向けに必要なパッケージとしてインストールする場合は、yarn add [package名] --devコマンドを使用します。このコマンドを実行すると、package.jsonファイルのdevDepenciesの箇所にパッケージ名とバージョンが記載されます。また、パッケージのバージョンを固定するためのyarn.lockファイルが作成されます。

yarn add [package名] --dev

※ npmコマンドのnpm install --save-devと互換

グローバルにインストールする場合

マシンのグローバルにインストールする場合は、yarn global addコマンドを使用します。

yarn global add [package名]

※ npmでのnpm install -gコマンドと互換

パッケージをアンインストールする

パッケージの削除はyarn removeコマンドを使用します。実行するとpackage.jsonファイルやyarn.lockファイルに記載されていたパッケージ名とバージョン情報が削除されます。

yarn remove

npm uninstallと互換。npmコマンドではオプションに指定していた--save--save-devは不要です
※ その他、詳しいコマンドについてはYarn公式のnpm移行ガイド「Yarn – Migrating from npm」を参照ください

Yarnをプロジェクトで使用するか?

インストールの高速化やバージョンの固定機能、オフラインインストールと、とても魅力的な機能がそろっていて、個人的に導入したいと感じています。複数人が関わるプロジェクトに導入するにはインストールの手間やnpmコマンドとの違いなどの周知を行う必要があるためハードルが高いのですが、パッケージを管理するファイルはnpmとも共通になるため個人単位でも導入は可能です。npmへ戻るのは難しくないため、まずは気軽にためしてみてはいかがでしょうか?