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
recruiting@caddi.jp
March 02, 2022
Technology
0
360
物流拠点プロダクト フロントエンド技術紹介 - CADDi
recruiting@caddi.jp
March 02, 2022
Tweet
Share
More Decks by recruiting@caddi.jp
See All by recruiting@caddi.jp
【CADDI VIETNAM】Company Deck for Engineers
caddi_eng
0
320
CADDi Company Deck_Global.pdf
caddi_eng
0
210
[ English ] Company Overview for Engineers
caddi_eng
0
2.4k
エンジニア向け会社紹介資料
caddi_eng
16
380k
CADDi 会社紹介・採用説明資料
caddi_eng
11
920k
機械学習チームのモノレポ移行
caddi_eng
0
570
BtoB SaaS を支える 認証認可基盤の設計
caddi_eng
0
1.2k
2023.01_CADDi Thailand Company Overview
caddi_eng
0
15k
20220826_Company Briefing Online Event
caddi_eng
0
560
Other Decks in Technology
See All in Technology
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
520
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
MIMEと文字コードの闇
hirachan
2
1.4k
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
220
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5k
AIエージェント開発のノウハウと課題
pharma_x_tech
1
780
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
220
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
190
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
610
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
220
Featured
See All Featured
Faster Mobile Websites
deanohume
306
31k
How GitHub (no longer) Works
holman
314
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Automating Front-end Workflow
addyosmani
1368
200k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Music & Morning Musume
bryan
46
6.4k
What's in a price? How to price your products and services
michaelherold
244
12k
Side Projects
sachag
452
42k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
A Modern Web Designer's Workflow
chriscoyier
693
190k
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のテストのみ