これまでHonoは数々の新しいことを提供してきました。正規表現を活かしたルーター、サーバーサイドの軽量JSX、TypeScriptの型によるRPC、Web Standardを使ったマルチランタイム対応などなど。アイデアと実装力で世界と戦って来たわけです。 本日私達が紹介するのは「Hono CLI」です。 Hono CLIは全く新しいコンセプトのコマンドラインインターフェースです。 create-* ではありません ただの開発用(dev&build&deploy)のコマンドではありません Viteのラッパーではありません 人間とAIのためのCLIです。インストールすると のようにhonoコマンドを使うことができます。5つのサブコマンドがあります。 hono docs hono search hono request hono serve hono optimize では一つ一つを見ていきまし
Hono CLI 爆誕Cloudflareの開発者プラットフォームには様々なプロダクトがあります。例えば、オブジェクトストレージのR2、SQLデータベースのD1、AIモデルが動くWorkers AIなどです。Cloudflare Workersの中でこれらを使う時に欠かせないやり方が「Bindings」です。Workers特有ですが、Bindingsを使うと、SDKを使って外部サービスとつなぐことが必要なくなります。シークレットを文字列の環境変数で扱うケースが少なくなります。JavaScript/TypeScriptのオブジェクトとして外部サービスを使うことができるDXは快適です。このBindings、知らない人も多いと思うので、紹介します。 AIを12行で実装する Bindingsの感覚を掴むために、実装をみてみましょう。Workers AIをCloudflare Workersの中から使います。 まずwra
Cloudflare WorkersのBindingsというやり方Cloudflareという会社でDeveloper Advocateとして働いています。この「Developer Advocate」というのはなかなかレアなロールで、馴染のない方も多いと思います。僕も他の同じロールの人たちがどんなことしてるのかを十分理解しておらず、人によってやってることは様々です。 今回はDeveloper Advocateについて理解するきっかけとして、僕が日々どんなことをしてるのかを紹介します。 発端 そもそもどうやってDeveloper Advocateになったか。Cloudflareへの入社の経緯は以前書きました。 そこでも触れている通り、当初はシステムエンジニアとして声をかけてもらったのですが、当時の部長にあたる人から 開発とAdvocateどっちがやりたいんだ? と聞かれて「Both」と答えた結果Developer Advocateになりました。質問された時点
Developer Advocateという仕事この記事は2024年10月22日に行われた「さくらじまハウス 2024」で発表した「Honoの来た道とこれから」の内容を、先ほど口頭で喋って文字起こして修正したものです。 アジェンダ 今日はHonoの来た道とこれからという題名で話していきたいと思いますゆーすけべーと申します。よろしくお願いします。今日のアジェンダですけども、Honoの現在の状況とメインのHonoの来た道とこれからということを紹介したいと思います。「これから」は少なく「来た道」というのが焦点になっていてそれぞれをトピック別で紹介していきたいと思います。 Honoとは? まずHonoとはという話をしたいんですが今回はですね、文字起こし版ということで省きます。 紹介したいのはイニシャルコミットということで最初のコミットが2021年12月15日になりましてもうすぐ3年経ちます。もうちょうど3年経ちますね。結構長い間やっているプロジ
Honoの来た道とこれから 文字版!僕が開発しているWebフレームワークHonoは、同じJavaScriptのフレームワーク、Expressと比べられることが多いです。どちらもやれることはほぼ同じですが、HonoのアドバンテージはファーストクラスでTypeScriptをサポートしていることです。特に「RPC」機能は他のフレームワークにはなかった「TypeScriptの型でサーバーとクライアントの仕様を共有する」ことを可能にしています。今回はそのHonoのRPCについて紹介します。 どんなものか まず、どんなものかを箇条書きで共有します。 Web APIの仕様、特にインプット・アウトプットをサーバーとクライアント間で共有するためのもの OpenAPIやgRPCを使ってやりたかったことを叶えるかもしれない サーバーとクライアントをどちらもTypeScriptで書くことが大前提である 同種のものにtRPCがあるが、Honoの場合、
見よ、これがHonoのRPCだ前置き 4月の第1週に行われたCloudflare Developer Week 2024でAIやデータベース関係のアップデートの影に隠れ、WorkersをつくってるKenton氏のブログが2つ投下されました。 そして「JS RPC」という機能が追加されました。 これが一見地味なんですが、非常に楽しい未来を想像できるので、書いてみます。というか以前chimameさんが書いた記事でだいぶ理解できるのですが、もう少し噛み砕いて書いてみます。 Bindings Cloudflareにはいくつもプロダクトがあります。ストレージのR2、データベースD1、KVストアのKVなどです。そしてそれらに繋ぐ方法が「Bindings」という方法です。このBindingsで繋げられるものはたくさんあります。 AI Analytics Engine Browser Rendering D1 Environment
Cloudflare WorkersのJS RPCを理解する先日行われたCloudflareのDeveloper Week 2024の記事の中にPicsartというサービスの事例記事がありました。 よくよく読んでみると「Cloudflareを導入したらパフォーマンス上がった」という簡単なセリフでは済まされない努力と工夫が書かれていました。非常に面白いので、自分なりに噛み砕いた要約を書いてみます。コードはあまり出てきませんがテクニカルな内容になっています。 Picsartとは そもそもPicsartとは?ということなんですが、iOSとAndroidのモバイルデバイスとWebに対応した、世界的なオンラインの写真編集サービスです。 Wikipediaによると180カ国で10億ダウンロードを超えているとのことです。 問題 Picsartには固有の問題がありました。 各アプリの起動時にクライアントデバイスは1.5MBの設定ファイルをダウンロードする クライア
Cloudflare WorkersとKVを使ってパフォーマンスを上げる話Cloudflare PagesでURL短縮サービスを作ってみましょう!これを作ることであなたは以下を体験することができるしょう。 HonoでWebページをつくること Cloudflare KVをアプリケーションの中で使うこと アプリケーションをCloudflare Pagesへデプロイすること アプリケーションの特徴 今回作ってもらうアプリケーションはこのような特徴があります。 Viteを使って開発 UI付き JSXを使ってHTMLを書ける メインのコードは100行以下! Zodを使ったバリデーション バリデーションエラーも表示 簡易なCSRF対策 デモ 完成品を使っている様子です。 完成品 完成済みのコードは以下にあります。 アカウント 今回、アプリケーションを作ってCloudflare PagesへデプロイするにはCloudflareのアカウントが必要です。無料の範囲で遊べるので、も
Cloudflare PagesでURL短縮サービスをつくる!laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境(API付き!)作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。
HonoでAPI付き雑React SPA最小X dayは2月9日です! ということで、Honoの現在のバージョンはv3系なのですが、v4を2月9日にリリースする予定です。偶然にもYAPC::Hiroshima 2024の前夜祭の日ですね。 当初はdeprecatedな機能を廃止したいという「ポジティブではない」理由でメジャーバージョンアップをしたかったのですが、大きな機能が入ることになりました。ずばりこの3つです。 Static Site Generation Client Components File-based Routing お分かりの通り、よりフルスタックなフレームワークに進化します。今回は2月9日に先駆けてこの3つの機能を軽くオーバービューしてみましょう。 RC版 v4のRC版が出てます。現在は4.0.0-rc.3が最新なので以下のコマンドでインストールできます。 npm create honoで作ったプロジェクト内で実
Honoのv4が2月9日にリリースされます昨日、HonoのNode.jsアダプタのv1.3.0をリリースしました。これまでのものより2.7倍速くなるパフォーマンス向上が含まれています。 このリリースは「2.7倍」という数値以上にHonoにとって大きなものになりますので、それについて解説します。 Request/Responseの翻訳 HonoはWebスタンダードAPIのみを利用したWebフレームワークで、WebスタンダードAPIのみで構成されたものがWebアプリになるうるランタイムのみを対象にしていました。具体的には、Cloudflare Workers、Deno、Bun、Fastly Computeなどです。 Honoを使わない例を出すと、以下のコードはWebスタンダードのみを利用してる非常に素朴なものですが、これだけでCloudflareでもBunでも立派にWebアプリになります。
HonoのNode.jsアダプタが2.7倍速くなりました先日リリースしたv3.9.0でHonoの「Cloudflare Pages」のスターターテンプレートが新しくなりました。 これがなかなか面白いので詳しく紹介します。 使ってみる 使ってみてください。create honoコマンドを使います。C3(Create Cloudflare CLI)コマンドでもHonoを選べますが今のところそれだとWorkersのテンプレートになるのでcreate honoで。npmの場合は以下です。 選択肢がでてくるのでcloudflare-pagesを選びます。 そしたら、ディレクトリに入って、npm installしてnpm run devすれば開発サーバーが立ち上がり、npm run deployすればデプロイできます。 Viteベース で、以前からCloudflare Pages、もしくはWorkersも含み、Honoでアプリ開発をしていた人はこのスタータ
Honoの新しいCloudflare Pagesスターターについてこの記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに(私はフレームワーク開発者なのですが)フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ!」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
Hono + htmx + Cloudflareは新しいスタックJavaScriptのランタイム、Bunのv1.0がリリースされましたね 🎉 さて、僕がメインとなって開発しているHonoはBunと関係があるので、その話をします。 hono Express or KOA Bunのリリース時に使われた動画がかっこいいです。まるでApple。 この中で作者のJarredから肉まんのパスを受けるのがBunのDeveloper AdvocateでZodの作者のColinです。彼は「Web APIを作るためのフレームワーク」として以下のように言いました。 hono Express or KOA おおー。Express、Koaより前に来てていい感じですね。上記で貼ったリリースノートには順番が変わってますが、しっかりと名前が出てます。 Bun is tested against test suites of the most popular Node.js pack
BunとHono題名に「CDN」と書きましたが、いわゆる「エッジ」のことです。オリジンありきなのであえてCDNと呼びました。とはいえ、オリジン自身がエッジにある可能性もあります。 メタフレームワークを作る Sonikというメタフレームワークを作っています。まだDevステージなんでどんなことができるか可能性を探っている最中です。 このフレームワークの特徴はとにかくエッジファーストです。 SSRしたバンドルの大きさを極力小さくする。 Islandsアーキテクチャを採用する。 DenoのFreshを参考にする。 CloudflareのBindingsを扱いやすくする。 Honoの上に乗せる。 とりあえずStreamingはサポートしない。 で、こういうのを作っていると、フレームワークは最小限にして、Core Web Vitalsのスコアを上げるために身を削る最後の部分はCDNに任せてしまった方がいいってことです
最適化はCDNがやればいいCloudflareのDeveloper WeekではAI基盤のConstellationや、HTTP以外のTCP接続が可能になるconnect()、PlanetScaleやSupabaseなどのデータベース統合など魅力的な製品の紹介やアップデートがありました。これらを活用することでよりフルスタックなアプリケーションをエッジ上で構築する事が可能になります。 また、Cloudflareに限らず、FastlyでもCompute@Edge上でNext.jsが動いたり、先日KVストアが導入されたDeno Deployではエッジ上でリッチなアプリケーションをつくるこができます。 一方、CDNのエッジで実行されることの醍醐味のひとつに「オリジンを活かす」ことがあります。オリジンに対しての「リバースプロキシ」です。「フルスタック」に目が行きがちですが、エッジコンピュートはリバースプロキシに新しい風を吹き
Cloudflare WorkersプロキシパターンHonoのv3.2が出ました。 今回のアップデートについて、リリースノートとほぼ同じ内容ですが、書きます。 Honoのステータス ちなみに現在のHonoのステータス。GitHubスターは4.4Kとなっています。 新しい機能 今回はマイナーアップデートとなります。破壊的変更は含まれないものの、大きな機能がいくつか追加されました。 2つの新しいルーター: LinearRouter and PatternRouter プリセットという概念と実装: hono/tiny, hono/quick app.mount() Node adapter serverの初のメジャーバージョン「v1.0.0」がリリース AWS Lambda function URLsのサポート Cookie Middlewareの追加 hono/nextjsからhono/vercelへのリネーム ではひとつずつ見ていきましょう。
Honoのv3.2が出ましたRemixをNext.jsのEdge API Routesで動かしてみたら、動きました。何が嬉しいのかわかりませんが、可能性の追求です。 Edge API Routes Next.jsのEdge API RoutesというのはVercelのEdge Runtimeで動くことを前提したAPIを生やす機能です。つまりWeb Standardベースのエッジで動くAPIが/api/*以下で動きます。 一方RemixはWeb Standardをベースにした環境でも動くことが売りで、Cloudflare Workers/PagesだけではなくVercelでも動きます。 ということはなんとなくVercelの上で動いているNext.jsのEdge Runtime Routes上でRemixを動かせそうな気がします。 Request/Response これ系の、つまりWeb Standardを使ったエッジで
RemixをNext.jsで動かす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でかつ
CloudflareでもFastlyでもVercelでもDenoでもBunでもService Workerでも動く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の機
Edge Runtimeで遊んでみるリリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く