<h2 id="インストール">インストール</h2>
<a href="https://github.com/denoland/deno" target="_blank">denoland/deno: A secure JavaScript and TypeScript runtime</a>
<pre class="language-shell"><code class="language-shell">$ curl -fsSL https://deno.land/x/install/install.sh | sh
$ vi ~/.zshrc
# Denoのパス設定
export DENO_INSTALL="/Users/t-yng/.local"
export PATH="$DENO_INSTALL/bin:$PATH"

$ source ~/.zshrc
</code></pre>
インストール直後はパスが通っていない状態なので ~/.zshrc にDenoのパス設定を追加して再読み込みします。 
※ 個人の環境に合わせて適宜読み替えてください
HomeblewやCargoを利用してもインストールできます。 
詳細は <a href="https://deno.land/" target="_blank">https://deno.land/</a> を確認してください。
<h2 id="VsCodeの拡張">VsCodeの拡張</h2>
今の状態でVSCodeでコードを書くとTypeScriptとして認識されるので、Denoの構文でエラーが発生します。 
そこで <a href="https://marketplace.visualstudio.com/items?itemName=axetroy.vscode-deno" target="_blank">Deno - Visual Studio Marketplace</a> をインストールしておきます。
デフォルトでは設定が false になっているので .vscode/setting.json で拡張を有効化します。 
自分は Node.js 環境で TypeScript を書く場合に競合する事を避けるために、プロジェクト単位で有効化しています。
<pre class="language-json"><code class="language-json">{
 "deno.enable": true
}
</code></pre>
<h2 id="Hello World を表示する">Hello World を表示する</h2>
最初に「Hello World」を表示するサンプルコードを実装してみます。
<pre class="language-shell"><code class="language-shell">$ mkdir deno-sample
$ cd deno-sample
$ touch server.ts
</code></pre>
<h3 id="server.ts">server.ts</h3>
deno-sample/server.ts に次のサンプルコードを記述します。
<pre class="language-typescript"><code class="language-typescript">import { serve } from "https://deno.land/std@v0.39.0/http/server.ts";

const s = serve({ port: 8000 });
console.log("access to http://localhost:8000/");

for await (const req of s) {
 req.respond({ body: "Hello World\n" });
}
</code></pre>
最初のimport文はモジュール読み込みです。 
Denoは npm を利用せずにURLやファイルパスでモジュールを読み込む仕組みになっており、サンプルコードでは deno.land にホスティングされた標準APIのモジュールを読み込んでいます。
次に <code>serve({port: 8000})</code> でサーバーインスタンスを生成しています。
ここで生成されるサーバーインスタンスはPromiseのイテレーターとなっているので、 <code>for await</code> でループ処理にてリクエストのインスタンスを取得して、 Hello World の文字列をレスポンスとして返しています。
<h3 id="実行">実行</h3>
エラーが発生しました。
<pre class="language-shell"><code class="language-shell">$ deno server.ts

Compile file:///Users/xxxxxx/workspace/deno/deno-sample/server.ts
error: Uncaught PermissionDenied: network access to "127.0.0.1:8000", run again with the --allow-net flag
</code></pre>
Denoではネットワークアクセスやファイルアクセスには許可が必要なため、今回はネットワークアクセスを許可するために <code>--allow-net</code> フラグを指定します。
<pre><code>$ deno --allow-net server.ts
access to http://localhost:8000/
</code></pre>
今度は成功しました。 
この状態で http://localhost:8000/ にアクセスすれば、「Hello World」がブラウザに表示されます。🎉
<h2 id="HTMLを返す">HTMLを返す</h2>
次にHTMLを返すWebサーバーを実装してみます。
<h3 id="ディレクトリ構造">ディレクトリ構造</h3>
public/index.html は適当に作成してください。
<pre><code>.
├── public
│   └── index.html
└── server.ts
</code></pre>
<h3 id="server.ts">server.ts</h3>
fs モジュールの <code>readFileStr</code> でHTMLファイルの文字列を読み込みをしています。
正しく実装するなら、<a href="https://deno.land/std/manual.md#file-server" target="_blank">File Server</a>として実装した方が良さそうですが、ファイル読み込みをを試してみたかったので、この書き方をしています。
<pre class="language-typescript"><code class="language-typescript">import { serve } from "https://deno.land/std/http/server.ts";
import { readFileStr } from "https://deno.land/std/fs/mod.ts";

// HTMLファイルを読み込んで文字列を取得
const html = await readFileStr("./public/index.html", {
 encoding: "utf8",
}).catch((error) => {
 console.log(error);
 return "読み込みに失敗したよ";
});

const s = serve({ port: 8000 });
console.log("access to http://localhost:8000");
for await (const req of s) {
 req.respond({ body: html }); // HTML文字列をレスポンスBodyにセット
}
</code></pre>
<h3 id="実行">実行</h3>
ファイル読み込みをしているので <code>--allow-read</code> フラグを新たに指定しています。
<pre class="language-shell"><code class="language-shell">$ deno --allow-net --allow-read server.ts
access to http://localhost:8000/
</code></pre>
<h2 id="パッケージ管理">パッケージ管理</h2>
<h3 id="問題">問題</h3>
現状では npm のようなパッケージ管理ツールがなく、ソース単位で外部モジュールの読み込みを書いている状態です。 
依存している外部ライブラリを把握するためには、ソースコードを全て見る必要があり管理が困難になってしまいます。
<h3 id="deps.ts">deps.ts</h3>
deps.ts ファイルを新しく作り、モジュール読み込みの記述をまとめることで簡易的なパッケージ管理が実現できます。 
deps.ts はマニュアルで紹介されいているファイル名で名前は何でもOKです。 
ライブラリを見ていると、deps.ts か package.ts をファイル名として利用しているパターンが多かったです。
先ほどのHTMLを返すサンプルコードの一部を deps.ts を利用して書き直してみるとこんな感じです。
deps.ts
<pre class="language-typescript"><code class="language-typescript">export { serve } from "https://deno.land/std/http/server.ts";
export { readFileStr } from "https://deno.land/std/fs/mod.ts";
</code></pre>
server.ts
<pre class="language-typescript"><code class="language-typescript">import { serve, readFileStr } from "./deps.ts";

// 後は同じ
...
</code></pre>
<h2 id="ドキュメント">ドキュメント</h2>
<ul>
<li><a href="https://deno.land/" target="_blank">Dono 公式ドキュメント</a></li>
<li><a href="https://deno.land/typedoc/" target="_blank">API Reference</a></li>
</ul>

Denoを触ってみよう

神奈川の田舎で働いてるフロントエンドエンジニアのブログ