「MixLeap Study #70 - 教えて!みんなのTypeScript」のLT資料です https://yahoo-osaka.connpass.com/event/274722/
Ͳ͜Ͱಈ͔ͨ͢Ίʹ…TypeScriptͰϥΠϒϥϦ։ൃͷ͢ʍΊMixLeap Study #70 - ڭ͑ͯʂΈΜͳͷTypeScript@jiko21
View Slide
খౡ େج (Daiki Kojima)Multistack Engineer @ AppBrew, inc.Love: Guitar, TypeScriptڈେࡕʹҠॅ͖ͯ͠·ͨ͠Twitter: @jiko_21GitHub: @jiko21
ࠓͷTypeScriptॻ͍͓ͯ͘ͱ৭ΜͳॴͰಈ͘ͷͰ Ζ͏
͜ΜͳΜ࡞ͬͯ·͢https://www.npmjs.com/package/flav-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 ( setText(e.target.value)} />)}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);
ຊʹͦΕ͚͔ͩ?
No
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 `blog page${result}`;}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࣮ߦڥͰಈ͖ͦ͏ʂ
EOLEOF
ࢀߟ•Denoʹ͍ͭͯRy͕ݴٴͨ͠ಈը: https://www.youtube.com/watch?v=M3BM9TB-8yA•DenoͰͷnpm·ΘΓ•https://deno.land/[email protected]/node/package_json•CDNͷܕ·ΘΓ•https://deno.land/[email protected]/node/cdns•https://deno.land/[email protected]/advanced/typescript/types#using-x-typescript-types-header•Bun•https://bun.sh/