バックエンドNode.js × フロントエンドDeno で開発して得られた知見

バックエンド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 

import  import  import  Deno側からNode.js側を   直接importする    DenoのNode.js互換モードなら、   Node.jsのコードを解釈できる！   HonoのRPCモードみたいな感じ 

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 // tsconﬁg.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

バックエンドNode.js × フロントエンドDeno で開発して得られた知見

バックエンドNode.js × フロントエンドDeno で開発して得られた知見

ayame113

More Decks by ayame113

Other Decks in Programming

Featured

Transcript