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
楽して成果を出すためのセルフリソース管理
clipnote
0
180
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
400
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
390
Ruby Parser progress report 2025
yui_knk
1
450
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Become a Pro
speakerdeck
PRO
29
5.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
For a Future-Friendly Web
brad_frost
180
9.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Writing Fast Ruby
sferik
628
62k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing Experiences People Love
moore
142
24k
Context Engineering - Making Every Token Count
addyosmani
3
58
The Art of Programming - Codeland 2020
erikaheidi
56
13k
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