チームで作るフロントエンドの歩き方

2019/12/19 に行われた HRBrain Engineers Meetup の登壇資料です

Transcript

1. チームで作る フロントエンドの歩き⽅
2. 誰？ 鈴⽊ 聡真 フロントエンドエンジニア TypeScript を書く仕事をしています 座右の銘 楽しく働く 得意なこと 三⾓⾷べ
3. 弊社のフロントエンド
4. メインのサービス ⽬標評価管理 React / TypeScript ⼈事データベース React / TypeScript 認証サービス React / TypeScript
5. React / TypeScript しかやってない！
6. そんなことありません LP Nuxt ( Vue ) ヘルプページ Nuxt ( Vue )
7. 最適な技術選定 メインのサービスではできるだけスケールする技術を LPはマークアップに寄り添ったSSRできる技術を ヘルプはメンテコストが低く静的HTMLを⽣成できる技術を
8. 技術選定のやり直し ⼈事データベースでは、1から技術選定をやり直しました - React - Vue - Angular - Elm
9. でもやっぱり React いいよね
10. 新しい技術への挑戦 その技術を選定する理由がしっかりしていれば、いつでも歓迎 - ReactHooks - Formik / Yup - GraphQL ( Apollo ) - Protocol Buffer ( Twirp ) - CustomElement ( 検証中 )
11. 楽しく開発しよう
12. 楽しくないこと バグった！サーバーサイドのスキーマが変わってる 機能改修？コードを触ったらすぐバグるから無理 え、このコード誰がSSHでデプロイするんですか？
13. 楽しくしよう スキーマ駆動開発 Reduxを中⼼とした設計 CI/CDですべてデプロイ
14. スキーマ駆動開発 Reduxを中⼼とした設計 CI/CDですべてデプロイ
15. gqlgen / protoc スキーマ *.go .d.ts
16. モックサーバー スキーマ モックサーバー フロントエンド
17. スキーマ駆動開発 Reduxを中⼼とした設計 CI/CDですべてデプロイ
18. コード量が多い
19. ⼤事なこと APIの型とReduxの型は別々に作る Redux はできるだけUIに近い形で作る ロジックはUIに書かず Redux に書く
20. ⼤事なこと ロジックはUIに書かずRedux に書く
21. ⼤事なこと ロジックは UIに書かず Redux
22. re-ducks パターン Redux Selectors Reducer UI Operations API
23. Domainを中⼼に考える Redux Selectors Reducer UI Operations API Domain
24. UIはどうしてるの？ Redux Selectors Reducer UI Operations API Domain
25. Atomic Design Pages Templates Organisms Molecules Atoms UI
26. 複数サービスあると… Pages Templates Organisms Molecules Atoms A Pages Templates Organisms Molecules Atoms B
27. ここは共通なことが多い Pages Templates Organisms Molecules Atoms A Pages Templates Organisms Molecules Atoms B
28. HRBrain UI ライブラリ まだ内緒だよ
29. 実装を楽にする Pages Templates Organisms Pages Templates Organisms UI ライブラリ デザイン
30. スキーマ駆動開発 Reduxを中⼼とした設計 CI/CDですべてデプロイ
31. こんな経験ありませんか？ 社⻑が書いたPHPのインデント滅茶苦茶！読めないよ テスト間違ってるのにデプロイしちゃったよ あ！SSHしてたら本番のフォルダ消しちゃった
32. 実話です
33. CI/CD で楽する Eslint / Prettier を⾃動チェック Jest を⾃動実⾏ 必ずCIからデプロイ
34. CI/CD フロー Github CircleCI Cloud Build Container Registry Kubernates
35. CI/CD フロー Github CircleCI Cloud Build Container Registry Kubernates
36. CI/CD で業務フロー効率化 Github CircleCI Netlify ブランチPreview Developer 仕様・デザイン確認 Firebase モックサーバー
37. まとめ
38. まとめ ⾊々な技術を使ってるよ 設計をおざなりにしないよ 楽しく開発するために⾊々なものを活⽤してるよ