「LINEヤフー × Deno Land Inc. Meetup」に参加してきました

• 2025/2/17
• https://lycorptech-jp.connpass.com/event/341189/

Deno Update: 最近のフロントエンド向け機能の紹介

@kt3kさん(Deno Land Inc.)
https://kt3k.github.io/talk_deno_frontend/

• Denoでフロントエンド
  • サーバーサイドは書き心地いい
  • フロントエンドも最近良くなってきてる
• Reactの型付け
  • jsxImportSouce
  • jsxImportSourceTypes
  • ts-types
  • ファイルのコメントでも書けるしdeno.jsonにも書ける
• フロントとバックエンドが混在する場合の型
  • deno.jsonにブラウザと設定すると全体に波及してしまっていた
  • workspaceの概念ができてそれぞれにdeno.jsonを置けるようになった
  • Deno2.2から使える
• deno lint
  • フロントエンドのルールはなかった
  • 2.2からRules of hooksが使えるようになった
  • jsx系のルールもたくさん
  • lint/rules/tagsにreactを追加すると適用される
  • カスタムルールも書ける
• フォーマッター
  • 1.46からhtml/cssはdeno fmtでフォーマットされる
  • SaSSなども対応
  • CSS in JSはまだ

LINEスキマニのフロントエンド開発にDenoを採用した理由

@kazushikonosuさん(LINEヤフー)

• Next/NodeからReact/Viteに置き換えた
  • SSRやめた
• Nodeへの依存はなしでDenoに乗っかってる
  • ViteやVitestは全部Deno上で
• Denoでtscして型チェック
  • テスト用も含めてtsconfigを管理
• prettierやESLintは使ってる
• package.jsonの脱却

Honoをフロントエンドで使う3つのやり方

@yusukebeさん(Cloudflare Inc.)
https://speakerdeck.com/yusukebe/honowohurontoendodeshi-u-3tunoyarifang

• Honoはもともとバックエンド目的のフレームワーク
  • リクエスト受けてjson返す
  • リバースプロキシ的な使い方
• Honoがhtmlなどを返す
  • Hono上でSSRする
  • レスポンスとしてhtmlを返す
  • jsxを使うこともできる
    • tsconfigにhono/jsxを指定してtsxを使う
    • reactはなくてもjsxは使えるようにしてくれてる
  • honoでSSRしてクライアントのjsをバンドルできる
    • @hono/vite-dev-server
  • ガワのhtml返してAPI叩くようなSPAが作れる
    • ガワのhtmlでscriptタグでクライアントのjsを読み込む
  • HonoXでSSRしたものにJSを注入できる
    • island的に必要なところにハイドレートできる
• Hono上でフロントエンドフレームワークを動かす
  • フロントエンドアプリをHonoのmiddlewareにする
  • hono-react-router-adapter
    • ReactRouterをHonoの上で動かすためのアダプタ
  • Honoを経由してフロントエンドアプリにアクセスがいく
    • Honoのmiddlewareを通すことができる
    • ルートによってそのままHonoのレスポンスも返せる
• フロントエンドフレームワークの中でHonoを使う
  • NextでHonoを使う
    • APIをHonoで動かす
    • /apiを全部受け取ってHonoで処理する