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
Svelteでライブラリを作る / Make your library with Svelte
Search
TOMIKAWA Sotaro
December 08, 2023
Programming
0
160
Svelteでライブラリを作る / Make your library with Svelte
https://github.com/ssssota/make-library-with-svelte
TOMIKAWA Sotaro
December 08, 2023
Tweet
Share
More Decks by TOMIKAWA Sotaro
See All by TOMIKAWA Sotaro
漸進。
ssssota
0
2.4k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
2.7k
useSyncExternalStoreを使いまくる
ssssota
6
5.5k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
8
5.2k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
190
脱法Svelte / Evasion of svelte rules
ssssota
1
210
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
1k
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
8
3.9k
現代のReactivityとSvelteの魔法
ssssota
0
2.2k
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
370
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
660
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
RailsGirls IZUMO スポンサーLT
16bitidol
0
130
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
260
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
C++20 射影変換
faithandbrave
0
560
5つのアンチパターンから学ぶLT設計
narihara
1
140
Discover Metal 4
rei315
2
110
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Code Review Best Practice
trishagee
69
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Applications with DynamoDB
mza
95
6.5k
How GitHub (no longer) Works
holman
314
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Making Projects Easy
brettharned
116
6.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Transcript
Svelteでライブラリを作る Svelte Japan Online Meetup #1
誰? 冨川宗太郎 フロントエンドエンジニア { x: 'ssssotaro', github: 'ssssota' } svelte-exmarkdownっていうのを作っている
このスライドもsvelte-exmarkdownが使われています
これから話すこと 1. なぜSvelteでライブラリを作るのか 2. はじめかた 3. 難しいこと 4. Svelte v5について
5. Tips
なぜSvelteでライブラリを作るのか →パイがデカいのに、まだ数が出てないから 知名度は着実に伸び続けている🔥 まだ成長途中だからこそチャンスがある! star-history.com 2017 2018 2019 2020 2021
2022 2023 20.0k 40.0k 60.0k sveltejs/svelte Star History Date GitHub Stars
はじめかた ここにいる人は叩いたことがありそう↓ pnpm init svelte テンプレートにライブラリ用があるのでそれを使う src/lib ディレクトリにライブラリのコードを書く src/routes ディレクトリにサンプルコードを書く
package.json に必要な情報を埋める! npm publish ! see: https://kit.svelte.dev/docs/packaging
難しいこと Svelteはその設計上UIコンポーネントライブラリの設計が ReactなどJSX系ライブラリと比較して難しい。 これは第一級オブジェクトとして扱える範囲が狭いことに起因 する。 →CSSカスタムプロパティ(変数)、svelte/action(use:*)、 bind:this 、export function をうまく使おう。
Svelte v5について キターーー!!!🔥🔥🔥(まだですが) すでにライブラリを作っている皆様、対応頑張りましょう。 まだ作ってない皆様、Svelte5で作り始めましょう。 イベントハンドラが第一級オブジェクト(相当)として扱えるよ うになりかなり柔軟性が向上しています。 Context+Storeだった箇所もContext+Runesで置き換えるこ とができパフォーマンス向上も期待できます。
Tips 作ったらMade with Svelteに登録しよう! 日本人以外にもリーチできる(Hacker Newsなども?) 作ったらSvelte日本Discord#ショーケース で紹介しよう! 反応もらえます。コミュニティ温かい changesetsとrenovateの設定をしておくと便利
ライブラリ開発をサステナブルにしよう 一応v0.1から始めつつ、はやくv1をリリースしよう! 大体リリース直後インターフェース迷いがちなのでv0.1で v1になるとライブラリ採用のハードルが下がる
Svelteでライブラリを作ろう! いまがアツい! ssssota/make-library-with-svelte