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
93
Would_you_like_to_use_aws_cli
37108
0
2.4k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Rails Girls Zürich Keynote
gr2m
94
14k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Raft: Consensus for Rubyists
vanstee
140
7k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
KATA
mclloyd
29
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Bash Introduction
62gerente
614
210k
Docker and Python
trallard
44
3.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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 アイコンや画像の管理