[React]~Ambassador画面8:ソート機能を実装しよう!~

こんにちは、KOUKIです。

Reactで画面開発をハンズオン形式で紹介しています。

今回は、ソート機能の実装を行いましょう。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

[React/NextJS]~画面開発まとめ~

<目次>

前回

前回は、検索機能を実装しました。

[React]~Ambassador画面7:検索処理を実装しよう!~

ソート機能

以前、RedisでSort機能の実装を行いました。

[golang]fiber API7~Ambassador: ソート機能~

ここでは、URLの末尾に「sort」と「asc/desc」キーワードを指定して、Productの価格順に並べ替えを行いました。

// 例
http://localhost:8000/api/ambassador/products/backend?sort=asc
http://localhost:8000/api/ambassador/products/backend?sort=desc

// 例

http://localhost:8000/api/ambassador/products/backend?sort=asc

http://localhost:8000/api/ambassador/products/backend?sort=desc

UI側では、この機能を利用して、商品のソート処理を実装しましょう。

プルダウンの設置

ソートの切り替えは、プルダウンで行います。

以前実装したProducts.tsxに実装しましょう。

// pages/Products.tsx
...

const Products = (props: {
	...

	return (
		<>
			<div className="col-md-12 mb-4 input-group">
				<input
					type="text"
					className="form-control"
					placeholder="Search"
					onChange={e => search(e.target.value)}
				/>
                // 追加
				<div className="input-group-append">
					<select className="form-select">
						<option>Select</option>
						<option value="asc">Price Ascending</option>
						<option value="desc">Price Descending</option>
					</select>
				</div>
			</div>
...
}

// pages/Products.tsx

...

const Products = (props: {

...

return (

<input

type="text"

className="form-control"

placeholder="Search"

onChange={e => search(e.target.value)}

// 追加

<option>Select</option>

<option value="asc">Price Ascending</option>

<option value="desc">Price Descending</option>

</select>

</div>

...

}

Filtersモデルの修正

前回作成したFiltersモデルに、sortを追加します。

// models/filters.ts
export interface Filters {
	q: string
	sort: string
}

// models/filters.ts

export interface Filters {

q: string

sort: string

}

Filtersモデルの修正に伴い、この型で定義付けた処理の修正を行います。

// pages/ProductsFrontend.ts
const ProductsFrontend = () => {
...
	const [filters, setFilters] = useState<Filters>({
		q: '',
		sort: '', // 追加
	})
}

// pages/ProductsFrontend.ts

const ProductsFrontend = () => {

...

const [filters, setFilters] = useState<Filters>({

q: '',

sort: '', // 追加

})

}

// pages/ProductsBackend.tsx
...

const ProductsBackend = () => {
...
	const [filters, setFilters] = useState<Filters>({
		q: '',
		sort: '',// 追加
	})
}

// pages/ProductsBackend.tsx

...

const ProductsBackend = () => {

...

const [filters, setFilters] = useState<Filters>({

q: '',

sort: '',// 追加

})

}

// pages/Products.tsx
...

const Products = (props: {
		products: Product[]
		filters: Filters,
		setFilters: (filters: Filters) => void
	}) => {

	const search = (q: string) => {
		props.setFilters({
			...props.filters, // 修正
			q
		})
	}
}

// pages/Products.tsx

...

const Products = (props: {

products: Product[]

filters: Filters,

setFilters: (filters: Filters) => void

}) => {

const search = (q: string) => {

props.setFilters({

...props.filters, // 修正

})

}

search関数のsetFiltersでは「q」と指定していますが、これはFiltersのパラメータのkeyである「q」と合わせているので、いい感じに展開してくれます。そのためには、「…props.filters」のように全ての値を展開する処理を先に書く必要があります。

sort関数の実装

sort関数を実装しましょう。

// pages/Products.tsx
...
const Products = (props: {
		products: Product[]
		filters: Filters,
		setFilters: (filters: Filters) => void
	}) => {

...
	const sort = (sort: string) => {
		props.setFilters({
			...props.filters,
			sort
		})
	}

	return (
		<>
			<div className="col-md-12 mb-4 input-group">
...
				<div className="input-group-append">
					<select className="form-select" onChange={e => sort(e.target.value)}>
...
					</select>
				</div>
			</div>

			...
		</>
	)
}

export default Products

// pages/Products.tsx

...

const Products = (props: {

products: Product[]

filters: Filters,

setFilters: (filters: Filters) => void

}) => {

...

const sort = (sort: string) => {

props.setFilters({

...props.filters,

sort

})

}

return (

...

<select className="form-select" onChange={e => sort(e.target.value)}>

...

</select>

</div>

...

</>

)

}

export default Products

sort関数を実行するために、selectタグにonChangeを指定しました。

ProductsFrontend/BackendのuseEffectの処理を修正しましょう。

// pages/ProductsFrontend.tsx
...

const ProductsFrontend = () => {
...
	useEffect(() => {
		let products = allProducts.filter(
			p =>
				p.title.toLocaleLowerCase().indexOf(
					filters.q.toLowerCase()) >= 0 ||
				p.description.toLowerCase().indexOf(
					filters.q.toLowerCase()) >= 0)

		if (filters.sort === 'asc') {
			products.sort((a: Product, b: Product) => {
				if (a.price > b.price) {
					return 1
				}
				if (a.price < b.price) {
					return -1
				}
				return 0
			})
		} else if (filters.sort === 'desc') {
			products.sort((a: Product, b: Product) => {
				if (a.price > b.price) {
					return -1
				}
				if (a.price < b.price) {
					return 1
				}
				return 0
			})
		}
		setFilterProducts(products)
	}, [filters])
	...
}
export default ProductsFrontend

// pages/ProductsFrontend.tsx

...

const ProductsFrontend = () => {

...

useEffect(() => {

let products = allProducts.filter(

p =>

p.title.toLocaleLowerCase().indexOf(

filters.q.toLowerCase()) >= 0 ||

p.description.toLowerCase().indexOf(

filters.q.toLowerCase()) >= 0)

if (filters.sort === 'asc') {

products.sort((a: Product, b: Product) => {

if (a.price > b.price) {

return 1

}

if (a.price < b.price) {

return -1

}

return 0

})

} else if (filters.sort === 'desc') {

products.sort((a: Product, b: Product) => {

if (a.price > b.price) {

return -1

}

if (a.price < b.price) {

return 1

}

return 0

})

}

setFilterProducts(products)

}, [filters])

...

}

export default ProductsFrontend

FrontEndは、APIへリクエストを飛ばさないので、JavaScriptのsort機能を使って実現しました。

一方、Backend側では、sortキーをURL末尾に付与してからAPIへリクエストを送り、ソートされたデータを受け取ります。

// pages/ProductsBackend.tsx
...

const ProductsBackend = () => {
...
	useEffect(() => {
		(
			async () => {
				const arr = []

				if (filters.q) {
					arr.push(`q=${filters.q}`)
				}

				if (filters.sort) { // 追加
					arr.push(`sort=${filters.sort}`)
				}

				const {data} = await axios.get(
					backendUrl + '?' + arr.join('&'))

				if (data.data) {
					setProducts(data.data)
				}
			}
		)()
	}, [filters])
}

// pages/ProductsBackend.tsx

...

const ProductsBackend = () => {

...

useEffect(() => {

(

async () => {

const arr = []

if (filters.q) {

arr.push(`q=${filters.q}`)

}

if (filters.sort) { // 追加

arr.push(`sort=${filters.sort}`)

}

const {data} = await axios.get(

backendUrl + '?' + arr.join('&'))

if (data.data) {

setProducts(data.data)

}

)()

}, [filters])

}

検証

次回

次回は、Lazy Loading機能の実装をしましょう。

[React]~Ambassador画面9:Lazy Loading機能の実装~

Reactまとめ

[React/NextJS]~画面開発まとめ~

React~記事まとめ~

参考書籍

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

React.js＆Next.js超入門第2版【電子書籍】[ 掌田津耶乃 ]
価格：2970円 (2021/6/26時点)

楽天で購入

ソースコード

Products.tsx

// pages/Products.tsx
import { Product } from '../models/product'
import { Filters } from '../models/filters'

const Products = (props: {
		products: Product[]
		filters: Filters,
		setFilters: (filters: Filters) => void
	}) => {

	const search = (q: string) => {
		props.setFilters({
			...props.filters,
			q
		})
	}

	const sort = (sort: string) => {
		props.setFilters({
			...props.filters,
			sort
		})
	}

	return (
		<>
			<div className="col-md-12 mb-4 input-group">
				<input
					type="text"
					className="form-control"
					placeholder="Search"
					onChange={e => search(e.target.value)}
				/>
				<div className="input-group-append">
					<select className="form-select" onChange={e => sort(e.target.value)}>
						<option>Select</option>
						<option value="asc">Price Ascending</option>
						<option value="desc">Price Descending</option>
					</select>
				</div>
			</div>

			<div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
				{props.products.map(product => {
					return (
						<div className="col" key={product.id}>
							<div className="card shadow-sm">
								<img src={product.image} height={200} />
								<div className="card-body">
									<p className="card-text">
										{product.title}
									</p>
									<div className="d-flex justify-content-between align-items-center">
										<small className="text-muted">${product.price}</small>
									</div>
								</div>
							</div>
						</div>
					)
				})}
			</div>
		</>
	)
}

export default Products

// pages/Products.tsx

import { Product } from '../models/product'

import { Filters } from '../models/filters'

const Products = (props: {

products: Product[]

filters: Filters,

setFilters: (filters: Filters) => void

}) => {

const search = (q: string) => {

props.setFilters({

...props.filters,

})

}

const sort = (sort: string) => {

props.setFilters({

...props.filters,

sort

})

}

return (

<input

type="text"

className="form-control"

placeholder="Search"

onChange={e => search(e.target.value)}

<select className="form-select" onChange={e => sort(e.target.value)}>

<option>Select</option>

<option value="asc">Price Ascending</option>

<option value="desc">Price Descending</option>

</select>

</div>

{props.products.map(product => {

return (

{product.title}

</p>

<small className="text-muted">${product.price}</small>

</div>

)

})}

</div>

</>

)

}

export default Products

ProductsFrontend.tsx

// pages/ProductsFrontend.tsx
import { useEffect, useState } from 'react'
import { Product } from '../models/product'
import { Filters } from '../models/filters'
import Layout from '../components/Layout'
import Products from '../pages/Products'
import axios from 'axios'

const ProductsFrontend = () => {
	const frontendUrl = 'products/frontend'
	const [filterProducts, setFilterProducts] = useState<Product[]>([])
	const [allProducts, setAllProducts] = useState<Product[]>([])
	const [filters, setFilters] = useState<Filters>({
		q: '',
		sort: '',
	})

	useEffect(() => {
		(
			async () => {
				const {data} = await axios.get(frontendUrl)
				if (data) {
					setAllProducts(data)
					setFilterProducts(data)
				}
			}
		)()
	}, [])

	useEffect(() => {
		let products = allProducts.filter(
			p =>
				p.title.toLocaleLowerCase().indexOf(
					filters.q.toLowerCase()) >= 0 ||
				p.description.toLowerCase().indexOf(
					filters.q.toLowerCase()) >= 0)

		if (filters.sort === 'asc') {
			products.sort((a: Product, b: Product) => {
				if (a.price > b.price) {
					return 1
				}
				if (a.price < b.price) {
					return -1
				}
				return 0
			})
		} else if (filters.sort === 'desc') {
			products.sort((a: Product, b: Product) => {
				if (a.price > b.price) {
					return -1
				}
				if (a.price < b.price) {
					return 1
				}
				return 0
			})
		}
		setFilterProducts(products)
	}, [filters])

	return (
		<Layout>
			<Products
				products={filterProducts}
				filters={filters}
				setFilters={setFilters}
			/>
		</Layout>
	)
}

export default ProductsFrontend

// pages/ProductsFrontend.tsx

import { useEffect, useState } from 'react'

import { Product } from '../models/product'

import { Filters } from '../models/filters'

import Layout from '../components/Layout'

import Products from '../pages/Products'

import axios from 'axios'

const ProductsFrontend = () => {

const frontendUrl = 'products/frontend'

const [filterProducts, setFilterProducts] = useState<Product[]>([])

const [allProducts, setAllProducts] = useState<Product[]>([])

const [filters, setFilters] = useState<Filters>({

q: '',

sort: '',

})

useEffect(() => {

(

async () => {

const {data} = await axios.get(frontendUrl)

if (data) {

setAllProducts(data)

setFilterProducts(data)

}

)()

}, [])

useEffect(() => {

let products = allProducts.filter(

p =>

p.title.toLocaleLowerCase().indexOf(

filters.q.toLowerCase()) >= 0 ||

p.description.toLowerCase().indexOf(

filters.q.toLowerCase()) >= 0)

if (filters.sort === 'asc') {

products.sort((a: Product, b: Product) => {

if (a.price > b.price) {

return 1

}

if (a.price < b.price) {

return -1

}

return 0

})

} else if (filters.sort === 'desc') {

products.sort((a: Product, b: Product) => {

if (a.price > b.price) {

return -1

}

if (a.price < b.price) {

return 1

}

return 0

})

}

setFilterProducts(products)

}, [filters])

return (

<Products

products={filterProducts}

filters={filters}

setFilters={setFilters}

</Layout>

)

}

export default ProductsFrontend

ProductsBackend.tsx

// pages/ProductsBackend.tsx
import { useEffect, useState } from 'react'
import { Product } from '../models/product'
import { Filters } from '../models/filters'
import Layout from '../components/Layout'
import Products from '../pages/Products'
import axios from 'axios'

const ProductsBackend = () => {
	const backendUrl = 'products/backend'
	const [products, setProducts] = useState<Product[]>([])
	const [filters, setFilters] = useState<Filters>({
		q: '',
		sort: '',
	})

	useEffect(() => {
		(
			async () => {
				const arr = []

				if (filters.q) {
					arr.push(`q=${filters.q}`)
				}

				if (filters.sort) {
					arr.push(`sort=${filters.sort}`)
				}

				const {data} = await axios.get(
					backendUrl + '?' + arr.join('&'))

				if (data.data) {
					setProducts(data.data)
				}
			}
		)()
	}, [filters])

	return (
		<Layout>
			<Products
				products={products}
				filters={filters}
				setFilters={setFilters}
			/>
		</Layout>
	)
}

export default ProductsBackend

// pages/ProductsBackend.tsx

import { useEffect, useState } from 'react'

import { Product } from '../models/product'

import { Filters } from '../models/filters'

import Layout from '../components/Layout'

import Products from '../pages/Products'

import axios from 'axios'

const ProductsBackend = () => {

const backendUrl = 'products/backend'

const [products, setProducts] = useState<Product[]>([])

const [filters, setFilters] = useState<Filters>({

q: '',

sort: '',

})

useEffect(() => {

(

async () => {

const arr = []

if (filters.q) {

arr.push(`q=${filters.q}`)

}

if (filters.sort) {

arr.push(`sort=${filters.sort}`)

}

const {data} = await axios.get(

backendUrl + '?' + arr.join('&'))

if (data.data) {

setProducts(data.data)

}

)()

}, [filters])

return (

<Products

products={products}

filters={filters}

setFilters={setFilters}

</Layout>

)

}

export default ProductsBackend

filters.ts

// models/filters.ts
export interface Filters {
	q: string
	sort: string
}

// models/filters.ts

export interface Filters {

q: string

sort: string

}

月	火	水	木	金	土	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

[React]~Ambassador画面8:ソート機能を実装しよう!~

前回

ソート機能

プルダウンの設置

Filtersモデルの修正

sort関数の実装

検証

次回

Reactまとめ

参考書籍

ソースコード

Products.tsx

ProductsFrontend.tsx

ProductsBackend.tsx

filters.ts

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

前回

ソート機能

プルダウンの設置

Filtersモデルの修正

sort関数の実装

検証

次回

Reactまとめ

参考書籍

ソースコード

Products.tsx

ProductsFrontend.tsx

ProductsBackend.tsx

filters.ts

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[VisualStudio]Goのテンプレートを扱うプラグインを導入してみよ…

[Go言語]Beegoフレームワークでアプリ開発 ～チュートリアル2～

[React]~Admin画面: React環境構築~

Django Rest Frameworkを学ぼう! ~シリアライズのバリデ…

CSSでImage Carouselアプリをスタイリングしよう!

[Go言語]Goroutineで並列処理を学ぼう2!

go get後に「command not found」が出るとイラっとする件

[Golang]~MovieApp: Dockerで開発環境を構築しよう!~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル

[Go言語]Beegoフレームワークでアプリ開発～チュートリアル2～