Denoを今更触ってみたとVue開発の現状


### Denoについて

https://deno.land

DenoはNode.jsに代わる次世代のjavascript/typescriptのランタイムです。
Node.jsの作者であるライアン・ダール氏自身が、Node.jsが抱える問題点を改善すべく開発されました。

---

…余談ですが

Denoって名前可愛いですよね🦕

Denoはnodeのアナグラムらしいです。

---


### Denoのインストール

インストールの[公式ドキュメントはこちら](https://deno.land/#installation)
ここではwsl上でのインストールについて記載します。

```sh
curl -fsSL https://deno.land/install.sh | sh
```

`.bashrc`にパスを通すためのコードを追記します。
これも上記コマンド実行後に出力されたテキストをコピペしただけです。
```sh
# deno global
export DENO_INSTALL="/home/{username}/.deno"
export PATH="$DENO_INSTALL/bin:$PATH"
```

---

### Denoプロジェクトの作成

Denoプロジェクトを作成するには以下のコマンドを実行します。
```sh
deno init project_name
```

---

これで生成されるのは以下の構成になります。

```
project_name
├── main.ts
└── main_test.ts
```

---

実はDenoにはnpmで使われていた`package.json`や`node_module`のような構成ファイルは存在しません。

javascriptファイル、もしくはtypescriptファイル一つあればdenoで実行することができます。

---

### VSCodeのセットアップ

こちらも[公式のVSCodeセットアップ記事](https://deno.land/manual@v1.25.4/vscode_deno)がありました

`denoland.vscode-deno`拡張をインストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531073/58318406-269d-88b0-e027-7e927481bde9.png)

`Ctrl+Shift+P`を押して *Deno: Initialize Workspace Configuration*を実行します。

---

上記コマンドで有効になるのはワークスペースになります。
もちろんグローバルで有効にすることもできますが、
vscodeには組み込みの JavaScript/TypeScript language serverが存在しますが、Deno拡張はそれを無効にしてしまうため、すでにJavascript、Typescriptプロジェクトが存在している場合はDeno拡張はグローバルで有効にしないほうが無難でしょう。

---

### Node.jsとの違い

> Denoはnpmを使用しません。
> 
> URLまたはファイルパスとして参照されたモジュールを使用します。
> Denoは、モジュール解決アルゴリズムでpackage.jsonを使用しません。
> 
> Denoにおいて、すべての非同期アクションにはPromiseを返します。したがって、DenoはNodeとは異なるAPIを提供します。
> 
> Denoは、ファイル、ネットワーク、および環境へのアクセスに明示的なパーミッションを必要とします。
> 
> Denoは常にエラーがどこにもキャッチされないとき、終了します。
> 
> 「ESモジュール」を使用し、require()をサポートしません。サードパーティのモジュールは、URLを介してインポートされます。

[Deno 日本語マニュアル 前置き](https://yoshixmk.github.io/deno-manual-ja/introduction.html)より

---

DenoはES Modulesがデフォルトになったことや、Web APIが標準で搭載されているなど、Nodeのときよりモダンブラウザに寄せられていて
ブラウザならあれが使えるのに、みたいなもどかしさが減っていそうだなと感じました。

node_moduleが無くなったことで、Denoはライブラリをグローバルにキャッシュして持つようになりました。

これは個々のプロジェクトで巨大なnode_moduleを抱えなくて良くなるということで、プロジェクトを作りすぎてHDDを圧迫するような心配が減るということです。

---

### npmのサポート

Deno Ver1.25（今年の8月くらい）から実験的にNPMのサポートが開始されました。

試しに以下のようなコードを書いて実行してみます。
```ts:import_npm.ts
import _ from "npm:lodash";
console.log(_.join(['a', 'b', 'c'], '~'));
```

```sh
deno run --unstable import_npm.ts
# --unstableを忘れずに
```

これで問題なく実行されます。
`node_modules`も作成されません。

ただ型安全は無いようですべて`any`型になっています。

---

### Vueの利用

調べたところVue公式はまだDenoをサポートはしていませんでした。

代わりに以下のようなフレームワークを見つけました。

- [vno](https://deno.land/x/vno)
- [aleph.js](https://aleph-vue.deno.dev/)

---
#### vno
VueをDeno向けにパッケージしたライブラリがありました。

プロジェクト作成と開発環境立ち上げ
```sh
deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts
vno create hello-vno
cd hello-vno
vno run dev
```

---

#### aleph.js 
プロジェクト作成と開発環境立ち上げ
```sh
deno run -A -r https://alephjs.org/init.ts
cd hello-alephjs
deno task dev
```

---

### 所感
deno自体は高いポテンシャルを持ったランタイムだなと感じました。
しかし、Vueやその他フレームワークがNodeで蓄えられた財産が丸々流用できないために大規模な開発に取りかかれないとも感じました。
npmのサポートも実験的とはいえされてきているので、今後NodeプロジェクトをDenoに移植しやすくなるのではないかと思います。

### 参考
- [【Deno】「やっぱnpmをサポートするわ」 → 10日後「サポートしたわ」](https://qiita.com/rana_kualu/items/7eb1acff8f66948b04eb#experimental-npm-support)
- [Deno 日本語マニュアル](https://yoshixmk.github.io/deno-manual-ja/)