技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
OAuthの仕組みを説明してHonoで実装してみる
はじめに はじめまして！レバテック開発部でレバテックプラットフォーム開発チームに所属している塚原です。 直近に認証・認可周りの改修を予定しているため、チーム内で認証・認可の基礎からOAuth・OpenID Connectの仕組みを学ぶ勉強会を実施しました。今回はそこで学んだことのうち、認証・認可の基礎とOAuthの仕組みをまとめます。また、WebフレームワークとしてHono、JavaScriptランタイムとしてBunを使って、OAuthクライアントを実装してみます。 対象読者 認証と認可の違いってなんだっけ...?という人 Basic認証やDigest認証てなんだっけ...?という人 OAuthはライブラリ使って実装してるから仕組みよくわかっていない...という人 OAuthのクライアントの実装って何をすればいいんだっけ...?という人 認証・認可の基礎 2024/7/18 追記 こちらで
こんにちは！ラクスルの灰原です！ 軽量かつ高速なWebフレームワークであるHonoと、新進気鋭のJSランタイムであるDenoを使って、社内ツールを作ってみましたので紹介します。 作ったツール 技術スタック index.tsx の内容 Tips HonoでTwindを使う HonoのJSXでAlpine.jsを使う Hono+Denoでesbuildを使う おわりに 作ったツール テックブログ向けのアイキャッチ画像ジェネレータを作りました。 タイトルを入力して、 背景画像と文字色を選んで、 文字の位置と大きさを調整して、 後は「Download」ボタンを押せば画像が手に入ります。 これは以前、弊社デザイン組織で作られた「Zoom背景ジェネレータ」に多分に影響されています。 こちらのデザイナーブログも是非ご覧ください！ note.com 技術スタック このツールは利用頻度がそこまで多くないと思
概要 速さが正義 LINE Botの開発でCloudflareとHonoを使う理由 Cloudflare Workersの応答速度が速いから PoPについて CloudflareはAWSのlambdaに比べてポイントオブプレゼンス（PoP）の数が多く、処理が実行される場所がよりユーザーの近くにある可能性が高い。 そのため、パフォーマンステストではAWS Lambda、AWS Lambda@Edgeよりも応答時間が小さいという結果になった。 コールドスタートがない Cloudflare Workersはコールドスタートがなく、LambdaとLambda@EdgeのようにEventBridgeで1分おきにツンツンしなくていい。 Service bindingsが便利だから Cloudflare WorkersのService bindingsを使用することで、worker間の通信はパブリックに
OpenAI APIで英会話LINE Botを作る with Hono + Cloudflare Workers + Queues + D1 - $shibayu36->blog;
Cloudflare Worker + D1 + Hono + OpenAIでLINE Botを作るを見て、Cloudflare Workersに興味を持った。そこでLINEで英会話や添削ができるbotを作ってみた。 作ったもの こんな形で英会話をしたり、英作文テーマを作ってくれたり、添削をしてくれたりする。 実際のコードは https://github.com/shibayu36/english-line-bot 。このコードをforkしてもらって、LINEチャネルの作成、Cloudflareへのデプロイ、src/prompt.tsのカスタマイズをすると、自分用のLINE botも作れると思う。 利用技術 OpenAI API Hono Cloudflare Workers Cloudflare Queues Cloudflare D1 開発Tips 基本的な作り方は Cloudflar
Honoで見直すMPAの開発者体験
Next.js App Routerのリリース以降、 async function で書けるServer Componentsいいじゃんファイルベースルーティングも使いやすいなと触ってたのですが、まだ安定していないこともあり不可解なエラーメッセージや複雑なキャッシュの仕組み、デプロイ先を選ぶ感じなどこのままNext.jsにベットしてていいのかなと感じていました。 そんな折にHonoでシンプルなフォームを持つWebアプリを書く機会があり、非常に優れた開発者体験に驚きました。5年以上前にMPAを開発した経験もありますがそこから比べてもとても良くなっていて、Honoの良さを感じるとともにMPAというアプローチを見直すきっかけになりました。 そもそも現在Webフロントエンドを構築する際に当たり前のように選択肢に上がるSPAですが、必ずしもSPAが適していない場合でもSPAが選択されることが少なくな
HonoでAPI付き雑React SPA最小
laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。
Cloudflare Workersは「CDNのエッジで動く」という特徴だけでなく「サーバーレス」の環境としても非常に優秀です。プロジェクトの作成からデプロイまで「4ステップ」で出来ます。 自動的に {project-name}.{user-name}.workers.dev といったURLを発行してくれて、すぐさま公開されます。この手軽さとスピード感はヤバい。スクリプトのサイズが1MB以内、使えるAPIが極端に限られているなど制約がありますが、それはそれで単一機能のシンプルなアプリケーションを作る気にさせてくれます。 さて、このCloudflare WokersでWebアプリを作っていたのですが、だんだんとCloudflare Workersに特化した「Webアプリを作るためのフレームワーク」を作りたくなってきました。手段の目的化です。ということで作り始めました。「Hono[炎]」という
![Hono[炎]っていうイケてる名前のフレームワークを作っている](https://cdn-ak-scissors.b.st-hatena.com/image/square/eaca1c6dcc954189f470035c2c3b14c4b1aef959/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--y8Q1KJtg--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AHono%25255B%2525E7%252582%25258E%25255D%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252581%252586%2525E3%252582%2525A4%2525E3%252582%2525B1%2525E3%252581%2525A6%2525E3%252582%25258B%2525E5%252590%25258D%2525E5%252589%25258D%2525E3%252581%2525AE%2525E3%252583%252595%2525E3%252583%2525AC%2525E3%252583%2525BC%2525E3%252583%2525A0%2525E3%252583%2525AF%2525E3%252583%2525BC%2525E3%252582%2525AF%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ayusukebe%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2pIMWY1VlpnSFMwLUJwekhzZjRGYXN0R1ZYTlpfZFh1U2pwdWNMNGc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
BunとHono
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
「Honoはあくまでオープンソースプロダクト」開発者でコントリビューターの私が会社員になった理由 - Findy Engineer Lab
▲ YAPC::Asia Tokyo 2013でベストトーク賞1位を獲得し表彰される和田裕介さん（写真提供：Japan Perl Association） エッジコンピューティング環境に適したWebフレームワークとして注目を集める「Hono」の開発者として知られる和田裕介（@yusukebe）さん。大学院卒業後に就職の道を選ばず起業し、その後は17年にわたりフリーランスのエンジニアとして活躍してきましたが、2023年4月に初めて就職しました。 世界最大級のCDN（Contents Delivery Network）プラットフォームを提供するCloudflareが「Hono」に注目し、和田さんをスカウトしたことがきっかけです。Cloudflareに入社した和田さんはサーバレス環境「Cloudflare Workers」上での開発者体験（Developer Experience）の向上を職務と
見よ、これがHonoのRPCだ
僕が開発しているWebフレームワークHonoは、同じJavaScriptのフレームワーク、Expressと比べられることが多いです。どちらもやれることはほぼ同じですが、HonoのアドバンテージはファーストクラスでTypeScriptをサポートしていることです。特に「RPC」機能は他のフレームワークにはなかった「TypeScriptの型でサーバーとクライアントの仕様を共有する」ことを可能にしています。今回はそのHonoのRPCについて紹介します。 どんなものか まず、どんなものかを箇条書きで共有します。 Web APIの仕様、特にインプット・アウトプットをサーバーとクライアント間で共有するためのもの OpenAPIやgRPCを使ってやりたかったことを叶えるかもしれない サーバーとクライアントをどちらもTypeScriptで書くことが大前提である 同種のものにtRPCがあるが、Honoの場合、
cloudflare d1とhonoで5ch型掲示板を作ってみた - 作ったもので2年に一回くらいの更新を目指す
作ったものはここに動いているので、ちょっとでも見ていってくれると嬉しい。 d1ch.cc 作った動機 この記事で、Cloudflare d1というサービスが開発されつつあることを知った。 zenn.dev 簡単に言うと、Cloudflare WorkersというCDNのエッジノードで動くFunctionサービスがあって、Cloudflare d1はそこにSQLiteも配置しちゃうぜ大作戦。 SQLiteは単なるファイルをDBとして使う技術であり、常駐するサーバープロセスが必要ないので、他のミドルウェアに比べるとかなり安くなりそう。安価なDBサービスを探していた自分も興味を持って色々と試していた。 大規模に使う場合、ホットスポットが予想して、アクセスが少ないものは他のストレージに退避しつつ、部分的に乗せる、みたいな工夫が必要になるかもしれません。 ただこれも D1 で sqlite テーブル
Honoの今の状況 - ゆーすけべー日記
この記事は2023 JSConf JPで発表したHono v3 and v4を元に11月17日に書いたCloudflare社内のブログ記事「Current Status of Hono」を日本語に訳した記事です。 Honoの「Initial commit」からおおよそ2年が経ちました。このプロジェクトは2021年の12月15日に始まりました。 当初、私はCloudflare WorkersのみのためにHonoを作りました。itty-routerはよかったものの、私が欲しかった多くの機能が欠落していました。また、私は勉強のためにTrie木構造のルーターを作りたかったのです。それがHonoの生まれた理由です。 それから多くのことが起こりました。私がCloudflareにいるのもHonoのおかがです！HonoはCloudflare開発者コミュニティで認知されていきました。Honoの人気が出ること
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
Hono + htmx + Cloudflareは新しいスタック
HonoとDenoで社内ツールを作ってみた - RAKSUL TechBlog
LINE Botの開発でCloudflareとHonoを使う理由
Hono[炎]っていうイケてる名前のフレームワークを作っている