React Nativeを中心にTypeScriptでApplication開発をできるようにアーキテクチャ変更した話

会社の立ち上げ時から現在までのアーキテクチャ変遷とともに技術選定の背景と方針。選定後の課題と対策や解決方法についてご紹介します。

Save Medical
川上 知成
Tomofusa Kawakami

Transcript

1. © 2022 Save Medical Corp. 1 React Native Matsuri 2022 川上 知成 React Nativeを中⼼に TypeScriptでApplication開発を できるように アーキテクチャ変更した話
2. © 2022 Save Medical Corp. 2 ⾃⼰紹介 Save Medical 取締役 CTO 川上知成 @tomofusa 属性: Backendエンジニア出⾝ エンジニアリングマネージャータイプ Skill︓ 技術リードプロジェクトを担当する。社内初をやり続ける Cross platform開発経験 キーワード 側Native: Apache Cordova、某社SDKを使った側Native Game、 Game Engine :GLESをベースのもの、Cocos2d-x、Unity など。 Browser ベース PWA、CanvasベースにWebGL、emscripten、WASM 気になった⽅は Wantedlyのカジュアル⾯談へGo︕ 軍艦島帰り
3. © 2022 Save Medical Corp. 3 © 2022 Save Medical Corporation 3 3 Agenda • 会社紹介 • 沿⾰に合わせた技術Story • Before, After • 技術転換におけるTips • 振り返り • まとめ
4. © 2022 Save Medical Corp. 4 4 科学的根拠に基づくデジタル療法を開発する 規制に向き合い、真正⾯から社会実装する 安⼼・誠実なサービスを届ける MISSION
5. © 2022 Save Medical Corp. 5 5 VISION 患者の健康と⽣活の質向上 医療者の負担軽減と医療の発展 そして、社会医療費の適正化に貢献する
6. © 2022 Save Medical Corp. 6 6 想いを巡らせる 学び続ける 解を創る 相⼿の⽴場を想像し尊重し、 会話と⾏動ができる⼈を称賛しよう。 相⼿とは、患者さん、医療者、外部パートナー、働く仲間。 価値を提供するために、 学びを重ね、試す⼈を称賛しよう。 答えのない問題にこそ取組み、 ⾔葉や形にする⼈を称賛しよう。 VALUES
7. © 2022 Save Medical Corp. 7 7 • 2型糖尿病患者向けDigital Therapeutics (DTx) を開発 国内初の糖尿病アプリ治験を実施（住友ファーマ株式会社との共同開発） • 複数DTxを開発・運営する「パートナシップモデル」を拡⼤ DTxの開発・運営サービス企業へ 探索・共同開発・運⽤受託の混合モデル DTx 開発プラットフォーム 開発戦略、薬事/臨床開発、 Tech、データ分析、CX、CS等 糖 尿 病 新規 A 新規 B 新規 C ⽇本初の糖尿病アプリ治験 事業概要
8. © 2022 Save Medical Corp. 8 8 患者様 医療者 出典︓https://www.iqvia.com/insights/the-iqvia-institute/reports/digital-health-trends- 2021 Product Image
9. © 2022 Save Medical Corp. 9 9 会社概要 社名 株式会社Save Medical (Save Medical Corporation) 所在地 〒103-0023 東京都中央区⽇本橋本町３­３­６ ワカ末ビル２F 代表者 代表取締役社⻑ 淺野正太郎 設⽴ 2018年5⽉10⽇ 資本⾦ 1億円 （総資金調達額7.5億円） 事業内容 医療機器プログラムの研究開発、製造販売 第⼆種医療機器製造販売業許可（許可番号︓13B2X10453） 主要株主 URL https://savemedical.co.jp 会社概要
10. © 2022 Save Medical Corp. 10 10 2018 2019 2020 2021 2022 創業 (JOMDD⼦会社として) 1億円を資⾦調達 ⽇本初の糖尿病アプリ治験を開始 (住友ファーマ㈱との共同開発による) 3億円を資⾦調達 5 10 12 6 5 2.5億円を資⾦調達 ◀ 2018年11⽉ 最初に契約したオフィス (現 ⽇本橋ライフサイエンスビル 3) 2019年12⽉ オフィス移転 ▶ (現 ⽇本橋ライフサイエンスビル 7) 12 製造販売業許可の取得 新オフィス移転 2 Save Medicalのこれまで
11. © 2022 Save Medical Corp. 11 11 2018 2019 2020 2021 2022 創業 (JOMDD⼦会社として) 1億円を資⾦調達 ⽇本初の糖尿病アプリ治験を開始 (住友ファーマ㈱との共同開発による) 3億円を資⾦調達 5 10 12 6 5 2.5億円を資⾦調達 12 製造販売業許可の取得 新オフィス移転 2 Save Medicalのこれまで 糖尿病アプリを中⼼とした Product戦略 他疾病領域へも展開
12. © 2022 Save Medical Corp. 12 12 沿⾰に合わせた技術Story 2018 ⽴ち上げフェーズ 事業開始した時の背景 〜 2020 Before CTO JOIN 〜 2022 After 転換期後〜現在
13. © 2022 Save Medical Corp. 13 13 2018年 ⽴ち上げフェーズ ⽬標 事業仮説をもとに、「Productを作り上げる」 なかでも「モバイルアプリでプロダクト体験を作る」が最優先 ⽅針 Engineerは業務委託のみ。 JOINするメンバーの技術親和性。検討⼯数を減らしスピードを優先する 技術的な意思決定︓ 2018年 iOS & Android対応︓ Direction上も知⾒がありWeb Frontendメンバーが 開発可能という側⾯でReact Nativeを選定 Backend API開発をRuby On Railsで実施。 Web ApplicationもRuby On Railsで素早く⽴ち上げる。 Cloud Infra Structure = AWS 既存のノウハウも利⽤する。
14. © 2022 Save Medical Corp. 14 14 2020年 Before • 2020年 CTO JOIN • アプリとしては完成。サービス稼働状態。 • Frontend React Native / Backend Rails というシステム境界が属⼈化 → チームとしては対応の作業待ち・確認待ちが発⽣しやすい。 • Webアプリケーション ⇒ react-rails (Rails + React) Webpacker → React ではあるが⽅⾔であり、Frontend メンバーは⼿を出しづらい • 社内エンジニアがいない状態のため、整備していたCI/CDとOpsが分断。 → CD整備されていたが利⽤が不⼗分で、⼿動でバイナリアップロード → Roll back Ops起因のトラブル発⽣ Issue
15. © 2022 Save Medical Corp. 15 15 2020年 Before React Native vs Flutter 議論 Flutterとは︖ https://ja.wikipedia.org/wiki/Flutter 初リリース⽇ : 2017年5⽉ Flutter 1.0 : 2020年12⽉ 2018年時点では検討に上がらず、2020年にもなるとversion1.0が 出ていることもあり検討してみたいと話題となっていた。 Flutter（フラッター）は、Googleによって開発されたフリーかつオープンソース のUIのSDKである。単一のコードベースから、Android、iOS、Linux、macOS、 Windows、Google Fuchsia向けのクロスプラットフォームアプリケーションを開 発するために利用される。
16. © 2022 Save Medical Corp. 16 16 2020年 Before React Native vs Flutter 議論 React Native Flutter 主な⾔語 JavaScript, TypeScript Dart • 技術検証をした結果、開発プロセスは異なってくるがプロダクト要件満たす • 技術選定の鍵は、Product全体像と技術親和性。 • ProductとしてWeb画⾯は必要 → react-railsからWeb frontendを分離し、 SPA/MPAの移⾏は必要 • Flutter実務経験者とのDiscussion 引き続きReact Nativeを継続利⽤
17. © 2022 Save Medical Corp. 17 17 2020年 Before 〜 2022年 After Afterに⾏く前に • 前述のIssueを解決するために⽇夜取り組んでいた状況だった。 • ⼀⽅でとあるEvent起因で、アプリケーションアーキテクチャを再考することにした。 • 技術的な積み上げのReset • 開発パートナーの再開拓も必要 • 技術を変えたところで解決するという銀の弾丸はない。 それでもやるべきか︖ React Nativeを継続する意思決定は実施済み。 最⼤の争点はBackend開発 再考することによるデメリット
18. © 2022 Save Medical Corp. 18 18 2020年 Before 〜 2022年 After • Ruby on Rails • 個人的にも大変お世話になってきたFW。Best Practiceが詰まっており、 自分にも利用知見がある。 • containerベース開発を志向した際に、image sizeやloadingが過多にな っていた。AWS lambdaなどserverless functionベースには向かない。 • server side Node.js • containerは軽量になり、functionベースへの対応やversionなどサポー トも豊富。 • ノウハウの不足 検討開始段階では、トレードオフ。 情報キャッチアップ調査/検証を進める。
19. © 2022 Save Medical Corp. 19 19 2020年 Before 〜 2022年 After NestJSという選択肢 • NestJSとの出会い。各社blogなど採用事例を参考に検討開始。 • 公式ドキュメント・チュートリアル熟読、training courseの受講 「必要機能・アーキテクチャパターンの充足感」 「TypeScript実装という開発言語統一に大きな一歩を踏み出せる」 → NestJS + TypeScript + expressベースを採用 急ピッチで初期プロダクトアーキテクチャ検討・Container image検証し、構築 monorepo = web-services repository docker compose upでAPI, Web Frontend 起動
20. © 2022 Save Medical Corp. 20 20 2020年 Before 〜 2022年 After Microservice Architecture の思想継承 1. ⾃前で作るべきもの 2. 他社サービスを利⽤すべきもの 1. ⼩さい組織でmicroserviceをメンテナンスは困難。逆コンウェイの法則にならうとその分チ ーム体制が必要。 2. 外部SaaSや既存ライブラリなどサービス利⽤。巨⼈の肩に乗る →⼯数（=費⽤）・スピード（=スケジュール）・品質を上げる選択をしたい 例: auth0の選択による セキュリティ対策開発の効率化 と WebUX体験向上 Silent Authentication あらためRefresh Token Rotation.
21. © 2022 Save Medical Corp. 21 21 2022年 After Before After まとめ Before 2020 After 2022 Mobile FW React Native React Native ⾔語 JavaScript TypeScript Web FW Ruby on Rails + react-rails Next.js ⾔語 Ruby + TypeScript TypeScript Backend FW Ruby on Rails NestJS ⾔語 Ruby TypeScript 認証 devise Auth0 * 誤用があり再実装が必要 ⾔語統⼀
22. © 2022 Save Medical Corp. 22 22 Review process 2022年 After Tips 形式だけであったopenapi.ymlから実践的なSchema Driven Developmentへの移⾏ • openapi.yml を prism mock serverを利⽤した Frontend開発 • 当初docker containerでlocal compose up で対応。 Frontend & BackendでAPIのPRを出す形に変化 Create PR API review API update merge PR さらに進化し、stoplight studio desktopの採⽤ image: stoplight/prism:4 command: 'mock -h 0.0.0.0 /tmp/spec.yaml'
23. © 2022 Save Medical Corp. 23 23 2022年 After Tips Stoplight Studio Desktopの採⽤ - Local mock serverとして起動 - API Design GUIも SaaS版もあり、開発初期 App Distributionのmock接続 としても活⽤ https://stoplight.io/studio
24. © 2022 Save Medical Corp. 24 24 2022年 After Tips NestJSのORMapperはdefaultではtypeORM → ⽐較検討をした結果Prismaを採⽤。 最⼤のワークフロー改善貢献は openapi.yml からtypeの⾃動⽣成 双⽅合意していることがCodeに落とし込まれていることが重要 TypeScriptを採⽤したことによるメリット享受 {API, Web, Mobile} ただし、NestJS公式で紹介しているPrismaServiceとして直接呼び出しをおこなっているためアプリケ ーションが⼤きい場合には注意が必要。 例: Test Performance悪化、開発効率減など Repository Patternなどを採⽤して回避。 prismaの採⽤ https://docs.nestjs.com/recipes/prisma
25. © 2022 Save Medical Corp. 25 25 2022年 After Tips エンジニア採⽤が困難な昨今、エンジニアのモチベーションとして fullstack開発へチャレンジしやすい状況の創出 codeが読める状況というのは双⽅にとって⼼理的に安全である。 - 問題があった時に気づける。 - 原因の特定にチーム貢献できる。 all typescript 開発 のメリット その他Tips: • Reduxの廃止、Hooksの導入 • React Native version up :: braking changeなど差分が大きい場合の対応、RCTBridgeの壁、再実装など TypeScriptでFrontend Backend垣根を減らすことは可能になった。 “Mobile React Native Engineer ←→ Backend API” すぐに開発可能にはならない
26. © 2022 Save Medical Corp. 26 振り返り
27. © 2022 Save Medical Corp. 27 27 振り返り - 認知負荷減 - sytax, ⾔語仕様の差分による実装・修正・レビュー時のSwitching Costが⼤幅に減 - ⾔語スイッチの負荷が無いので、フルスタックにやる場合にやりすいと思います。 - 使いやすさ - 書きやすい、読みやすい。ツールがある程度統⼀されている。 - コードが読みやすいのと、ランタイムエラーを減らせていると思います。frontendと apiのI/Fでnullable, undefinedの定義ができているので、扱いやすいです。 - 領域横断した、可読性の向上。 - monorepoでの⼀括管理もやりやすい - 型付 - TSが⼀般的になったのはやはり、静的型付けによる恩恵は素晴らしい。 ⼀⽅で、厳格に型付けに固執しないようにバランスも⼤事。 - 型安全かつ⼊⼒補完があって開発しやすいです - TS⾮対応ライブラリなどが逆にストレスに感じる エンジニアボイス ＞ TSの効果
28. © 2022 Save Medical Corp. 28 28 振り返り 現在の開発技術選定（TSなど）で、ご⾃⾝がFullstackに開発してみ たいと考えられますか︖ 開発リソース効率とメンバーの意志が⽅向性としてPositive ※⾃分のやりたいことにFocusしている⽅も含む エンジニアボイス ＞ 領域横断
29. © 2022 Save Medical Corp. 29 29 振り返り DX Criteria (v202104) 💡 https://dxcriteria.cto-a.org/ DX Criteria( DX基準 )は、⽇本CTO協会が監修・編纂している企業のデジタル化とソフトウ ェア活⽤のためのガイドラインです。 本基準は、デジタル技術を企業が活⽤するために必要な要素を多⾓的かつ具体的に体系化し たものです。ソフトウェアエンジニアリング組織の健全な成⻑・経営⽬標の可視化・パート ナーとのコミュニケーションなどに使っていただくことを⽬的に作成されています。
30. © 2022 Save Medical Corp. 30 30 DX Criteria ⽐較 2020 2022 2年間の積み重ねで全体改善できたことを確認 本来は会社全体向けのアセスメント。システム部分のみPickup⽐較
31. © 2022 Save Medical Corp. 31 31 Next Challenge シフトレフトテスト (Shift Left Testing) from Wikipedia 左シフトテストは、ソフトウェアテストとシステム テストへのアプローチであり、ライフサイクルの早い 段階でテストが実行されます。 医療機器開発モデルがIEC62304に準拠しているため、 新たなチャレンジになる。 Agile 開発プロセスの導入をどのように医療 機器開発にとりこめるか？ Save Medical 社員で研修し RPO取得！ https://www.itmedia.co.jp/im/articles/1111/07/news155.html
32. © 2022 Save Medical Corp. 32 32 まとめ • Save Medicalについてご紹介 • 沿革と技術の変遷について: Before → After • 振り返り • アーキテクチャ変更をきっかけに組織改善もできる。
33. © 2022 Save Medical Corp. 33 33 最後に、カジュアル⾯談募集 [PR] https://www.wantedly.com/projects/1139457 ご興味湧いた方いらっしゃいましたら、 是非カジュアル面談しましょう。