yarnでも良いやーん！

yarn を使ってみたかったので、少し触ってみました。

yarn をインストールする

yarn はサードパーティ製のJavaScriptのパッケージマネージャーのようです。

そもそもNode.jsの純正パッケージマネージャであるnpm 自体がパフォーマンス、セキュリティ、パッケージバージョンについての問題を抱えていたこともあり、そういった問題を回避するために使うことも多いようです。

Node.js 自体をあまり問題視したことはなかったのですが、一連の問題を解決しているソリューションなのであれば、こちらを使う方が良いのかもしれません。

まずは Node.js と npm のバージョンを確認します。

node -v

npm -v

インストール | Yarn

私の端末は Windows11 ですが、Ubuntu ( WSL2 ) で使っているので、Linuxとしてのインストールを試みてみます。

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

インストールに際してパスワードの入力を求められます。
パスワード入力後、通常の Linux パッケージのようにインストールを進めます。

sudo apt-get update && sudo apt-get install yarn

無事にインストールが完了したようなので、`yarn`のバージョンを確認してみましたが、エラーを返されました。

yarn --version

Volta error: Yarn is not available.
Use `volta install yarn` to select a default version (see `volta help install` for more info).

ふだん Node.js と npm の管理を Volta でしていたのですが、その Volta が yarn のインストールも Volta でやんなよ。って言ってきました。

volta install yarn

yarn --version

4.1.1

言う通りに `volta install yarn` すると、yarn のインストールに成功しました。
おせっかいなところはありますが、一連のパッケージ管理は今のところ Volta が便利です。

せっかくなので yarn で vite をインストールして使ってみようと思います。

はじめに | Vite

yarn create vite

yarn で vite のインストールを試みてみたのですが、インストール時に吐き出されるログメッセージが見慣れないものに変わっていました。こんな感じでちょっと新鮮。

➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + create-vite@npm:5.2.2
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ A package was added to the project (+ 250.6 KiB).
➤ YN0000: └ Completed in 0s 301ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 0s 424ms

例のごとく「プロジェクト名」、「フレームワーク（React）」、「variant（JavaScript）」を入力してVite をインストールしました。

npm で vite をインストールした時は、インストール後の実行コマンドも npm コマンドで表示されていましたが、今回はインストール後の実行コマンドが yarn になっています。

新鮮ですねえ。

cd （プロジェクト名）
yarn
yarn dev

\プロジェクトディレクトリへ移動して `yarn` コマンドを実行するも、ここで問題発生。

The nearest package directory doesn't seem to be part of the project declared in （パスの場所）.

- If （パスの場所） isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If （パスの場所） is intended to be a project, it might be that you forgot to list （プロジェクトディレクトリの場所） in its workspace configuration.
- Finally, if （パスの場所） is fine and you intend （プロジェクトディレクトリの場所） to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.

どうやらメッセージの初めに表示された（パスの場所）に余計なファイル（ yarn.lock もしくは package.json ）があるから消してね。というメッセージでした。

確認すると、しっかり package.json ファイルが鎮座していたので削除。

yarn

➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @types/react-dom@npm:18.2.22, @types/react@npm:18.2.66, @vitejs/plugin-react@npm:4.2.1, eslint-plugin-react-hooks@npm:4.6.0, and 387 more.        
➤ YN0000: └ Completed in 7s 896ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 356 packages were added to the project (+ 58.99 MiB).
➤ YN0000: └ Completed in 2s 985ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ esbuild@npm:0.19.12 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 2s 304ms
➤ YN0000: · Done with warnings in 13s 273ms

その後、改めて `yarn` コマンドを実行すると、無事に vite を実行することができました。

vite を実行してみた画面

何をつくった訳でもないですが、yarn もそこまでハードルの高いものではないように思いました。強いて言えば3つのサプライズが起きましたが…。

1. yarn のインストールに際して Volta が横からしゃしゃり出てきた。

2. yarn コマンドの実行ログが見慣れない新鮮なものだった。

3. 予期しない場所で package.json ファイルの影響を受けた。

いずれも調べれば解決策が出てくるような現象だったので良かったです。
JavaScript のパッケージマネージャの選択肢としてはもうひとつ「pnpm」がありますが、こちらもそのうち遊んでみたいと思います。

さらに深堀りするのであれば、開発環境をもう1段階遡って「JavaScriptのランタイムって面白いの？」というところに興味が湧いています。

「Bunってそんなに早いの？」

「 正直なところ deno が本命じゃないの？」

スピードやセキュリティやパフォーマンスがどうこうというより、単に触りたいだけですが。笑