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
エレガントパズル エンジニアのマネジメントという難問にあなたはどう立ち向かうのか / Elegant Puzzle
iwashi86
13
2.5k
NAB Show 2024 動画技術関連レポート/ NAB Show 2024 Report
cyberagentdevelopers
PRO
3
230
OpenFeatureと自動生成を活用したフィーチャーフラグの宣言的集約管理
biwashi
9
940
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
3
1.2k
RAGの評価フレームワーク「Ragas」をさくっとキャッチアップ
os1ma
4
910
三次元再構成(東京大学大学院 情報理工学系研究科『知能情報論』)
pfn
PRO
8
1.7k
Go1.21から導入された Go Toolchainの仕組みをまるっと解説
yamatoya
12
3k
10分で完全に理解するGuardDutyのS3マルウェア保護
cmusudakeisuke
0
1.2k
Cleanup handling in Go / Go Conference 2024
k1low
5
2.1k
『VoLT』レバテックの デザインシステム ~電光石火の構築プロセスと目指す未来~
leveragestech
2
110
Amazon FSx for Net App ONTAPにおけるファイルシステム/SVM/ボリューム/qtreeの分割の考え方を整理してみる #storagejaws
non97
1
340
自動生成されたhttpエンドポイントごとにカスタムミドルウェアを挿入したい話
uhzz
1
1.7k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
118
18k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Art of Programming - Codeland 2020
erikaheidi
46
12k
A better future with KSS
kneath
231
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
28k
Why Our Code Smells
bkeepers
PRO
331
56k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
15
1.6k
A designer walks into a library…
pauljervisheath
201
23k
Rails Girls Zürich Keynote
gr2m
91
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
650
58k
Music & Morning Musume
bryan
42
5.7k
Designing on Purpose - Digital PM Summit 2013
jponch
112
6.6k
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 だけを作成する人が必要になるタイミングは限られている
ご視聴 & ご清聴 ありがとうございました!!!