evershopで実現するヘッドレスコマース：開発効率を最大化するReact/TypeScriptの活用法
evershopは、TypeScriptベースのオープンソースEコマースプラットフォームで、特にReactを活用している点が大きな特徴です。エンジニアにとって、モダンな技術スタックで構築されていることが、まず大きな魅力になります。
evershopは、単なるショッピングカートシステム以上の、開発者フレンドリーな構造を持っています。
TypeScript
大規模開発においてバグを減らし、コードの保守性を高めるのに不可欠です。型安全性を確保しながら開発を進められます。
React
フロントエンドはReactベース。コンポーネント指向でUIを構築でき、再利用性が高く、モダンなSPA（シングルページアプリケーション）開発の経験を活かせます。
モジュール性と拡張性
プラグインとモジュールによるアーキテクチャを採用しており、コア機能を変更せずに新しい機能を追加したり、既存の機能をカスタマイズしたりするのが非常に簡単です。
ヘッドレスコマースへの対応
フロントエンドとバックエンドが分離しやすい構造のため、React以外にも、例えばVue.jsやNext.jsなどで完全にカスタムされたストアフロントを構築する「ヘッドレスコマース」のアプローチが容易です。
学習コストの低さ
ReactやNode.jsといった汎用的な技術を深く使っているため、新しい専用言語やフレームワークを覚える必要が少なく、既存のスキルを活かせます。
オープンソースであるため、コードを自由に閲覧・修正でき、問題解決が容易です。コミュニティの貢献によって常に改善され続けています。
evershopの導入は、基本的なNode.jsプロジェクトのセットアップと似ており、非常にスムーズです。
Node.js (LTS推奨)
npm または yarn
データベース (PostgreSQL, MySQL, SQLiteなどがサポートされています)
evershop CLI（コマンドラインインターフェース）を使って、新しいプロジェクトを素早く作成できます。
# evershop CLIをインストール
npm install -g @evershop/cli
# 新しいプロジェクトを作成 (例: my-ecom-store)
evershop new my-ecom-store
# プロジェクトディレクトリへ移動
cd my-ecom-store
プロジェクトディレクトリ内で、必要なnpmパッケージをインストールします。
# 依存関係をインストール
npm install
# または yarn install
データベース設定ファイル（例config/production.json）などを適切に設定した後、開発サーバーを起動します。
# 開発サーバーを起動
npm run dev
これで、通常は http://localhost:3000 でストアフロントが、http://localhost:3000/admin で管理画面が利用可能になります。
evershopでは、プラグイン（Plugin）という仕組みで機能やUIを追加するのが一般的です。ここでは、ストアフロントのフッターに簡単なメッセージを追加するカスタムコンポーネントの例を紹介します。
まず、プラグインを生成します。
# ターミナルで
evershop new-plugin my-custom-footer
plugins/my-custom-footer/pages/Home/Footer/CustomMessage.js のようなパスにReactコンポーネントを作成します。
// plugins/my-custom-footer/pages/Home/Footer/CustomMessage.js
import React from 'react';
// カスタムフッターメッセージコンポーネント
export default function CustomMessage() {
const currentYear = new Date().getFullYear();
return (
<div style={{ textAlign: 'center', padding: '10px', backgroundColor: '#f0f0f0', marginTop: '20px' }}>
<p> 当社へようこそ！あなたのオンラインショッピング体験をより良くします。© {currentYear}</p>
</div>
);
}
evershopは、特定の場所にコンポーネントを挿入するための「フックポイント（Hook Points）」を提供しています。フッターに挿入するために、plugins/my-custom-footer/pages/Home/Footer/client.js を編集します。
// plugins/my-custom-footer/pages/Home/Footer/client.js
import Component from '@evershop/core/components/Component';
// 先ほど作成したコンポーネントをインポート
import CustomMessage from './CustomMessage';
// 'footer' というフックポイントに、CustomMessage コンポーネントを挿入
Component.override('footer', (OriginalComponent) => {
return function WrapperComponent() {
return (
<>
{/* 元のフッターコンポーネントを表示 */}
<OriginalComponent />
{/* その下にカスタムメッセージを追加 */}
<CustomMessage />
</>
);
};
});
これで、ストアフロントのフッターにカスタムメッセージが表示されるようになります。このように、evershopは既存のコードに手を加えることなく、必要な部分だけをオーバーライドしたり、新しい機能やUIをフックしたりできるため、非常にクリーンなカスタマイズが可能です。
