Zenn
🐮

Denoを触ってみる

2023/06/14に公開
TypeScript
Deno
tech

logo

Denoとは

Deno（ディーノ）とは、JavaScript/TypeScriptのランタイム環境です。
Node.jsを開発したRyan Dahlが開発しており、2018年に開始されたJsConfで「Node.jsに関する10の反省点」というタイトルで発表されました。
では、具体的にNode.jsのどのような部分が反省点だったのでしょうか？

  1. APIの設計においてPromiseを使用しなかったこと
  2. 古いGYPビルドシステムを採用したこと
  3. package.jsonとnode_modulesを採用したこと
  4. モジュールのインポートで拡張子を除外したこと
  5. index.jsによりモジュール依存関係の解決を採用したこと
  6. JavaScriptのコアエンジンV8によるサンドボックス環境を破壊するような実装をしたこと
    ...

と挙げています。
それらの反省点を踏まえて、開発されたのがDenoです。
ロゴは、🦕ですね。
ちなみに、DenoはNodeのアナグラムとなっており、nodeをアルファベット順に並び替えるとDenoとなります。
Denoの特徴に関しては、他の記事で紹介されているので、詳細はそちらをご確認ください。

インストール

$ brew install deno
$ deno -V
deno 1.33.3

それでは、試しにcreate-react-appでアプリケーションを作ってみたいと思います。
https://deno.land/x/create_react_app@v0.1.2

$ deno install -A --unstable -n deno-create-react-app https://deno.land/x/create_react_app/mod.ts
$ deno-create-react-app init deno-sample
$ cd deno-sample
$ deno-create-react-app run

react

触ってみた第一印象は、起動が爆速だなという印象ですね。
あとは、無駄なコンソール出力も少なくミニマムな印象があります。

それでは、アプリのディレクトリ構造を見てみましょう。

dir

びっくりするぐらい中身が少ないですね...
試しに、npmでcreate-react-appを実行した場合は、このような感じです。

npm

比較すると、node_modulesがなく、package.jsonがないことが印象的です。
また、Reactの設定ファイルを見てみると、import部分にURLが直接記述されています。

deps.ts
export * as ReactDOM from "https://jspm.dev/react-dom@17.0.0"

import * as React from "https://jspm.dev/react@17.0.0"

const { default: any, ...rest } = React
const react = React.default

export { react as React }
export { rest as react }

これを見て分かる通り、node_modulesのようにパッケージをダウンロードするのではなく、レジストリと呼ばれる場所を参照しています。
ファイルをコンパイルする時に、importに記載されたモジュールをローカルにダウンロードし、キャッシュ化させています。
キャッシュ化されているので、コンパイル時に都度ダウンロードすることはないようです。
ただ、create-react-appのソースコードを見てみると、Reactを毎回URLでimportするのが煩わしいためか、deps.tsというファイルでReactを一度読み込んで、exportしてページで流用する方法を取っています。

トラブルシューティング

  • create-react-appを入れようとしたら、正常にインストールはできているようなんですが、PATHが通っていないと怒られました。
$ deno install -f -A --unstable -n deno-create-react-app https://deno.land/x/create_react_app/mod.ts

/Users/user/.deno/bin/deno-create-react-app
ℹ️  Add /Users/user/.deno/bin to PATH
    export PATH="/Users/user/.deno/bin:$PATH"
  • 自分の試し方が悪かったのか、deno-create-react-app run -wを実行しても、ホットリロードが実行されませんでした...

参考文献

Discussion