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
180
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
3k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
2.8k
useSyncExternalStoreを使いまくる
ssssota
6
5.7k
React CompilerとFine Grained Reactivityと宣言的UIのこれから / The next chapter of declarative UI
ssssota
8
5.4k
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
210
脱法Svelte / Evasion of svelte rules
ssssota
1
230
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
1.1k
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
8
4k
現代のReactivityとSvelteの魔法
ssssota
0
2.3k
Other Decks in Programming
See All in Programming
Improving my own Ruby thereafter
sisshiki1969
1
160
AIコーディングAgentとの向き合い方
eycjur
0
280
OSS開発者という働き方
andpad
5
1.7k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
Rancher と Terraform
fufuhu
2
550
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Building Adaptive Systems
keathley
43
2.7k
The Language of Interfaces
destraynor
161
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
RailsConf 2023
tenderlove
30
1.2k
Speed Design
sergeychernyshev
32
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Being A Developer After 40
akosma
90
590k
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