Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
Search
jiko21
March 02, 2023
Technology
2
370
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
「MixLeap Study #70 - 教えて!みんなのTypeScript」のLT資料です
https://yahoo-osaka.connpass.com/event/274722/
jiko21
March 02, 2023
Tweet
Share
More Decks by jiko21
See All by jiko21
Creating a Next.js-style Framework with Bun and Hono
jiko21
0
130
Array Grouping will soon be arriving at TypeScript
jiko21
0
130
Copying Array Methods arrived at TypeScript
jiko21
1
650
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
130
node:test will replace Jest?
jiko21
0
86
NestJS a progressive web framework
jiko21
3
2.1k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
1
1.6k
Other Decks in Technology
See All in Technology
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
oracle4engineer
PRO
1
160
Findy Freelance 利用シーン別AI活用例
ness
0
470
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
6.3k
Claude Codeから我々が学ぶべきこと
oikon48
10
2.8k
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
1
110
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
120
開発 × 生成AI × コミュニケーション:GENDAの開発現場で感じたコミュニケーションの変化 / GENDA Tech Talk #1
genda
0
180
AI関数が早くなったので試してみよう
kumakura
0
280
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
520
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
21
10k
o11yツールを乗り換えた話
tak0x00
2
1.1k
20250807 Applied Engineer Open House
sakana_ai
PRO
2
320
Featured
See All Featured
Navigating Team Friction
lara
188
15k
Agile that works and the tools we love
rasmusluckow
329
21k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Docker and Python
trallard
45
3.5k
Thoughts on Productivity
jonyablonski
69
4.8k
Being A Developer After 40
akosma
90
590k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Code Reviewing Like a Champion
maltzj
524
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Side Projects
sachag
455
43k
Transcript
Ͳ͜Ͱಈ͔ͨ͢Ίʹ… TypeScriptͰϥΠϒϥϦ։ൃͷ ͢ʍΊ MixLeap Study #70 - ڭ͑ͯʂΈΜͳͷTypeScript @jiko21
খౡ େج (Daiki Kojima) Multistack Engineer @ AppBrew, inc. Love:
Guitar, TypeScript ڈେࡕʹҠॅ͖ͯ͠·ͨ͠ Twitter: @jiko_21 GitHub: @jiko21
ࠓͷ TypeScriptॻ͍͓ͯ͘ͱ৭ΜͳॴͰಈ͘ͷͰ Ζ͏
͜ΜͳΜ࡞ͬͯ·͢ https://www.npmjs.com/package/ fl av-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 ( <div className="App"> <textarea value={text} onChange={(e) => setText(e.target.value)} /> <div dangerouslySetInnerHTML={{__html: renderedText }} /> </div> ) } 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 `<html> <head> <title>blog page</title> </head> <body> ${result} </body> </html>`; } 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࣮ߦڥͰಈ͖ͦ͏ʂ
EOL EOF
ࢀߟ •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/