のぞみNodeJS9187111最近のWebのフロントエンド開発ではライブラリの管理を行うパッケージマネージャーの採用が主流になってきています。タスクランナーのGulpやGruntであったり、SassやTypeScriptのコンパイルのためにNode.jsノード・ジェイエス(npm)を導入している方は多いでしょう。JavaScriptのパッケージマネージャーとしては「npmネヌ・ピー・エヌ」が有名ですが、2016年10月にFacebookが新しいパッケージマネージャー「Yarnヤァン」を公開しました。Yarnはnpmと互換性のあるJavaScriptのためのパッケージマネージャーで、「インストールが高速」「より厳密にバージョンを固定」「セキュリティが高い」といった魅力があります。弊社はnpmからYarnに乗り換えて早3年、快適に開発に利用しています。本記事では、npmの経験者に向けてYarnの利点と使い方を紹介します。Yarnの特徴とはインストールがとにかく早い一度インストールしたパッケージはキャッシュされるため、オフラインでも再インストールできます。npmでは直列にインストールしていましたが、Yarnでは効率的にリクエストキューを発行し並列にインストールを行います。これにより、高速にパッケージをインストールできます。npmもバージョン5から高速化されましたが、Yarnのほうが圧倒的に高速です。Qiita」でも検証済みです。厳密にバージョンを固定できるYarnではロックファイルによって依存パッケージをより正確なバージョンで管理できます。正確なアルゴリズムですべてのマシンに同じファイル構造でインストールされるため、インストールの再現が可能です。複数人での開発時に「一部の人のみエラーが発生する」といったバグを発生しにくい環境にできます。セキュリティーが高いパッケージのインストール前にチェックサムで整合性を確認します。パッケージに誤りがないかをチェックできるため、信頼性が高まります。インストールに失敗しづらいネットワークへの接続に失敗した場合でも自動的に再試行されるため、インストールに失敗しづらいです。フラットモード同パッケージの別バージョンの重複を作成せず、単一のバージョンにすることもできます。これにより、パッケージがインストールされるnode_modulesフォルダー内の肥大化が防げます。--flatコマンドを使って、フラットモードでインストールしている様子。重複しているバージョンがある場合にバージョンを選んでインストールできるコマンドライン出力がわかりやすい多くの絵文字を使用し、シンプルで読みやすいコマンドライン出力がされます。Yarnからパッケージをインストールしている様子Yarnをインストールしてみよう前提として、Node.jsの最新版をインストールしておいてください。Node.jsに付属のパッケージマネージャー「npm」がYarnのインストールに必要だからです。Yarn」の手順にあるように、Yarnの公式インストーラーを使うのが便利でしょう。macOSの場合Yarnはnpmコマンドからインストールできます。コマンドライン(Windowsではコマンドプロンプト、macOSではターミナル。app)を立ち上げ、以下のコマンドを実行します。成功するとYarnがグローバル環境にインストールされ、yarnコマンドを実行できるようになります。Yarn」で進めることも可能です。公式の手順は手間が多いため、コマンドラインに不慣れな方にとっては敷居が高いでしょう。Yarnでプロジェクトを管理しようYarnのコマンドはnpmのコマンドと少しだけ異なります。頻繁に使用するコマンドについて紹介します。initコマンドを使用します。このコマンドを実行すると、対話形式でプロジェクト名やバージョン情報が聞かれ、package.jsonファイルが作成されます。このファイルを共有することで、プロジェクトにインストールするパッケージの設定情報を他の人と共有できます。中身はnpmで作るpackage.jsonファイルと同じものなので、Yarnで設定したものをそのままnpmで使えます。既存のプロジェクトでYarnを使用する場合(package.jsonがある場合)既存のpackage.jsonファイルから必要なモジュールをインストールするにはyarnコマンドを使用します。パッケージの情報が記載されている状態で実行するとパッケージのバージョンを固定するためのyarn.lockファイルが作成されます。addコマンドを実行します。このコマンドを実行すると、node_modulesフォルダーにパッケージがインストールされ、package.jsonファイルのdepenciesの箇所にパッケージ名とバージョンが記載されます。パッケージのバージョンを固定するためのyarn.lockファイルが作成されます。--devコマンドを使用します。このコマンドを実行すると、package.jsonファイルのdevDepenciesの箇所にパッケージ名とバージョンが記載されます。--devもしくは--devは-Dと省略できます。addコマンドを使用します。removeコマンドを使用します。実行するとpackage.jsonファイルやyarn.lockファイルに記載されていたパッケージ名とバージョン情報が削除されます。uninstallと互換。モジュール名とするだけで、node_modules/.bin/にあるスクリプトを実行できます。typescriptでインストールしたTypeScriptパッケージのコンパイルコマンドを実行するには、次のように実行します。runコマンドで実行できます。Yarnをプロジェクトで使用するか?インストールの高速化やバージョンの固定機能、オフラインインストールと、とても魅力的な機能がそろっていて、個人的に導入してよかったと思っています。複数人が関わるプロジェクトに導入するには、インストールの手間やnpmコマンドとの違いなどの周知を行う必要があります。npmへ戻るのは難しくないため、まずは気軽にためしてみてはいかがでしょうか?実際にyarnを導入した体験を記事『npmから乗り換えてわかったYarnの4つのメリット』にまとめたので、あわせて参照ください。平成30年6月12日に内容をメンテナンスしています。のぞみインタラクティブデベロッパー。好きな生き物はハムスター、好きな食べ物は豚汁です。ツールは使うより作りたい派。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。