Javascript Registry (JSR) とは

概要

JSRとはjavascriptのパッケージのためのレジストリです。npmやNodeとも互換性がありますが、npmを進化させたようなレジストリです。

レジストリとは

パッケージ等を管理するストレージのようなものです。例えば npm install lodash をすると、通常はnpmに設定されているデフォルトのレジストリである https://registry. npmjs.org/ からパッケージをインストールしようとします。

ここで注意すべきはパッケージ管理ツールとレジストリは別の概念であることです。npmコマンドはあくまでもパッケージ管理ツールであり、npmコマンドを使っていても実際にパッケージをインストールしてくるストレージは自由に設定可能です。この記事で紹介しているJSRはレジストリであり、したがってnpmコマンドを使ってJSRからパッケージを取得することが可能です。

例えば企業などでは独自のレジストリを管理しており、npmコマンドなどでもデフォルトのレジストリが会社の管理するものになっているケースも多いと思います。

npmに対する優位性

• typescriptフレンドリー
  • パッケージのpublish時に、自動でAPIドキュメントの生成・型定義ファイルの生成・トランスパイル等を行ってくれます。
• あらゆるJS Runtimeとの相性
  • npmレジストリはあくまでもNode中心に開発されたレジストリですが、近年Bun・Deno等の新たなランタイムが登場してきております。例えばDenoではパッケージのインポートは基本的に直接パッケージのURLをソースコードで上で指定しますが、JSRを使う際は以下のように指定することでインポートが可能になります。

    // 普通のインポート
    import { add } from "https://x.nest.land/ramda@0.27.0/source/index.js";
    
    // JSR
    import { printProgress } from "jsr:@luca/flag";
    

• ES Moduleのみサポート
  • これは優位性かどうかはわかりませんが、JSRはESMのみをサポートします。基本的に今の時代ブラウザやNodeなどほぼ全てがESMを解釈することができ、レジストリ上での統計的な解析等でもESMのみのほうがしやすいということらしいです。

JSRをnpmと使う方法

基本的には jsr コマンドを用いることで、npmパッケージとしてインストールでき、普通のパッケージと同様にソースコード内でインポートできます。

npx jsr add @luca/flag

最初のレジストリの章でも述べた通り、パッケージ管理ツールとしてのnpmを用いてJSR上のパッケージをインストールすることは可能です。これは普通のレジストリを設定するようにプロジェクト内に以下のような .npmrc ファイルを設定することで可能です。

@jsr:registry=https://npm.jsr.io

これは @jsr スコープのパッケージはhttps://npm.jsr.ioのレジストリを使うという設定です。したがって普通のnpmコマンドを用いてインストールを行いたい場合は以下のようなコマンドを使うことになります。

npm install @jsr/luca__flag@1

実際、@jsr は本当のスコープではなく単にJSRレジストリを使いたいことを示すためにあり、これにより実際のパッケージ名を少し変更しなければなりません。

と、色々面倒なのでnpx jsr addコマンドを使えば十分なのですが、どう動いているかを知りたい方はドキュメントを参照ください。

参照

https://jsr.io/
https://syntax.fm/show/737/jsr-the-new-typescript-package-registry-npm-killer/transcript