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

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

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

弊社のフロントエンド

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

React / TypeScript しかやってない！

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

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

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

でもやっぱり React いいよね

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

楽しく開発しよう

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

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

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

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

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

コード量が多い

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

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

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

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

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

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

Atomic Design Pages Templates Organisms Molecules Atoms UI

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

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

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

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

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

実話です

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

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

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

まとめ

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

Other Decks in Programming