Help us understand the problem. What is going on with this article?

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

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

成果物は以下

Screenshot from 2020-01-15 00-48-53.png

Screenshot from 2020-01-15 00-49-11.png

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

  • チュートリアルの使用している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サイトのサンプルサイトを作った気がまったくしない、それくらい簡単だった

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away