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.1k
Other Decks in Technology
See All in Technology
Building Dashboards as a Hobby
egmc
0
350
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
610
How to do well in consulting–Balkan Ruby 2024
irinanazarova
0
120
Cypress or Playwright?
rainerhahnekamp
0
160
DMM.com アルファ室採用案内資料
hsugita
1
220
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
4
37k
.NET Profiler in 2024.
kkamegawa
2
860
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
600
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
610
Improve Your Development Workflow with Gemini Code Assist
meteatamel
0
120
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
250
Featured
See All Featured
Designing with Data
zakiwarfel
96
4.8k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
[RailsConf 2023] Rails as a piece of cake
palkan
27
4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
What's new in Ruby 2.0
geeforr
337
31k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
A Philosophy of Restraint
colly
197
16k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
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 だけを作成する人が必要になるタイミングは限られている
ご視聴 & ご清聴 ありがとうございました!!!