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
4
1.1k
バックエンド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
CSC486 Lecture 14
javiergs
PRO
0
110
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
170
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
180
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
280
イベントソーシングによってインピーダンスミスマッチから解放された話
tkawae
1
130
Accelerate your key learnings of scaling modern Android apps
aldefy
0
200
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
2.4k
運用しながらリアーキテクチャ
nealle
0
310
AWS Step Functions は CDK で書こう!
konokenj
5
980
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
220
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
380
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
420
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Pragmatic Product Professional
lauravandoore
32
6.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The Cost Of JavaScript in 2023
addyosmani
48
7.5k
A designer walks into a library…
pauljervisheath
205
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Typedesign – Prime Four
hannesfritz
41
2.6k
Side Projects
sachag
452
42k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Adopting Sorbet at Scale
ufuk
75
9.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
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