Deno on 高木のブログ

Deno Deploy では Cache Web API はまだ動かない

Sun, 23 Jul 2023 00:00:00 +0000

※ これは2023年7月23日現在の話

Deno 1.26 でサポートされた Cache Web API を Deno Deploy で使おうとしたら、そんなもんはないと

ReferenceError: caches is not defined

どうやらまだ Deno Deploy ではサポートされていないみたい
Future support にはなっていたのでそのうち
https://deno.com/deploy/docs/runtime-api#future-support

ChatGPT にコミットメッセージを考えてもらう CLI ツールを作った

Fri, 05 May 2023 00:00:00 +0000

最近はコミットメッセージを ChatGPT に考えてもらっている
指示の入力と差分のコピペが面倒になったので、CLI ツールを作った

ツール名も ChatGPT に考えてもらった

インストール方法と使い方 🔗

インストール 🔗

Deno で作った

$ deno install --allow-env --allow-run --allow-net --allow-read https://deno.land/x/commit_genius/cg.ts
✅ Successfully installed cg

$ cg --version
cg v0.4.0

使い方 🔗

環境変数に OpenAPI の API キーをセット

$ export OPENAI_ACCESS_TOKEN=sk-HogehogeXXX

git add して、コマンド叩けばコミットメッセージの候補が出てくる

$ git add .
$ cg
Possible commit message suggestions:
- Update installation guide (インストールガイドを更新)
- Add --allow-write flag to installation command (インストールコマンドに --allow-write フラグを追加)
- Update README.md with usage examples (README.mdを使用例付きで更新)

日本語も欲しかったので表示するようにしている（後々オプションで表示・非表示に選べるようにする予定）

どうして作った？ 🔗

正直、n 番煎じでこれより高機能なものをあるけど、自分のユースケースにピッタリ当てはまるものじゃなかったのと CLI ツールを作る知見を貯めたかったから作った

どうして Deno ？ 🔗

deno の良いところはしばらくずっと Go に覇権が渡っていた「気軽に配布できるちょい cli を書く」を ts で書ける所だと思ってるんだけど、一部の人にしか浸透してないので少し残念。
— mattn (@mattn_jp) August 24, 2021

本当にこれで、CLI ツールは今までに Go や Ruby でも作ったことがあるけど、サクッと作って気軽に配布できるという点が良くて Deno を選んだ

プロンプト 🔗

現時点ではこんな感じの指示を与えている

あなたは与えられた git diff の結果からコミットメッセージを考えるアシスタントです。
英語でのコミットメッセージの候補を出力してください。
それぞれの日本語訳も欲しいです。

出力例:
Possible commit message suggestions:
- commit messages 1 (日本語訳1)
- commit messages 2 (日本語訳2)
- commit messages 3 (日本語訳3)

所感 🔗

精度はそれなりに良かったが、微妙な場合もあった
変数名や関数名が明確ではなかったり、コミットの粒度が大きかったりすると微妙な結果になっている気がする
簡易的なコードレビューとしても使えると感じた

今後の展望 🔗

OSS に PR を出す用に変更内容の要約も出力するオプションも追加したいと思っている

【Deno】deno init コマンド

Fri, 30 Sep 2022 00:00:00 +0000

Deno 1.25.0 で、プロジェクトの初期化をしてくれるサブコマンド deno init が追加された

$ deno --version
deno 1.25.4 (release, x86_64-apple-darwin)
v8 10.7.193.3
typescript 4.7.4

コマンドを実行すると、main.ts と main_test.ts の2つのファイルが生成される

$ deno init
✅ Project initialized
Run these commands to get started
  deno run main.ts
  deno test

$ ls
main.ts      main_test.ts

Deno の基本的な書き方とそのテストの例が書かれている

export function add(a: number, b: number): number {
  return a + b;
}

// Learn more at https://deno.land/manual/examples/module_metadata#concepts
if (import.meta.main) {
  console.log("Add 2 + 3 =", add(2, 3));
}

import { assertEquals } from "https://deno.land/std@0.157.0/testing/asserts.ts";
import { add } from "./main.ts";

Deno.test(function addTest() {
  assertEquals(add(2, 3), 5);
});

$ deno run main.ts
Add 2 + 3 = 5

$ deno test
running 1 test from ./main_test.ts
addTest ... ok (7ms)

ok | 1 passed | 0 failed (41ms)

Deno はたまにしか書かず、久々に書こうとした時にどうやって書くんだっけと毎回ググったり、他リポジトリを覗きにいったりしていたのでこのコマンドの追加は嬉しい
もちろん複雑なプログラムを書く時は他のことでどうせググるだろうけど、取っ掛かりまでのハードルが大幅に下がったのは大きい

参考 🔗

Denoの使用すべきdeno_stdのバージョンを出力するワンライナー

Mon, 24 Jan 2022 00:00:00 +0000

Deno（本体）とdeno_stdは独立してバージョン管理されていて、使用すべきバージョンは https://github.com/denoland/dotland/blob/main/versions.json で確認することができる

頻繁にDenoを使うわけではないので、使うときはアップグレードから始める
その度に対応するdeno_stdバージョンを確認しにいくのは少し面倒なので、現在使おうとしているDenoのバージョンに対応するdeno_stdバージョンを出力するワンライナーを書いた
それをエイリアスに登録してすぐ確認できるようにした

成果物 🔗

ワンライナー 🔗

$ curl -s https://raw.githubusercontent.com/denoland/dotland/main/versions.json | jq -r '.["cli_to_std"]["v'`deno -V | awk '{print $2}'`'"]'
0.122.0

エイリアス登録 🔗

一部ダブルクォーテーションをエスケープして登録

alias deno-std-version="curl -s https://raw.githubusercontent.com/denoland/dotland/main/versions.json | jq -r '.[\"cli_to_std\"][\"v'`deno -V | awk '{print $2}'`'\"]'"

$ deno-std-version
0.122.0

僕はShellスクリプトでDenoを手に入れた

Wed, 17 Nov 2021 00:00:00 +0000

Denoのバージョンを最新にしようとしたら、Denoなんでない！って怒られた

$ brew upgrade deno
Error: deno not installed

そうか、HomebrewじゃなくてShellスクリプトで入れたのか
忘れないようにここに記録しておく

そもそも何でインストールしたか確認できる方法とかってあるのかな

インストール 🔗

$ curl -fsSL https://deno.land/x/install/install.sh | sh

$ deno --version
deno 1.16.1 (release, x86_64-apple-darwin)
v8 9.7.106.2
typescript 4.4.2

バージョンを指定してインストール 🔗

curl -fsSL https://deno.land/x/install/install.sh | sh -s v1.0.0

バージョンアップ 🔗

$ deno upgrade
Looking up latest version
Found latest version 1.16.1
Checking https://github.com/denoland/deno/releases/download/v1.16.1/deno-x86_64-apple-darwin.zip
28.6 MiB / 28.6 MiB (100.0%)
Deno is upgrading to version 1.16.1
Archive:  /var/folders/pp/gt4jlrmj7cgg0xrdggtspylh0000gn/T/.tmpyleuc4/deno.zip
  inflating: deno
Upgraded successfully

バージョンを指定してバージョンアップ 🔗

$ deno upgrade --version 1.0.0

バージョンダウンもできる

参考 🔗

denoland/deno_install: Deno Binary Installer

【Deno】Deno Deployで動かすアプリの開発メモ

Mon, 30 Aug 2021 00:00:00 +0000

前にDeno Deployを試した記事（Deno Deployを試してみた）を書いたけど、開発の部分を書いてなくてちょっとしたものをサクッと作ろうとした時に困ったのでメモしておく
まあこのくらいなら公式ドキュメントを見ればいいのだけど

CLI 🔗

ローカルで開発する時はdeployctlというCLIを使用する

インストール 🔗

$ deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -f https://deno.land/x/deploy/deployctl.ts
✅ Successfully installed deployctl
/Users/ytkg/.deno/bin/deployctl

$ deployctl --version
deployctl 0.3.0

サーバー起動 🔗

コードに変更があったらリロードしてくれるので、--watchオプションはつけておいた方が良い

$ deployctl run --watch app.js
Listening on http://0.0.0.0:8080

コード 🔗

シンプルに文字列でユーザーエージェントを返すサンプルコード

function handleRequest(request) {
  const userAgent = request.headers.get("user-agent");

  return new Response(`User Agent: ${userAgent}\n`, {
    headers: { "content-type": "text/plain" },
  });
}

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

$ curl localhost:8080
User Agent: curl/7.64.1

CentOS7にDenoをインストールする方法

Fri, 30 Jul 2021 00:00:00 +0000

公式ドキュメント通りにCentOS7にDenoをインストールしただけでは動かない

GLIBC 2.18が必要らしい

$ deno --version
deno: /lib64/libc.so.6: version `GLIBC_2.18' not found (required by deno)

CentOS7に入っているGLIBCは2.17

$ ldd --version
ldd (GNU libc) 2.17
Copyright (C) 2012 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
作者 Roland McGrath および Ulrich Drepper。

手順 🔗

GLIBC 2.18のインストール 🔗

$ curl -LO https://ftp.gnu.org/gnu/glibc/glibc-2.18.tar.gz
$ tar zxvf glibc-2.18.tar.gz
$ cd glibc-2.18/
$ mkdir build && cd build
$ ../configure --prefix=/usr --disable-profile --enable-add-ons --with-headers=/usr/include --with-binutils=/usr/bin
$ make && sudo make install

$ ldd --version
ldd (GNU libc) 2.18
Copyright (C) 2013 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
作者 Roland McGrath および Ulrich Drepper。

Denoのインストール 🔗

$ curl -fsSL https://deno.land/x/install/install.sh | sh
$ echo 'export DENO_INSTALL="/home/vagrant/.deno"' >> ~/.bash_profile
$ echo 'export PATH="$DENO_INSTALL/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile

$ deno --version
deno 1.12.2 (release, x86_64-unknown-linux-gnu)
v8 9.2.230.14
typescript 4.3.5

参考 🔗

Denoでコラッツの問題を確認してみた

Sat, 10 Jul 2021 00:00:00 +0000

はてブにあがっていた記事（数学の未解決問題に『1億2000万円』の懸賞金がかけられる→内容は簡単に理解できます。数学自慢の方々挑戦してみて - Togetter ）を読んで気になったので、Denoでコラッツの問題を確認してみた

コラッツの問題とは 🔗

「任意の正の整数 n をとり、

n が偶数の場合、n を 2 で割る

n が奇数の場合、n に 3 をかけて 1 を足すという操作を繰り返すと、どうなるか」というものである。「どんな初期値から始めても、有限回の操作のうちに必ず 1 に到達する（そして 1→4→2→1 というループに入る）」という主張が、コラッツの予想である。（コラッツの問題 - Wikipedia ）

Deno（TypeScript）で確認する 🔗

export function collatz(number: number): number {
  if (number % 2 === 0) {
    return number / 2;
  } else {
    return number * 3 + 1;
  }
}

import { collatz } from "./collatz.ts";

let number = Number(Deno.args[0]);

while (number > 1) {
  console.log(number);
  number = collatz(number);
}

console.log(number);

$ deno run app.ts 6
6
3
10
5
16
8
4
2
1

$ deno run app.ts 11
11
34
17
52
26
13
40
20
10
5
16
8
4
2
1

テスト 🔗

ちゃんとテストも書いた

import { assertEquals } from "https://deno.land/std@0.97.0/testing/asserts.ts";
import { collatz } from "./collatz.ts";

Deno.test("collatz(2)", () => {
  assertEquals(collatz(2), 1);
});

Deno.test("collatz(3)", () => {
  assertEquals(collatz(3), 10);
});

$ deno test collatz_test.ts
test collatz(2) ... ok (8ms)
test collatz(3) ... ok (6ms)

test result: ok. 2 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out (36ms)

Denoでブログ執筆を楽にするCLIツールを作った

Tue, 06 Jul 2021 00:00:00 +0000

Denoでブログ執筆を楽にするCLIツールを作った（というより作っているが正しい）

DenoとTypeScriptの勉強をするための題材としてCLIツール作成を選んでみた
Aleph.js のCLIツールを参考にして作っている

機能がこのブログに特化しちゃってるので、コマンド名もtb（takagi blog）にした

作った機能 🔗

インストールスクリプト 🔗

$ deno run -A install.ts
$ tb --version
tb-cli 0.1.0

openコマンド 🔗

このブログ(https://takagi.blog/ ) をブラウザで開く

$ tb open

newコマンド 🔗

新しい記事ファイルを作成する

$ tb new sample-ruby
Create content/blog/sample-ruby.md

$ cat content/blog/sample-ruby.md
---
title:
date: 2021-07-05
tags: [""]
---

Vim使いなのでそのままVimで開けるようにできるのであればしたい
オプションでタグの指定もできると良い

終わり 🔗

今のところCLIツールにしなくてもいい内容だけど、今後CLIツール機会が出てきた時の予習も兼ねているので問題なし

【Deno】Hello, World!を出力するだけのコマンドを作る

Tue, 25 May 2021 00:00:00 +0000

作りたいコマンドができたので、Denoでコマンドを作成する予習

Hello, World!を出力するだけのコマンド作成する

Denoのバージョン 🔗

Dockerでやるのは不都合が出てきたのでMacにHomebrewで直接インストールした

$ brew install deno
$ deno --version
deno 1.10.2 (release, x86_64-apple-darwin)
v8 9.1.269.27
typescript 4.2.2

コマンドの作成 🔗

Hello, World!と出力するだけのファイルを作成

console.log("Hello, World!");

権限も特にいらないのでこれで完成

$ deno run cli.ts
Hello, World!

コマンドのインストール 🔗

インストール 🔗

deno installでインストールできる

$ deno install cli.ts

もしくはGitHubに上げて

$ deno install --name deno_hello https://raw.githubusercontent.com/ytkg/deno_hello/main/cli.ts

※デフォルトで拡張子を省略したファイル名がコマンド名になるが、mod.tsやcli.tsの場合は親ディレクトリ名になるので、--nameオプションでコマンド名の指定をしている

パスを通す 🔗

デフォルトで$HOME/.deno/bin以下に保存されるのでパスを通してあげる

$ echo 'export PATH="$HOME/.deno/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile

実行 🔗

$ deno_hello
Hello, World!

動いた

実行ファイルの中身 🔗

#!/bin/sh
# generated by deno install
exec deno run 'https://raw.githubusercontent.com/ytkg/deno_hello/main/cli.ts' "$@"

別のやり方（コンパイル） 🔗

コンパイル 🔗

$ deno compile cli.ts

もしくはGitHubに上げて

$ deno compile --output deno_hello https://raw.githubusercontent.com/ytkg/deno_hello/main/cli.ts

※デフォルトで拡張子を省略したファイル名がコマンド名になるが、mod.tsやcli.tsの場合は親ディレクトリ名になるので、--outputオプションでコマンド名の指定をしている

実行ファイルの移動 🔗

deno_helloという実行ファイルが生成されている

$ ls
cli.ts          deno_hello

$ mv ./deno_hello $HOME/.deno/bin

実行 🔗

$ deno_hello
Hello, World!

OK!

🔗

リポジトリ 🔗

今回の成果物

参考 🔗

「Effective Deno」を読みながら、Denoを触ってみる

Mon, 17 May 2021 00:00:00 +0000

Zenn にDenoのめちゃくちゃ良さげなテキスト（Effective Deno ）が公開されていたので、それを読みながらDenoを触ってみた

いい感じのテーマが思い浮かばなかったのでFizzBuzz問題を実装することにした

「1から100までの数字を画面に表示する。ただし、3の倍数のときは数字の代わりにFizzと表示し、5の倍数のときは数字の代わりにBuzzと表示し、15の倍数のときは数字の代わりにFizzBuzzと表示する」

Denoの環境 🔗

前に書いた記事（DenoでHello, World! ）同様、Dockerで用意する
.bashrcに記述して、使える状態にした

Denoのバージョンは触った時点で最新の1.9.2を使った

deno () {
  docker run \
    --interactive \
    --tty \
    --rm \
    --volume $PWD:/app \
    --volume $HOME/.deno:/deno-dir \
    --workdir /app \
    hayd/ubuntu-deno:1.9.2 \
    deno "$@"
}

$ deno --version
deno 1.9.2 (release, x86_64-unknown-linux-gnu)
v8 9.1.269.5
typescript 4.2.2

実装 🔗

仮のfizzbuzz関数の実装 🔗

まずはfizzbuzz関数のガワだけを作る
受け取った引数の値を文字列にして返す

export function fizzbuzz(number: number): string {
  return String(number);
}

本来、Fizz,Buzz,FizzBuzzはString型で、数値はNumber型で返してあげた方がいい気がするけど、今回はすべてString型で返すことにする

テストの実装 🔗

fizzbuzz関数のガワだけできたので、先にテストを書く

import { assertEquals } from 'https://deno.land/std@0.95.0/testing/asserts.ts';
import { fizzbuzz } from './fizzbuzz.ts';

Deno.test('fizzbuzz(1)', () => {
  assertEquals(fizzbuzz(1), '1');
});

Deno.test('fizzbuzz(3)', () => {
  assertEquals(fizzbuzz(3), 'Fizz');
});

Deno.test('fizzbuzz(5)', () => {
  assertEquals(fizzbuzz(5), 'Buzz');
});

Deno.test('fizzbuzz(15)', () => {
  assertEquals(fizzbuzz(15), 'FizzBuzz');
});

テストの実行 🔗

deno testで実行できる
もちろんString型にして返すだけなので、1の場合しかテストは通らない

$ deno test
running 4 tests
test fizzbuzz(1) ... ok (4ms)
test fizzbuzz(3) ... FAILED (4ms)
test fizzbuzz(5) ... FAILED (2ms)
test fizzbuzz(15) ... FAILED (1ms)

failures:

fizzbuzz(3)
AssertionError: Values are not equal:


    [Diff] Actual / Expected


-   "3"
+   "Fizz"

    at assertEquals (https://deno.land/std@0.95.0/testing/asserts.ts:222:9)
    at file:///app/fizzbuzz_test.ts:9:3
    at asyncOpSanitizer (deno:runtime/js/40_testing.js:37:15)
    at resourceSanitizer (deno:runtime/js/40_testing.js:73:13)
    at Object.exitSanitizer [as fn] (deno:runtime/js/40_testing.js:100:15)
    at TestRunner.[Symbol.asyncIterator] (deno:runtime/js/40_testing.js:272:24)
    at AsyncGenerator.next (<anonymous>)
    at Object.runTests (deno:runtime/js/40_testing.js:347:22)
    at async file:///app/$deno$test.ts:3:1

fizzbuzz(5)
AssertionError: Values are not equal:


    [Diff] Actual / Expected


-   "5"
+   "Buzz"

    at assertEquals (https://deno.land/std@0.95.0/testing/asserts.ts:222:9)
    at file:///app/fizzbuzz_test.ts:13:3
    at asyncOpSanitizer (deno:runtime/js/40_testing.js:37:15)
    at resourceSanitizer (deno:runtime/js/40_testing.js:73:13)
    at Object.exitSanitizer [as fn] (deno:runtime/js/40_testing.js:100:15)
    at TestRunner.[Symbol.asyncIterator] (deno:runtime/js/40_testing.js:272:24)
    at AsyncGenerator.next (<anonymous>)
    at Object.runTests (deno:runtime/js/40_testing.js:347:22)
    at async file:///app/$deno$test.ts:3:1

fizzbuzz(15)
AssertionError: Values are not equal:


    [Diff] Actual / Expected


-   "15"
+   "FizzBuzz"

    at assertEquals (https://deno.land/std@0.95.0/testing/asserts.ts:222:9)
    at file:///app/fizzbuzz_test.ts:17:3
    at asyncOpSanitizer (deno:runtime/js/40_testing.js:37:15)
    at resourceSanitizer (deno:runtime/js/40_testing.js:73:13)
    at Object.exitSanitizer [as fn] (deno:runtime/js/40_testing.js:100:15)
    at TestRunner.[Symbol.asyncIterator] (deno:runtime/js/40_testing.js:272:24)
    at AsyncGenerator.next (<anonymous>)
    at Object.runTests (deno:runtime/js/40_testing.js:347:22)
    at async file:///app/$deno$test.ts:3:1

failures:

        fizzbuzz(3)
        fizzbuzz(5)
        fizzbuzz(15)

test result: FAILED. 1 passed; 3 failed; 0 ignored; 0 measured; 0 filtered out (11ms)

正しく動くfizzbuzz関数に書き換える 🔗

テストが書けたので、fizzbuzz関数の中身を実装する

export function fizzbuzz(number: number): string {
  if (number % 15 == 0)
    return 'FizzBuzz';
  else if (number % 3 == 0)
    return 'Fizz';
  else if (number % 5 == 0)
    return 'Buzz';
  else
    return String(number);
}

$ deno test
Check file:///app/$deno$test.ts
running 4 tests
test fizzbuzz(1) ... ok (4ms)
test fizzbuzz(3) ... ok (1ms)
test fizzbuzz(5) ... ok (1ms)
test fizzbuzz(15) ... ok (1ms)

test result: ok. 4 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out (8ms)

テストが無事通った

メインのコードを書く 🔗

fizzbuzz関数が無事完成したので、「1から100までの数字を画面に表示する。ただし、3の倍数のときは数字の代わりにFizzと表示し、5の倍数のときは数字の代わりにBuzzと表示し、15の倍数のときは数字の代わりにFizzBuzzと表示する」コードを書く

import { fizzbuzz } from './fizzbuzz.ts';

for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i));
}

$ deno run app.ts
Check file:///app/app.ts
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz

... 省略 ...

86
Fizz
88
89
FizzBuzz
91
92
Fizz
94
Buzz
Fizz
97
98
Fizz
Buzz

無事完成

フォーマッタを掛ける 🔗

特にコーディングルールを読まずに普段のRubyを書くように書いただけなので、フォーマッタを掛ける
deno fmtでフォーマットしてくれる

$ deno fmt
/app/app.ts
/app/fizzbuzz.ts
/app/fizzbuzz_test.ts
Checked 4 files

そこそこ修正された

# fizzbuzz.ts
 export function fizzbuzz(number: number): string {
-  if (number % 15 == 0)
-    return 'FizzBuzz';
-  else if (number % 3 == 0)
-    return 'Fizz';
-  else if (number % 5 == 0)
-    return 'Buzz';
-  else
+  if (number % 15 == 0) {
+    return "FizzBuzz";
+  } else if (number % 3 == 0) {
+    return "Fizz";
+  } else if (number % 5 == 0) {
+    return "Buzz";
+  } else {
     return String(number);
+  }
 }

# fizzbuzz_test.ts
-import { assertEquals } from 'https://deno.land/std@0.95.0/testing/asserts.ts';
-import { fizzbuzz } from './fizzbuzz.ts';
+import { assertEquals } from "https://deno.land/std@0.95.0/testing/asserts.ts";
+import { fizzbuzz } from "./fizzbuzz.ts";

-Deno.test('fizzbuzz(1)', () => {
-  assertEquals(fizzbuzz(1), '1');
+Deno.test("fizzbuzz(1)", () => {
+  assertEquals(fizzbuzz(1), "1");
 });

-Deno.test('fizzbuzz(3)', () => {
-  assertEquals(fizzbuzz(3), 'Fizz');
+Deno.test("fizzbuzz(3)", () => {
+  assertEquals(fizzbuzz(3), "Fizz");
 });

-Deno.test('fizzbuzz(5)', () => {
-  assertEquals(fizzbuzz(5), 'Buzz');
+Deno.test("fizzbuzz(5)", () => {
+  assertEquals(fizzbuzz(5), "Buzz");
 });

-Deno.test('fizzbuzz(15)', () => {
-  assertEquals(fizzbuzz(15), 'FizzBuzz');
+Deno.test("fizzbuzz(15)", () => {
+  assertEquals(fizzbuzz(15), "FizzBuzz");
 });

# app.ts
-import { fizzbuzz } from './fizzbuzz.ts';
+import { fizzbuzz } from "./fizzbuzz.ts";
 for (let i = 1; i <= 100; i++) {
   console.log(fizzbuzz(i));
 }

CIを用意する 🔗

GitHub Actionsでテストやリンタが自動で実行されるようにセットアップする

name: ci

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: denoland/setup-deno@main
        with:
          deno-version: "1.9.2"
      - name: Run fmt
        run: |
          deno fmt --check
      - name: Run lint
        run: |
          deno lint --unstable
      - name: Run tests
        run: |
          deno test -A

ちゃんと動いた良き
first commit · ytkg/deno_fizzbuzz@d2e6104

リポジトリ 🔗

今回やった内容をGitHubにあげた

【Deno】Aleph.jsを試した時にうまく動かなかったバージョンの組み合わせ

Thu, 06 May 2021 00:00:00 +0000

※2021年5月6日時点の情報です 🔗

「【Deno】Aleph.jsで作成したアプリをVercelにデプロイする」を書いた時に試した内容でうまく動かなかったバージョンの組み合わせがあったので記録として残しておく
組み合わせというよりAleph.jsのみの不具合だと思う
まだアルファ版なのでしょうがない

Deno 1.6.3 と Aleph.js 0.2.28
Deno 1.9.2 と Aleph.js 0.3.0-alpha.32

Deno 1.6.3 と Aleph.js 0.2.28 🔗

バージョン 🔗

$ aleph --version
aleph.js 0.2.28
deno 1.6.3
v8 8.8.294
typescript 4.1.3

詳細 🔗

Get Started - Aleph.js で紹介されていたバージョンの組み合わせで、aleph devでローカルサーバーを起動した時にコケた

これは最新版のAleph.jsを使うことで解決した

エラーメッセージ 🔗

error: Uncaught (in promise) TypeError: TS2345 [ERROR]: Argument of type 'TransformerFactory<SourceFile>' is not assignable to parameter of type 'TransformerFactory<SourceFile> | CustomTransformerFactory'.
  Type 'import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").TransformerFactory<import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").SourceFile>' is not assignable to type 'import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").TransformerFactory<import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").SourceFile>'.
    Types of parameters 'context' and 'context' are incompatible.
      Type 'import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").TransformationContext' is not assignable to type 'import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").TransformationContext'.
        The types of 'factory.createTypeParameterDeclaration(...).parent' are incompatible between these types.
          Type 'import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").CallSignatureDeclaration | import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").ConstructSignatureDeclaration | ... 17 more ... | import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").InferTypeNode' is not assignable to type 'import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").CallSignatureDeclaration | import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").ConstructSignatureDeclaration | ... 17 more ... | import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").InferTypeNode'.
            Type 'JSDocTemplateTag' is not assignable to type 'CallSignatureDeclaration | ConstructSignatureDeclaration | MethodSignature | ArrowFunction | ... 15 more ... | InferTypeNode'.
              Type 'import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").JSDocTemplateTag' is not assignable to type 'import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").JSDocTemplateTag'.
                Types of property 'parent' are incompatible.
                  Type 'import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").JSDoc | import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").JSDocTypeLiteral' is not assignable to type 'import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").JSDoc | import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").JSDocTypeLiteral'.
                    Type 'JSDoc' is not assignable to type 'JSDoc | JSDocTypeLiteral'.
                      Type 'import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").JSDoc' is not assignable to type 'import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").JSDoc'.
                        Types of property 'parent' are incompatible.
                          Type 'import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").HasJSDoc' is not assignable to type 'import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").HasJSDoc'.
                            Type 'ImportEqualsDeclaration' is not assignable to type 'HasJSDoc'.
                              Property 'isTypeOnly' is missing in type 'import("https://cdn.esm.sh/v41/typescript@4.1.2/lib/typescript.d.ts").ImportEqualsDeclaration' but required in type 'import("https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts").ImportEqualsDeclaration'.
    if (reactRefresh) transformers.before!.push(reactRefreshTS())
                                                ~~~~~~~~~~~~~~~~
    at https://deno.land/x/aleph@v0.2.28/tsc/compile.ts:28:49

    'isTypeOnly' is declared here.
            readonly isTypeOnly: boolean;
                     ~~~~~~~~~~
        at https://cdn.esm.sh/v41/typescript@4.2.4/lib/typescript.d.ts:1601:18

Deno 1.9.2 と Aleph.js 0.3.0-alpha.32 🔗

バージョン 🔗

$ aleph --version
aleph.js 0.3.0-alpha.31
deno 1.9.2
v8 9.1.269.5
typescript 4.2.2

詳細 🔗

現時点での最新のDenoとAleph.jsの組み合わせで、aleph buildでビルドした時にコケた

この問題は既に修正済みでmasterにマージはされているが、まだリリースはされていない

これはビルドした時のアウトプットするディレクトリが存在していないためにコケる
すでにdistディレクトリ（distはデフォルト）がある場合は問題ないし、ない場合はmkdir distで作ってあげれば良い

Vercelにデプロイしたい場合はバージョンを下げる（v0.3.0-alpha.31にする）か、BUILD COMMANDにディレクトリ作成のコマンドを入れることで問題なくデプロイできることを確認済み

mkdir -p dist && curl -fsSL https://deno.land/x/install/install.sh | sh -s v1.9.2 && /vercel/.deno/bin/deno run -A https://deno.land/x/aleph@v0.3.0-alpha.32/cli.ts build

エラーメッセージ 🔗

INFO Compiling...
INFO   {} polyfills.js (ES2015) • 207KB
INFO   {} deps.js • 154KB
INFO   {} shared.js • 542B
INFO   {} /pages/index.js • 5KB
INFO   {} main.js • 382B
error: Uncaught (in promise) NotFound: No such file or directory (os error 2)
      await Deno.mkdir(distDir)
      ^
    at unwrapOpResult (deno:core/core.js:99:13)
    at async Object.mkdir (deno:runtime/js/30_fs.js:101:5)
    at async Application.build (https://deno.land/x/aleph@v0.3.0-alpha.32/server/app.ts:803:7)
    at async default (https://deno.land/x/aleph@v0.3.0-alpha.32/cli/build.ts:18:3)
    at async main (https://deno.land/x/aleph@v0.3.0-alpha.32/cli.ts:99:3)

【Deno】Aleph.jsで作成したアプリをVercelにデプロイする

Wed, 05 May 2021 00:00:00 +0000

Denoで何か作ってみようと思ってフレームワークを探していたら、Aleph.js というReactフレームワーク（Next.jsにインスパイアされたらしい）見つけたので触ってみた

公式ドキュメントの以下を見ながら、Welcome画面をVercelにデプロイするまでをやってみる

バージョン 🔗

うまく動かないバージョンの組み合わせがあるらしく、以下のバージョンでは今回やった部分は動作した

Mac OS 10.15.7
Docker 20.10.5
Docker Compose 1.29.0
Deno 1.9.2
Aleph.js 0.3.0-alpha.31

Aleph.jsのアプリケーション作成 🔗

Dockerk開発環境の準備 🔗

Dockerfile
docker-compose.yml

FROM hayd/ubuntu-deno:1.9.2

RUN deno install --unstable -A -f -n aleph https://deno.land/x/aleph@v0.3.0-alpha.31/cli.ts

WORKDIR /app
ADD . /app

version: "3"
services:
  web:
    build: .
    command: "aleph dev"
    volumes:
      - .:/app
    ports:
      - "8080:8080"

$ tree .
.
├── Dockerfile
└── docker-compose.yml

アプリ作成 🔗

$ docker-compose run --rm web aleph init .

$ tree .
.
├── Dockerfile
├── api
│   └── counter
│       ├── [action].ts
│       └── index.ts
├── app.tsx
├── components
│   └── logo.tsx
├── docker-compose.yml
├── import_map.json
├── lib
│   └── useCounter.ts
├── pages
│   └── index.tsx
├── public
│   └── logo.svg
└── style
    └── index.css

7 directories, 11 files

アプリ起動 🔗

$ docker-compose up

http://localhost:8080/ にアクセスにすると以下のような画面が表示されるはず

Vercelにデプロイ 🔗

本当はCLIから全部やりたかったが、BUILD COMMANDの設定をCLIから行う方法がわからなかったので、GUIでデプロイした

「New Project」でGitHubのリポジトリの連携なりいろいろやったあと、「Import Project」で以下の設定を記述をしてデプロイボタン

FRAMEWORK PRESET: Other
BUILD COMMAND:

curl -fsSL https://deno.land/x/install/install.sh | sh -s v1.9.2 && /vercel/.deno/bin/deno run -A https://deno.land/x/aleph@v0.3.0-alpha.31/cli.ts build

OUTPUT DIRECTORY: dist

Vercelにデプロイしたアプリ 🔗

https://sample-alephjs-deploy-on-vercel.vercel.app/

おわりに 🔗

サクッとまではいかないが比較的スムーズにデプロイまでできた
うまく動かないバージョンがあったので、それについては別記事で書く

参考 🔗

Deno x React の Aleph.js を触ってみる & Vercelにデプロイしてみる

Deno Deployを試してみた

Thu, 01 Apr 2021 00:00:00 +0000

Deno Deploy (https://deno.com/deploy ) というDeno用のホスティングサービス？がリリースされたので、早速使ってみた。
詳しいことは公式サイトや、記事最後に載せている参考サイトを見ていただきたい。

サンプルにあった、「Hello World!」を返すだけのものをDeno Deployにデプロイした。
GitHubにコードを上げて連携させるだけでデプロイできる。

成果物 🔗

https://takagi.deno.dev/

$ curl https://takagi.deno.dev/
Hello World!

リポジトリ 🔗

感想 🔗

簡単すぎて逆にわかりにくかった（これだけでデプロイできるわけがないと思った）
チュートリアルやサンプルも充実している気がするので良い
データベースを使ったアプリケーションのデプロイも試してみたい
ちょうどDeno入門して、デプロイ先を検討していたところだったので良いタイミングでリリースされた
料金の発表はまだみたいで、無料でどこまで使えるのかが気になるところ

参考 🔗

DenoでHello, World!

Fri, 19 Mar 2021 00:00:00 +0000

v1.0.0がリリースされた時にも少し触ったけど、復習+記録として。

手順 🔗

Denoの環境構築 🔗

構築といってもDocker

deno () {
  docker run \
    --interactive \
    --tty \
    --rm \
    --volume $PWD:/app \
    --volume $HOME/.deno:/deno-dir \
    --workdir /app \
    hayd/ubuntu-deno:1.8.1 \
    deno "$@"
}

source ~/.bashrc

$ deno --version
deno 1.8.1 (release, x86_64-unknown-linux-gnu)
v8 9.0.257.3
typescript 4.2.2

ファイル作成 🔗

console.log("Hello, World!");

実行 🔗

$ deno run hello.ts
Hello, World!

実質、TypeScriptでHello, World!になった。

Deno on 高木のブログ

Deno Deploy では Cache Web API はまだ動かない

ChatGPT にコミットメッセージを考えてもらう CLI ツールを作った

インストール方法と使い方 🔗

インストール 🔗

使い方 🔗

どうして作った？ 🔗

どうして Deno ？ 🔗

プロンプト 🔗

所感 🔗

今後の展望 🔗

【Deno】deno init コマンド

参考 🔗

Denoの使用すべきdeno_stdのバージョンを出力するワンライナー

成果物 🔗

ワンライナー 🔗

エイリアス登録 🔗

僕はShellスクリプトでDenoを手に入れた

インストール 🔗

バージョンを指定してインストール 🔗

バージョンアップ 🔗

バージョンを指定してバージョンアップ 🔗

参考 🔗

【Deno】Deno Deployで動かすアプリの開発メモ

CLI 🔗

インストール 🔗

サーバー起動 🔗

コード 🔗

CentOS7にDenoをインストールする方法

手順 🔗

GLIBC 2.18のインストール 🔗

Denoのインストール 🔗

参考 🔗

Denoでコラッツの問題を確認してみた

コラッツの問題とは 🔗

Deno（TypeScript）で確認する 🔗

テスト 🔗

Denoでブログ執筆を楽にするCLIツールを作った

作った機能 🔗

インストールスクリプト 🔗

openコマンド 🔗

newコマンド 🔗

終わり 🔗

【Deno】Hello, World!を出力するだけのコマンドを作る

Denoのバージョン 🔗

コマンドの作成 🔗

コマンドのインストール 🔗

インストール 🔗

パスを通す 🔗

実行 🔗

実行ファイルの中身 🔗

別のやり方（コンパイル） 🔗

コンパイル 🔗

実行ファイルの移動 🔗

実行 🔗

🔗

リポジトリ 🔗

参考 🔗

「Effective Deno」を読みながら、Denoを触ってみる

Denoの環境 🔗

実装 🔗

仮のfizzbuzz関数の実装 🔗

テストの実装 🔗

テストの実行 🔗

正しく動くfizzbuzz関数に書き換える 🔗

メインのコードを書く 🔗

フォーマッタを掛ける 🔗

CIを用意する 🔗

リポジトリ 🔗

【Deno】Aleph.jsを試した時にうまく動かなかったバージョンの組み合わせ

※2021年5月6日時点の情報です 🔗

Deno 1.6.3 と Aleph.js 0.2.28 🔗

バージョン 🔗

詳細 🔗

エラーメッセージ 🔗

関連するIssue 🔗

Deno 1.9.2 と Aleph.js 0.3.0-alpha.32 🔗

バージョン 🔗

詳細 🔗

エラーメッセージ 🔗