BASEのテーマをReactで構築しECサイトをつくる

GitHub

ika-gyosen/baseShopGen

必須タグがすべて記述された状態のテンプレートなのでyarn startすれば、BASEのHTML編集機能上ですぐに反映できるはずです(2022/6現在)。

BASEとは

BASEは非エンジニアでも簡単にECサイトをGUI上から作成でき、その手軽さから広く使用されているサービスです。

ですが、BASEのデザインをカスタマイズするためには素のHTML/CSSを記述する必要があり、Reactを使用しているエンジニアには大変遠回りの作業になります。

そこで、webpackのhtml-webpack-pluginを使用してBASEのテンプレートを構築できる環境を作成しました。

BASEの問題点

1. BASEのテンプレートは複数のページを単一のHTMLに書く必要がある → 複数人での開発に向かない
2. BASEの商品情報等を参照するには本番環境を使用する必要がある → ローカル環境上では実際の値を参照できない
3. 1・2の問題があるため、BASEが用意したオンラインエディタ上で開発を行う必要がある

1の解決法

Reactを使用し、コンポーネントごとに別ファイルに記述し、webpackのhtml-webpack-pluginを使用して１枚のHTMLへ出力する

2の解決法

出力するHTMLにはBASEのタグを入れ込む必要があります。しかし、開発環境ではその値を読み取ることができません。なので、開発環境ではモックデータを読み出すように、環境変数によって結果を分岐する関数を用意しました。

以下のように記述すると…

<div>
  {baseTag('itemName')}
</div>

開発環境では以下のような出力になります。

<div>
  商品名１
</div>

本番環境では以下のように、BASEの専用タグが出力されます。

<div>
  {itemTitle}
</div>

baseTag関数が返す値はJSONで管理しています。

3の解決法

1・２の問題が解決されたので、プレビューしながらローカルで開発でき、gitで差分管理することができます。

1 補足:どのようにしてReactでHTMLを出力するのか

webpackでhtml-webpack-pluginを使用します。
構成などはhisho/react-static-generatorをかなり参考にさせて頂きました。ありがとうございます。

また、emotionのSSR機能を使用しているため、jsx内にCSSを記述するとHEAD内の<style>へemotionがCSSを書き出してくれます。

BASEはCSSファイルをアップロードすることができますが、一度アップロードしたファイルのバージョン管理などが出来ないため、HTML内にCSSが書き出せるとかなり楽になります。

良い点/悪い点

良い

• Reactコンポーネントで記述できる
• CSSもJSX内に記述できる
• webpack-dev-serverでプレビューできる

悪い

• Hooksが使用できない
• BASEタグの管理が煩雑
• 画像を埋め込む等はできなかったため画像の管理が大変