Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

jiko21
March 02, 2023

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

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

jiko21

March 02, 2023
Tweet

More Decks by jiko21

Other Decks in Technology

Transcript

  1. Ͳ͜Ͱ΋ಈ͔ͨ͢Ίʹ…


    TypeScriptͰϥΠϒϥϦ։ൃͷ


    ͢ʍΊ
    MixLeap Study #70 - ڭ͑ͯʂΈΜͳͷTypeScript
    @jiko21

    View full-size slide

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


    Love: Guitar, TypeScript


    ڈ೥େࡕʹҠॅ͖ͯ͠·ͨ͠


    Twitter: @jiko_21


    GitHub: @jiko21


    View full-size slide

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

    ΍Ζ͏

    View full-size slide

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

    View full-size slide

  5. Կ͕Ͱ͖Δͷ?
    •markdownΛparseͯ͠htmlʹͰ͖Δ


    •͜Μͳײ͡Ͱclass͕෇༩͞ΕΔˣ


    •CSSΛparse͞Εͨhtmlʹ͚ͩ෇༩͢Δͷ͕͔ΜͨΜ

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  9. ຊ౰ʹͦΕ͚͔ͩ?

    View full-size slide

  10. 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 full-size slide

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

    ࡞ͬͨJavaScriptͷ࣮ߦ؀ڥ


    • ಺෦తʹRustͰ࣮૷͞ΕͨΓ΋ͯ͠Δ


    • TypeScript͕ඪ४Ͱ࢖͑Δ

    View full-size slide

  12. Ͱ΋Ͳ͏΍ͬͯϥΠϒϥϦݺΜͰΔͷ?
    • skypackΈ͍ͨͳcdn͔Βམͱ͖ͯͯ͠࢖༻ͨ͠Γ…


    • ࠷ۙͩͱެࣜʹpackage.jsonʹରԠͨ͠Γ…

    View full-size slide

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

    View full-size slide

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

    ܕ͕͔ͭͳ͍…

    View full-size slide

  15. Ͱ΋!
    • skypackͱ͔ͩͱɺ?dtsͱ຤ඌʹ͚ͭΔͱͪΌΜͱܕ͕ͭ͘ʂ


    • X-TypeScrpit-Types headersͱ͍͏ܗͰDeno͕ܕࢀরͰ͖ΔΒ͍͠


    • ΋ͬͱ΋ɺpackage.json͔ͭͬͨΒ͜͜Β΁Μ͸ָͩͬͨ
    import flavMd from 'https://cdn.skypack.dev/flav-md?dts';


    View full-size slide

  16. BunͰಈ͘ͷ?

    View full-size slide

  17. ಈ͖·͢ʂ
    import flavMd from 'flav-md';


    const text = flavMd.createFlavMd()


    .readMdText('# test')


    .readCssText('.flav-md-h1 {color: red;}')


    .build();


    console.log(text);


    View full-size slide

  18. ͱ͍͏͜ͱͰ…
    •TypeScriptͰύοέʔδorϥΠϒϥϦΛॻ͍͓ͯ͘ͱ


    •Node.jsͰ͏͘͝ʂ


    •(Nodeʹґଘͯ͠ͳ͚Ε͹)ϒϥ΢βͰ΋ಈ͘ʂ


    •DenoͰ΋ಈ͘ʂ


    •BunͰ΋ʂ


    •ࠓޙग़Δ͔΋͠Εͳ͍TypeScript FirstͳJS࣮ߦ؀ڥͰ΋ಈ͖ͦ͏ʂ

    View full-size slide

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

    View full-size slide