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
物流拠点プロダクト フロントエンド技術紹介 - CADDi
Search
[email protected]
March 02, 2022
Technology
0
420
物流拠点プロダクト フロントエンド技術紹介 - CADDi
[email protected]
March 02, 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
420
製造業の会計システムをDDDで開発した話
caddi_eng
3
1.9k
【CADDI VIETNAM】Company Deck for Engineers
caddi_eng
0
1.6k
CADDi Company Deck_Global.pdf
caddi_eng
1
500
[ English ] Company Overview for Engineers
caddi_eng
1
8.9k
エンジニア向け会社紹介資料
caddi_eng
17
590k
キャディ株式会社 会社紹介・採用説明資料
caddi_eng
12
1.2M
機械学習チームのモノレポ移行
caddi_eng
0
690
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1.5k
Other Decks in Technology
See All in Technology
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
190
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.1k
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
470
フレームワークを意識させないワークショップづくり
keigosuda
0
210
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
5k
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
110
React19.2のuseEffectEventを追う
maguroalternative
2
520
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
350
Wasmのエコシステムを使った ツール作成方法
askua
0
220
Railsの話をしよう
yahonda
0
170
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
540
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Context Engineering - Making Every Token Count
addyosmani
7
270
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Writing Fast Ruby
sferik
629
62k
Navigating Team Friction
lara
190
15k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Why Our Code Smells
bkeepers
PRO
340
57k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Transcript
A B O U T 物流拠点プロダクト
2 物流拠点プロダクト 入出荷予定確認、製品受入、検査、梱包、出荷 リーダー:入出荷確認、リソース計画 作業担当者:検査、製品受入、検査、梱包、出荷 物理を伴う難しさ、イレギュラー前提での設計が必要 予定を過ぎても届かない 予定されていないものが届いた 製品が届いたけど個数が足りない 検査でNGが出た
ARCHITECTURE 3 GraphQL NestJS Next.js Apollo Server URQL DB Prisma
Storybook MSW Chakra-ui Antd
4 REPOSITORY yarn v3 yarn v1 に比べてインストール速い どの階層で yarn install
しても大丈夫なのが👍 volta nodeバージョン管理 自動でnodeインストールしてくれる Monorepo
5 FRONTEND CSSを書く -> propertyをセットする Backendメンバーにも受け入れられやすい 型の補完が効き開発体験よい レイアウト系のコンポーネントはかなり便利 BoxやFlexを多用 Chakra
UI
6 FRONTEND Chakra-ui はプリミティブなコンポーネントが多く、柔 軟性は高いが、高機能コンポーネントがない Antd で補完 Datepicker Table Antd
7 FRONTEND シンプルで使いやすい Apollo Clientと比べてBundle Sizeが約 1/3 React Suspenseのサポート 唯一Offlineのサポート
今後利用する可能性あるかも URQL
8 BACKEND Node.js and TypeScript ORM 開発体験とても良い prisma schema を書く
DB migration code 自動生成 型つき prisma client 自動生成 GraphQLとの相性良い N + 1 問題をケア Prisma
9 TESTING Storybook CSF3.0 2.0よりよりシンプルにStoryを書けるようになった Storybookの定義をJestで再利用可能になった @storybook/testing-reactを使い、StoryをJestに取 り込んで結合テスト
10 TESTING Mock Service Worker API Mocking library ネットワークリクエストが発生するComponentも簡単に データをMockingできる
StorybookでPage Componentのgraphql queryをMocking
11 今後の展望 Monorepo circleci/path-filteringでビルドワークフロー最適化 Testing Viewの結合テストはStorybookに集約 今後、Storybookのinteraction testingをCI実行できる ようになると、Jestで書かなくても良くなりそう JestはHooksのテストのみ