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
100
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
51
脱法Svelte / Evasion of svelte rules
ssssota
1
130
Documentation testsの恩恵 / Documentation testing benefits
ssssota
2
800
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
7
3.7k
現代のReactivityとSvelteの魔法
ssssota
0
1.8k
型付きdotenv
ssssota
0
250
Other Decks in Programming
See All in Programming
フロントエンドの現在地とこれから
koba04
10
4.6k
今日で分かる!カスタムコップの作り方
krpk1900
2
140
Debugging: A Few Things You Should Know
jmatsu
1
130
20241004 モノタロウ式~ドメインモデリングとリアーキテクチャ
monotaro
PRO
2
650
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
130
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
130
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
8
840
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
330
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
130
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2k
メルカリ ハロ アプリの技術スタック
atsumo
2
880
【YAPC::Hakodate 2024】TypeScriptエンジニアが感じたPerlのここが面白い
kimitashoichi
1
460
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
What's in a price? How to price your products and services
michaelherold
243
11k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
A designer walks into a library…
pauljervisheath
202
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
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