スタバのAPI見つけたから遊んで見る

'スターバックス'のjsファイルを漁ってたら商品リストAPIを発見。

Next.js, Tailwind cssの勉強に使ってみます。

みつけたURL: https://product.starbucks.co.jp/api/category-product-list/beverage/index.json

作成したコード

const Starbucks = ({ data }) => {
	return (
		<>
			<ul className='container mx-auto mt-4 pb-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 gap-y-4'>
				{data.map(product => {
					const image = `https://product.starbucks.co.jp${product.image1}`
					return (
						<li key={product.id}>
							<div>
								<img src={image} alt='画像' className='border border-gray' />
							</div>
							<div className='p-4'>
								<p className='text-sm font-bold'
								   dangerouslySetInnerHTML={{ __html: `${product.product_name}` }} />
							</div>
						</li>
					)
				})}
			</ul>
		</>
	)
}

export default Starbucks

export async function getStaticProps() {
	try {
		const res = await fetch('https://product.starbucks.co.jp/api/category-product-list/beverage/index.json')
		const data = await res.json()

		return {
			props: {
				data
			}
		}
	} catch (e) {
		console.error(e)

		return {
			props: {
				data: []
			}
		}
	}

getStaticProps内で商品データを取得します。取得したデータはpropsとしてコンポーネントに流れます。

コンポーネント内では dataの中に商品データの配列が入っています。

mapメソッドで展開して tailwind css でデザインしてあげましょう。

このようなレイアウトにはgridが効果的です。grid-cols-{n}で横に並ぶ要素数を定義できます。

またgap-{n}で縦横のmarginを指定できます。

grid内の要素のwidthは自動的に計算されるので指定する必要はありません。

その他の記事

公開日 2021/03/21

作成したコード

Thanks you for reading.