どこでも動かすために… TypeScriptでライブラリ開発のすゝめ

Ͳ͜Ͱ΋ಈ͔ͨ͢Ίʹ… TypeScriptͰϥΠϒϥϦ։ൃͷ ͢ʍΊ MixLeap Study #70 - ڭ͑ͯʂΈΜͳͷTypeScript @jiko21

খౡ େج (Daiki Kojima) Multistack Engineer @ AppBrew, inc. Love:
Guitar, TypeScript ڈ೥େࡕʹҠॅ͖ͯ͠·ͨ͠ Twitter: @jiko_21 GitHub: @jiko21

ࠓ೔ͷ࿩ TypeScriptॻ͍͓ͯ͘ͱ৭ΜͳॴͰಈ͘ͷͰ   ΍Ζ͏

͜Μͳ΋Μ࡞ͬͯ·͢ https://www.npmjs.com/package/ fl av-md

Կ͕Ͱ͖Δͷ? •markdownΛparseͯ͠htmlʹͰ͖Δ •͜Μͳײ͡Ͱclass͕෇༩͞ΕΔˣ •CSSΛparse͞Εͨhtmlʹ͚ͩ෇༩͢Δͷ͕͔ΜͨΜ

ͪΌΜͱTypeScriptͰ࣮૷ࡁΈ!

ϒϥ΢βͰ΋ಈ͘͠… import { useMemo, useState } from 'react' import {
createFlavMd } from 'flav-md'; function App() { const [text, setText] = useState(''); const flavMd = useMemo(() => createFlavMd(), []); const renderedText = useMemo(() => flavMd.readMdText(text).build(), [text]); return ( <div className="App"> <textarea value={text} onChange={(e) => setText(e.target.value)} /> <div dangerouslySetInnerHTML={{__html: renderedText }} /> </div> ) } export default App

Node.jsͰ΋ಈ͘ const flavmd = require('flav-md'); const result = flavmd .createFlavMd()
.readMdText('# hogehoge') .readCssText('.flav-md-h1 {color: red;}') .build(); console.log(result);

ຊ౰ʹͦΕ͚͔ͩ?

DenoͰ΋ಈ͖·͢! import { serve } from "https://deno.land/x/sift/mod.ts"; import flavMd from
'https://cdn.skypack.dev/flav-md'; async function blogPage(date: string) { const md = await getBlogData(date); const result = flavMd.createFlavMd() .readMdText(md) .readCssText('.flav-md-h1 {color: red;}') .build(); return `<html> <head> <title>blog page</title> </head> <body> ${result} </body> </html>`; } serve({ "/blog/:date": async (request, {date}) => { if (!date.match(/^\d{4}-\d{2}-\d{2}$/)) { return Response.error(); } const post = await blogPage(date); return new Response(post, {headers: { "content-type": "text-html; charset=UTF-8" }}) }, });

ͦ΋ͦ΋DenoͬͯԿ? • Node.jsΛ࡞ͬͨRy(ϥΠΞϯɾμʔϧ)͕ Node.jsͷࣦഊ఺Λ൓লͯ͠   ࡞ͬͨJavaScriptͷ࣮ߦ؀ڥ • ಺෦తʹRustͰ࣮૷͞ΕͨΓ΋ͯ͠Δ • TypeScript͕ඪ४Ͱ࢖͑Δ

Ͱ΋Ͳ͏΍ͬͯϥΠϒϥϦݺΜͰΔͷ? • skypackΈ͍ͨͳcdn͔Βམͱ͖ͯͯ͠࢖༻ͨ͠Γ… • ࠷ۙͩͱެࣜʹpackage.jsonʹରԠͨ͠Γ…

࣮ࡍͷαϯϓϧ • ܰ͘deno deployͰࢼͯ͠·͢ https://github.com/jiko21/deno-deploy-sample

࣮͸… • ࣮͸ɺTypeScriptͰॻ͍͍ͯͯ΋ɺԿ΋ߟ͑ͣʹCDN͔ΒҾ͘ͱ   ܕ͕͔ͭͳ͍…

Ͱ΋! • skypackͱ͔ͩͱɺ?dtsͱ຤ඌʹ͚ͭΔͱͪΌΜͱܕ͕ͭ͘ʂ • X-TypeScrpit-Types headersͱ͍͏ܗͰDeno͕ܕࢀরͰ͖ΔΒ͍͠ • ΋ͬͱ΋ɺpackage.json͔ͭͬͨΒ͜͜Β΁Μ͸ָͩͬͨ import flavMd
from 'https://cdn.skypack.dev/flav-md?dts';

͏͒͒͒͒

BunͰಈ͘ͷ?

ಈ͖·͢ʂ import flavMd from 'flav-md'; const text = flavMd.createFlavMd() .readMdText('#
test') .readCssText('.flav-md-h1 {color: red;}') .build(); console.log(text);

ͱ͍͏͜ͱͰ… •TypeScriptͰύοέʔδorϥΠϒϥϦΛॻ͍͓ͯ͘ͱ •Node.jsͰ͏͘͝ʂ •(Nodeʹґଘͯ͠ͳ͚Ε͹)ϒϥ΢βͰ΋ಈ͘ʂ •DenoͰ΋ಈ͘ʂ •BunͰ΋ʂ •ࠓޙग़Δ͔΋͠Εͳ͍TypeScript FirstͳJS࣮ߦ؀ڥͰ΋ಈ͖ͦ͏ʂ

EOL EOF

ࢀߟ •Denoʹ͍ͭͯRy͕ݴٴͨ͠ಈը: https://www.youtube.com/watch?v=M3BM9TB-8yA •DenoͰͷnpm·ΘΓ •https://deno.land/manual@v1.31.1/node/package_json •CDNͷܕ·ΘΓ •https://deno.land/manual@v1.31.1/node/cdns •https://deno.land/manual@v1.31.1/advanced/typescript/types#using-x-typescript-types-header •Bun •https://bun.sh/

どこでも動かすために… TypeScriptでライブラリ開発のすゝめ

どこでも動かすために… TypeScriptでライブラリ開発のすゝめ

jiko21

More Decks by jiko21

Other Decks in Technology

Featured

Transcript

Ͳ͜Ͱ΋ಈ͔ͨ͢Ίʹ… TypeScriptͰϥΠϒϥϦ։ൃͷ ͢ʍΊ MixLeap Study #70 - ڭ͑ͯʂΈΜͳͷTypeScript @jiko21

খౡ େج (Daiki Kojima) Multistack Engineer @ AppBrew, inc. Love:

ࠓ೔ͷ࿩ TypeScriptॻ͍͓ͯ͘ͱ৭ΜͳॴͰಈ͘ͷͰ   ΍Ζ͏

͜Μͳ΋Μ࡞ͬͯ·͢ https://www.npmjs.com/package/ fl av-md

Կ͕Ͱ͖Δͷ? •markdownΛparseͯ͠htmlʹͰ͖Δ •͜Μͳײ͡Ͱclass͕෇༩͞ΕΔˣ •CSSΛparse͞Εͨhtmlʹ͚ͩ෇༩͢Δͷ͕͔ΜͨΜ

ͪΌΜͱTypeScriptͰ࣮૷ࡁΈ!

ϒϥ΢βͰ΋ಈ͘͠… import { useMemo, useState } from 'react' import {

Node.jsͰ΋ಈ͘ const flavmd = require('flav-md'); const result = flavmd .createFlavMd()

ຊ౰ʹͦΕ͚͔ͩ?

No

DenoͰ΋ಈ͖·͢! import { serve } from "https://deno.land/x/sift/mod.ts"; import flavMd from

ͦ΋ͦ΋DenoͬͯԿ? • Node.jsΛ࡞ͬͨRy(ϥΠΞϯɾμʔϧ)͕ Node.jsͷࣦഊ఺Λ൓লͯ͠   ࡞ͬͨJavaScriptͷ࣮ߦ؀ڥ • ಺෦తʹRustͰ࣮૷͞ΕͨΓ΋ͯ͠Δ • TypeScript͕ඪ४Ͱ࢖͑Δ

Ͱ΋Ͳ͏΍ͬͯϥΠϒϥϦݺΜͰΔͷ? • skypackΈ͍ͨͳcdn͔Βམͱ͖ͯͯ͠࢖༻ͨ͠Γ… • ࠷ۙͩͱެࣜʹpackage.jsonʹରԠͨ͠Γ…

࣮ࡍͷαϯϓϧ • ܰ͘deno deployͰࢼͯ͠·͢ https://github.com/jiko21/deno-deploy-sample

࣮͸… • ࣮͸ɺTypeScriptͰॻ͍͍ͯͯ΋ɺԿ΋ߟ͑ͣʹCDN͔ΒҾ͘ͱ   ܕ͕͔ͭͳ͍…

Ͱ΋! • skypackͱ͔ͩͱɺ?dtsͱ຤ඌʹ͚ͭΔͱͪΌΜͱܕ͕ͭ͘ʂ • X-TypeScrpit-Types headersͱ͍͏ܗͰDeno͕ܕࢀরͰ͖ΔΒ͍͠ • ΋ͬͱ΋ɺpackage.json͔ͭͬͨΒ͜͜Β΁Μ͸ָͩͬͨ import flavMd

͏͒͒͒͒

BunͰಈ͘ͷ?

ಈ͖·͢ʂ import flavMd from 'flav-md'; const text = flavMd.createFlavMd() .readMdText('#

ͱ͍͏͜ͱͰ… •TypeScriptͰύοέʔδorϥΠϒϥϦΛॻ͍͓ͯ͘ͱ •Node.jsͰ͏͘͝ʂ •(Nodeʹґଘͯ͠ͳ͚Ε͹)ϒϥ΢βͰ΋ಈ͘ʂ •DenoͰ΋ಈ͘ʂ •BunͰ΋ʂ •ࠓޙग़Δ͔΋͠Εͳ͍TypeScript FirstͳJS࣮ߦ؀ڥͰ΋ಈ͖ͦ͏ʂ

EOL EOF

どこでも動かすために… TypeScriptでライブラリ開発の すゝめ

どこでも動かすために… TypeScriptでライブラリ開発の すゝめ

More Decks by jiko21

Other Decks in Technology

Featured

Transcript

どこでも動かすために… TypeScriptでライブラリ開発のすゝめ

どこでも動かすために… TypeScriptでライブラリ開発のすゝめ