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
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
slog.Handlerのよくある実装ミス
sakiengineer
4
420
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
490
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
190
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
290
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Building Adaptive Systems
keathley
43
2.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
We Have a Design System, Now What?
morganepeng
53
7.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Embracing the Ebb and Flow
colly
87
4.8k
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/