⛳

Elmo, SWR (Cloudflare), D1, Hyperdrive, ECMAScript他, 2024年4月まとめ

pilefort

2024/04/06に公開

Cloudflare

Edge

idea

2024年4月に発表されたものの検証/調査記事です。

Elmo (Chrome拡張)

Elmoは今開いているページの要約や概要の箇条書き、ページ内容を元に追加質問ができるChrome拡張です。

以下の画像のように、ページの要約や概要などがサイドバーで表示されます。追加質問もできるため、ページの内容を理解するのに便利です。

Elmoのデモ

文章選択時は「Get insight from internet」「Summarize the context」「Rephrase the sentence」「Translate to local language」を利用できます。説明文がよく分からないときにヒントとなる他の記事を探したり、文章の言い換えなどをしてくれます。

文章選択時のElmoの挙動

Chrome拡張のため、PDFなどを開いても利用できます。個人的に、最近話題の論文などをさっと読むのに便利だと感じてます。

Elmoのデモ2

こちらはOpenAIなどのAPIキーの登録は不要で、現状は無料で利用できます。また内部的には、URLやタイトルをElmoのサーバーに送って処理しているので、職場での利用には注意が必要です。

Cloudflare Developer Week 2024

Cloudflare Developer Week 2024が開催されました。CloudflareはCDN EdgeでDBやデータストレージ、GPUなどが利用できるサービスを提供している面白い企業です。

Cloudflare D1 GA

Cloudflare D1はCloudflare Workersを使ってアクセスできるSQLiteベースのDBです。つまり、CDN Edge上にグローバルに展開されており、ユーザーに物理的に近い位置からアクセスできるDBサービスです。

プレリリース当時からかなり注目されており、ShopifyがShopify Hydrogenのバックエンドに使っている時期もありました。

こちらはWebコンソール上からテーブル作成やデータ追加などもできます。

その他にも、メトリクスデータの表示や特定の時期までデータをリストアしたりもできます。

価格も異常に安く、無料プランでも5GBのデータ保存、読み取りは500万行/日, 書き込みは10万行/日まで利用できます^[1]。

Cloudflare Workerで利用できる言語はTypeScriptとPythonになります。TypeScriptを使って、Cloudflare D1へアクセスするサンプルはこのようになります。

wrangler.tomlでDB情報を記述し、env.DB.prepareでクエリを実行します。

wrangler.toml

[[d1_databases]]
binding = "DB"
database_name = "test"
database_id = "6ddef1df-xxxx-yyyy-affd-ae39s546129c"

/src/index.ts

export interface Env {
  // wrangler.tomlで指定したbinding名 (DB) を定義
  DB: D1Database;
}

export default {
  async fetch(request: Request, env: Env) {
    const { pathname } = new URL(request.url);

    if (pathname === "/api") {
      const { results } = await env.DB.prepare(
        "SELECT * FROM Users"
      )
        .all();
      return Response.json(results);
    }

    return new Response(
      "Please Call /api"
    );
  },
};

初期の頃では execコマンドで複数クエリを実行できるという話^[2]もありましたが、パフォーマンス低下や安全性の低下などの問題が起きる可能性があるそうです^[3]。

// migration.sqlに複数のクエリを記述
const migration = await fetch('/migration.sql');
const out = await env.DB.exec(migration.text());
console.log(out);
/*
{
  count: 80,
  duration: 76
}
*/

ちなみに、Cloudflare Worker経由ではなく、API経由で利用することもできます^[4]。

curl --request POST \
  --url https://api.cloudflare.com/client/v4/accounts/account_identifier/d1/database/database_identifier/query \
  --header 'Authorization: Bearer <アクセスキー>' \
  --header 'Content-Type: application/json' \
  --data '{
  "params": [
    "firstParam",
    "secondParam"
  ],
  "sql": "SELECT * FROM myTable WHERE field = ? OR field = ?;"
}'

Hyperdrive

Hyperdriveは既存のPostgres互換データベースへ接続するための前段となるコネクションプールをCDN Edge上でグローバルに管理するためのサービスです。ちなみに、今後はMySQLのサポートもするそうです^[5]。

インフラ的には以下のようになり、HyperdriveとRelational database server間で接続済み状態にしておき、クライアントとHyperdrive間でConnection setupやクエリをリクエストします。クエリがDB変更を伴わないときは、Hyperdriveがキャッシュを返すことでパフォーマンスを向上させています。

画期的ではありますが、現状ではDBをPublicに公開しておく必要があります。ただ、Magic WANやCloudflare Tunnelを使ったプライベート接続のサポートも考えているそうです^[6]。いつかはPrivate VPC内にあるDBへも安全に接続できるようになると嬉しいです。

Prisma

PrismaがCloudflare WorkersやD1でネイティブにサポートされるようになりました。

Workers Browser Rendering API GA

こちらはCloudflare Workers上でPuppeteerを操作し、ページのスクショやPDF化、テストをするためのAPIです^[7]。

GitHub ActionsやCircleCI上でPuppeteerやPlaywrightを使うこともできますが、結構面倒なので、Cloudflare Workers上で割と簡単にできるのは便利かもしれません。

SWRのサポート (予定)

SWR (Stale-While-Revalidate) はRFC 5861で提唱されたHTTPのキャッシュ戦略です。有名なところで言うと、この仕組みを模倣したVercelのSWRライブラリなどがあります^[8]。

SWRはクライアントからリクエストがあった際に、先にキャッシュを返し (Stale)、その間 (While) にバックエンドでリソースの確認をして、キャッシュの更新をする (Revalidate) 戦略のことです。

Cloudflareでは2024年後半からSWRの設計に則ったキャッシュ機構を提供予定だそうです^[9]。

Amazon ECR Basic scanning (preview)

Amazon ECRで、コンテナイメージの脆弱性チェックの改善版が試せるようになりました^[10]。

元々はOSSのClairを使用して脆弱性診断をしてましたが、AWS謹製の脆弱性診断ツールで脆弱性チェックができるようになったとのことです^[11]。Clairだと、具体的に何ができてなくて、AWS謹製だと何ができるようになったのかは不明です。

ESLint v9.0.0

FlatConfigがデフォルトになりました。こちらは新しいESLintの設定ファイルの書き方になり、既存の書き方からそのまま移行はできないので、読み替えが必要になります。

extオプションも使えなくなるため、eslint --ext .ts,.tsx .なども実行不可になります。lintの対象ファイルもFlatConfigで記述するようになります。

また、ESLintを統合しているNext.jsなどを利用している場合は、フレームワーク側のアップデートも合わせてやる必要があります。

Fast JSX (React19)

以前のReactでは、JSXを生成する際に propsオブジェクトをクローンし、内部で利用していました。この度、このクローンして内部で利用する仕様を廃止したため、JSXの生成、レンダリングが高速になる可能性があるそうです。

ECMAScript

4月に「Duplicate named capture groups」と「New Set methods」がFinished Proposalsに達しました。

Duplicate named capture groups

named capture groupsは、正規表現で合致した部分に名前を付けて、後からアクセスできるようにする機能です。例えば、以下のように正規表現の結果を<year>で保存し、後からxx.groups.yearという形で値を取得できます。

const g = "2024-04-29".match(/(?<year>[0-9]{4})-[0-9]{2}/)
g.groups.year // 2024

ただし、以下のように正規表現のパターンが複数ある場合は、同じ名前を付けて保存することができませんでした。

const g = "2024-04-29".match(/(?<year>[0-9]{4})-[0-9]{2}|[0-9]{2}-(?<year>[0-9]{4})/)

この度の「Duplicate named capture groups」では、こちらの問題を解決し、複数の正規表現のパターンでも同じ名前を付けて保存できるようになります。こちらはSafariでは既に対応しており、以下のように利用できます。

Safari

Chromeではエラーになります。

Chrome

New Set methods

集合に関して以下のメソッドが利用可能になりました。いわゆる集合演算です。こちらはブラウザ側では既に対応済みです。

Set.prototype.intersection(other)
Set.prototype.union(other)
Set.prototype.difference(other)
Set.prototype.symmetricDifference(other)
Set.prototype.isSubsetOf(other)
Set.prototype.isSupersetOf(other)
Set.prototype.isDisjointFrom(other)

Google Cloud Next'24

Geminiがいろんな製品やサービスで利用できるようになったという発表が多くされました。

Google WorkspacesでGemini BusinessやGemini Enterpriseに課金することで、Googleドキュメントで文章の自動生成をしたり、Google Slideで画像生成したりできます (ただし、英語のみ対応。個人プランは現状利用できない)。

性能に関しては、簡単に試した限りだと、OpenAIやClaude, DALL・EやStable Diffusionに比べると微妙です。

Gemini 1.5 Pro

こちらの動画の24:07で紹介されてます。入力データが1Mトークンまで増え、動画や音楽なども入力できるようになったそうです。

OpenAIですら、32Kトークンが現状の上限なので、かなりトークン数が多いです。また、動画は1時間、音楽は11時間まで入力して、動画や音楽について質問できるらしいです (性能に関してはよく分からない)。

https://youtu.be/V6DJYGn2SFk

Google Vids

上記動画の1:03:19あたりで紹介されてます。こちらは動画の自動生成サービスです。

Google ドキュメントなどの文章を読み込ませて、動画のアウトラインを生成。アウトラインの微修正などをし、動画のスタイルを決めると動画が生成されるみたいです。

Text-to-Live Image

1:06:23あたりで紹介されてます。こちらはStable Video Diffusionみたいなサービスです。短時間の動画を生成するのが得意そうです。

脚注

GitHubで編集を提案

AlleeksテックブログPublication