プログラミング/svelte

(144d) 更新


公開メモ

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. プログラミング/svelte/ブログ的なもの作り-投稿・表示・編集
  8. プログラミング/svelte/コード配置の整理
  9. プログラミング/svelte/記事の見た目をいじる
  10. プログラミング/svelte/pukiwikiの記事を流し込む

関係ないけどメモ

オブジェクトからプロパティを取り除いたものを返す

これでいいのか?

LANG: ts
function removeProperties<T>(obj: T, ...keys: (keyof T)[]) {
  const result = {} as Partial<T>;
  Object.getOwnPropertyNames(obj).forEach((k) => {
    if (!keys.includes(k)) result[k as keyof T] = obj[k as keyof T];
  });
  return result;
}

添付ファイル: fileemailVerificationForm.png 37件 [詳細] fileplaywright-gui.png 96件 [詳細] filevite-dev.png 88件 [詳細]

Counter: 1153 (from 2010/06/03), today: 4, yesterday: 0