Denoの開発環境をVSCodeで作る【2021.4月版】

こんにちは。すずともです。
以前、[Denoの開発環境をVSCodeで作る](https://qiita.com/SuzuTomo2001/items/653e1805b48d5c18de9e)という記事を書きました。

https://qiita.com/SuzuTomo2001/items/653e1805b48d5c18de9e

あの時はDenoもv1.6でしたが、今日では、Deno v1.9.0と4ヵ月あまりで0.3もバージョンが上がりました！
そろそろ2.0もリリースされそうなので、ますますホットになっていきそうですね！

同じように、Denoの拡張機能もバージョンアップされ、いつの間にかDeno(Canary)が無くなっていました笑
開発環境の作り方も少しだけ便利な方法が出てきましたので、まとめてみました。(実は前に記事書いた時から使えてたかも...)

# 流れ
※Denoはインストール済みとして話を進めていきます。

1. Deno拡張機能のインストール
1. Deno拡張機能を有効化したいフォルダを開く
1. 初期設定
1. `launch.json`の作成(任意)

# ①Deno拡張機能のインストール

[Deno - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno)

上記リンク またはVSCode内の拡張機能から公式denolandが出している「Deno」をインストールしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255360/d46d2cd2-508e-a8f7-3ab2-7c9c921157ce.png)

# ②Deno拡張機能を有効化したいフォルダを開く
「ファイル」→「フォルダを開く」から目的のフォルダを開きましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255360/bd6f1d1e-ceb6-4f04-caee-cd8e271e65d2.png)

# ③初期設定
ここが[以前](https://qiita.com/SuzuTomo2001/items/653e1805b48d5c18de9e)とは違う点です。

`F1`または`Ctrl`+`Shift`+`p`を押してコマンドパレットを開きます。そして、「deno」と入力してください。すると下記のように色々候補が出てくると思います。(筆者の環境は別の拡張機能も入ってるので全く同じにはならないかもしれません。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255360/dfafe6a0-c4ef-4858-4950-c05e0c91c664.png)

その中の、「Deno: Initialize Workspace Configuration」を選択して`Enter`を押してください。

すると以下の2つの質問を聞かれるので、YesかNoで答えてください。
僕のおすすめは、１つ目がYes、２つ目はNoです。(めんどくさい人であれば`Enter`連打のYesYesでもいいですよw)

<details><summary>Enable Deno linting?</summary>
 リンター(コンパイラよりも詳細にチェックを行ってくれるプログラム)を有効にするかという質問。例えば、Typescriptで`any`を使った時に「推奨されてないから使わないようにね」と警告(エラーではない)してくれたりする。</details>

<details><summary>Enable Deno unstable APIs?</summary>
 直訳すると「不安定なAPIを有効にしますか？」という質問ですが、厳密には「不安定なAPIにもコード補完などを表示しますか？」という質問ですね。
Denoにはv1.0.0との互換性を保つために`unstable API`というAPIを実装しています。実装が変わる可能性があるため、実行時には`--unstable`フラグを付けて実行する必要があります。`unstable API`は[このページ](https://doc.deno.land/builtin/unstable)にまとまっているので気になる人は覗いてみてください(o^―^o)</details>

以上の質問に答えると、`.vscode`フォルダが生成され、中に`settings.json`が出来ていると思います。これで初期設定は終わりです。

# Denoを実行してみよう！
Denoのいいところは、サーバプログラムも完全コピペで動くところ。モジュールのインストールも必要ありません(o^―^o)

ということで、以下の内容の`main.ts`を作成してください。

```typescript:main.ts
import { serve } from "https://deno.land/std@0.93.0/http/server.ts";
const s = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}
```
作成直後は以下の画像のようにimport文のところに赤波線が引かれているかもしれませんが、気にせず実行してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255360/e593f6a1-80cf-6052-f89a-9e1b637e7a8d.png)

main.tsを開いた状態で`F5`を押してください。すると以下のように何で実行しますか？と聞かれるので、`Deno: Run`を選択して`Enter`を押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255360/b47d747e-b260-c3fc-ae27-6075d3bf5626.png)

すると、デバッガが起動してファイルを実行してくれます。初めの実行時にはデバックコンソールに以下のように表示されてたくさんの`Download`が表示されていると思います。
これは、必要なモジュールをキャッシュするためにダウンロードしています。勝手にDenoが依存関係を解決してくれるので、コピペで動くんですねぇ。キャッシュしてあるので、２回目の起動からはPCがオフラインでも動きます。(逆に言うと初回はネット接続が必要です。)
キャッシュが完了すると、プログラム内の赤波線も消えてると思います！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255360/122abd20-d000-5312-3c33-543bc9454953.png)

`Debugger session started`と表示されたら、ブラウザで[localhost:8000](http://localhost:8000)にアクセスしてみましょう。「Hello world」と表示されたら成功です！

# (任意)④`launch.json`の作成
`launch.json`というファイルを作ることで、`F5`キーを押した後リストから選択しなくてもデバックできるようになります。`F5`ですぐに実行したい人は`launch.json`を追加しておくとよいでしょう。

`.vscode`内に`launch.json`を作成し、以下のJSONをコピペしてください。

```:launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Deno",
      "type": "pwa-node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "deno",
      "runtimeArgs": ["run", "--inspect-brk", "-A", "${file}"],
      "attachSimplePort": 9229
    }
  ]
}
```

# 最後に
最後までご覧くださりありがとうございます。結構手順が簡略化されて、jsonを手打ちしなくでもDenoの開発環境が整うようになりました。

Denoは会社も立ち上がり、ますます発展していくコンテンツなので、Denoをバンバン使っていきましょう！
（なんか最近のアプデにより、httpサーバだとNodeJSよりも高速でうごくっぽい！？）

すずともは、Denoを使ってBot作ったりいろいろやってみてるので、よかったら以下の記事も見てください！

https://qiita.com/SuzuTomo2001/items/6e05ef957de6d578c229

https://qiita.com/SuzuTomo2001/items/0b9e55137c125de7154b