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
380
どこでも動かすために… 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
140
Array Grouping will soon be arriving at TypeScript
jiko21
0
130
Copying Array Methods arrived at TypeScript
jiko21
1
660
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
130
node:test will replace Jest?
jiko21
0
88
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
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
2k
2025年になってもまだMySQLが好き
yoku0825
7
3.1k
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
820
モバイルアプリ研修
recruitengineers
PRO
5
1.7k
ガチな登山用デバイスからこんにちは
halka
1
200
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
430
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
2
550
生成AI時代に必要な価値ある意思決定を育てる「開発プロセス定義」を用いた中期戦略
kakehashi
PRO
1
250
エラーとアクセシビリティ
schktjm
0
310
TypeScript入門
recruitengineers
PRO
35
11k
Browser
recruitengineers
PRO
8
2.2k
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
2
350
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
A better future with KSS
kneath
239
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
It's Worth the Effort
3n
187
28k
RailsConf 2023
tenderlove
30
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Docker and Python
trallard
45
3.5k
Automating Front-end Workflow
addyosmani
1370
200k
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/