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.4k
フロントエンドの大規模開発におけるTips
フロントエンドの大規模開発を経験し、振り返って今後に活かせるTipsをまとめました。
React / Next / microCMS
hashiba daiki
February 22, 2023
Tweet
Share
More Decks by hashiba daiki
See All by hashiba daiki
補足資料:LLMとは?
hashibadaiki
0
18
苦しんで向き合うLLM時代の開発
hashibadaiki
13
4.4k
Astro の pros / cons
hashibadaiki
1
1.3k
Other Decks in Technology
See All in Technology
Modern Linux
oracle4engineer
PRO
0
160
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
LLMを搭載したプロダクトの品質保証の模索と学び
qa
1
1.1k
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
3
1.1k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
890
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
120
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
670
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
440
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
550
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
GraphQLとの向き合い方2022年版
quramy
49
14k
Done Done
chrislema
185
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Scaling GitHub
holman
463
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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 だけを作成する人が必要になるタイミングは限られている
ご視聴 & ご清聴 ありがとうございました!!!