Salesforce B2C Commerce の Composable Storefront が利用しているプロジェクトやライブラリについて

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。


今回は Composable Storefront のために作成されているプロジェクトやプロジェクト内で利用されているライブラリを紹介します。


## プロジェクト

Salesforce が管理している Composable Storefront に関連するオープンソースのプロジェクトは下記の通りです。全て同じレポジトリ内で管理されています。詳細は[ヘルプ](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pwa-kit-overview.html)をご覧ください。

|Package	|Description	|
|---	|---	|
|[pwa-kit-create-app](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-create-app)	|PWA Kit のプロジェクトを作成するためのコマンドプロジェクト。 例：`npx pwa-kit-create-app`	|
|[pwa-kit-dev](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-dev)	|ローカルでの開発や Managed Runtime へのプッシュやログの取得など、開発時に利用するコマンドツール群プロジェクト。例：`npx pwa-kit-dev push`	|
|[pwa-kit-runtime](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-runtime)	|Node.js アプリケーションを Managed Runtime で動かすためのプロジェクト。	|
|[pwa-kit-react-sdk](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-react-sdk)	|PWA Kit でレンダリングするためのプロジェクト。	|
|[commerce-sdk-react](https://salesforcecommercecloud.github.io/pwa-kit/)	|Salesforce B2C Commerce API を利用するための React Hooks のプロジェクト。	|
|[template-retail-react-app](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/template-retail-react-app)	|PWA Kit のメインのテンプレートで多くの React のページやコンポーネントなどが入っている。	|
|[template-typescript-minimal](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/template-typescript-minimal)	|Typescript を利用したプロジェクトのテンプレートで、React のページやコンポーネントは最小限のものしか入っていない。	|
|[template-express-minimal](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/template-express-minimal)	|Managed Runtime 上で動くシンプルに HTML のみをレンダリングするテンプレートで、React のページやコンポーネントは入っていない。	|

それぞれのプロジェクトの関係がわかりやすくなるように図を作ってみました。図内の Preset ID は主なものですので、他の ID は[こちら](https://github.com/SalesforceCommerceCloud/pwa-kit/blob/v3.1.1/packages/pwa-kit-create-app/scripts/create-mobify-app.js#L187)を参照してください。

![PWA Kit Repo & Library.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/1ec14530-c422-9c45-da1c-2a570a880b62.jpeg)



## Retail React App テンプレートで利用しているライブラリ

PWA Kit のメインのテンプレートである [template-retail-react-app](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/template-retail-react-app) 内で利用されているライブラリは下記の通りです。詳細は[ヘルプ](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/retail-react-app.html)をご覧ください。
これらのライブラリはテンプレートにインストールした上記のプロジェクトを通して利用されるることが多いです。

|Library	|Description	|
|---	|---	|
|[React](https://reactjs.org/) 	|ユーザインターフェース構築のための JavaScript ライブラリ	|
|[Express](https://expressjs.com/)	|Node.js でウェブアプリケーションを作成するためのフレームワーク	|
|[Chakra UI](https://chakra-ui.com/) 	|React のコンポーネントのライブラリ	|
|[Emotion](https://emotion.sh/) 	|Javascript 内（React 内）に CSS を記述するためのライブラリ	|
|[Isomorphic Commerce SDK](https://www.npmjs.com/package/commerce-sdk-isomorphic)	|Node.js とブラウザ上で Salesforce B2C Commerce API を利用するためのライブラリ	|
|[Webpack](https://webpack.js.org/)	|ソースコードをビルドするためのライブラリ	|
|[Jest](https://jestjs.io/) 	|Javascript のユニットテストのためのライブラリ	|
|[React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)	|React で作成されたコンポーネントをテストするライブラリ	|
|[Babel](https://babeljs.io/docs/)	| 多くのバージョンのNode.js やブラウザで利用できるするようにソースコードをコンパイルするためのライブラリ	|