Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Deno Node 両刀
Search
Koutarou Chikuba
March 17, 2022
2.7k
7
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Deno Node 両刀
Node 学園 #38
Koutarou Chikuba
March 17, 2022
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
技術記事、 専門家としてのプログラマ、 言語化
mizchi
15
8.3k
CI/CD 改善の勘所
mizchi
0
260
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
6.2k
Server Side JavaScript のためのバンドル最適化
mizchi
5
8k
V8 as a container on CDN Edge worker
mizchi
6
2.6k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.7k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
21k
「フロントエンド領域」を再定義する
mizchi
50
38k
Featured
See All Featured
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
540
Making Projects Easy
brettharned
120
6.8k
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
540
The Mindset for Success: Future Career Progression
greggifford
PRO
0
500
Darren the Foodie - Storyboard
khoart
PRO
4
3.9k
Optimising Largest Contentful Paint
csswizardry
37
4k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The SEO Collaboration Effect
kristinabergwall1
1
570
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
500
A designer walks into a library…
pauljervisheath
211
25k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
2
2.9k
Transcript
Deno Node ྆ ͍͖ͬͯ @mizchi | PLAID Inc. NodeֶԂ 38࣌ݶ
Deno ͍͍ΑͶ… ͍·͙͢ curl -fsSL https://deno.land/install.sh | sh
Deno ͍͍ΑͶ… • ࣄલ install ෆཁ: εχϖοτ͕ಈ͘อূ͕ͱΓ͍͢ • => node+ts
࣮ߦڥ͕ࣗ໌Ͱͳ͍ • ΤίγεςϜ͕ TS ܾΊଧͪ • ΈࠐΈ lint | fmt | test ͷମݧͷྑ͞ • => node eslint+typescript+prettier ڥͷߏங͕ͩΔ͍ • Deno ຊମͷίʔυ͕ಡΈ͍͢ • Rust Ͱ tokio + rusty-v8(v8 Binding)
node: ͜ΕͲ͏ͬͯಈ͘ͷʁ // native esm ͔ɺ comnonjs ܦ༝͔ෆ໌ import foo
from "foo"; // module.exports? export default? import { xxx } from "@/x"; // ͩΕ͕͜ͷύεΛղܾ͢Δʁ; // ڥมͳͷ͔ɺόϯυϥʹ replace ͞ΕΔͷ͔ console.log(process.env.NODE_ENV);
Deno (ͷར༻ऀ)ͷ՝ • طଘࢿ࢈ͷར༻ • طଘͷͷ Node ༻ͩ͠… • ҆શੑ͕આ໌Ͱ͖Δ͔
• ಈతͳωοτϫʔΫ૬खʹґଘղܾ͢Δෆ҆ • ։ൃମݧ • vscode ͕ͪΌΜͱରԠͯ͘͠Εͳ͍ͱ͑ͳ͍ΑͶ
ࣗͷࢥ͏ Deno ࠾༻ͷ͠͞ • 1. ࠜຊతʹґଘղܾϙϦγʔ͕ҧ͏ • 2. ࠜຊతʹඪ४ϥΠϒϥϦ͕ҧ͏ •
3. vscode-deno ͕ඪ४ͷ (Microsoft) TypeScript ͱഉଞؔ
ཁҧ͍Λཧղͯͤ͠Α͍ʂʂ • Node ͱ Deno ͷϙϦγʔΛཧղ͢Δ • ཧղͨ͠ΒదͳղܾࡦΛऔΕΔ • ղܾࡦΛఏࣔͨ͠Β࠾༻ΛωΰΕΔ
ཧղ͢Δͧʂʂʂ
ܗ͔ΒೖΔ Deno • node Ͱ lint ͱ fmt ͚ͩआ༻͠Α͏ͥʂ •
ࢀߟ: node ϓϩδΣΫτͰ deno lint | deno fmt ͢Δ https:// zenn.dev/mizchi/articles/just-lint-by-deno • deno.jsonc Λஔ͘ $ deno fmt $ deno lint eslint+typescript+prettier ૬
ґଘղܾ: Ϟδϡʔϧ Deno ωοτϫʔΫܦ༝ͰґଘΛղܾ͢Δ // node: npm install zod --save
import { z } from "zod"; // deno import { z } from "https://deno.land/x/
[email protected]
/mod.ts";
ґଘղܾ: ϩʔΧϧ ֦ுࢠ/σΟϨΫτϦͷলུෆՄ // node + tsc import { foo
} from "./foo"; import { bar } from "./bar"; // deno import { foo } from "./foo.ts"; import { bar } from "./bar/index.ts"; ※ node Ͱ Native ESM ͷͱ͖ɺdeno ͱಉ֦͘͡ுࢠলུෆՄ
Deno ͕ Node ޓͰͳ͍ཧ༝ • ry ʮDeno ͷ࣮ߦݖݶ༩ͱηοτͳͷͰɺ৴པͰ͖ͳ͍ωοτϫʔ Ϋ͔ΒґଘΛղܾͯ͠ͳ͍ʯ (ޙड़)
• ֦ுࢠͷলུෆՄ RTT ΛݮΒͨ͢Ίʹඞཁ • node: ./foo => foo/package.json#main, foo/index{.*}, foo{.*} • ͦͦ ESM ͷ༷ʹύεͷ࣮ମղܾϧʔϧఆٛ͞Εͯͳ͍ • ϒϥβ্ͷ ESM Ͱجຊతʹ֦ுࢠলུෆՄ(※ઃఆʹΑΔ)
First Step: ؾ͚࣋ͪͩ Deno • Rust crate ෩: mod.rs Ͱ֎ʹ
export • deps.ts Ͱ֎෦ϞδϡʔϧΛ import // mylib/deps.ts export { z } from "https://deno.land/x/
[email protected]
/mod.ts"; // mylib/mod.ts import { z } from "./deps.ts"; export const version: number = 1; export function validate(input: any) { return z.string().safeParse(input) }; (งғؾΛ͍ͬͯΕޙͰೃછΈ͍͢ɺؾ͕͢Δ…) • ۃɺ֎෦ import Deno.* Θͳ͍୯ମϑΝΠϧ྆༻Մ
Deno ͷηΩϡϦςΟ • --allow-env=<allow-env> • --allow-hrtime • --allow-net=<allow-net> • --allow-read=<allow-read>
• --allow-write=<allow-write> • --allow-ffi • --allow-run=<allow-run>: • -A, --allow-all
Deno ͷηΩϡϦςΟ: ਅ໘ʹॻ͘ deno deploy ͷ CLI Πϯετʔϧͷྫ $ deno
install \ --allow-read \ --allow-write \ --allow-env \ --allow-net \ --allow-run \ --no-check -r -f https://deno.land/x/deploy/deployctl.ts
Deno ͷηΩϡϦςΟ: ͖ͯ͜͏ͳΔ # શ෦ڐՄ $ deno run -A build.ts
# velociraptor (task runner) ͷ install ྫ $ deno install -qAn vr https://deno.land/x/
[email protected]
/cli.ts
Ӵࡦ: ಈతURLΛݕ • αϓϥΠνΣʔϯΞλοΫͰಈత URL ߈ܸର • https://deno.land/std/http/server.ts • =>
https://deno.land/
[email protected]
/http/server.ts • ࠓޙ҆શͳ URL ͔୭͕ݴ͑Δͷ͔ʁ • nest.land: ϒϩοΫνΣʔϯ্ͷύʔϚωϯτͳ URL ʹσϓϩΠ • deno vendor (v1.19): node_modules ͱಉ͡Α͏ʹϩʔΧϧʹݻΊͯ ͔Β࣮ߦ
Ӵࡦ: deno task --unstable (v1.20) • deno task(Deno): λεΫϥϯφʔͰݖݶΛΈͬͪΓॻ͘ {
"tasks": { "hello": "deno run --allow-read hello.ts" } }
ηΩϡϦςΟ·ͱΊ • ҆શدΓʹ͢ͳΒ nest.land deno.land ͷόʔδϣϯ͖URLͷΈ ৴པ͢Δ • αϘͬͯ
-A ͯ͠͠·͏ͷΛ͙ΈΛ࡞Βͳ͍ͱݖݶཧ͕ҙຯͳ ͍
૬ޓӡ༻Λߟ͑Δ • Deno => Node • Node => Deno
Deno ͔Β npm ΛݺͿ: CDN • ୯ମϑΝΠϧ(όϯυϧࡁΈ)ͳΒޓ • CDN ͕
X-Typescript-Types Λฦ͍ͯ͠Εɺ.d.ts Λ͔ͦ͜Βղ ܾ • package.json ͷ types Λ͏ • skypack.dev esm.sh ͕ରԠ // ͜Ε͕ܕͰ͑Δ import React from "https://cdn.esm.sh/react@17";
deno ͔Β node ΛݺͿ: deno --compat https://deno.land/
[email protected]
/node import { createRequire
} from "https://deno.land/
[email protected]
/node/module.ts"; const require = createRequire(import.meta.url); const path = require("path"); $ deno run --compat --unstable --allow-read deno-compat.ts • https://deno.land/std/node ʹޓϨΠϠʔͷ࣮͕͋Δ • ͋Μ·Γಈ͍ͯͳ͍
node ͔Β deno ݺͿ: dnt • https://github.com/denoland/dnt • ࢀߟ: deno
to node ͷ dnt ࢼ͢ https://zenn.dev/mizchi/scraps/ a37ea7c793094f // ͜͏͍͏ίʔυΛల։ export { delay } from "https://deno.land/x/
[email protected]
/mod.ts"; • https://...ͷ ϞδϡʔϧΛϩʔΧϧʹղܾ • Deno Λ node ༻ʹม => import { Deno } from "@deno/shim- deno";
dnt ʹΑΔల։ྫ npm/ !"" LICENSE !"" README.md !"" esm #
!"" deps # # $"" deno_land_x # # $"" delay_v0.2.0 # # !"" mod.js # # $"" src # # $"" delay.js
dnt ͑Δ͔ʁ • denoland ެࣜͳͷخ͍͕͠… • ਖ਼ node Ͱॻ͍ͯόϯυϧͯ͠͏ͷָ͕ •
(ϑϩϯτΤϯυతʹ) ॏෳίϯτϩʔϧͱ͔Ͱ͖ͳͦ͞͏
Node Λ Deno ͬΆ͘ಈ͔͢ $ node --experimental-network-imports code.js Node ͷ
Deno ෩ network-import (experimental) https://nodejs.org/api/esm.html#https-and-http-imports // file.mjs import worker_threads from 'worker_threads'; import { configure, resize } from 'https://example.com/imagelib.mjs'; configure({ worker_threads });
։ൃڥʹ͍ͭͯ
VSCode • vscode_deno ΛΠϯετʔϧͯ͠࠶ىಈ https://github.com/ denoland/vscode_deno • Shift+Command+P ͰҎԼͷίϚϯυΛ࣮ߦ •
Deno: Initialize Workspace Configuration • Deno: Cache Dependencies // .vscode/settings.json { "deno.enabled": true }
vscode_deno Կ͕ى͜Δ͔ • typescript ͷ lsp Λୣͬͯ deno ༻ʹࠩ͠ସ͑Δ •
node ༻ͷͷٯʹյΕΔ
vscode: Node Deno ڞଘ ## ௨ৗͷ Node .vscode/settings.json # "deno.enabled":
false ## ͚ͩ͜͜ Deno deno/ .vscode/settings.json # "deno.enabled": true code . code deno --add ※ʹΑͬͯಈ͍ͨΓಈ͔ͳ͔ͬͨΓ͠·͢
͕ࣗࢥ͏ Deno ͷݱ࣌ͷϢʔεέʔε • ॻ͖ࣺͯͷ CLI (εχϖοτ࣮ߦՄೳੑ͕ߴ͍) • ϏϧυπʔϧνΣΠϯ •
Rust ࿈ܞ෦ • αʔόʔӡ༻͍͚͠Ͳ deno deploy ͳΒϑϧϚωʔδυͰ͋Γ
͓ΘΓ ·ͱΊͰ lint ͋ͨΓ͔Βજ·͍͖ͤͯͬͯ·͠ΐ͏ʂ