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
boast frontend 2023/04/14
Search
37108
April 17, 2023
0
28
boast frontend 2023/04/14
37108
April 17, 2023
Tweet
Share
More Decks by 37108
See All by 37108
Amazon API Gateway Study Workshop
37108
3
3.7M
AKIBA.AWS#14_Code_Series
37108
0
1.1k
about_the_history_of_RHCP
37108
0
94
Would_you_like_to_use_aws_cli
37108
0
2.5k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Site-Speed That Sticks
csswizardry
10
700
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A Modern Web Designer's Workflow
chriscoyier
695
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
俺たちのフロントエンド”⼤”⾃慢⼤会 2023/04/1 4 by Oku from Classmethod inc
Intoroduction toB、toCをスクラム開発した経験を話します。 私: とてもやさしい。えらくない。 toB、toC 開発で感じる違い React 周りの話 コードの深掘り 紹介する技術の詳細
Development スクラム開発をベースに⾏なっています。 1w / 2w のタスク量が明確 スプリントでデザインも含められると… ふりかえり → 改善の流れが良い
デイリーが⼤変
Development スクラム開発をベースに⾏なっています。 1w / 2w のタスク量が明確 次スプリントに調整を⼊れる ふりかえり → 改善の流れが良い
慣れるしかなかった
Development 次スプリントに調整を⼊れる n スプリントはとりあえず実装 n+1 スプリント で調整と修正 1スプリントで完璧を求めない
Architecture React がコアなライブラリ Storybook とかよくあるものも⼀式 SPA なら Vite で SSR
ならNext.js Bullet Proof React を参考に構成
Bulletproof React ディレクトリ構造をどうするか Bulletproof Reactの導⼊ components や hooks が⼀番の親ではない 機能
(features) 単位でディレクトリを分ける 機能 (features) の中に components や hooks を内包
Bulletproof React ディレクトリ構造をどうするか ボタンとかの汎⽤的なコンポーネント 特定ページでのみ利⽤するコンポーネント コンポーネントの粒度が明確になる 依存するコードが近い場所にある コードが散らばらないのでレビューしやすい
Bulletproof React ディレクトリ構造をどうするか Vite を利⽤するならおおむねそのまま活⽤ Next.js なら /pages/{name} を feature
に ビジネスロジックよりUIが多い場合など app dir または 「pageExtensions」 API Routes のコードをどこに置くか
Styling Tailwind CSS で実装 SSR でも CSR でも設定少なく動くので快適 CSS クラス名の設計が不要
レビューするのも指摘するのも⾮常に楽 プラグインが便利 tailwind-clip-path と typography line-clamp が本体に追加された
Styling Tailwind CSS で実装 spacing が途中から4px 単位ではない デザイナーとの共通認識を作れていない 18px など
m-[18px] みたいなのが頻発する
Styling spacing を4pxにするように調整
Styling’s future Tailwind CSS で実装 color / line-height など 標準クラスで表現できない
デザイナーとの共通認識を作れていない Figma のプラグインなど積極的に使うと良さそう Design Tokens Community Group の取り決めを活⽤
Care About (toB) toB と toC で複雑さと課題が異なる 複雑なドメイン知識の理解 フォームやテーブルのパフォーマンス 業務でしか起こり得ないバリデーション
項⽬の多いフォーム 複雑なバリデーション
Care About (toC) toB と toC で複雑さと課題が異なる パフォーマンス 多種多様な端末の想定 Core
Web Vitals の改善 など レスポンシブ対応 複雑なアニメーション
To Closly 話せてないことも改善できてないこともたくさん Figma との連携、⾃動化 Storybook 7 中⼼にテスト改善 SVG アイコンや画像の管理