svelte-book-review-app
参考サイト
使用技術
- Svelte
- TypeScript
- TailwindCSS
- Google Books API
Svelteプロジェクト準備
npx degit --force sarioglu/svelte-tailwindcss-template .
TypeScriptに変換する
node scripts/setupTypeScript.js
コンポーネントの追加
mkdir src/components
touch src/components/Header.svelte
ルーティング
npm install svelte-spa-router
mkdir src/pages/
touch src/pages/SearchBook.svelte
mkdir src/router
touch src/router/index.ts
Repositoryの作成
APIとの通信をRepositoryによって抽象化する
httpClientの作成
npm install axios
mkdir src/repositories
touch src/repositories/httpClient.ts
Book Repositoryの作成
mkdir src/repositories/book
touch src/repositories/book/types.ts
touch src/repositories/book/BookRepository.ts
touch src/repositories/book/index.ts
Repository Factoryの作成
touch src/repositories/RepositoryFactory.ts
SearchBarコンポーネントの作成
touch src/components/SearchBar.svelte
ローディングコンポーネント作成
touch src/components/Spinner.svelte
BookCardコンポーネント作成
touch src/components/BookCard.svelte
ページネーション
npm i svelte-infinite-scroll
ストアの実装
mkdir -p src/store/book
touch src/store/book/index.ts
