Denoハンズオン
このハンズオンでやること
Deno について
Denoのインストール
とりあえずTypeScriptを実行しよう
FizzBuzzを作ってみよう
Packageを使ってみよう
Denoについて
tsファイルがトランスパイル不要でそのまま実行できます
Modulesの扱いはES Modulesに統一されているため、requireやmodules.exports = ...のようなCommonJSの書き方はエラーになります
また、トップレベルawaitがサポートされるようになったので、わざわざasync function()を定義する必要もありません
Denoのインストール
公式ドキュメントを見てインストールしてください
とりあえずTypeScriptを実行しよう
とりあえず以下のコマンドを実行しましょう
$ deno run https://deno.land/std/examples/welcome.ts
このtsファイルは単純にconsole.log()を実行しているだけです
指定したURL先からtsファイルをDLし、Denoで実行しています
FizzBuzzを作ってみよう
FizzBuzzプログラムを作って実行してみましょう
以下はサンプルコードです
code:typescript
let num: number = 1;
while(num < 100) {
let output: string = "";
if(num%3 === 0) {
output += "Fizz";
}
if(num%5 === 0) {
output += "Buzz";
}
if(output === "") {
output += num.toString();
}
console.log(output);
num++;
}
Packageを使ってみよう１
今回は Servest というPackageを使ったプログラムを書いてみます
1. server.tsを作成します
$ touch server.ts
2. ファイルを開き以下ように記述します
code:typescript
const app = createApp();
app.handle("/", async req => {
await req.respond({
status: 200,
headers: new Headers({
"content-type": "text/plain; charset=UTF-8"
}),
body: "Hello World"
});
});
app.listen({port: 8888});
3. ファイルを実行してみよう
$ deno run server.ts
エラーになりましたか？
Denoはネットワークやファイルの読み書きなどを行うファイルの実行には権限オプションを指定する必要があります
今回はネットワークが関わる処理なので--allow-netオプションをつけて実行します
4. 権限オプションを付与して実行してみよう
$ deno run --allow-net server.ts
エラーなく実行できたでしょう
ブラウザからhttp://localhost:8888にアクセスすると、Hello Worldが表示されます
Packageを使ってみよう２
今度はindex.htmlを作成して、表示してみます
1. server.tsと同じディレクトリにindex.htmlを作成します
$ touch index.html
2. server.tsを以下のように修正します
code:javascript
// index.htmlの内容を読み込みます
const indexPage = await Deno.readFile("./index.html")
const app = createApp();
app.handle("/", async req => {
await req.respond({
status: 200,
headers: new Headers({
"content-type": "text/html; charset=UTF-8" // text/plain から text/html に修正します
}),
body: indexPage // 読み込んだindex.htmlをbodyに指定します
});
});
app.listen({port: 8888});
3. 実行してみよう
今回は追加でindex.htmlの中身を読み取る処理、つまりファイルの読み込み処理が追加されています
なので、ファイル読み込み権限も付与して実行しましょう
$ deno run --allow-net --allow-read server.ts
http://localhost:8888 にアクセスしてみよう
（オマケ）トップレベルawaitを使ってみよう
Denoではトップレベル await がサポートされています
以下はサンプルです
code:sample_request.js
let activity = ""
// async function を定義しなくてもawait が書けちゃいます
await fetch(TARGET_URL)
.then(res => res.json())
.then(resBody => {
activity = resBody.activity
})
console.log(activity)
実行してみよう
$ deno run --allow-net sample_requet.js
この資料は、/icons/github.iconGithubでも公開してます