esbuild_deno_loaderでフロントのコードも丸ごとバンドル

esbuild_deno_loaderで フロントのコードも丸ごとバンドル ~ DenoとHonoで作る社内ツール ~ ラクスル株式会社 灰原 渉 2024.06.21

プロフィール 灰原 渉 ラクスル株式会社 ラクスル事業本部 エンジニア ● 北海道産 (‘99) ● 学生時代にロボットを作る過程でTCP/IPに出会い、Web開発に流れ着いた。 ● ラクスルには22新卒入社、複数の基盤システムの立ち上げから保守までを担当。 https://x.com/w_haibara © RAKSUL, inc. All rights reserved. 2

• https://x.com/w_haibara

作ったもの : アイキャッチ画像ジェネレーター for テックブログ 目的 テックブログ編集室としての支援策。 エンゲージメント向上 + エンジニアの手間削減 概要 背景画像を選んで、文字を重ねた画像を DLできる。 文字の白黒・サイズ・位置が変えられる。最小構成！ 技術スタック © RAKSUL, inc. All rights reserved. ● Deno ● Hono ● esbuild ● Twind ● Alpine.js 3

作ったもの : アイキャッチ画像ジェネレーター for テックブログ © RAKSUL, inc. All rights reserved. 4

成果物はなるべく小さく、技術選定はなるべく尖る 成果物はなるべく小さく 技術選定はなるべく尖る ソフトウェアにも賞味期限がある。社内ツールは特に手が回らずに 社内ツールは「小さく失敗する」に最適。 腐ってしまいがち。 社内のエンジニアと、今アツい技術シーンとを繋げる役割。 なるべくシンプルな仕様で、コンパクトな実装を目指した。 — 技術者文化の醸成 — ● 背景画像やフォントは固定 そのうえで ... ● 文字色は白と黒のみ とはいえ、保守性が許す範囲で選定。 ● マウスでグリグリ位置調整もやらない → 尖っていて かつ 安定性も期待できる、 Deno/Honoを中心に！ → goclocの結果、たったの 429行！ サーバーには載せずに各自で起動してもらう運用だが、 ＜ 提供開始から半年で問い合わせは 1件のみ！ (それもApple Silicon関連の互換性問題) © RAKSUL, inc. All rights reserved. 5

利用例 © RAKSUL, inc. All rights reserved. 6

もう一歩、尖りたい ... そういえば、フロントエンド側のバンドルはどうしよう ...？ Denoを使って、せっかく node_modules/ なしの開発を体験できているのに、結局フロント側では必要 ...？CDNを使っても良いが ... → ここで Fresh のことを思い出す。 Islands Architectureが採用されているということは、なんとかしているのでは？？ Freshがなんとかしていた！！ ● Denoの npm: specifier ○ NPMで配布されているパッケージを Denoでネイティブに扱える仕組み ● そしてFreshの対応 ○ npm: specifierでimportされたパッケージを Island側(フロント)でも使えるようにしている https://deno.com/blog/fresh-1.2#limited-support-for-npm-specifiers © RAKSUL, inc. All rights reserved. 7

• https://deno.com/blog/fresh-1.2#limited-support-for-npm-specifiers

もう一歩、尖りたい ... そういえば、フロントエンド側のバンドルはどうしよう ...？ Denoを使って、せっかく node_modules/ なしの開発を体験できているのに、結局フロント側では必要 ...？CDNを使っても良いが ... → ここで Fresh のことを思い出す。 Islands Architectureが採用されているということは、なんとかしているのでは？？ Freshがなんとかしていた！！ ● Denoの npm: specifier ○ NPMで配布されているパッケージを Denoでネイティブに扱える仕組み ● そしてFreshの対応 ○ npm: specifierでimportされたパッケージを Island側(フロント)でも使えるようにしている どうや © RAKSUL, inc. All rights reserved. って！ ？ https://deno.com/blog/fresh-1.2#limited-support-for-npm-specifiers 8

• https://deno.com/blog/fresh-1.2#limited-support-for-npm-specifiers

esbuild_deno_loader Freshの実装を眺めてまわる それらしきパッケージ esbuild_deno_loader とPRを発見！ オープンソースのありがたさ。 esbuild_deno_loader Go製バンドラーである esbuildのプラグイン。 このPRの対応により、 Denoのグローバルキャッシュを esbuild に渡せるようになっていた ...！ https://github.com/lucacasonato/esbuild_deno_loader/pull/67 © RAKSUL, inc. All rights reserved. 9

• https://github.com/lucacasonato/esbuild_deno_loader/pull/67

Freshなしでやってみよう ...！ esbuildとesbuild_deno_loaderを自分で使う ● バンドリングの複雑さはしっかり抽象化・隠蔽されているので、 使うのは案外簡単 ● さらにHonoのミドルウェアとして実装することで、 既存実装への追加もシュッとできる → これがフロントのコードとして動くように！ node_modules/ なしで完結！ © RAKSUL, inc. All rights reserved. 10

まとめ ● 技術的チャレンジの機会としての社内ツール制作 ● アツい技術シーンと社内を近づけるきっかけ作り ● Freshはすごい ● オープンソースのソフトウェアからの学びは大きい 詳しくはテックブログでもご覧ください！ → https://techblog.raksul.com/entry/2023/11/08/173335 © RAKSUL, inc. All rights reserved. 11

• https://techblog.raksul.com/entry/2023/11/08/173335

WE ARE HIRING! システムも事業規模も大きくなり、難しくて面白い課題があるフェーズ。一緒に良いシステムを作りましょう！ https://findy.connpass.com/event/314782/ https://techblog.raksul.com/entry/2024/06/14/141816 © RAKSUL, inc. All rights reserved. https://findy.connpass.com/event/319637/ https://speakerdeck.com/yusukekishino/riakitekutiyanoantipata ntosonodui-ce-rakusurunochang-he 12

• https://findy.connpass.com/event/314782/
• https://techblog.raksul.com/entry/2024/06/14/141816
• https://findy.connpass.com/event/319637/
• https://speakerdeck.com/yusukekishino/riakitekutiyanoantipatantosonodui-ce-rakusurunochang-he

RAKSUL をもっと詳しく RAKSUL TechBlog 社員インタビュー https://techblog.raksul.com/ https://recruit.raksul.com/story/archives/engineer/ RAKSUL 公式connpass RAKSUL 公式Ｘ https://raksul.connpass.com/ https://twitter.com/raksuldev © RAKSUL, inc. All rights reserved.

• https://techblog.raksul.com/
• https://recruit.raksul.com/story/archives/engineer/
• https://raksul.connpass.com/
• https://twitter.com/raksuldev

WE ARE HIRING! © 2021 RAKSUL, inc. All rights reserved. 社外秘 Confidential