Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
チームで作るフロントエンドの歩き方
Souma Suzuki
December 19, 2019
Programming
3
540
チームで作るフロントエンドの歩き方
2019/12/19 に行われた HRBrain Engineers Meetup の登壇資料です
Souma Suzuki
December 19, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
oniak3ibm
PRO
0
180
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
oniak3ibm
PRO
0
180
実践 SpiceDB - クライドネイティブ時代をサバイブできるパーミッション管理の実装を目指して / Practical SpiceDB
lmt_swallow
0
130
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
uggds
32
13k
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
290
RustのWebフレームワーク周りの概観
hayao
0
180
FutureCon 2022 FlutterアプリのPerformance測定
harukafujita
0
140
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
kasacchiful
0
490
테라폼으로 ECR 관리하기 (How to Manage ECR with Terraform)
posquit0
0
520
リーダブルテストコード / #vstat
jnchito
47
36k
Regular expressions basics/正規表現の基本
kishikawakatsumi
6
260
VIMRC 2022
achimnol
0
130
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Code Review Best Practice
trishagee
44
9.7k
Six Lessons from altMBA
skipperchong
14
1.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.5k
How to Ace a Technical Interview
jacobian
266
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
The Mythical Team-Month
searls
210
39k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Facilitating Awesome Meetings
lara
29
4.1k
BBQ
matthewcrist
74
7.9k
Music & Morning Musume
bryan
35
4.3k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Transcript
チームで作る フロントエンドの歩き⽅
誰? 鈴⽊ 聡真 フロントエンドエンジニア 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
モックサーバー スキーマ モックサーバー フロントエンド
スキーマ駆動開発 Reduxを中⼼とした設計 CI/CDですべてデプロイ
コード量が多い
⼤事なこと 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 ライブラリ デザイン
スキーマ駆動開発 Reduxを中⼼とした設計 CI/CDですべてデプロイ
こんな経験ありませんか? 社⻑が書いたPHPのインデント滅茶苦茶!読めないよ テスト間違ってるのにデプロイしちゃったよ あ!SSHしてたら本番のフォルダ消しちゃった
実話です
CI/CD で楽する Eslint / Prettier を⾃動チェック Jest を⾃動実⾏ 必ずCIからデプロイ
CI/CD フロー Github CircleCI Cloud Build Container Registry Kubernates
CI/CD フロー Github CircleCI Cloud Build Container Registry Kubernates
CI/CD で業務フロー効率化 Github CircleCI Netlify ブランチPreview Developer 仕様・デザイン確認 Firebase モックサーバー
まとめ
まとめ ⾊々な技術を使ってるよ 設計をおざなりにしないよ 楽しく開発するために⾊々なものを活⽤してるよ