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

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

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

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

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

70d6758087f070ce62df4a36b3b1395c?s=128

Souma Suzuki

December 19, 2019
Tweet

Other Decks in Programming

See All in Programming
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
180
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
180
実践 SpiceDB - クライドネイティブ時代をサバイブできるパーミッション管理の実装を目指して / Practical SpiceDB
B1bddcb899ec3060fe9913f3cb70dbb6?s=48 lmt_swallow
0
130
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
F122773bb8d506a4f38a94bfeff45945?s=48 uggds
32
13k
閱讀原始碼 - 再戰十年的 jQuery
Dbfa12cd7e1ff8b06a588609369d6e49?s=48 eddie
1
290
RustのWebフレームワーク周りの概観
E42cffccdc14c60a449caac8de0ce0e0?s=48 hayao
0
180
FutureCon 2022 FlutterアプリのPerformance測定
4affdb6a9878e509da7ca41a87051352?s=48 harukafujita
0
140
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
0
490
테라폼으로 ECR 관리하기 (How to Manage ECR with Terraform)
330c5e37fb238d6b319ae6e18770f44b?s=48 posquit0
0
520
リーダブルテストコード / #vstat
48a913a2e3bb5e68aae6f73079648e84?s=48 jnchito
47
36k
Regular expressions basics/正規表現の基本
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
6
260
VIMRC 2022
E76db8a47bdae9ef76629ecb366483ed?s=48 achimnol
0
130

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
44
9.7k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
StorybookのUI Testing Handbookを読んだ
50fc0fdc2327ecbe7350645812de52e3?s=48 zakiyama
6
2.5k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
266
21k
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
210
39k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Facilitating Awesome Meetings
245cee81a9c424266e5e401d844ea881?s=48 lara
29
4.1k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.3k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k

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