node_modulesとさよならバイバイ。vnoを用いてVue.jsをdeno環境で使ってみる

## はじめに

皆さんはDenoをご存知でしょうか？
Node.jsの作者様が新しくNode.jsの欠点を取り除くために開発を行なっているJS/TSのランタイムになります。
個人的に大きなメリットとしては従来package.json, npmで管理していたnode_modulesがなくなったこと、TypeScriptが標準でサポートされていることが挙げられます。

- [Node.jsに関する10の反省点](https://www.youtube.com/watch?v=M3BM9TB-8yA)
- [Deno公式](https://deno.land/)

vnoはそのDenoランタイム環境でVue.jsを動すことのできるフレームワークとして開発が行われているOSSになります。
特徴としては、Vue2, 3がサポートされていること、SFCのバンドル・ビルドのサポートなどが挙げられます。

- [InfoQ - vno](https://www.infoq.com/jp/news/2021/03/vno-vue-apps-deno/)
- [vno公式](https://deno.land/x/vno@v1.3.1)

## 早速構築してみる

早速ではありますが、試しに構築してみましょう。
私の[GitHub](https://github.com/masanori0209/vno_sample)にもサンプルを載せておりますので、急ぎの方はそちらをCloneして遊んでみてください。

まず、Dockerfileを作成し、vnoプロジェクトを作成するための土台を作っていきます。
（今回拡張性を持たせるためDockerComposeも用意してますが、Dockerfile単体でも問題ないです。）

```dockerfile:Dockerfile
FROM debian:stable-slim
WORKDIR /app

RUN apt-get update && apt-get install -y \
    curl \
    zip \
    unzip \
    git \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/*

RUN curl -fsSL https://deno.land/x/install/install.sh | sh
ENV DENO_INSTALL="/root/.deno"
ENV PATH="$DENO_INSTALL/bin:$PATH"
RUN deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts
```

```yml:docker-compose.yml
version: '3'

services:

  app:
    build:
      context: ./app
      dockerfile: Dockerfile
    volumes:
      - ./app:/app
    ports:
      - 3000:3000
```

フォルダ構成は下記のような形です。
![docker-compose_yml_—_vno_sample.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258186/e2fce567-1c0c-df2a-a72d-8ff0340cb0eb.jpeg)

次にterminal上でvnoのプロジェクトを作成してみましょう。
※sample-projectの部分は任意の名前になります。


```terminal
$ docker compose run app vno create sample-project
```

下記のような形で質問が聞かれますので、port番号等変えたい場合は入力しましょう。
![bash.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258186/9f4c93da-6828-ca4f-8fc1-b234a7345e89.jpeg)

プロジェクトの作成が完了すると下記画像のような形でフォルダとファイルが生成されます。
![Dockerfile_—_vno_sample.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258186/09411955-d126-ef71-bf10-25ff2b0770b8.jpeg)

ここまでで一通りの構築は終わりました。
次は開発をしていくための環境を整えていきましょう。

## 開発をしていくための環境作り

今回DockerComposeを使用しているので、docker compose up -dをしたらそのまま立ち上がり状態にしておきたいです。
そのためDockerfileに変更を加えます。（vno run devを入れてライブリロードできるようにします。）
※Dockerfile単体であれば、portをEXPOSEしてください。

```dockerfile:Dockerfile
FROM debian:stable-slim
WORKDIR /app

RUN apt-get update && apt-get install -y \
    curl \
    zip \
    unzip \
    git \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/*

RUN curl -fsSL https://deno.land/x/install/install.sh | sh
ENV DENO_INSTALL="/root/.deno"
ENV PATH="$DENO_INSTALL/bin:$PATH"
RUN deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts
WORKDIR /app/sample-project
CMD deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts run dev
```

## 実際に確認してみる

修正を加えたら下記コマンドを入力して、反映されているか確認しましょう

```terminal
$ docker compose up -d --build
```

立ち上がったらブラウザを確認してみましょう。
下記のようなサンプルのプロジェクトが見ることができます。

![sample-project.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258186/99e1cd85-9dad-5c54-cc0f-36c9f7ddb818.jpeg)

## 最後に

今回は試しにdockerを利用してvnoとdeno環境を作っていきました。
まだまだvnoは出たばかりでこれからのフレームワークではありますが、
今後の成長が楽しみなフレームワークでもあります。
React.js界隈でも[Aleph](https://alephjs.org/)なるものが出てきていたり、
2021年以降のフロントエンドのトレンドがさらに変わっていくことが予想されます。
まだまだいずれのフレームワークも発展途上ではありますが、
試しに触ってみると面白いかもしれません。
ここまで記事をお読みいただきましてありがとうございました！
※よければ[GitHub](https://github.com/masanori0209)のフォローよろしくお願いいたします！