フロントエンドマスターへの道 その5 snipcartとNext.jsで作るECサイト

5834 ワード
snipcart next.js フロントエンド フロントエンド テキストリンク

上記記事の5つめ。チュートリアルのURLは以下

成果物は以下

チュートリアルからの変更点としては

  • チュートリアルの使用しているNext.jsのバージョンが古くて、一部修正
  • snipcartを2から3にバージョンアップ
  • eslint+pretiierあたりの設定を追加
  • emotionの採用、それにあたってsass関連パッケージを削除
  • dotenvを使ってAPI_KEYを.envに記述

あたりになるかなと思います。追加パッケージは以下

yarn add @types/node \
prettier eslint eslint-config-prettier eslint-plugin-prettier \
eslint-plugin-react eslint-plugin-react-hooks \
@typescript-eslint/eslint-plugin @typescript-eslint/parser \
@emotion/core @emotion/styled @emotion/babel-preset-css-prop babel-plugin-emotion

emotion

Next.jsはよく使うので特に困ったことはなかったんだけど、emotionを使うのが初めてでどうするのがベストプラクティスなのかちょっとよくわからず手探りになってしまった（いい資料がみあたらず……あったら教えてください）

コンポーネントすべてのpropsに SerializedStyles を渡せるようにしておいた。例えば Container.tsx だと

Container.tsx
import { css, SerializedStyles } from '@emotion/core'

const Container: React.FC<ContainerProps> = ({ children, cssProps }) => {
  const container = css(
    {
      width: '100%',
      maxWidth: '980px',
      margin: '0 auto',
      padding: '0 1rem',
    },
    cssProps
  )
  return <div css={container}>{children}</div>
}

type ContainerProps = {
  cssProps?: SerializedStyles
}

export default Container

こうしておくと、親のコンポーネントからスタイルをあてられる

基本的には Object Styles で書くのがよさそうかなーという気がする

従来CSSのカスタムプロパティだったり、SCSSの変数だったりは Enum（Enumでなくてもいいけど） とかで設定してつかうことになる

export enum Color {
  Text = '#111',
  Background = '#fefefe',
  Primary = '#cddc39',
  PrimaryLight = '#ffff6e',
  PrimaryDark = '#99aa00',
}

placeholderみたいなことも、乱用するとあまりよくなさそうではあるけど

こんな感じでできる。CSS in JSだと結構色々なことがやり放題ではある気がするので、こういったことをやるときにはこうする、これはやらない、みたいなルールはちゃんとほしい気がする

snipcart

とても便利だとおもうが、こういったECはローカライズされてないと使うのは厳しいのではないかなという気がする（売るものにもよるんだろうけど）

日本で似たようなサービスがあると便利だと思うんだけど、すでにあるのかな

感想

snipcartの導入があまりに簡単なのでECサイトのサンプルサイトを作った気がまったくしない、それくらい簡単だった