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

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

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

Kleinの概要

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

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

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

キャディのビジネス 

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

[email protected]

More Decks by [email protected]

Other Decks in Technology

Featured

Transcript