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
33
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
95
Would_you_like_to_use_aws_cli
37108
0
2.5k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Designing for humans not robots
tammielis
253
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Thoughts on Productivity
jonyablonski
70
4.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
It's Worth the Effort
3n
187
28k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
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 アイコンや画像の管理