{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/package-management-in-deno-with-import-map/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"5fe718cf-b992-583d-84a9-e12057f5ed2c","excerpt":"この記事はDeno Advent Calendar 2019 - Qiitaの 7 日目の記事です。 Deno で何かしら 3rd パーティ製のライブラリを利用するコードを書いたことはありますか。例えば以下のようにライブラリを import します。 Deno は Node.js とは違いnpm…","html":"
\n

この記事はDeno Advent Calendar 2019 - Qiitaの 7 日目の記事です。

\n
\n

Deno で何かしら 3rd パーティ製のライブラリを利用するコードを書いたことはありますか。例えば以下のようにライブラリを import します。

\n
import uniq from 'https://deno.land/x/lodash@4.17.15-es/uniq.js'\n\nconsole.log(uniq([1, 2, 3, 1, 2, 3]))
\n

Deno は Node.js とは違いnpmのようなパッケージマネージャが付属しておらず、パッケージ名で import/require することはありません。Deno はそもそもnpm installのような事前処理が不要で、実行するときに import 文を解析しながら必要なコードを取得してから実行ます。いわゆるZero-installの１つです。
\nDeno では URL やファイルパス などファイルの URI を明示して import します。ここまで聞いて、多くの Node.js ユーザは「コード内に （semver を含む）URL ハードコードしないといけないの、複数のファイルで使用するならその数だけハードコードするの、アップデート辛くないの？」と感じると思います。

\n

この問題を解決するために日本の Deno コミッターの方々がkeroxp/dinkやsyumai/demなどの Deno のパッケージマネージャを作成しています。
\n一方で Deno は現在WICGで策定されているImport mapsを先行してサポートしています。これを活用すれば semver を含む URL をコード内に出現させることなく、パッケージマネージャに頼らずとも標準機能だけでパッケージのバージョンを管理できるのではないかという点について考察します。

\n\n

Import maps とは

\n
\n

This proposal allows control over what URLs get fetched by JavaScript import statements and import() expressions. This allows “bare import specifiers”, such as import moment from “moment”, to work.

\n

The mechanism for doing this is via an import maps which can be used to control the resolution of module specifiers generally. As an introductory example, consider the code

\n

— WICG/import-maps: How to control the behavior of JavaScript imports

\n
\n

Import maps とは、import 文と dynamic import に対して動作する ImportSpecifier と実 URL をマッピングするための設定ファイルの仕様です。策定しているのは WICG というコミュニティグループです。本記事は Import maps の解説記事ではないため必要な文だけかいつまんで説明します。仕様の詳細は原文（リポジトリ）をご確認下さい。

\n

Import maps はこれまでの Node.js や webpack などの module bundler を用いた開発体験のようにimport _ from 'lodash'とパッケージ名だけ指定する import を使い続けつつ ES Modules の世界観に引っ越しできる緩衝材みたいなものだと思えばおおむね合ってると思います。
\n設定ファイルの書式は以下のような JSON になっています。キー名が import に使用する名前、値がその import したときに解決されるパスを指定しています。

\n
{\n  \"imports\": {\n    \"http\": \"https://deno.land/std/http/server.ts\"\n  }\n}
\n

これを利用すると、（実際の API は全く違うけど）Node.js の HTTP モジュールのように名前だけで import できます。

\n
import { serve } from 'http'\n\nconst body = new TextEncoer().encode('Hello World\\n')\nfor await (const req of serve(':8080')) {\n  req.respond({ body })\n}
\n

Import maps がmaps.json、↑ のコードをtest.tsとしたとき、実行コマンドはdeno run --importmap=maps.json test.tsになります。--importmapオプションで Import maps のファイルパスを指定します。
\nなお、現状の Import maps はアプリケーション製作者のための仕様であり、ライブラリ提供者のための仕様ではありません。ライブラリを公開するときに Import maps を含めて提供し、それらを組み合わせるようなユースケースは想定されていません。あくまでアプリケーション製作者が、利用するライブラリ全てに関心を持つように想定されています。

\n
\n

Import maps are an application-level thing, somewhat like service workers. (More formally, they would be per-module map, and thus per-realm.) They are not meant to be composed, but instead produced by a human or tool with a holistic view of your web application. For example, it would not make sense for a library to include an import map; libraries can simply reference modules by specifier, and let the application decide what URLs those specifiers map to.

\n

— WICG/import-maps: How to control the behavior of JavaScript imports

\n
\n

Deno の Import maps サポート

\n

Import maps はまだ策定中の仕様であり、仕様自体が fix しきっていません。それでもなお採用するということは何かしら解決したい Deno の問題 OR 大きなアドバンテージがあるのではないかと疑っていました。が、先に結論を書くと経緯を読み取ることはできませんでした。

\n

まず公式ドキュメントにはなんと書かれているでしょうか。「Import maps が使えるよ、いくつか制約があるよ」とだけ書かれています。

\n
\n

Deno supports import maps.

\n

One can use import map with —importmap= CLI flag.
\nCurrent limitations:

\n\n

— deno /std/manual.md

\n
\n

これだけでは経緯やモチベーションが分からないので Issue と PR を追ってみます。

\n
\n

We should consider finding a way to implement import-maps. The WICG proposal has started to be implemented. While it is still an early stage, it would solve several problems we have had with remote modules.

\n

— Implement import-maps · Issue #1921 · denoland/deno

\n
\n

この前JSConf JP でもトークしていたKitson Kelly が提案しています。PR はこれです。

\n
\n

— feat: Import maps by bartlomieju · Pull Request #2360 · denoland/deno

\n
\n

どれを読んでも経緯はわからず「（私が冒頭に書いたような問題を解決しうる仕様だから）入れてみようぜ！」って温度感なのかなと勝手に感じました。
\nということでなぜ Deno に Import maps が入ったのか動機は不明ですが、自分なりの視点から考察していきます。

\n

Import maps におけるライブラリのアップデート

\n

イメージしやすいようによく使われるであろう lodash を題材に実コードを出します。このような Import maps、Deno のコード、実行結果があったとします。

\n
{\n  \"imports\": {\n    \"lodash/\": \"https://deno.land/x/lodash@4.17.15-es/\"\n  }\n}
\n
import uniq from 'lodash/uniq.js'\n\nconsole.log(uniq([1, 2, 3, 1, 2, 3]))
\n
$ deno --importmap=importmap.json test.ts\nDownload https://deno.land/x/lodash@4.17.15-es/uniq.js\n...\nDownload https://deno.land/x/lodash@4.17.15-es/_objectToString.js\n[ 1, 2, 3 ]
\n

まず、読み込まれるバージョンを固定するために Import maps の URL に semver を指定します。この semver は GitHub の tag 名に対応しています（ex. lodash のタグ一覧）。
\nなお、キー名の末尾を/にすることでlodash/uniq.jsのようにパッケージ名の後に/をつけた場合どのディレクトリを見るかを指定できます。

\n

ライブラリをアップデートしたい場合、Import maps の semver を書き換えれば OK です。

\n
 {\n   \"imports\": {\n-    \"lodash/\": \"https://deno.land/x/lodash@4.17.15-es/\"\n+    \"lodash/\": \"https://deno.land/x/lodash@x.y.z-es/\"\n   }\n }
\n

このように、シンプルな依存を手動で管理するのであれば Import maps でも管理できると思います。ただ、現実的にこれでいいかと言われると、私は ”これだけでは足りない” と思います。

\n

悩み：semver range が使えない+自動アップデートは難しい

\n

これは Deno や Import maps の仕様の問題ではなくレジストリの問題です。また、パッケージマネージャを作ったとしても同様の問題が発生します。

\n

npm パッケージをホスティングするunpkg.comでは~0.0.0のように~や^、>=などの range を指定できます。例えばライブラリにセキュリティパッチが配布された際、毎パッチバージョンごとに手動で semver を書き換えるような手間が発生します。
\nDeno はdeno.land/x/以外の任意の URL を import に使用できるため、指定の自由度が高すぎて URL のどこが semver に相当するのか規則性がありません。そのためアップデートを検知する際にどこからバージョン情報を取得すればいいかについても規則性がなく、何かしらの規約が設けられないと semver range を使えるようにするのは難しいでしょう。

\n

悩み：ライブラリの開発体験

\n

そもそも Import maps はライブラリ製作者のための仕様ではないと明言されており、これを Import maps に求めるのは筋違いですが、Import maps だけでは足りないので別のソリューションを組み合わせる必要があると思っています。
\nライブラリを制作するときに、ライブラリが依存するライブラリの semver を URL としてハードコードする必要があります。もし Import maps を利用してライブラリを使用したければ、publish 時に Import maps でマッピングしていた情報をすべてコード上に戻すなど、以下の AST 変換のような事前処理が必要になります。

\n

https://astexplorer.net/#/gist/2ef31923cf9758ae052b01711ea03c0d/131b956bdae82f40e515e84d82d97f41207197a8

\n

補足ですが、Deno は Batteries Included 志向でコアが作られているので、Small core を掲げる Node.js よりも 3rd パーティ製のパッケージに頼るケースは多くありません。ただ完全にゼロになることもありえないため、何かしらの 3rd パーティライブラリに頼ることは少なからず発生するでしょう。

\n

パッケージマネージャは不要になるか？

\n

Import maps によっていくつかのニーズを満たすことはできそうだと思いますが、これさえあれば万事解決ってわけではなく、まだ問題は残っていると思います。
\nImport maps を利用するツールやユーザがもっと増えユースケースやフィードバックが増えれば、また変わった体験になっていくのかなと思いました。

\n

個人的に面白い仕様だと思いますし、正しく使えば開発体験が向上すると思うので、もっと使い込んでみます。

\n

さいごに

\n

Deno のアップデート通知やイベント告知、技術書展に出品する denobook の執筆などの Deno に関するコミュニケーションは deno-ja の Slack にて行われています。参加は以下の資料をご参照下さい。

\n
\n

— Slack の参加方法 - deno-ja

\n
","timeToRead":11,"frontmatter":{"title":"Import mapsでDenoのパッケージのバージョンを管理したい","tags":["TypeScript","Deno"],"date":"December 07, 2019","featuredImage":null}}},"pageContext":{"slug":"/package-management-in-deno-with-import-map/","previous":{"fields":{"slug":"/jsconf-jp-2019/"},"frontmatter":{"title":"JSConf JP 2019スタッフ参戦後記","tags":["JavaScript","JSConf","Community"]}},"next":{"fields":{"slug":"/webegg-summary-2019/"},"frontmatter":{"title":"WEB EGG 2019年アクセス解析＋人気記事の振り返り","tags":null}}}}, "staticQueryHashes": ["2585454260","2954598359"]}