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.4k
Other Decks in Programming
See All in Programming
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
アセットのコンパイルについて
ojun9
0
130
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
楽して成果を出すためのセルフリソース管理
clipnote
0
180
testingを眺める
matumoto
1
140
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
Cache Me If You Can
ryunen344
2
3k
チームのテスト力を鍛える
goyoki
3
870
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
630
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
Featured
See All Featured
Building an army of robots
kneath
306
46k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Embracing the Ebb and Flow
colly
87
4.8k
Become a Pro
speakerdeck
PRO
29
5.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
RailsConf 2023
tenderlove
30
1.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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