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

更新

公開メモ

svelte や svelte kit を使いこなしたい †

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

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

以下で学ぶこと：

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

目次 †

いろいろ読んで勉強中 †

いよいよやってみる †

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

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

style の :global について †

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: 4