Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
Search
ayame113
March 14, 2025
Programming
5
1.5k
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
toranoana.deno #20 発表資料
ayame113
March 14, 2025
Tweet
Share
More Decks by ayame113
See All by ayame113
DenoとHonoでWebAuthnを使ったログインを実装する
ayame113
1
1.3k
Other Decks in Programming
See All in Programming
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.7k
AIのメモリー
watany
13
1.4k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
980
画像コンペでのベースラインモデルの育て方
tattaka
3
1.6k
Understanding Ruby Grammar Through Conflicts
yui_knk
1
100
自作OSでDOOMを動かしてみた
zakki0925224
1
1.3k
Comparing decimals in Swift Testing
417_72ki
0
170
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.8k
令和最新版手のひらコンピュータ
koba789
13
7.6k
新世界の理解
koriym
0
130
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
860
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
910
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Bash Introduction
62gerente
614
210k
Done Done
chrislema
185
16k
Embracing the Ebb and Flow
colly
86
4.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
BBQ
matthewcrist
89
9.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Transcript
バックエンドNode.js × フロントエンドDeno で開発して得られた知見 ayame113 1
自己紹介 2
自己紹介 • ayame113 • 所属:株式会社ヴァル研究所 ◦ 「駅すぱあと」乗換案内の会社です •
新卒1年目です! • 業務ではNode.jsでバックエンドを書いてます • DenoにOSSコントリビュートしてました 3
Node.js × Deno構成で得られた知見 4
つくっていたもの • 単純な予約ツール • バックエンド:Node.js / Firebase / Cloud Run
• フロントエンド:Deno Fresh 5
なぜこの構成にした? • Denoが使いたかった • 最初は全部Denoで書くつもりだった • 途中でDenoで使えないnpmライブラリに遭遇し、 バックエンドのみNode.jsに移行 ◦ 当時はFirebase
Authenticationが動かなかった(1年くらい前) 6
今日話したいこと 1. Node.jsとDenoを共存させるための設定 2. よかったポイント、つらみポイント こういう人に聞いてほしい: Node.jsを使っている人で、これから徐々にDenoを導入していきたい人
7
Node.jsとDenoを 1プロジェクトで組み合わせるには? 8
ディレクトリ構成 . ├── backend バックエンド(Node.js) │ ├── src │ ├──
package.json │ └── tsconfig.json └── frontend フロントエンド(Deno) ├── src └── deno.json 9
Node.jsとDenoを共存させる方法 1. エディタの設定 2. フロントエンドとバックエンドで型を共有する 10
①エディタの設定 • 前提:何も設定しないと、エディタは全部Node.jsのコードだと思って解釈する ◦ Denoのコードだと教えてあげる設定が必要 11
①エディタの設定 • .vscode/settings.json ◦ deno.enablePathsを使う
◦ この設定で、frontendディレクトリ内だけDenoが有効になる // .vscode/settings.json { "deno.enablePaths": [ "./frontend" ], } 12
②フロントエンドとバックエンドで型を共有する • 難しい • 同じ言語とはいえ、Node.jsとDenoでは、モジュール解決や使える変数などが異なる ◦ URL import ◦ JSR
◦ グローバル変数 ▪ globalThis.Deno → Denoだけで使える ▪ globalThis.Buffer → Node.jsだけで使える (Denoで使うには--unstable-node-globals) 13
②フロントエンドとバックエンドで型を共用する • やり方は2パターン考えられる 14 Deno Node.js Node.js Deno 共通 モジュール
import import import
②フロントエンドとバックエンドで型を共用する • やり方は2パターン考えられる 15 Deno Node.js Node.js Deno 共通 モジュール
import import import Deno側からNode.js側を 直接importする DenoのNode.js互換モードなら、 Node.jsのコードを解釈できる! HonoのRPCモードみ たいな感じ
②フロントエンドとバックエンドで型を共用する • やり方は2パターン考えられる 16 Deno Node.js Node.js Deno 共通 モジュール
import import import 共通モジュールを作って、 それぞれからimportする 共通モジュールは、Node.jsと Denoの両方から実行できる ようにしておく
②フロントエンドとバックエンドで型を共用する • どっちのパターンにする? • Deno側からNode.js側をimportするのは色々大変 ◦ DenoにはNode.js互換モードがあるとはいえ、まだ完全な互換ではない ◦ 先人
▪ Denoでnpm用フレームワークを含めたモノレポを作るのは渋い ◦ git dependencyやpeer dependency、CJSの解決周りで動かないことがある ▪ 1年後くらいには動くようになってそうだが、、、 →共通モジュールを使う方を選択! 17
②フロントエンドとバックエンドで型を共用する • せっかくなので(?) GraphQLも使う 18 Node.js Deno 共通 モジュール import
import GraphQL
ディレクトリ構成 . ├── backend バックエンド(Node.js) │ ├── src │ ├──
package.json │ └── tsconfig.json └── frontend フロントエンド(Deno) │ ├── src │ └── deno.json └── shared バックエンド/フロントエンド共通モジュール ├── schema.ts └── schema.graphql 19
Node.js & Deno どちらでも実行できるモジュール • zodのスキーマをバックエンドとフロントエンドで共有したい • このコード、Node.jsからもimportできるし、Denoからもimportできるようにするに は? 20
import { z } from "zod"; export const ParameterSchema = z.object({ page: z.number(), limit: z.number(), });
Node.js & Deno どちらでも実行できるモジュール 21 import { z } from
"zod"; export const ParameterSchema = z.object({ page: z.number(), limit: z.number(), }); { "dependencencies": { "zod": "^3.24.2" } } { "imports": { "zod": "npm:zod@^3.24.2" } } Node.js - package.json Deno - deno.json
Node.js & Deno どちらでも実行できるモジュール • TypeScriptの設定も合わせておく ◦ allowImportingTsExtensionsオプションを設定すると、 Node.js側でも拡張子.tsでimportできるようになる
22 // tsconfig.json { "compilerOptions": { "allowImportingTsExtensions": true, } }
Node.jsとDenoの併用、 つらみ&うれしかったこと 23
つらみ&うれしかったこと • つらみ ◦ 一部のnpmライブラリはまだDenoで動かない ◦ node_modulesから逃れられない •
うれしかったこと ◦ フォーマッター、リンターはDenoに組み込み ◦ 両者のいいとこ取りできる ◦ deno deployのデプロイが爆速 24
つらみ① - 一部のnpmライブラリはまだDenoで動かない うまく動かなかった事例 • git dependencyは非対応 ◦ ライブラリの依存関係を辿っていった先に1つでもgit dependencyがあると、型エラーが起きる
(vscode上) • peerDependency周りでたまにエラー出る ◦ インストールのタイミングによってエラーが出たり出なかったりした • CommonJSの型定義が解決できないことがある(?) ◦ if文の中でmodule.exportしているとany型になる? • npmのCLIの設定ファイルをTSで書く場合 ◦ 設定ファイル内からjsrライブラリをimportできない? 25
つらみ① - 一部のnpmライブラリはまだDenoで動かない うまく動かなかった事例 • git dependencyは非対応 ◦ ライブラリの依存関係を辿っていった先に1つでもgit dependencyがあると、型エラーが起きる
(vscode上) • peerDependency周りでたまにエラー出る ◦ インストールのタイミングによってエラーが出たり出なかったりした • CommonJSの型定義が解決できないことがある(?) ◦ if文の中でmodule.exportしているとany型になる? • npmのCLIの設定ファイルをTSで書く場合 ◦ 設定ファイル内からjsrライブラリをimportできない? 26 エラーが出たら とりあえずesm.shを使っておけば解決しました
つらみ② - node_modulesからは逃れられない • ライブラリによっては"nodeModulesDir": "auto"を指定するように指示される ◦ 結局Deno側でもnode_modulesができてしまう •
Node.js側とDeno側、それぞれにnode_modulesができる 27
うれしかったこと① - ツール周り • フォーマッターやリンターなどはDeno組み込みの ものを使える ◦ deno fmt ◦
deno lint ◦ Node.js側でも使える! • prettierやeslintの設定不要! 28
うれしかったこと② - Node.jsとDenoのいいとこ取り • 簡単なスクリプトはDenoで書く • CLIツールはDenoで動かせばセキュリティ周り安心 ◦ –allow-read ◦
–allow-env • Denoで動かないものはNode.jsで動かす 29
うれしかったこと③ - deno deployのデプロイが爆速 • Node.jsバックエンドをCloud Runにデプロイすると2〜3分かかる • deno deployにデプロイすると10秒以下
◦ 開発体験最高! 30
まとめ 31
まとめ • Node.jsとDenoは1プロジェクト内で共存できる?→できる! ◦ deno.enablePaths ◦ フロントエンド/バックエンドで型を共有するには一手間かける必要あり • Node.jsプロジェクトにも徐々にDenoを導入できる
◦ Denoの辛いところ→Node.js互換性があと一歩惜しい ◦ Denoのいいところ→ツール周り、セキュリティ、デプロイ爆速 ◦ Node.jsとDenoでいいとこ取りしていきましょう! 32
33