Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
業務システムにも使いやすいUIを。モダンフロントエンドの技術選定
kakehashi
October 28, 2021
Business
0
1.4k
業務システムにも使いやすいUIを。モダンフロントエンドの技術選定
kakehashi
October 28, 2021
Tweet
Share
More Decks by kakehashi
See All by kakehashi
KAKEHASHI-会社説明資料-2023.01
kakehashi
3
20k
プロダクト成長とともに変化に強くする方法
kakehashi
0
290
Agile Tech EXPO_2022/カケハシ
kakehashi
0
580
TechPlay22_06_28_Full TypeScriptで新規プロダクトを立ち上げた際に実践した設計と反省
kakehashi
0
620
異分野の知見を活かす、DevOpsの実践: Learning from Other Fields
kakehashi
1
1.6k
1万台のRaspberry_Pi4を制御する_AWS_IoTで実現する新処方箋情報基盤.pdf
kakehashi
0
1.2k
新規開発のスーパーカオス期からの スクラム導入Step by Step
kakehashi
0
1.1k
新規事業立ち上げ時のエンジニアリング
kakehashi
0
870
薬局の在庫発注管理の難しさと機械学習活用
kakehashi
0
1.3k
Other Decks in Business
See All in Business
ROXX 会社説明資料 / We are Hiring!
roxxrecurit
5
44k
株式会社エプコ会社紹介資料2023
epco_kouhou
1
9.6k
ベクティス採用情報
vectis
0
120
CHILLNN_Inc._会社説明資料
chillnn123
0
740
Living Management -Good bye Scrum, Hello Semilattice- #RSGT2023
kyonmm
PRO
1
2.5k
レンティオ株式会社 採用候補者様向け会社紹介資料 / Company Profile
rentio
PRO
0
5.3k
コトラのことが5分でわかる! | 株式会社コトラ説明資料
kotora
21
4.9k
2023年中途採用_会社説明資料.pdf
slj_hr
0
200
株式会社WEIN Group_会社説明資料
weingroup0213
0
750
aumo introduction 202301
aumo
0
97k
Epics - Buidl to Earn.
epicsdao
1
270
チームのパフォーマンスを引き出す、ワクワクするプロダクトゴール、OKR / Waku-waku Product Goal and OKR
navitimejapan
PRO
9
6.6k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
Thoughts on Productivity
jonyablonski
49
2.7k
GraphQLとの向き合い方2022年版
quramy
20
9.8k
How to train your dragon (web standard)
notwaldorf
66
4.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
390
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
How to Ace a Technical Interview
jacobian
270
21k
Building Adaptive Systems
keathley
27
1.3k
Transcript
業務システムにも使いやすいUIを。モ ダンフロントエンドの技術選定 @hiramatsutaku 株式会社カケハシ 2021/10/05 AI在庫管理(新規事業)の設計勘所 https://connpass.com/event/223220/
自己紹介 • 平松拓 • 京都在住、33歳、娘👭 • 趣味 ◦ サッカー、山登り、コードを書くこと •
職種 ◦ ソフトウェアエンジニア ▪ フロントエンドメイン • 経歴 ◦ 新卒で株式会社フリークアウト ◦ いくつかの新規事業に従事 ◦ 2020/6〜 株式会社カケハシ
Agenda
Agenda • 技術選定にあたって意識したこと • Musubi AI在庫管理フロントエンドの技術スタック • 振り返り
Agenda • 技術選定にあたって意識したこと • Musubi AI在庫管理フロントエンドの技術スタック • 振り返り
技術選定にあたって意識したこと
技術選定にあたって意識したこと • 0 → 1 フェーズであるということ
技術選定にあたって意識したこと • 0 → 1 フェーズであるということ
0 → 1 フェーズであること • いかに早くリリースできるか ◦ ユーザに使ってもらって、フィードバックをもらわないと気づけないことは絶対にある ▪ (カケハシのバリューに無知の知というのがある)
• 変更に対して柔軟に対応できるか ◦ 手探りな状況から始めるので、最初から完璧な仕様を決められない ◦ フィードバックループを高速に回す必要がある ◦ 既存の設計が足枷となって変更コストが増えたり、そこに固執したりすると MVP 達成までの距離が遠くなる • ユーザやプロダクトに向き合う時間をできるだけ多くする ◦ やることは無限にある ◦ MVP(Minimum Viable Product)達成前のフェーズでは、ユーザやプロダクトに向き合うことが圧倒的に重要 技術選定にあたって意識したこと
Agenda • 技術選定にあたって意識したこと • Musubi AI在庫管理のフロントエンドの技術スタック • 振り返り、学び
Musubi AI在庫管理フロントエンドの 技術スタック
Musubi AI在庫管理フロントエンドの技術スタック • まずバックエンドの一部も含めた全体構成を紹介します
None
Amplify Console で SPA を配信
バックエンドは AppSync
Musubi AI在庫管理フロントエンドの技術スタック • Amplify Console • TypeScript • React •
Next.js • Apollo Client • Chakra UI • Recoil • LaunchDarkly • Sentry • GitHub Actions • ESLint • Prettier • Jest • React Testing Library • Storybook • reg-suit • Mabl • etc.
Hosting − Amplify Console • SPA の Hosting に Amplify
Console を利用 • GitHub 連携 ◦ Pull Request 単位で一意の URL にデプロイしてくれる ◦ 最近 Pull Request にコメントがつくようになった 😄 • Basic 認証も一瞬で設定できる • monorepo にも対応しており、以下を一つの amplify.yml で管理 ◦ Musubi AI在庫管理 ◦ 社内管理コンソール • ◦ 爆速でフロントエンドのインフラ環境、 CI/CD パイプラインを構築できた Musubi AI在庫管理フロントエンドの技術スタック https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/welcome.html
Hosting − Amplify Console Musubi AI在庫管理フロントエンドの技術スタック AWS のブログに取り上げてもらいました https://aws.amazon.com/jp/blogs/startup/casestudy_kakehashi/
React Framework − Next.js • そもそも何故 React ?? ◦ 社内では
Augular と React の採用実績があったが、担当メンバ(僕)のスキルセット的に、 React の方が早くプロダクトを作ることができたから • 当初 Next.js を使わず webpack config を書いていた ◦ もっとユーザに向き合うべきと考えた • Next.js のルーティングを利用したかった • 現状は SPA で十分なので SSR はしていない • ◦ 属人性の排除 ◦ ビルド、パフォーマンス面の最適化 Musubi AI在庫管理フロントエンドの技術スタック https://nextjs.org/
GraphQL Client − Apollo Client • そもそもなんで GraphQL? ◦ Schemaファーストにフロントエンド、バックエンドを並行して開発したかった
◦ 画面の仕様がまだ固まっていなかった ◦ GraphQL Code Generator と合わせて使うとより強力 ◦ TypeScript との相性も抜群 • GraphQL Client としてはデファクト • Apollo Client cache の仕組みが良い ◦ Redux と一緒によく使われる normalizr の役割を担ってくれる ◦ API レスポンスデータを正規化して効率的に cache • ◦ API レスポンスデータの状態管理を低コストで実現 ◦ 型安全な API クライアントを自動生成 Musubi AI在庫管理フロントエンドの技術スタック https://www.apollographql.com/docs/react/
State management − React.useState / Recoil • コンポーネントに閉じた状態管理には React.useState を利用
• グローバルな状態管理には Recoil を利用 • 一部若干複雑な画面の状態管理にも Recoil を利用 • 状態管理周りのディレクトリ構成、テスト方針などは、別途 Tech Blog で後日紹介します 📝 Musubi AI在庫管理フロントエンドの技術スタック https://kakehashi-dev.hatenablog.com/
React Component Library − Chakra UI • フロントエンド開発は正社員1人(僕)と業務委託メンバ1人なので、できるだけ楽をしたい • アプリケーションで使うコンポーネントが一式が揃っている
• テーマでカスタマイズが容易 • TypeScript との相性も良い • styled-system ベース(個人的に styled-system の思想が好みだった) Musubi AI在庫管理フロントエンドの技術スタック https://chakra-ui.com/
Feature Flag − LaunchDarkly • Feature Flag の管理に LaunchDarkly を利用
• まだリリースできない機能を Feature Flag で隠して細かくリリースしていく • 特定の顧客のみでテストしたいケースなど • Feature Flag の状態管理は、Terraform で実施 Musubi AI在庫管理フロントエンドの技術スタック https://launchdarkly.com/
Agenda • 技術選定にあたって意識したこと • Musubi AI在庫管理のフロントエンドの技術スタック • 振り返り
振り返り
振り返り • 0 → 1 の技術選定については概ね成功なの? • で、使いやすい UI を提供できたの?
振り返り • 0 → 1 の技術選定については概ね成功なの? • で、使いやすい UI を提供できたの?
0 → 1 の技術選定については概ね成功なの? • 技術選定にあたって意識したことベースに振り返る ◦ >いかに早くリリースできるか ◦ >変更に対して柔軟に対応できるか
◦ >ユーザやプロダクトに向き合う時間をできるだけ多くする 振り返り
0 → 1 の技術選定については概ね成功なの? >いかに早くリリースできるか • 結果 ◦ AI在庫管理はバックエンドの開発が重かったのでなんとも言えないが、フロントエンドは先行 してユーザビリティテスト版をリリースできた
◦ 本リリース後もほぼ毎日デプロイできている • 技術選定によりうまくいった点 ◦ Apollo Server の Mocking の機能を利用して手軽に Mock API を立てることができた ◦ LaunchDarkly を使うことで、Feature Flag 管理を簡易化でき、リリース粒度の詳細化、ビック バンリリースの回避ができた 振り返り
0 → 1 の技術選定については概ね成功なの? >変更に対して柔軟に対応できるか • 結果 ◦ 画面の仕様変更がそれなりに発生した(体験設計、情報設計からやり直した画面が半分以上) が、変更コスト
を最小限に抑えることができた ◦ 毎日デプロイして機能追加、改善を行えている • 技術選定がうまくいった点 ◦ GraphQL スキーマを Resource 志向で設計していたため、フロントから投げる Query の修正 のみで対応できることが多かった ◦ GraphQL の Collocation の考えに沿って、React コンポーネントと GraphQL Query or Fragment を同居させることで、コンポーネント単位での画面を作り直したりしやすくなった 振り返り
0 → 1 の技術選定については概ね成功なの? >ユーザやプロダクトに向き合う時間をできるだけ多くする • 結果 ◦ 計測は難しい、、 🤔(良い計測方法があれば、、)
◦ 以下は個人的な感覚 ▪ PO、デザイナ、社内の薬剤師メンバ、機械学習エンジニア、バックエンドエンジニア皆と、プロダクトについてディスカッ ションする時間は惜しみなく取ることができた • 技術選定によりうまくいった点 ◦ Next.js、Chakra UI を用いることで、効率的に開発を行うことができた ◦ GraphQL Code Generator によって、フロントエンドと AppSync を接続部分が効率的に、型 安全にノンストレスな開発体験で実装することができた 振り返り
振り返り • 0 → 1 の技術選定については概ね成功なの? • で、使いやすい UI を提供できたの?
で、使いやすい UI を提供できたの? 絶賛やっていき 💪 しているところ。日々改善しているがまだまだもっとよくできる。 そのために、、、、 振り返り
あなたの力が必要です 🙏 少しでも興味を持った方は カジュアル面談させてもらえると 嬉しいです! 🙏
End