docker

【3分で分かる】Denoを用いたTypeScript実行環境の構築手順を紹介

・TypeScript実行環境の構築
・Dockerfileの作成~DenoでコンパイルしてHello World出力

はじめに

GWのおともにTypeScriptの書籍を購入しました。
すぐに使う予定は無いのですが現在JavaScriptを使っていてTypeScriptってどうなのだろうかと思い購入しました。

https://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4297127474&linkId=144a526b3ba86d7f367ecd5e8032f313

TypeScriptはNode.jsからJavaScriptファイルに変換(トランスコンパイル)して実行するようですが変換にモヤモヤしたので、Node.jsの作者が作成したDenoを実行環境にしたいと思いDenoを使ったTypeScript実行環境を書き溜めることにしました。

下記より環境構築となりますがDockerを使うため注意いただければと思います。

Dockerfile作成・実行

まずはDockerfile作成です。
今回は非公式ですがベースイメージがあるためそちらを使います。

https://hub.docker.com/r/denoland/deno/

FROM denoland/deno:alpine

ベースイメージのおかげでたった1行用意すればDenoがインストールされます。

作成したDockerfileをもとにDockerを実行します。

エラーなく正常に実行出来たら下記コマンドを入れてDenoがインストールされていることを確認します。

# deno --version
deno 1.21.0 (release, x86_64-unknown-linux-gnu)
v8 10.0.139.17
typescript 4.6.2

TypeScriptのファイル作成

作成したDocker内でTypeScriptファイルを作成します。
今回はHello Worldを出力する程度なので下記のようなコードを作成します。
ファイル名は任意で問題ありませんが拡張子はtsとなります。今回はファイル名をexamle.tsとしています。

const hello = 'Hello, ';
const world = 'world!';
console.log(hello + world);

これでTypeScriptでHello Worldを出力する準備は整いました。
次でDenoでコンパイルしてHello Worldを出力します。

DenoでコンパイルしてHello Worldを出力

Denoのコマンドを用いてコンパイルと実行を行います。
Denoにはコンパイル単独のコマンドはありますが、コンパイルと実行を同時に行うコマンドも存在します。
今回は後者である、コンパイルと実行を同時に行う方法でHello Worldを出力します。

# deno run example.ts 
Check file:///var/www/practice/src/example.ts
Hello, world!

「deno run example.ts」コマンドで先ほど作成したTypeScriptファイルに対してコンパイルと実行を行っています。
コンパイルが通ると実行され、Hello Worldが出力されます。

さいごに

以上がDenoを用いたTypeScript実行環境の構築となります。
Node.jsではTypeScriptファイルをJavaScriptファイルに変換していますがDenoではTypeScriptのランタイム環境であるため変換されたJavaScriptファイルを作成することなく実行されます。

個人的な意見としては変換ファイルを作成するというのは必要とはいえファイルが多くなり管理が煩雑となるためTypeScriptの構文とかを試す場合はDenoをオススメします。

Dockerのベースイメージもあるため比較的簡単に試せるのも良いですね。

https://osusublog.net/?p=214