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
1.9k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
2.6k
useSyncExternalStoreを使いまくる
ssssota
6
5.5k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
8
5.1k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
180
脱法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
ReadMoreTextView
fornewid
1
350
Effect の双対、Coeffect
yukikurage
5
1.4k
Blueskyのプラグインを作ってみた
hakkadaikon
1
510
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
160
Bytecode Manipulation 으로 생산성 높이기
bigstark
1
290
エラーって何種類あるの?
kajitack
5
140
Practical Tips and Tricks for Working with Compose Multiplatform Previews (mDevCamp 2025)
stewemetal
0
120
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
480
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
300
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
110
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
760
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Adopting Sorbet at Scale
ufuk
77
9.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Code Review Best Practice
trishagee
68
18k
Statistics for Hackers
jakevdp
799
220k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
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