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

「MixLeap Study #70 - 教えて！みんなのTypeScript」のLT資料です
https://yahoo-osaka.connpass.com/event/274722/

Transcript

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

   View Slide

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

   View Slide

3. ࠓ೔ͷ࿩
   TypeScriptॻ͍͓ͯ͘ͱ৭ΜͳॴͰಈ͘ͷͰ
   

   ΍Ζ͏
   

   View Slide

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

   View Slide

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

   View Slide

6. ͪΌΜͱTypeScriptͰ࣮૷ࡁΈ!
   

   View Slide

7. ϒϥ΢βͰ΋ಈ͘͠…
   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
   
   
   

   View Slide

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

   View Slide

9. ຊ౰ʹͦΕ͚͔ͩ?
   

   View Slide

10. No
    

    View Slide

11. 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"
    
    
    }})
    
    
    },
    
    
    });
    
    
    

    View Slide

12. ͦ΋ͦ΋DenoͬͯԿ?
    • Node.jsΛ࡞ͬͨRy(ϥΠΞϯɾμʔϧ)͕ Node.jsͷࣦഊ఺Λ൓লͯ͠
    

    ࡞ͬͨJavaScriptͷ࣮ߦ؀ڥ
    
    
    • ಺෦తʹRustͰ࣮૷͞ΕͨΓ΋ͯ͠Δ
    
    
    • TypeScript͕ඪ४Ͱ࢖͑Δ
    

    View Slide

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

    View Slide

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

    View Slide

15. ࣮͸…
    • ࣮͸ɺTypeScriptͰॻ͍͍ͯͯ΋ɺԿ΋ߟ͑ͣʹCDN͔ΒҾ͘ͱ
    

    ܕ͕͔ͭͳ͍…
    

    View Slide

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

    View Slide

17. ͏͒͒͒͒
    

    View Slide

18. BunͰಈ͘ͷ?
    

    View Slide

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

    View Slide

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

    View Slide

21. EOL
    
    
    EOF
    

    View Slide

22. ࢀߟ
    •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/
    

    View Slide