Tweet
Tweet

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/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/