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

by Souma Suzuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

誰？鈴⽊聡真フロントエンドエンジニア TypeScript を書く仕事をしています座右の銘楽しく働く得意なこと三⾓⾷べ

Slide 3

Slide 3 text

弊社のフロントエンド

Slide 4

Slide 4 text

メインのサービス⽬標評価管理 React / TypeScript ⼈事データベース React / TypeScript 認証サービス React / TypeScript

Slide 5

Slide 5 text

React / TypeScript しかやってない！

Slide 6

Slide 6 text

そんなことありません LP Nuxt ( Vue ) ヘルプページ Nuxt ( Vue )

Slide 7

Slide 7 text

最適な技術選定メインのサービスではできるだけスケールする技術を LPはマークアップに寄り添ったSSRできる技術をヘルプはメンテコストが低く静的HTMLを⽣成できる技術を

Slide 8

Slide 8 text

技術選定のやり直し⼈事データベースでは、1から技術選定をやり直しました - React - Vue - Angular - Elm

Slide 9

Slide 9 text

でもやっぱり React いいよね

Slide 10

Slide 10 text

新しい技術への挑戦その技術を選定する理由がしっかりしていれば、いつでも歓迎 - ReactHooks - Formik / Yup - GraphQL ( Apollo ) - Protocol Buffer ( Twirp ) - CustomElement ( 検証中 )

Slide 11

Slide 11 text

楽しく開発しよう

Slide 12

Slide 12 text

楽しくないことバグった！サーバーサイドのスキーマが変わってる機能改修？コードを触ったらすぐバグるから無理え、このコード誰がSSHでデプロイするんですか？

Slide 13

Slide 13 text

楽しくしようスキーマ駆動開発 Reduxを中⼼とした設計 CI/CDですべてデプロイ

Slide 14

Slide 14 text

スキーマ駆動開発 Reduxを中⼼とした設計 CI/CDですべてデプロイ

Slide 15

Slide 15 text

gqlgen / protoc スキーマ *.go .d.ts

Slide 16

Slide 16 text

モックサーバースキーマモックサーバーフロントエンド

Slide 17

Slide 17 text

スキーマ駆動開発 Reduxを中⼼とした設計 CI/CDですべてデプロイ

Slide 18

Slide 18 text

コード量が多い

Slide 19

Slide 19 text

⼤事なこと APIの型とReduxの型は別々に作る Redux はできるだけUIに近い形で作るロジックはUIに書かず Redux に書く

Slide 20

Slide 20 text

⼤事なことロジックはUIに書かずRedux に書く

Slide 21

Slide 21 text

⼤事なことロジックは UIに書かず Redux

Slide 22

Slide 22 text

re-ducks パターン Redux Selectors Reducer UI Operations API

Slide 23

Slide 23 text

Domainを中⼼に考える Redux Selectors Reducer UI Operations API Domain

Slide 24

Slide 24 text

UIはどうしてるの？ Redux Selectors Reducer UI Operations API Domain

Slide 25

Slide 25 text

Atomic Design Pages Templates Organisms Molecules Atoms UI

Slide 26

Slide 26 text

複数サービスあると… Pages Templates Organisms Molecules Atoms A Pages Templates Organisms Molecules Atoms B

Slide 27

Slide 27 text

ここは共通なことが多い Pages Templates Organisms Molecules Atoms A Pages Templates Organisms Molecules Atoms B

Slide 28

Slide 28 text

HRBrain UI ライブラリまだ内緒だよ

Slide 29

Slide 29 text

実装を楽にする Pages Templates Organisms Pages Templates Organisms UI ライブラリデザイン

Slide 30

Slide 30 text

スキーマ駆動開発 Reduxを中⼼とした設計 CI/CDですべてデプロイ

Slide 31

Slide 31 text

こんな経験ありませんか？社⻑が書いたPHPのインデント滅茶苦茶！読めないよテスト間違ってるのにデプロイしちゃったよあ！SSHしてたら本番のフォルダ消しちゃった

Slide 32

Slide 32 text

実話です

Slide 33

Slide 33 text

CI/CD で楽する Eslint / Prettier を⾃動チェック Jest を⾃動実⾏必ずCIからデプロイ

Slide 34

Slide 34 text

CI/CD フロー Github CircleCI Cloud Build Container Registry Kubernates

Slide 35

Slide 35 text

CI/CD フロー Github CircleCI Cloud Build Container Registry Kubernates

Slide 36

Slide 36 text

CI/CD で業務フロー効率化 Github CircleCI Netlify ブランチPreview Developer 仕様・デザイン確認 Firebase モックサーバー

Slide 37

Slide 37 text

まとめ

Slide 38

Slide 38 text

まとめ⾊々な技術を使ってるよ設計をおざなりにしないよ楽しく開発するために⾊々なものを活⽤してるよ