StartupAngular2資料

Transcript

1. Copyright © KAKEHASHI Inc. All Rights Reserved.
   

   Startup Angular #2
   KAKEHASHIでAngularを利用すること
   Satoshi Watanabe@株式会社カケハシ
   2021/11/26
   

   View Slide

2. Copyright © KAKEHASHI Inc. All Rights Reserved.
   

   本日の内容
   Startup Angularということで、
   スタートアップ企業としてのカケハシがAngularをどのように活用して
   いったのかというお話をできればと思っています。
   

   View Slide

3. Copyright © KAKEHASHI Inc. All Rights Reserved.
   

   自己紹介
   渡辺悟史 (わたなべ さとし)
   株式会社カケハシ エンジニア
   担当はPocket Musubi開発
   主にフロントエンドをメインに担当
   twitter: @sassy_watson
   

   View Slide

4. Copyright © KAKEHASHI Inc. All Rights Reserved.
   

   株式会社カケハシ
   創業5年のスタートアップ
   「日本の医療体験を、しなやかに。」のミッションのもと
   テクノロジーで日本の患者体験・薬局体験の向上に取り組む
   日本の医療体験を、しなやかに。
   

   View Slide

5. 約
   6万 店
   （コンビニの数：約5.3万店）
   約
   7億 回
   調剤薬局の数 患者さんと薬剤師の1年間の会話数
   処方された薬を受け取るところ
   処方された薬について説明するところ
   薬について相談するところ
   自分の薬の重複や相互作用を確認するところ
   自分の薬や体質の情報を管理するところ
   薬を減らしたり、飲みやすくするところ
   薬以外のことについて相談するところ
   一般医薬品や介護用品を購入するところ
   自宅を訪問して薬の管理・指導をするところ
   患者さんがもつ薬局への印象
   薬局業界を取り巻く環境
   5
   5
   出典：処方箋受取率の推計_https://www.nichiyaku.or.jp/assets/uploads/activities/bungyo/s/R2suikei.pdf
   

   View Slide

6. 厚生労働省は、薬局に変革を促している
   6
   対物業務 対人業務
   出所： 厚生労働省 患者のための薬局ビジョン（https://www.mhlw.go.jp/stf/seisakunitsuite/bunya/kenkou_iryou/iyakuhin/yakkyoku_yakuzai/index.html）
   6
   

   View Slide

7. 7
   患者さんへの提供価値を妨げている要因
   創業後、400人以上の薬剤師へのインタビューで見えてきた課題
   対人以外の業務が多く、
   心と時間の余裕がない
   処方箋だけでは患者さんの
   ニーズがわからない
   （患者コミュニケーションへの不安）
   対物業務が多い
   各患者さんに対して
   何をどう話すべきか悩ましい
   （患者コミュニケーションへの不安）
   「効率化」の課題
   「患者関係性」の課題
   人によって業務の質に
   バラつきがある
   業務の標準化が
   出来ていない
   「標準化」の課題
   

   View Slide

8. 8
   　患者さんと薬剤師の“医療体験”を変革するため
   調剤薬局向けSaaS「Musubi」が誕生
   

   View Slide

9. 9
   対物から対人へ。門前からかかりつけへ。
   そして、地域医療を担う存在へ。
   薬局に求められる役割が大きくなるにつれ、負担も大きくなっている。
   

   View Slide

10. 患者さんのための薬局づくりのパートナーとして、
    複合プロダクトで「薬局DX」をトータルサポート。
    医薬品発注
    管理最適化
    

    View Slide

11. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    AngularとReact
    カケハシではAngularとReactのどちらかをチームで採用している
    

    View Slide

12. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    Angularをどこで使っているか
    ● Musubi
    ○ Angular + Electron
    ● Pocket Musubi(LIFF/薬局管理画面)
    ○ Angular(Web)
    ● Musubi Insight
    ○ Angular(Web)
    

    View Slide

13. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    なぜAngularを採用したのか
    ● 導入時はまだAngular2が出たばかりのころ
    ○ ReactとAngularのシェアは当時差がほとんどなかった
    ● 全部入り(routerだったりHttpClientだったり)のフレームワーク
    ● TypeScriptを使うこと前提(静的型による開発上のメリット)
    ○ TypeScript対応という観点で見た時に、当時のReactはまだ不安
    ○ Angularは基本TypeScriptを使う
    ○ 型重要！型重要！
    

    View Slide

14. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    なぜAngularを採用したのか
    ● 当時のReactはまだHooksがなかった
    ○ Vertual DOMをいい感じに使うためのかなり薄いフレームワーク
    ○ Flux的な議論やモジュール・コンポーネント切り分けのような開発規約におい
    て決定版と言えるようなものがなく「ぼくのかんがえたさいきょうの開発方法」
    の模索で界隈が疲弊していると観測していた
    ● AngularはAngular Wayが極めて明確
    ○ 公式の開発ガイドラインがある
    ○ ソフトウェアエンジニアのスキルレベルによる実装手段のセグメンテーションが
    起きにくく価値創造のための実装に集中しやすい
    ○ 素早くリリースすることを重視！
    

    View Slide

15. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    まずはMusubiを開発
    Musubiの知見を生かし
    他のプロダクトを
    高速リリース
    

    View Slide

16. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    公式ドキュメントで基本的な開発方法はわかる！
    

    View Slide

17. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    Angularの良いところ
    ● ロジックはServiceに書いて、ComponentにDIさせれば良い
    ○ できる限りロジックはServiceに書く
    ○ テストはServiceでテストをやる
    ● Componentもテンプレートとスタイル(HTML/CSS)とロジック(TypeScript)が分離さ
    れている
    ○ デザイナーと協業しやすい(HTML/CSSを別で書いてもらえる)
    

    View Slide

18. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    RxJSは苦労する
    ● リアクティブプログラミングに慣れる必要がある
    ● ここは、かなりの意識を変化させる必要がある(手続き型の書き方とは違う)
    ● streamをいかに操作し、使うかが大事
    

    View Slide

19. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    RxJSでいかにがんばるかがポイント
    ● subscribeの中の関数にはできる限りロジックは書かない
    ○ streamをoperatorでできる限り操作する(if文が出てきたらfilterを使う、等)
    ● ネストはしない(switchMapやmergeMapを使おう)
    ○ subscribeの中でのsubscribeも注意
    ● unsubscribeを忘れない
    ○ テンプレートで表示するだけだったらasync pipeを使う
    ● がんばりすぎて読みづらくなったら注意
    ○ 他の人が理解できないと結果バグの温床になる
    ○ チームがRxJSに成熟する必要がある
    ○ ペアプロ・モブプロで知見の共有を！
    

    View Slide

20. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    状態管理
    ● プロダクトで状態管理は異なっている
    ● Musubiというプロダクトは内製reducer
    ○ 状態管理のライブラリのデファクトが当時なかった
    ○ といってもメンテナンスが大変
    ● Pocket Musubiのフロントのような小規模だと状態管理のライブラリは使わず、
    BehaviorSubjectでがんばるという選択もある
    ○ ngrxは too mach
    ○ ただ大きくなってくると状態管理のライブラリが欲しくなる
    ● 使う時はngrxを第1候補に
    

    View Slide

21. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    CSSライブラリ
    ● Musubiはmaterialize.cssを使う
    ○ しかしこれは色々やろうとすると逆に邪魔になる
    ○ angular2-materializeもメンテナンスされなくなる
    ● Pocket Musubiはその反省からCSS関連はライブラリを使ってない
    

    View Slide

22. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    テスト
    ● 単位テストは書ける範囲で書く
    ○ Componentのテストはコストがかかるので無理しない
    ● E2Eテストはコードを書くのは大変
    ● E2Eテストはmabl(テスト自動化ツール)を使う
    ○ AngularフレームワークのE2Eテストは使わない
    

    View Slide

23. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    angular-cli
    ● angular-cliがものすごく便利
    ○ WebPackでがんばってた時が嘘のよう・・・・
    ● アップデートも ng updateで一発
    ○ renovateでversion upしないように気をつける
    

    View Slide

24. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    まとめ
    ● KAKEHASHIでAngularで導入・活用の話をしました
    ● もっと話したいことはありますが、また別の機会に
    ● これを機会に皆様と情報交換をしたいと思っています。
    ● よろしくお願いします。
    

    View Slide

25. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    株式会社カケハシでは
    エンジニア採用を行っています。
    興味がある方はぜひカジュアル面談か
    らお願いします。
    https://recruit.kakehashi.life/engineer
    

    View Slide

26. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    ブログもあります
    検索キーワード：カケハシ 技術ブログ
    

    View Slide

27. Copyright © KAKEHASHI Inc. All Rights Reserved.
    

    

    View Slide