プログラミング/svelte のバックアップ差分(No.24)

更新
追加された行はこの色です。
削除された行はこの色です。
[[公開メモ]]

* svelte や svelte kit を使いこなしたい [#o86663ca]

svelte や svelte kit は Web サイト構築用のライブラリ

Visual Studio Code を最大限活用するために作られた最新のエコシステムの恩恵を受けるために勉強してみよう

以下で学ぶこと：

- データベースの使い方を学ぶ (Prisma)
- フォームのバリデーション (SuperForms, Zod)
- サインアップ・ログイン・ログアウトのできる認証機能 (Lucia)
- その際にメールアドレスの確認を行う (nodemailer)
- css ライブラリを選定する (TailwindCSS, DaisyUI, svelte-french-toast)
- デプロイ方法を学ぶ (node build)
- テストを書く (Playwright, vitest)


* 目次 [#p0ab4c9c]

#contents

** いろいろ読んで勉強中 [#o6d339e1]

- SvelteKit+Superforms+Prisma+Luciaでログイン機能を爆速で実装する~
https://zenn.dev/gawarago/articles/f75f5113a3803d
- SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた~
https://zenn.dev/kosei28/articles/d965f221a656fd
- Vitest / Playwrightを使ってSvelteのコンポーネントをテストする~
https://qiita.com/oekazuma/items/925ddbf48870fb999c19#vitest%E3%81%A8%E3%81%AF
- TypeScript 4.9のas const satisfiesが便利。型チェックとwidening防止を同時に行う~
https://zenn.dev/moneyforward/articles/typescript-as-const-satisfies
- コーディング不要でGraphQLサーバが作れるPrismaを触ってみて可能性を感じた - SMARTCAMP Engineer Blog~
https://tech.smartcamp.co.jp/entry/started-prisma
- worst password list~
https://github.com/danielmiessler/SecLists/blob/master/Passwords/Common-Credentials/10-million-password-list-top-100000.txt
- 5歳娘「パパ、余分なpropsいっぱい書くんだね！」~
https://qiita.com/Yametaro/items/814f40d08e9d30584e20#5%E6%AD%B3%E5%A8%98%E3%83%91%E3%83%91%E4%BD%99%E5%88%86%E3%81%AAprops%E3%81%84%E3%81%A3%E3%81%B1%E3%81%84%E6%9B%B8%E3%81%8F%E3%82%93%E3%81%A0%E3%81%AD
-- svelte での書き方 → https://stackoverflow.com/questions/76285794/svelte-components-intrinsicelements-or-sveltehtmlelements-for-extending-with-ht

* いよいよやってみる [#s61d3616]

ここでの作業内容を収めた GitHub プロジェクト：~
https://github.com/osamutake/svelte-authtest

+ [[プログラミング/svelte/VSCodeの準備]]
+ [[プログラミング/svelte/テストの仕方を確認]]
+ [[プログラミング/svelte/Prisma と Lucia を使った認証システム]]
+ [[プログラミング/svelte/メールアドレスの確認を行う]]
+ [[プログラミング/svelte/認証機能のテストを追加]]
+ [[プログラミング/svelte/管理者権限を付与する]]
+ 以下は調整中
+ [[プログラミング/svelte/ブログ的なものを作ってみる]]

** style の :global について [#xfd2fae0]

svelte の style 定義には自動的にコンポーネントインスタンスの id が追加されるため、
そのコンポーネントに直接含まれる（子コンポーネントは除外）エレメントにしか効果を及ぼさない。

コンポーネントを超えて効果を期待する場合には :global を付ける。

https://svelte.jp/docs/svelte-components#style
 LANG: html
 <style>
 	:global(strong) {
 		/* これはすべての <strong> に適用されます */
 		margin: 0;
 	}
 
 	div :global(strong) {
 		/* これは「このコンポーネント内の <div> 要素」の中にある
 			 「すべての <strong> 要素」に
 			 適用されます */
 		color: goldenrod;
 	}
 </style>

上記の例では div に :global がかかっていないため、div にはコンポーネントインスタンスの 
ID が付き、その下にあることが条件になっている。

「このコンポーネントの子供」に適用したい場合にはこのテクニックが役に立ちそう。
Counter: 1184 (from 2010/06/03), today: 1, yesterday: 0