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.3k
バックエンド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.2k
Other Decks in Programming
See All in Programming
Make Parsers Compatible Using Automata Learning
makenowjust
2
5.6k
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
makicamel
4
470
파급효과: From AI to Android Development
l2hyunwoo
0
120
Jakarta EE Meets AI
ivargrimstad
0
290
Vibe Coding の話をしよう
schroneko
12
3k
ComposeでWebアプリを作る技術
tbsten
0
120
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
110
生成AIを使ったQAアプリケーションの作成 - ハンズオン補足資料
oracle4engineer
PRO
3
250
AIコーディングの理想と現実
tomohisa
32
35k
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
310
generative-ai-use-cases(GenU)の推しポイント ~2025年4月版~
hideg
1
300
Cursor/Devin全社導入の理想と現実
saitoryc
24
17k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
245
12k
Code Reviewing Like a Champion
maltzj
523
40k
Code Review Best Practice
trishagee
67
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Typedesign – Prime Four
hannesfritz
41
2.6k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Statistics for Hackers
jakevdp
798
220k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
85
4.7k
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