受発注管理システム Kleinのフロントエンド - CADDi

Transcript

1. 受発注管理システム Kleinのフロントエンド
2. 目次
 自己紹介
 Kleinの概要
 画面デモ
 Kleinのソフトウェアアーキテクチャ
 まとめ

3. 先山 賢一 (@ksakiyama134)
 キャディのフロントエンドエンジニア
 2021年7月に入社
 React / GraphQL / OAuth2.0 / OpenID Connect
 自己紹介

4. Kleinの概要
5. 一言で言うと
 キャディ社内の受発注管理システムです！
 キャディ社員がオペレーションのために利用します。
 
 Kleinとは？

6. 先程のスライドのこのプロダクトです

7. キャディの受発注を話す前に以下を説明します。
 • どんなビジネスをやってるんだっけ？
 • 「サプライチェーン」ってどういう意味？
 おさらい

8. キャディのビジネス

9. キャディのビジネス
 加工会社さんのことを 
 サプライパートナー(SP) 
 と呼んでいます。

10. “サプライチェーン”って聞いたことありますか？
 https://www.ntt.com/bizon/glossary/j-s/supply-chain.html

11. サプライチェーンとは、製品の原材料・部品の調達から販売に至るまでの一連の流れを指す用語です。
 サプライチェーンの概念で特徴的な点として、自社だけでなく、他社（協力会社など）をまたいでモノの流れを捉えることが挙げられま す。たとえば自社がメーカーである場合、部品メーカーや材料メーカーなどから製品の製造に利用する部品および原材料を仕入れ て製造します。また販売においては、配送業者や卸業者、そして小売業者が関係するでしょう。このように、サプライチェーンでは自 社の業務だけでなく、モノが製造されて販売されるまでのフロー全体を捉えます。
 このサプライチェーンを管理し、製品の開発や製造、販売を最適化する手法をサプライチェーンマネジメントと呼び、SCM（Supply Chain Management）と呼ばれるシステムを導入している企業も少なくありません。SCMを利用する目的として、部品／材料メーカーや 卸売業者、販売店などを含めて在庫情報を共有し、在庫の適正化を図ることなどが挙げられます。 
 “サプライチェーン”って聞いたことありますか？
 https://www.ntt.com/bizon/glossary/j-s/supply-chain.html

12. キャディのサプライチェーン
 SP A会社さん SP B会社さん キャディ 拠点 キャディ 拠点 顧客 例：キャディが顧客から受注した製品の流れ キャディ 受注 発注 発注 製品送付 製品送付 製品送付 納品
13. Kleinはキャディの受発注を支える

14. プロダクト名の由来
 https://caddi.tech/archives/2211
15. デモ 〜ほぼ全部見せます〜
16. Kleinのソフトウェアアーキテクチャ
17. ソフトウェアアーキテクチャ
 Web (Nginx) BFF (Node.js) Backend (Rust) UserAgent CloudFlare CDN コンテンツ配信 GraphQL gRPC
18. フロントエンド
 • Client-Side Rendering
 • TypeScript / React / Ant-Design / styled-components / Apollo Client / AG Grid 
 • 大量データの一括編集などの要件に対応するための工夫（デモにて説明） 
 BFF
 • TypeScript / Nest.js / Apollo Server / Express
 • コードファーストでGraphQLスキーマを生成
 リポジトリ
 • フロントエンドとBFFはMonorepoで管理
 • lernaでビルド→turborepoを実験的に導入中
 アーキテクチャの特徴

19. まとめ
20. Kleinはキャディの受発注を支える
 BtoB要件に答えるための様々な工夫を実装
 • 大量データ数でもデータ登録やレンダリングが快適
 • 業務フローを一律に決めにくい点（不確実性）にも対応できるシ ステム
 まとめ