Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

70d6758087f070ce62df4a36b3b1395c?s=47 Souma Suzuki
December 19, 2019

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

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

70d6758087f070ce62df4a36b3b1395c?s=128

Souma Suzuki

December 19, 2019
Tweet

Other Decks in Programming

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. まとめ ⾊々な技術を使ってるよ 設計をおざなりにしないよ 楽しく開発するために⾊々なものを活⽤してるよ