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

Transcript

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

   View Slide

2. 目次

   自己紹介

   Kleinの概要

   画面デモ

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

   まとめ

   

   View Slide

3. 先山 賢一 (@ksakiyama134)

   キャディのフロントエンドエンジニア

   2021年7月に入社

   React / GraphQL / OAuth2.0 / OpenID Connect

   自己紹介

   

   View Slide

4. Kleinの概要
   

   View Slide

5. 一言で言うと

   キャディ社内の受発注管理システムです！

   キャディ社員がオペレーションのために利用します。

   

   Kleinとは？

   

   View Slide

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

   

   View Slide

7. キャディの受発注を話す前に以下を説明します。

   ● どんなビジネスをやってるんだっけ？

   ● 「サプライチェーン」ってどういう意味？

   おさらい

   

   View Slide

8. キャディのビジネス

   

   View Slide

9. キャディのビジネス

   加工会社さんのことを 

   サプライパートナー(SP) 

   と呼んでいます。

   

   View Slide

10. “サプライチェーン”って聞いたことありますか？

    https://www.ntt.com/bizon/glossary/j-s/supply-chain.html

    

    View Slide

11. サプライチェーンとは、製品の原材料・部品の調達から販売に至るまでの一連の流れを指す用語です。

    サプライチェーンの概念で特徴的な点として、自社だけでなく、他社（協力会社など）をまたいでモノの流れを捉えることが挙げられま
    す。たとえば自社がメーカーである場合、部品メーカーや材料メーカーなどから製品の製造に利用する部品および原材料を仕入れ
    て製造します。また販売においては、配送業者や卸業者、そして小売業者が関係するでしょう。このように、サプライチェーンでは自
    社の業務だけでなく、モノが製造されて販売されるまでのフロー全体を捉えます。

    このサプライチェーンを管理し、製品の開発や製造、販売を最適化する手法をサプライチェーンマネジメントと呼び、SCM（Supply
    Chain Management）と呼ばれるシステムを導入している企業も少なくありません。SCMを利用する目的として、部品／材料メーカーや
    卸売業者、販売店などを含めて在庫情報を共有し、在庫の適正化を図ることなどが挙げられます。
    

    “サプライチェーン”って聞いたことありますか？

    https://www.ntt.com/bizon/glossary/j-s/supply-chain.html

    

    View Slide

12. キャディのサプライチェーン

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

    View Slide

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

    

    View Slide

14. プロダクト名の由来

    https://caddi.tech/archives/2211
    

    View Slide

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

    View Slide

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

    View Slide

17. ソフトウェアアーキテクチャ

    Web
    (Nginx)
    BFF
    (Node.js)
    Backend
    (Rust)
    UserAgent
    CloudFlare
    CDN
    コンテンツ配信
    GraphQL gRPC
    

    View Slide

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を実験的に導入中

    アーキテクチャの特徴

    

    View Slide

19. まとめ
    

    View Slide

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

    BtoB要件に答えるための様々な工夫を実装

    ● 大量データ数でもデータ登録やレンダリングが快適

    ● 業務フローを一律に決めにくい点（不確実性）にも対応できるシ
    ステム

    まとめ

    

    View Slide