Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

目次
 自己紹介
 Kleinの概要
 画面デモ
 Kleinのソフトウェアアーキテクチャ
 まとめ


Slide 3

Slide 3 text

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


Slide 4

Slide 4 text

Kleinの概要

Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

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


Slide 8

Slide 8 text

キャディのビジネス


Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

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


Slide 11

Slide 11 text

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


Slide 12

Slide 12 text

キャディのサプライチェーン
 SP A会社さん SP B会社さん キャディ 拠点 キャディ 拠点 顧客 例:キャディが顧客から受注した製品の流れ キャディ 受注 発注 発注 製品送付 製品送付 製品送付 納品

Slide 13

Slide 13 text

Kleinはキャディの受発注を支える


Slide 14

Slide 14 text

プロダクト名の由来
 https://caddi.tech/archives/2211

Slide 15

Slide 15 text

デモ 〜ほぼ全部見せます〜

Slide 16

Slide 16 text

Kleinのソフトウェアアーキテクチャ

Slide 17

Slide 17 text

ソフトウェアアーキテクチャ
 Web (Nginx) BFF (Node.js) Backend (Rust) UserAgent CloudFlare CDN コンテンツ配信 GraphQL gRPC

Slide 18

Slide 18 text

フロントエンド
 ● 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を実験的に導入中
 アーキテクチャの特徴


Slide 19

Slide 19 text

まとめ

Slide 20

Slide 20 text

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