how frontend is constructed

Transcript

1. Frontend を⼤局的に捉える Yan
2. 本⽇の資料は Speaker Deck にて公開しています 撮影等ご⾃由に！
3. 今⽇お話すること 1. ⾃⼰紹介 2. 悩み 3. 分割してみた 4. チームの問題を振り返ってみる
4. 1. ⾃⼰紹介 近藤 智哉 (@mtyk_15) Kondo Motoya 󰠁GraphQL / React (バックエンド‧フロン トエンドを担当することが多いです) エン‧ジャパン株式会社 → 株式会社 RevComm → Kalonade 株式会社 → SHE 株式会社 🥰 旅⾏
5. 悩んでいます
6. フロントエンドで⾃分 (組織) に合う 構成をどう⾒つけたらいいですか
8. トピックが多いよぅ... どう繋がっているか⾒えない...
9. ⼿段が⽬的になってしまう... サーバーコンポーネント導⼊したるで ! E2E やったほうがいんじゃね ? マイクロフロントエンド導⼊しよ。 React Query 導⼊したいなぁぁ。
10. フロントエンドの「⽬的」を定義して ⼿段を⼤局的にとらえたい !
11. 3. 分割してみた 体系化‧組織化 パフォーマンスの最適化 品質の担保 ユーザー体験‧アクセシビリティ 開発者体験の向上
12. 3. 分割してみた
13. 3. 分割してみた 体系化‧組織化 パフォーマンスの最適化 品質の担保 ユーザー体験‧アクセシビリティ 品質の担保 開発者体験の向上
14. 3. 体系化‧組織化 概要: コードベースの構造を⼤きな意味で体系化する。 ⽬的: 開発者の認知負荷を下げたり、コードベースのメンテナンス性や再利⽤性の向上など。 Keywords: ‧関⼼の分離 (framework の選定, Design system, headless UI, repo structure, folder structure, State management) ‧可読性 (formatting, naming, coding rules, commenting, review process, modulize) ‧メンテナンスのコスト削減 (documentation) など
15. 3. パフォーマンスの最適化 概要: クライアント側のロード時間の⾼速化、各種リソースの最適化をする。 ⽬的: ユーザー体験の向上 Keywords: ‧クライアントが取得するリソースの最⼩化 (minification, lazy loading, code splitting) ‧圧縮 (lossy compression, image format) ‧バンドル (webpack) ‧Caching (CDN, State management) など
16. 3. 品質の担保 概要: アプリケーションのバグやエラー、操作上の問題に気付くことができるようにする。 ⽬的: 良いユーザー体験の担保や、アプリケーションの安定性‧信頼性の担保 Keywords: ‧ユニットテスト (Jest, Mocha) ‧ビジュアルテスト (Storybook, Chromatic) ‧E2E テスト (Cypress, Playwright)
17. 3. ユーザー体験‧アクセシビリティ 概要: 直感的な UI の提供や、環境によらずアプリケーションを利⽤できるようにする。 ⽬的: どんな状況にいる⼈にとっても、シームレスなユーザー体験を提供する。 Keywords: ‧⼈間中⼼設計 / UIUX ‧アクセシビリティガイドライン (WCAG) ‧クロスブラウザ対応 (polyfills, BrowserStack) ‧クロスデバイス対応
18. 3. 開発者体験 概要: プロダクトを作る上での作業やコミュニケーションを最適化する ⽬的: 組織のケミストリーの向上や、プロダクト開発に必要な作業の最⼩化 Keywords: ‧作業⽤ツール (Chrome extension, Alfred, Arc browser …) ‧チーム間のコラボレーションツール (Chromatic, Figma dev mode) ‧AI の活⽤ (Copilot, CodeRabbit)
19. 3. チームの問題を振り返ってみる 状況: これからプロダクトを作るスタートアップ。toC & B で開発者は少数精鋭。 ⾼速でプロダクトを作って市場に当てたい。 Pick Up (1) 体系化‧組織化  ‧フォルダ構造の検討  ‧再利⽤性の⾼いコード (2) ユーザー体験‧アクセシビリティ  ‧デザインシステム / Headless UI の導⼊ (3) 開発者体験の向上
20. 3. チームの問題を振り返ってみる 状況: メイン事業からスピンアウトして新しい事業を始めた。コードベースは同じだったが専属の チームができてこれからガンガン開発していくフェーズ。 Pick Up (1) 品質の担保  ‧Autify  ‧Praywright (3) 体系化‧組織化  ‧フォルダ構造の⾒直し  ‧State 管理ライブラリの⾒直し
21. ⽬的を意識して ⽇頃のインプットをしたい！