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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
16
8.5k
CI/CD 改善の勘所
mizchi
0
280
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
6.2k
Server Side JavaScript のためのバンドル最適化
mizchi
5
8.1k
V8 as a container on CDN Edge worker
mizchi
6
2.6k
Edge Side Frontend という新領域
mizchi
35
15k
バンドル最適化マニアクス at tfconf
mizchi
8
4.7k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
21k
「フロントエンド領域」を再定義する
mizchi
50
38k
Featured
See All Featured
Game over? The fight for quality and originality in the time of robots
wayneb77
1
300
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
200
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
340
New Earth Scene 8
popppiees
4
2.6k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
620
Bash Introduction
62gerente
615
220k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
840
Into the Great Unknown - MozCon
thekraken
41
2.7k
ラッコキーワード サービス紹介資料
rakko
1
5.1M
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
300
Rebuilding a faster, lazier Slack
samanthasiow
85
9.7k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
450
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 ͋ͨΓ͔Βજ·͍͖ͤͯͬͯ·͠ΐ͏ʂ