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
360
物流拠点プロダクト フロントエンド技術紹介 - CADDi
[email protected]
March 02, 2022
Tweet
Share
More Decks by
[email protected]
See All by
[email protected]
【CADDI VIETNAM】Company Deck for Engineers
caddi_eng
0
300
CADDi Company Deck_Global.pdf
caddi_eng
0
210
[ English ] Company Overview for Engineers
caddi_eng
0
2.4k
エンジニア向け会社紹介資料
caddi_eng
16
370k
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
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
150
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
290
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
1
170
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
200
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
240
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
140
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.4k
Active Directory攻防
cryptopeg
PRO
8
5.3k
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
340
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
590
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Building Adaptive Systems
keathley
40
2.4k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Producing Creativity
orderedlist
PRO
344
40k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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のテストのみ