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
Deno Node 両刀
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Koutarou Chikuba
March 17, 2022
2.6k
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
14
7.2k
CI/CD 改善の勘所
mizchi
0
230
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
6.1k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.8k
V8 as a container on CDN Edge worker
mizchi
6
2.5k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.7k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
「フロントエンド領域」を再定義する
mizchi
50
37k
Featured
See All Featured
Music & Morning Musume
bryan
47
7.3k
Amusing Abliteration
ianozsvald
1
220
Why Our Code Smells
bkeepers
PRO
340
58k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
170
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
AI: The stuff that nobody shows you
jnunemaker
PRO
8
760
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
YesSQL, Process and Tooling at Scale
rocio
174
15k
Making Projects Easy
brettharned
120
6.7k
Rails Girls Zürich Keynote
gr2m
96
14k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.1k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
630
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 ͋ͨΓ͔Βજ·͍͖ͤͯͬͯ·͠ΐ͏ʂ