svelte-book-review-app

参考サイト

• https://zenn.dev/azukiazusa/books/9dac1257c77f47/viewer/3216ae

使用技術

• 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