Deno 1.0.0 と Servest 1.0.0 で HelloWorld

# Deno

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5542/0eed1b3c-49a9-257b-5d29-6ab1096402b2.png" width="120" alt="Deno" /> https://deno.land/

- V8 を使用した Rust 製の JavaScript & TypeScript ランタイム
  - ウェブブラウザの外で JS/TS を実行できるようにするもの
  - Node.js みたいなもの
- Node.js の作者が作り直したもの ([Node.js 設計の失敗 - Ryan Dahl](https://www.youtube.com/watch?v=M3BM9TB-8yA))
  - [Node.js との比較](https://deno.land/manual#comparison-to-nodejs)
  - [ディーノって発音してる](https://www.youtube.com/watch?v=1gIiZfSbEAE)


# asdf

https://asdf-vm.com/#/

- いろいろパッケージマネージャ
- プラグインを入れることでいろんなパッケージを入れることができる
  - [golang用](https://github.com/kennyp/asdf-golang) [ruby用](https://github.com/asdf-vm/asdf-ruby) [node用](https://github.com/asdf-vm/asdf-nodejs) [dart用](https://github.com/PatOConnor43/asdf-dart)

### インストール

git で `~/.asdf` に落としてきて最新化

```zsh
git clone https://github.com/asdf-vm/asdf.git ~/.asdf
cd ~/.asdf
git checkout "$(git describe --abbrev=0 --tags)"
```

`.bash_profile` か `.zshrc` に以下を追加してシェルを再起動

```zsh
. $HOME/.asdf/asdf.sh
```

### Deno のパッケージを入れる

[asdfを使用してDenoのバージョンを管理する](https://qiita.com/uki00a/items/c75f56627a4777abd74d) 必見

```bash
asdf plugin-add deno https://github.com/asdf-community/asdf-deno.git
asdf install deno 1.0.0
asdf global deno 1.0.0
```

# Deno Helloworld

公式サンプルそのままで、見た目普通の js に見えるけど、①`package.json` とか作らなくていいし、②`npm` は使わないし (標準ライブラリを https で読んでる)、③`await` も `async` で囲わなくていいみたいなのが読み取れる。

```javascript:index.js
import { serve } from "https://deno.land/std@0.50.0/http/server.ts";

for await (const req of serve({ port: 8000 })) {
  req.respond({ body: "Hello World\n" });
}
```

実行は `deno run hoge`。今時のセキュリティも考慮しているのでネットワークアクセスにはフラグが必要。

```zsh
deno run --allow-net index.js
```

![Deno Helloworld](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5542/c7df8c1f-173c-c73c-e5e5-3b338d7062fc.png)

# interpreter

インタープリタもあるよ

```zsh
% deno
Deno 1.0.0
exit using ctrl+d or close()
> console.log('Yo')
Yo
undefined
> const yo = 'Yo'
undefined
> yo
Yo
> 
```

# Servest で動かす (React/tsx)

Servest は Deno 向けの http サーバー。
https://servestjs.org/
作者：https://keroxp.me/
Deno 1.0.0 に追従するように Servest も 1.0.0 に対応した。👏

これも Servest の公式サンプルそのままですみません。
React/tsx が普通に動く。
パッケージは https 経由で指定できるので npm install 不要 (node_modules が作られない)。
Router とかも実装されているので実践で使えてしまえそう。

```tsx:index.tsx
// @deno-types="https://servestjs.org/@v1.0.0/types/react/index.d.ts"
import React from "https://dev.jspm.io/react/index.js";
// @deno-types="https://servestjs.org/@v1.0.0/types/react-dom/server/index.d.ts"
import ReactDOMServer from "https://dev.jspm.io/react-dom/server.js";
import { createApp } from "https://servestjs.org/@v1.0.0/mod.ts";

const app = createApp();
app.handle("/", async (req) => {
  await req.respond({
    status: 200,
    headers: new Headers({
      "content-type": "text/html; charset=UTF-8",
    }),
    body: ReactDOMServer.renderToString(
      <html>
        <head>
          <meta charSet="utf-8" />
          <title>servest</title>
        </head>
        <body>Hello Servest!</body>
      </html>,
    ),
  });
});
app.listen({ port: 8899 });
```

そのまま実行

```zsh
deno run --allow-net index.tsx
```

![スクリーンショット 2020-05-15 8.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5542/c701f691-963b-4b38-181f-04e9d9eb3f50.png)


# かんそう

- JS/TS エンジニアは Node.js からドンドコ移行しそう
- マスコットかわいいので流行りそう
  - チンアナゴかと思ってた