$30 off During Our Annual Pro Sale. View Details »

Deno Node 両刀

Koutarou Chikuba
March 17, 2022
2k

Deno Node 両刀

Node 学園 #38

Koutarou Chikuba

March 17, 2022
Tweet

Transcript

  1. Deno Node ྆౛ ΍͍͖ͬͯ
    @mizchi | PLAID Inc.
    NodeֶԂ 38࣌ݶ໨

    View Slide

  2. Deno ͍͍ΑͶ…
    ͍·͙͢ curl -fsSL https://deno.land/install.sh | sh

    View Slide

  3. Deno ͍͍ΑͶ…
    • ࣄલ install ෆཁ: εχϖοτ͕ಈ͘อূ͕ͱΓ΍͍͢
    • => node+ts ͸࣮ߦ؀ڥ͕ࣗ໌Ͱ͸ͳ͍
    • ΤίγεςϜ͕ TS ܾΊଧͪ
    • ૊ΈࠐΈ lint | fmt | test ͷମݧͷྑ͞
    • => node ͸ eslint+typescript+prettier ؀ڥͷߏங͕ͩΔ͍
    • Deno ຊମͷίʔυ͕ಡΈ΍͍͢
    • Rust Ͱ tokio + rusty-v8(v8 Binding)

    View Slide

  4. node: ͜ΕͲ͏΍ͬͯಈ͘ͷʁ
    // native esm ͔ɺ comnonjs ܦ༝͔ෆ໌
    import foo from "foo"; // module.exports? export default?
    import { xxx } from "@/x"; // ͩΕ͕͜ͷύεΛղܾ͢Δʁ;
    // ؀ڥม਺ͳͷ͔ɺόϯυϥʹ replace ͞ΕΔͷ͔
    console.log(process.env.NODE_ENV);

    View Slide

  5. Deno (ͷར༻ऀ)ͷ՝୊
    • طଘࢿ࢈ͷར༻
    • طଘͷ΋ͷ͸ Node ༻ͩ͠…
    • ҆શੑ͕આ໌Ͱ͖Δ͔
    • ಈతͳωοτϫʔΫ૬खʹґଘղܾ͢Δෆ҆
    • ։ൃମݧ
    • vscode ͕ͪΌΜͱରԠͯ͘͠Εͳ͍ͱ࢖͑ͳ͍ΑͶ

    View Slide

  6. ࣗ෼ͷࢥ͏ Deno ࠾༻ͷ೉͠͞
    • 1. ࠜຊతʹґଘղܾϙϦγʔ͕ҧ͏
    • 2. ࠜຊతʹඪ४ϥΠϒϥϦ͕ҧ͏
    • 3. vscode-deno ͕ඪ४ͷ (Microsoft) TypeScript ͱഉଞؔ܎

    View Slide

  7. ཁ͸ҧ͍Λཧղͯ͠౗ͤ͹Α͍ʂʂ
    • Node ͱ Deno ͷϙϦγʔΛཧղ͢Δ
    • ཧղͨ͠Βద੾ͳղܾࡦΛऔΕΔ
    • ղܾࡦΛఏࣔͨ͠Β࠾༻ΛωΰΕΔ
    ཧղ͢Δͧʂʂʂ

    View Slide

  8. ܗ͔ΒೖΔ 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 ૬౰

    View Slide

  9. ґଘղܾ: Ϟδϡʔϧ
    Deno ͸ωοτϫʔΫܦ༝ͰґଘΛղܾ͢Δ
    // node: npm install zod --save
    import { z } from "zod";
    // deno
    import { z } from "https://deno.land/x/[email protected]/mod.ts";

    View Slide

  10. ґଘղܾ: ϩʔΧϧ
    ֦ுࢠ/σΟϨΫτϦͷলུෆՄ
    // 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 ͱಉ֦͘͡ுࢠলུෆՄ

    View Slide

  11. Deno ͕ Node ޓ׵Ͱ͸ͳ͍ཧ༝
    • ry ʮDeno ͷ࣮ߦ͸ݖݶ෇༩ͱηοτͳͷͰɺ৴པͰ͖ͳ͍ωοτϫʔ
    Ϋ͔ΒґଘΛղܾͯ͠΋໰୊ͳ͍ʯ (ޙड़)
    • ֦ுࢠͷলུෆՄ͸ RTT ΛݮΒͨ͢Ίʹඞཁ
    • node: ./foo => foo/package.json#main, foo/index{.*},
    foo{.*}
    • ͦ΋ͦ΋ ESM ͷ࢓༷ʹύεͷ࣮ମղܾϧʔϧ͸ఆٛ͞Εͯͳ͍
    • ϒϥ΢β্ͷ ESM Ͱ΋جຊతʹ֦ுࢠলུෆՄ(※ઃఆʹΑΔ)

    View Slide

  12. 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.* ΋࢖Θͳ͍୯ମϑΝΠϧ͸྆༻Մ

    View Slide

  13. Deno ͷηΩϡϦςΟ
    • --allow-env=
    • --allow-hrtime
    • --allow-net=
    • --allow-read=
    • --allow-write=
    • --allow-ffi
    • --allow-run=:
    • -A, --allow-all

    View Slide

  14. 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

    View Slide

  15. Deno ͷηΩϡϦςΟ: ๞͖ͯ͜͏ͳΔ
    # શ෦ڐՄ
    $ deno run -A build.ts
    # velociraptor (task runner) ͷ install ྫ
    $ deno install -qAn vr https://deno.land/x/[email protected]/cli.ts

    View Slide

  16. ๷Ӵࡦ: ಈత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 ͱಉ͡Α͏ʹϩʔΧϧʹݻΊͯ
    ͔Β࣮ߦ

    View Slide

  17. ๷Ӵࡦ: deno task --unstable (v1.20)
    • deno task(Deno): λεΫϥϯφʔͰݖݶΛΈͬͪΓॻ͘
    {
    "tasks": {
    "hello": "deno run --allow-read hello.ts"
    }
    }

    View Slide

  18. ηΩϡϦςΟ·ͱΊ
    • ҆શدΓʹ౗͢ͳΒ nest.land ΍ deno.land ͷόʔδϣϯ෇͖URLͷΈ
    ৴པ͢Δ
    • αϘͬͯ -A ͯ͠͠·͏ͷΛ๷͙࢓૊ΈΛ࡞Βͳ͍ͱݖݶ؅ཧ͕ҙຯͳ
    ͍

    View Slide

  19. ૬ޓӡ༻Λߟ͑Δ
    • Deno => Node
    • Node => Deno

    View Slide

  20. 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";

    View Slide

  21. 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 ʹޓ׵ϨΠϠʔͷ࣮૷͕͋Δ
    • ͋Μ·Γಈ͍ͯͳ͍

    View Slide

  22. 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";

    View Slide

  23. dnt ʹΑΔల։ྫ
    npm/
    !"" LICENSE
    !"" README.md
    !"" esm
    # !"" deps
    # # $"" deno_land_x
    # # $"" delay_v0.2.0
    # # !"" mod.js
    # # $"" src
    # # $"" delay.js

    View Slide

  24. dnt ࢖͑Δ͔ʁ
    • denoland ެࣜͳͷ͸خ͍͕͠…
    • ਖ਼௚ node Ͱॻ͍ͯόϯυϧͯ͠࢖͏ͷָ͕
    • (ϑϩϯτΤϯυతʹ) ॏෳίϯτϩʔϧͱ͔Ͱ͖ͳͦ͞͏

    View Slide

  25. 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 });

    View Slide

  26. ։ൃ؀ڥʹ͍ͭͯ

    View Slide

  27. 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
    }

    View Slide

  28. vscode_deno Կ͕ى͜Δ͔
    • typescript ͷ lsp Λୣͬͯ deno ༻ʹࠩ͠ସ͑Δ
    • node ༻ͷ΋ͷ͸ٯʹյΕΔ

    View Slide

  29. vscode: Node Deno ڞଘ
    ## ௨ৗͷ Node
    .vscode/settings.json # "deno.enabled": false
    ## ͚ͩ͜͜ Deno
    deno/
    .vscode/settings.json # "deno.enabled": true
    code .
    code deno --add
    ※೔ʹΑͬͯಈ͍ͨΓಈ͔ͳ͔ͬͨΓ͠·͢

    View Slide

  30. ࣗ෼͕ࢥ͏ Deno ͷݱ࣌఺ͷϢʔεέʔε
    • ॻ͖ࣺͯͷ CLI (εχϖοτ࣮ߦՄೳੑ͕ߴ͍)
    • ϏϧυπʔϧνΣΠϯ
    • Rust ࿈ܞ෦෼
    • αʔόʔӡ༻͸೉͍͚͠Ͳ deno deploy ͳΒϑϧϚωʔδυͰ͋Γ

    View Slide

  31. ͓ΘΓ
    ·ͱΊͰ
    lint ͋ͨΓ͔Βજ·ͤͯ࢖͍͖ͬͯ·͠ΐ͏ʂ

    View Slide