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
96
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
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
1
42
脱法Svelte / Evasion of svelte rules
ssssota
1
100
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
750
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
7
3.6k
現代のReactivityとSvelteの魔法
ssssota
0
1.7k
型付きdotenv
ssssota
0
220
Other Decks in Programming
See All in Programming
Polars を Kaggle コンペで使ってみた(LMSYS Chatbot Arena)
kohecchi
1
360
めざせ!WKWebViewマスター! / WKWebView Master
marcy731
3
480
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
250
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
370
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
340
2024 컴포즈 정원사
jisungbin
0
140
Rubyのobject_id
qnighy
6
1.3k
(非公開スライド追加)座談会 「Strict ConcurrencyとSwift 6が開く新時代: 私たちはどう生きるか?」
shiz
1
140
Uncharted packages (Laravel Live Denmark)
freekmurze
0
140
TypeScriptとGraphQLを活用した変化に強いプロダクト作り
bicstone
4
550
Scala におけるコンパイラエラーとの付き合い方
chencmd
1
150
楽しく簡単に!QRコードの読み取り機能を実装しよう
penguinsan_pg
1
190
Featured
See All Featured
Code Review Best Practice
trishagee
62
16k
Building Your Own Lightsaber
phodgson
101
5.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
400
65k
Fantastic passwords and where to find them - at NoRuKo
philnash
47
2.7k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
How to Ace a Technical Interview
jacobian
275
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Building Flexible Design Systems
yeseniaperezcruz
324
37k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
22
1.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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