Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
受発注管理システム Kleinのフロントエンド - CADDi
Search
[email protected]
March 01, 2022
Technology
1
2.2k
受発注管理システム Kleinのフロントエンド - CADDi
[email protected]
March 01, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
キャディでのApache Iceberg, Trino採用事例 -Apache Iceberg and Trino Usecase in CADDi--
caddi_eng
0
230
製造業の会計システムをDDDで開発した話
caddi_eng
3
1.7k
【CADDI VIETNAM】Company Deck for Engineers
caddi_eng
0
1k
CADDi Company Deck_Global.pdf
caddi_eng
1
380
[ English ] Company Overview for Engineers
caddi_eng
0
5.5k
エンジニア向け会社紹介資料
caddi_eng
16
500k
キャディ株式会社 会社紹介・採用説明資料
caddi_eng
12
1.1M
機械学習チームのモノレポ移行
caddi_eng
0
640
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1.4k
Other Decks in Technology
See All in Technology
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
290
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
240
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.6k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
370
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
390
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
160
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
210
Lazy application authentication with Tailscale
bluehatbrit
0
170
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
190
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
15k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Fireside Chat
paigeccino
37
3.5k
For a Future-Friendly Web
brad_frost
179
9.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Gamification - CAS2011
davidbonilla
81
5.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
受発注管理システム 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要件に答えるための様々な工夫を実装 • 大量データ数でもデータ登録やレンダリングが快適 • 業務フローを一律に決めにくい点(不確実性)にも対応できるシ ステム まとめ