Denoばた会議 Monthly 第1回

Denoの最新情報

Deno 2.0のスコープについて

内容

GitHub DiscussionsでDeno 2.0のスコープが公開されました (https://github.com/denoland/deno/discussions/11972)

現時点では、今年の11月に2.0のリリースが検討されているようです。

検討中の変更内容

今後、変更される可能性もあるみたいなので参考程度に...

など

Deno v1.13

ネイティブHTTPサーバの安定化

Deno.serveHttpを使用する際に--unstableが不要になりました。

const listener = Deno.listen({ port: 3000 });
(async () => {
  for await (const conn of listener) {
    (async () => {
      const httpConn = Deno.serveHttp(conn);
      for await (const { request, respondWith } of httpConn) {
        const response = new Response("Hello world!");
        respondWith(response);
      }
    })();
  }
})();

プラグインシステムが削除され、代わりにFFIを導入

const dylib = Deno.dlopen("./add.so", {
  add: {
    parameters: ["i32", "i32"],
    result: "i32",
  },
});
console.assert(dylib.symbols.add(1, 2) === 3);

deno test --docでMarkdownがサポートされました

  <!-- README.md -->
  ## Usage

  ```ts
  import { connect } from "https://deno.land/x/redis/mod.ts";
  
  const redis = await connect({ hostname: "127.0.0.1" });
  console.assert(await redis.ping() === "PONG");
  console.assert(await redis.quit() === "OK");
  ```

$ deno test --doc --import-map=import_map.test.json README.md

https://uki00a.github.io/blog/articles/007-how-to-effectively-test-README-with-deno-test-doc/

WebSocketStreamの実装 (まだunstableです)

const stream = new WebSocketStream("ws://localhost:3000");
const { readable, writable } = await stream.connection;

const writer = writable.getWriter();
await writer.write("Hello world!");

setTimeout(() => stream.close(), 5000);

for await (const message of readable) {
  console.log(message);
}

その他にも様々な機能が追加されています

  • self.structuredCloneのサポート
  • Deno.writeFileでAbortSignalがサポート
  • DENO_TLS_CA_STORE
  • --unsafely-treat-insecure-origin-as-secureオプションがサポート
  • Web Crypto APIの実装が進んだ (SubtleCrypto#importKey/exportKeyでのHMACのサポートなど)
  • deno lspでRefactoringアクションがサポート
  • V8 9.3へのアップデート (Object.hasOwnのサポートなど)

より詳しくはmaguroさんの記事や公式のリリースノートを参照

deno_std/cryptoモジュール

deno_std v0.104.0で追加された新規モジュール

標準のWeb Crypto APIを拡張し、様々なアルゴリズムを提供します。

Deno本体でWeb Crypto APIの実装が進んできたため、元々存在したstd/hashは将来的にこちらへ置き換えられる予定のようです。

https://github.com/denoland/deno_std/pull/1025

deno_std/collectionsモジュール

deno_std v0.102.0で追加された新規モジュール

Kotlinの標準ライブラリに影響を受けているようです。

import { groupBy } from "https://deno.land/std@0.106.0/collections/group_by.ts";

const users = [{ name: "foo", group: "admin" }, { name: "bar", group: "normal" }];
const usersByGroup = groupBy(users, (it) => it.group);
console.log(usersByGroup["admin"]);

https://zenn.dev/kawarimidoll/articles/7d1fc9f0fb6538

Deno Deploy beta2

  • Deno.readFile, Deno.listen, 及びDeno.serveHttpなどのAPIがサポート
  • このリリースに合わせてOakなどでもDeno Deployのサポートが強化されています

https://deno.com/blog/deploy-beta2

MDNにDenoが掲載

MDNの互換性テーブルの欄にDenoが掲載されました

例)

https://deno.com/blog/deno-on-mdn

deno_graph

deno info --jsonと同様の機能を提供してくれるRustクレート

JavaScriptからも利用できます。

import { createGraph } from "https://deno.land/x/deno_graph@0.4.0/mod.ts";
const graph = await createGraph("https://deno.land/x/deno_graph@0.4.0/mod.ts");
console.log(graph.toJSON().modules.map((x) => x.specifier));

https://github.com/denoland/deno_graph

deno_docでJavaScript APIが公開

import { doc } from "https://deno.land/x/deno_doc@v0.13.0/mod.ts";
const nodes = await doc("https://deno.land/x/deno_doc@v0.13.0/mod.ts");
console.log(nodes.map((x) => x.name));

https://github.com/denoland/deno_doc

公式マニュアルが独立したリポジトリへ移行

公式マニュアルがdenoland/denoからdenoland/manualへ移行

コントリビューションしやすくなりそう🙆

サードパーティモジュールの最新情報

Aleph.js v0.3ベータが公開

Aleph.jsとは

Next.jsに影響を受けたフレームワーク

作者はesm.shなども開発しているije氏です。

注意点

まだベータ版なので、ここで紹介した機能はうまく動かないケースも発生する可能性もあると思います🙇

ビルド基盤がswc+esbuildへ移行

元々、Aleph.jsではビルド基盤としてtscが使用されていました。

v0.3ベータにてビルド基盤がswc+esbuildへ移行されました。

ビルドの高速化などが期待されます。

ssrオプション

Next.jsにおけるgetStaticProps / getStaticPaths相当の機能

import React from 'react'
import type { SSROptions } from 'aleph/types'

export const ssr: SSROptions = {
  props: async router => ({ date: Date.now() }),
  paths: async () => [],
}

export default function Page(props) {
  return (
    <p>{props.date}</p>
  )
}

新しいプラグインシステム

Aleph.jsのランタイムを拡張する仕組み

例) Windi CSSプラグイン

// aleph.config.ts
import windicss from 'https://deno.land/x/aleph_plugin_windicss@v0.0.2/plugin.ts'
import type { Config } from 'aleph/types'

export default {
  plugins: [windicss]
} as Config

これだけでTailwind CSS互換のクラスが使用できます！

linkタグを使用したScoped CSSのサポート (JSX Magic)

import React from 'react'

export default function App() {
  return (
    <>
      <link rel="stylesheet" href="../style/app.module.css" />
      <h1 className="$title">Hello world!</h1>
    </>
  )
}

その他にも様々な改善などが実施されています

  • APIミドルウェアのサポート
  • deno_std/httpからネイティブHTTPサーバ(Deno.serveHttp)への移行
  • VercelのServerless Functionsサポート (https://github.com/alephjs/vercel-aleph)
  • devサーバなどのパフォーマンスの向上

Ultra

Deno+ReactベースのWebフレームワーク

  • ReactDOM.renderToReadableStreamベースのSSR
  • Viteなどと同様のオンデマンドでのコード変換 (SWCやesbuildがベース)
  • SWR向けのキャッシュプロパイダを提供

その他

deno-sqlite v3.0.0がリリース

DB#queryなどのメソッドで型パラメータがサポート、Rowsタイプへの破壊的変更、パフォーマンスの向上などが実施されています。

Oak v9がリリース

Cookie関連のAPIが非同期に変更、Deno Deployのサポートの強化など