弁護士ドットコム株式会社 Creators’ blog

弁護士ドットコムがエンジニア・デザイナーのサービス開発事例やデザイン活動を発信する公式ブログです。

Deno 2.0 の依存管理アップデートとモノレポワークスペースの実践

フロントエンド 弁護士ドットコム アドベントカレンダー

ブログタイトル画像。「Deno 2.0 での依存管理とワークスペース機能」と表記されている。

この記事は、 弁護士ドットコム Advent Calendar 2024 の 15 日目の記事です。

弁護士ドットコムで Web エンジニア業務をしている @koukibuu3 です。

2024/10/09、Deno のメジャーアップデートが行われ 2.0 となりました。

ひっそりと動向を探っていた Deno ですが、今回 2.0 になったということで、今までと違い何ができるようになったか、実際のプロダクトに採用する際の課題はあるかを調べてみました。

▼公式リリースノートはこちら https://deno.com/blog/v2.0

2.0 のアップデートに含まれる網羅的な内容は公式リリースノートをご参照いただく、今回は以下依存関係の管理方法と、モノレポ・ワークスペースに関して触ってみます。

依存関係の管理方法に関するアップデート

コマンドの仕様変更

  • deno install
  • deno add
  • deno remove

今までもあったこれらの依存関係を管理するコマンドに変更が入ったようです。

どうやら、npm と jsr を明示的に指定する必要ができました。

今までのように勢いでひとまず打ってみたところ、分かりやすく指摘されました。

> deno install dayjs
error: preact is missing a prefix. Did you mean `deno install npm:dayjs`?

dayjs は npm で提供されているので npm:dayjs を付けて再度実行します。

> deno install npm:dayjs
Add npm:dayjs@1.11.13

無事インストールされたようです。

インストールされたものは deno.json の imports に追加されます。

"imports": {
  "dayjs": "npm:dayjs@^1.11.13",
  ...

package.json のサポート

Node.js-first project using package.json, as well as hybrid projects using both deno.json and package.json to enable easy migration path.

（翻訳）

package.json を使用する Node.js ファースト・プロジェクト、および deno.json と package.json の両方を使用するハイブリッド・プロジェクトは、移行パスを容易にします。

ここで上記の記述が気になり、deno install のドキュメントを見に行ったところ以下の記述がありましたが、これのことでしょうか。

https://docs.deno.com/runtime/reference/cli/install/#examples

If your project has a package.json file, the packages coming from npm will be added to dependencies in package.json. Otherwise all packages will be added to deno.json.

（翻訳）

プロジェクトに package.json ファイルがある場合、npm から来たパッケージは package.json の依存関係に追加されます。 そうでない場合は、すべてのパッケージが deno.json に追加されます。

試しに空の package.json をプロジェクトルートに用意して再度、実行します。

deno install npm:dayjs

今度は package.json の dependencies に追加されました。

/package.json

{
  "dependencies": {
    "dayjs": "^1.11.13",
  }
}

利用側は package.json にあろうが deno.json にあろうが以下のように書くだけです。

import dayjs from "dayjs";

つまり、npm 経由で取得したモジュールは package.json があれば、今後もそのまま package.json で管理ができます。

Node.js で動いていた巨大なプロジェクトを Deno に移行するときは役に立ちそうです。

モノレポ・ワークスペースに関するアップデート

とうとう Deno がワークスペースをサポートしました。

これが一番待ち望んでいたアップデート内容なので、早速試してみます。

ワークスペースの設定

ひとまずこのような構成のプロジェクトを作成します。

/
├── deno.jsonc
├── main.ts
├── package1/
│     └── index.ts
└── package2/
      └── index.ts

/deno.jsonc

{
  "workspace": ["./package1", "./package2"],
}

ルートディレクトリにて deno install を実行してみます。

❯ deno install
error: Could not find config file for workspace member in 'file:///{path to project}/package1/'.

config file がない、と言われたので用意します。

ちなみに前章を参考に package1/ には deno.jsonc を、package2/ には package.json を置いてみることにします。

変更後のファイル構成はこちら。

/
├── deno.jsonc
├── main.ts
├── package1/
│     ├── deno.jsonc
│     └── index.ts
└── package2/
      ├── package.json
      └── index.ts

再度、deno install を実行してみたところ、正常に動作しました。config file としては deno.jsonc もしくは package.json があれば良いようです。いいですね、既存プロジェクトの膨大な package.json を deno.jsonc に移行しなくても済みそうです。

共通モジュールの読み込み

プロジェクトルートの deno.jsonc に以下の記述を用意します。

{
  "imports": {
    "dayjs": "npm:dayjs@^1.11.13"
  }
}

それぞれの package で以下のように利用可能です。

import dayjs from 'dayjs'

ワークスペースで管理しているそれぞれで export したモジュールは、以下のようにすると別モジュールでも利用可能です。

/package1/deno.jsonc

{
  "name": "@scope/package1",
  "exports": "./index.ts",
}

/package2/package.json

{
  "name": "@scope/package2",
  "exports": "./index.ts",
}

/main.ts

import { hello as hello1 } from '@scope/package1'
import { hello as hello2 } from '@scope/package2'

hello1()
hello2()

終わりに

Deno 2.0 のアップデートにより更新があった内容を 2 点絞って見てみました。

deno.jsonc や package.json を使用して共通モジュールの読み込みが簡単になりました。既存の package.json をそのまま使えるため、移行も容易です。

モノレポライブラリが備える基本的な機能は備えているため、ワークスペース機能を使うことで、各モジュール間の相互利用は十分現実的な印象を受けました。

© Bengo4.com, Inc. 2005