🗿

GitpodではじめるDenoとdext.ts

2021/03/31に公開

TypeScript

Deno

Gitpod

tech

はじめに

を読んだ際、Denoのコアコントリビュータであるlucacasonato氏によって開発されているdext.tsが気になったので試してみることにしました。

dext.tsはPreactをベースにしたフレームワークです。

ただデファクトスタンダードとなりつつあるローカル環境のNode.js + TypeScript + VSCodeと開発体験が同じだと学習が続かない気がしたので今回はGitpod上に開発環境を作ることにしました。
Gitpodに関する詳しい説明は省きます。GitHub Codespacesみたいなものです。

ちなみに前述したNode.js + TypeScript + VSCodeはやったことありますがDenoは完全未経験です。よろしくお願いします。

Gitpod Deno

こちらにGitpod上でDenoを使う方法が記載されていますがcurlで引っ張ってきて環境変数を設定しているだけなのでDockerfileを使わずに.gitpod.yml上に書いていきたいと思います。
一度Homebrewを試してみましたがMacOSのみ対応しており、HomebrewでLinuxにインストールすることは現時点で無理なようです。

$ brew install deno
deno: macOS is required for this software.
Error: An unsatisfied requirement failed this build.

なのでDeno公式チュートリアル通りcurlを使ってインストールします。

tasks:
  - command: |
      curl -fsSL https://deno.land/x/install/install.sh | sh
      export DENO_INSTALL="/home/gitpod/.deno"
      export PATH="$DENO_INSTALL/bin:$PATH"
      deno run https://deno.land/std/examples/welcome.ts
ports:
  - port: 8080
    visibility: public
    onOpen: open-preview
vscode:
  extensions:
    - denoland.vscode-deno

これでGitpod上のコンソールにWelcome to Deno!が表示されているのではないでしょうか。

dext.ts

https://deno.land/std
https://deno.land/std/examples
https://deno.land/std/http

Deno公式で提供している標準ライブラリ上にExamplesがいくつかありますが、今回はdext.tsを試してみるので早速サードパーティモジュールでdext.tsを確認してみましょう。

https://deno.land/x

こちらで「dext」を検索すると出てくるのではないでしょうか。

https://deno.land/x/dext@0.10.5

これですね。
今回はDeno v1.8.2上でdext@0.10.5を試してみたいと思います。
まずはインストールから。

$ deno install --allow-read --allow-write --allow-env --allow-net --allow-run --unstable -f -n dext https://deno.land/x/dext@0.10.5/cli.ts

dext createコマンドでプロジェクトの作成を行えるようなのでやってみます。

$ dext create myproject

dext dev myprojectコマンドを実行すると127.0.0.1:3000で起動しました。
ただ文字も何も書かれていないページが表示されるだけなので、何かがおかしいようです。

dext cli

README.mdにコマンドの詳細が記載されていないのでcli.tsソースコードを見てみましょう。

https://deno.land/x/dext@0.10.5/cli.ts

new Command()に大量のメソッドチェーンが付与されていますね。
可読性が高いのでオプション引数を簡単に確認することができます。
またコンソール上でdextコマンドを行うことでコマンド一覧を表示することができます。

$ dext dev [root] [option]

どうやらGitpod上でプロキシを使用しているため、dext devコマンドのホットリロードが正常に動作しないようです。
そのため--hot-refresh-host <host:string>オプションを付与する必要があります。
色々試してみたところlocalhostで問題ないようですのでこちらを設定します。
あと-aまたは--addressオプションでホストとポートの指定ができるので変更します。
個人的に0.0.0.0:8080で起動したいのでこちらもオプションを付与します。

$ dext dev myproject -a 0.0.0.0:8080 --hot-refresh-host localhost

gitpod

これで問題なく起動することができました。

tasks:
  - before: |
      curl -fsSL https://deno.land/x/install/install.sh | sh
      export DENO_INSTALL="/home/gitpod/.deno"
      export PATH="$DENO_INSTALL/bin:$PATH"
      deno install --allow-read --allow-write --allow-env --allow-net --allow-run --unstable -f -n dext https://deno.land/x/dext@0.10.5/cli.ts
    init: dext create myproject
    command: dext dev myproject -a 0.0.0.0:8080 --hot-refresh-host localhost
ports:
  - port: 8080
    visibility: public
    onOpen: open-preview
vscode:
  extensions:
    - denoland.vscode-deno

.gitpod.ymlをPublic DomainなThe Unlicenseで公開します。

https://gitlab.com/acefed/gitpod-deno

GitLabアカウントをお持ちではなくGitHubを常用している人は.gitpod.ymlをコピペして使ってください。

以上、簡単になりますがGitpodではじめるDenoとdext.tsの解説でした。

おわりに

実はこの記事、29日にuki00aさんの記事を拝見した後、Gitpod上で試して執筆した内容だったのですが、mizchiさんがSwdevを公開した事も重なったせいか
やたらDenoの温度感が高く私のDeno完全未経験の記事に注目が集まってしまい、コミュニティが混乱したらどうしようという懸念を感じていたため公開を控えていました。
Denoはv1を過ぎましたがdext.tsはまだまだ開発途中なので、本番環境で使い続ける自信がありません。私も引き続き成熟したNode.jsを使い続けるでしょう。

……と思っていた矢先、Deno Deployがリリースされました。

https://deno.com/deploy

Cloudflare Workersと互換性のあるAPIを提供しているという、Denoのエッジコンピューティングプラットフォームです。
Deno Deployではローカル環境でテストできるようにdeployctlを提供しているようですが、このdeployctlの作者がDenoのコアコントリビュータであるlucacasonato氏のようでした。

https://deno.land/x/deploy

そのため応援の意味も込めまして僭越ながらdext.tsの記事を公開させていただきました。^[1]

また同日29日にDeno Companyを立ち上げたことが発表されました。

https://deno.com/blog/the-deno-company

以下ブログの引用文です。www.DeepL.com/Translator（無料版）で翻訳しました。

これらのアイデアを積極的に追求するために、490万ドルのシード資金を調達しました。投資家は、Four Rivers VenturesのDan Scholnick氏、Rauch CapitalのGuillermo氏、Long Journey VenturesのLee Jacobs氏、Mozilla Corporation、Shasta Ventures、そして長年の共同研究者であるBen Noordhuis氏です。今回の投資により、Denoを改善するためにフルタイムの専門エンジニアのスタッフを確保することができました。私たちは、問題が解決され、バグが修正され、タイムリーなリリースが行われ、Denoが他の人たちが信頼して構築できるプラットフォームであることを保証します。

私がプログラミングを学び始める前、12年ぐらい前でしょうか。
Node.jsが発表されこれがC10K問題を解決して世界を変えると言われていたことがあります。
当時プログラミングをやっていない私には何を言っているのか全くわかりませんでした。

その後Node.jsは様々な問題を抱え、io.jsへ分裂したりNode.js 4.0へ統合したりした後、発展していき年々Node.jsを使う企業が増えていきました。
成熟するまで非常に長い年月がかかりましたが、今は世界を変えたと言っても過言ではないでしょう。

しかしNode.jsを支える技術はあまりにも複雑化してしまい、HTMLとCSSを学んだ後やってきたJavaScript初心者には勧めづらいものになってしまいました。
ESM、JSX、Volta、pnpm、esbuild、TypeScript、あげ続けたらきりがないですね。

Deno社は、何百万人ものウェブプログラマーが、自分の技術を他の領域で最大限に活用できるようにしたいと考えています。

Denoは驚くほど簡単でした。
私は今回Denoを触ってみて、Node.jsが発表された頃と同じ、何も理解していないにも関わらずワクワクするような体験をすることができました。
今後Node.jsとDenoが取り巻く環境がどうなるか全くわかりませんが、是非興味がありましたらGitpodではじめるDenoとdext.tsを試してみてください。

一緒にワクワクしましょう。

「おわりに」を執筆するにあたりyosuke_furukawaさんのブログを参考にしました。この場を借りてお礼申し上げます。

脚注

追記：現在Deno DeployのExamplesではdext.tsではなくSiftを使用した例が多いようです。こちらもPreactをベースにしたフレームワークです https://deno.land/x/sift ↩︎