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
280
どこでも動かすために… 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
66
Array Grouping will soon be arriving at TypeScript
jiko21
0
63
Copying Array Methods arrived at TypeScript
jiko21
1
510
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
100
node:test will replace Jest?
jiko21
0
66
NestJS a progressive web framework
jiko21
3
2k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
1
1.1k
Other Decks in Technology
See All in Technology
PREEMPT_RT over the years
ennael
PRO
0
310
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
13
3.4k
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
160
Oracle Database 23ai 新機能#4 Real Application Clusters
oracle4engineer
PRO
0
110
業務ヒアリングと知識の呪い
tamai_63
0
110
HashHub会社案内「なぜ今、パブリックブロックチェーンに賭けるのか」
hashhub
3
75k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
200
Pythonを活用したLLMによる構造的データ生成の手法と実践
brainpadpr
3
230
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
390
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
13
1.7k
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
200
Featured
See All Featured
Designing for Performance
lara
604
68k
Speed Design
sergeychernyshev
22
460
The Art of Programming - Codeland 2020
erikaheidi
50
13k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Code Reviewing Like a Champion
maltzj
519
39k
Six Lessons from altMBA
skipperchong
26
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
125
18k
Debugging Ruby Performance
tmm1
73
12k
Unsuck your backbone
ammeep
667
57k
From Idea to $5000 a Month in 5 Months
shpigford
380
46k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
48k
4 Signs Your Business is Dying
shpigford
180
21k
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/