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
フロントエンドの大規模開発におけるTips
Search
hashiba daiki
February 22, 2023
Technology
3
1.1k
フロントエンドの大規模開発におけるTips
フロントエンドの大規模開発を経験し、振り返って今後に活かせるTipsをまとめました。
React / Next / microCMS
hashiba daiki
February 22, 2023
Tweet
Share
More Decks by hashiba daiki
See All by hashiba daiki
Astro の pros / cons
hashibadaiki
1
1.2k
Other Decks in Technology
See All in Technology
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
530
事業者間調整の行間を読む 調整の具体事例
sugiim
0
490
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
210
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
100
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
APIテスト自動化の勘所
yokawasa
7
4k
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
100
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
720
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
120
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
160
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
180
21k
A Tale of Four Properties
chriscoyier
156
23k
Happy Clients
brianwarren
97
6.7k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Transcript
フロントエンドの大規模開発におけるTips ジャムスタックチョットデキル!! シブヤ!! 2023/2/22 はしば
自己紹介 - 羽柴 大生(はしば だいき) - chot Inc. 所属 -
Web フロントエンドエンジニア - 大阪出身→香川在住 - 最近はNestJSで遊んでます。バックエンド楽しい - 今日はお酒たらふく飲みます
自己紹介 - 羽柴 大生(はしば だいき) - chot Inc. 所属 -
Web フロントエンドエンジニア - 大阪出身→香川在住 - 最近はNestJSで遊んでます。バックエンド楽しい - 今日はお酒たらふく飲みます
目次 # フロントエンドの大規模開発におけるTips - 今回対応した案件の説明 - 開発の流れ - それぞれのpoint -
全体振り返り(開発 / 設計 / PJ進行)
概要 - ALBA Net ゴルフメディアのリニューアル - 約7万件の記事 - 約1年間の開発期間 -
フロント常時5名ほど - Next.js / Vercel / microCMS https://www.alba.co.jp/
流れ 要件 定義 WF 機能 コンポー ネント page デザイン変 更
API完成 納品前 要件を定義しなが らWF作成。 先に機能部分の作 成を進めた。
要件 定義 WF 機能 コンポー ネント page 要件を定義しなが らWF作成。 先に機能部分の作
成を進めた。 デザイン変 更 API完成 納品前 pageデザインよりもコン ポーネントが先行した。 合計100個近いコンポーネ ントをこの時作成した(共通 は40個ほど)。 流れ
要件 定義 WF 機能 コンポー ネント page 要件を定義しなが らWF作成。 先に機能部分の作
成を進めた。 デザイン変 更 API完成 納品前 pageデザインよりもコン ポーネントが先行した。 合計100個近いコンポーネ ントをこの時作成した(共通 は40個ほど)。 作成したコンポー ネントを入れ込ん で作成したフェー ズ。 流れ
- 一般的な開発と違い view の作成を後回しにしました - この開発方法はとても開発体験が良かった - 途中で view があった方が説明しやすいという判断で切り上げま
したが、ここは最後まで実装進めても良かったかも 振り返り 要件 定義 WF 機能 コンポー ネント page デザイン変 更 API完成 納品前
- デザイナーの方が考える共通コンポーネントと、エンジニアが考 えるものがずれていた - 作りすぎた。共通は少なくて良い - 共通コンポーネントの責務が曖昧だった 要件 定義 WF
機能 コンポー ネント page デザイン変 更 API完成 納品前 振り返り
- view の作成だけお願いしていた箇所は大体作り直しになった - 後から共通部分の修正を行い工数が嵩張ってしまった - 実際にデータを入れた際に想定していない形式のデータが多数 出た 要件 定義
WF 機能 コンポー ネント page デザイン変 更 API完成 納品前 振り返り
- どこに何を設置するか? - js / ts / css / components
/ assets …etc - CMSの必須は TypeScript における必須ではない - page extensions は大規模開発では大変助けられました - page専用のコンポーネントの置き場にしたり、Next.jsのAPIだけ分割した りといったことが可能に https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions 設計振り返り
開発振り返り - 共通コンポーネントには着手前に時間をかけるべきだった - husky による矯正は必須。lintは厳しければ厳しいほど良い - WF → 機能開発の流れはとても良かった
- scaffdog / aspida / pathpida の開発体験が良かった - 正しさよりコードの統一性
PJ振り返り - view だけを作成する人が必要になるタイミングは限られている (教育 or 静的なpageが多い場合) - テスト期間を削る =
納期が遅れる - single source of truth に従う - クローラーのおかげで九死に一生を得ました (webサイト一括取得ツール) https://contentfinder.jp/
TL;DR # 大規模開発におけるTips - CMSの必須は TypeScript における必須ではない - 共通コンポーネントには着手前に時間をかけるべきだった -
正しさよりコードの統一性 - view だけを作成する人が必要になるタイミングは限られている
ご視聴 & ご清聴 ありがとうございました!!!