はてなブックマーク

D1はローカルで動く 5月にClouflare D1が発表されました。ヤバいらしいです。 まだベータすら出てません。PrivateなEarly Accessがありますが、僕はもらってません。でも早く触ってみたい！じゃないっすか。で、よく見てみると、Cloudflare Workersのローカル実行環境のMiniflareにはD1をエミュレートするブランチがもうすでにあるのです。 また、Cloudfalre Workersの公式CLIであるWranglerはそのMiniflareをローカル向けに内包しています。そしてWranglerにもD1に対応させたブランチがあります。ちょっと前まで動かなかったけど、最近動くようになりました。 ってことは、D1はベータすら出てないけど、ローカルでは動くということで、はじめてのD1アプリを作ってみました。 Internal 作る前にMiniflareとWra

HonoというWebフレームワークを作っています。 当初はCloudflare Workers向けに作っていたのですが、同じCDNであるFastlyのエッジランタイム、Compute@Edgeでも動くことが分かりました。また、Next.jsのEdge MiddlewareもしくはEdge API RoutesとしてVercelの環境でも動きます。そして、少々手を加えるとDenoでも動きました。もちろんDeno Deployにもデプロイできます。さらに、先程レポジトリが一般公開されたYet AnotherなJavaScriptランタイムのBunでも手を加えず動きました。 この「CloudflareでもFastlyでもVercelでもDenoでもBunでも動いた件」が、なかなか面白かったのでそれについて書きます。 Web標準のAPI これらの環境で同じように動くのは、JavaScriptでかつ

React18のストリーミング機能とCloudflare WorkersやDenoのStreams APIが気になっていたので、それらを組み合わせて遊んでみた。というかこの2つの組み合わせこそがReactのやりたいことだと思います。ところで、Reactよく分かってないので、ツッコミどころあるかもしれませんが、優しくしてください。 やりたいこと SSRしたHTMLをStreamで返却し、コンテンツの準備ができたらSuspenseの内側だけを差し替える。これを全部、HTTP Streamingでやるのがミソ。結果当然ながら、パフォーマンスが上がったりいいことが起こる。 Suspense ReactのSuspenseとはたぶん、Suspenseの外側を先に描画して、Suspenseの内側で投げたPromiseが完了するまでにfallbackを表示するってことだと思います。外部APIのレスポンスを

Edge Runtime が出た Vercelからいつの間にかEdge Runtimeなるものが出てたので、遊んでみた。 Web標準のAPIを使ったエッジ環境で動くアプリケーションの開発やテストを助けるツールキット。Edge環境はNode.jsじゃないし、evalが使えなかったりするので、それをシミュレートできる。 The Edge Runtime is a toolkit for developing, testing, and defining the runtime Web APIs for Edge infrastructure. 第一行目に「Vercel」とか「Next.js」の文字がないのがよい。とはいえ、一番の想定はVercelのEdge Functionsでしょう。 Edge Functionsってのは今のところ2つあるみたい。どちらもVercelもしくはNext.jsの機

Cloudflare Workers向けのフレームワーク「Hono」にJSXミドルウェアが追加されたので、その紹介をします。HonoはCloudflare Workers向けのWebフレームワークです。Honoはビルトインミドルウェアが豊富で、今回紹介するものはそのひとつです。 概要 簡単に紹介すると、JSXのシンタックスとテンプレートリテラルでHTMLをかっこよく書けます。そして、非常に高速にSSRされます。以下のコードを見てください。これがCloudflare Workersのエッジで動くのです。 import { Hono } from 'hono' import { html } from 'hono/html' import { jsx } from 'hono/jsx' const app = new Hono() const Layout = (props: { childr

cloudflaredというアプリケーションがありましてー、Cloudflare Tunnelという仕組みを実現するってことは知っていましたが… これがCloudflare Workersと組み合わせるとすごいよい。 Wrangler 2.0 Cloudflare Workersを開発する際に避けて通れないのがWranglerというCLIです。Cloudflare Workersの環境をローカルでエミューレートしてくれて、publishまで面倒見てくれます。そのWranglerの「2.0」ベータが出てます。 設定無しでindex.jsを引数にすればいきなりdevサーバーが立ち上がったり、ライブリロードできてそれが割と高速だったりで、「B」押すだけでブラウザ立ち上がったりと便利なんですが、 S to turn on (experimental) sharing というコマンドがありました。

Cloudflare Workersは「CDNのエッジで動く」という特徴だけでなく「サーバーレス」の環境としても非常に優秀です。プロジェクトの作成からデプロイまで「4ステップ」で出来ます。 自動的に {project-name}.{user-name}.workers.dev といったURLを発行してくれて、すぐさま公開されます。この手軽さとスピード感はヤバい。スクリプトのサイズが1MB以内、使えるAPIが極端に限られているなど制約がありますが、それはそれで単一機能のシンプルなアプリケーションを作る気にさせてくれます。 さて、このCloudflare WokersでWebアプリを作っていたのですが、だんだんとCloudflare Workersに特化した「Webアプリを作るためのフレームワーク」を作りたくなってきました。手段の目的化です。ということで作り始めました。「Hono[炎]」という