Slide 1
Slide 1 text
Ͳ͜Ͱಈ͔ͨ͢Ίʹ…
TypeScriptͰϥΠϒϥϦ։ൃͷ
͢ʍΊ
MixLeap Study #70 - ڭ͑ͯʂΈΜͳͷTypeScript
@jiko21
Slide 2
Slide 2 text
খౡ େج (Daiki Kojima)
Multistack Engineer @ AppBrew, inc.
Love: Guitar, TypeScript
ڈେࡕʹҠॅ͖ͯ͠·ͨ͠
Twitter: @jiko_21
GitHub: @jiko21
Slide 3
Slide 3 text
ࠓͷ
TypeScriptॻ͍͓ͯ͘ͱ৭ΜͳॴͰಈ͘ͷͰ
Ζ͏
Slide 4
Slide 4 text
͜ΜͳΜ࡞ͬͯ·͢
https://www.npmjs.com/package/
fl
av-md
Slide 5
Slide 5 text
Կ͕Ͱ͖Δͷ?
•markdownΛparseͯ͠htmlʹͰ͖Δ
•͜Μͳײ͡Ͱclass͕༩͞ΕΔˣ
•CSSΛparse͞Εͨhtmlʹ͚ͩ༩͢Δͷ͕͔ΜͨΜ
Slide 6
Slide 6 text
ͪΌΜͱTypeScriptͰ࣮ࡁΈ!
Slide 7
Slide 7 text
ϒϥβͰಈ͘͠…
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
Slide 8
Slide 8 text
Node.jsͰಈ͘
const flavmd = require('flav-md');
const result = flavmd
.createFlavMd()
.readMdText('# hogehoge')
.readCssText('.flav-md-h1 {color: red;}')
.build();
console.log(result);
Slide 9
Slide 9 text
ຊʹͦΕ͚͔ͩ?
Slide 10
Slide 10 text
No
Slide 11
Slide 11 text
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"
}})
},
});
Slide 12
Slide 12 text
ͦͦDenoͬͯԿ?
• Node.jsΛ࡞ͬͨRy(ϥΠΞϯɾμʔϧ)͕ Node.jsͷࣦഊΛলͯ͠
࡞ͬͨJavaScriptͷ࣮ߦڥ
• ෦తʹRustͰ࣮͞ΕͨΓͯ͠Δ
• TypeScript͕ඪ४Ͱ͑Δ
Slide 13
Slide 13 text
ͰͲ͏ͬͯϥΠϒϥϦݺΜͰΔͷ?
• skypackΈ͍ͨͳcdn͔Βམͱ͖ͯͯ͠༻ͨ͠Γ…
• ࠷ۙͩͱެࣜʹpackage.jsonʹରԠͨ͠Γ…
Slide 14
Slide 14 text
࣮ࡍͷαϯϓϧ
• ܰ͘deno deployͰࢼͯ͠·͢
https://github.com/jiko21/deno-deploy-sample
Slide 15
Slide 15 text
࣮…
• ࣮ɺTypeScriptͰॻ͍͍ͯͯɺԿߟ͑ͣʹCDN͔ΒҾ͘ͱ
ܕ͕͔ͭͳ͍…
Slide 16
Slide 16 text
Ͱ!
• skypackͱ͔ͩͱɺ?dtsͱඌʹ͚ͭΔͱͪΌΜͱܕ͕ͭ͘ʂ
• X-TypeScrpit-Types headersͱ͍͏ܗͰDeno͕ܕࢀরͰ͖ΔΒ͍͠
• ͬͱɺpackage.json͔ͭͬͨΒ͜͜ΒΜָͩͬͨ
import flavMd from 'https://cdn.skypack.dev/flav-md?dts';
Slide 17
Slide 17 text
͏͒͒͒͒
Slide 18
Slide 18 text
BunͰಈ͘ͷ?
Slide 19
Slide 19 text
ಈ͖·͢ʂ
import flavMd from 'flav-md';
const text = flavMd.createFlavMd()
.readMdText('# test')
.readCssText('.flav-md-h1 {color: red;}')
.build();
console.log(text);
Slide 20
Slide 20 text
ͱ͍͏͜ͱͰ…
•TypeScriptͰύοέʔδorϥΠϒϥϦΛॻ͍͓ͯ͘ͱ
•Node.jsͰ͏͘͝ʂ
•(Nodeʹґଘͯ͠ͳ͚Ε)ϒϥβͰಈ͘ʂ
•DenoͰಈ͘ʂ
•BunͰʂ
•ࠓޙग़Δ͔͠Εͳ͍TypeScript FirstͳJS࣮ߦڥͰಈ͖ͦ͏ʂ
Slide 21
Slide 21 text
EOL
EOF
Slide 22
Slide 22 text
ࢀߟ
•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/