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.2k
フロントエンドの大規模開発における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
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
150
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
140
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.9k
Reading Code Is Harder Than Writing It
trishagee
2
120
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
180
Two Blades, One Journey: Engineering While Managing
ohbarye
4
1.5k
コンテナサプライチェーンセキュリティ
kyohmizu
1
130
わたしのOSS活動
kazupon
2
340
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
240
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
190
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
8
2.1k
Featured
See All Featured
Bash Introduction
62gerente
611
210k
What's in a price? How to price your products and services
michaelherold
244
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
A better future with KSS
kneath
238
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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 だけを作成する人が必要になるタイミングは限られている
ご視聴 & ご清聴 ありがとうございました!!!