TypeScript と Amplify を使った概念検証術

Transcript

1. 1
   TypeScriptとAmplifyを使った概念検証術
   MixLeap Study #70 - 教えて！みんなのTypeScript
   Copyright © MEC Co., Ltd. All Rights reserved.
   2023.03.02 Yuji Adachi
   

   View Slide

2. 2
   Copyright © MEC Co., Ltd. All Rights reserved.
   自己紹介
   足立 優司 (@adt0705 )
   所属 メック株式会社
   オトとりっぷの技術責任者
   よく使う AWS, React / React Native
   技術, 言語 Python, TypeScript
   TypeScript歴 3年ぐらい
   

   View Slide

3. 3
   経歴
   Copyright © MEC Co., Ltd. All Rights reserved.
   化学メーカで研究開発に従事
   ↓
   新規事業担当、犬専用音楽を検討開始
   ↓
   実証実験用に自作でWebアプリやIoTシステム構築
   のべ200頭以上で実験
   ↓
   本格的にモバイルアプリケーション開発開始
   フロントエンドにTypeScript導入
   お手製の加速度センサー
   実験中のフィオちゃん
   

   View Slide

4. 4
   Copyright © MEC Co., Ltd. All Rights reserved.
   留守番インターフェースアプリ
   ♫
   ♩
   ♪
   ♬
   ♩
   

   View Slide

5. 5
   Copyright © MEC Co., Ltd. All Rights reserved.
   

   View Slide

6. 6
   Copyright © MEC Co., Ltd. All Rights reserved.
   概念検証フェーズは、
   TypeScript一本で十分に戦える。
   今日話したいこと
   

   View Slide

7. アジェンダ
   Copyright © MEC Co., Ltd. All Rights reserved.
   概念検証フェーズとTypeScript
   少しの後悔
   オトとりっぷとTypeScript
   

   View Slide

8. アジェンダ
   Copyright © MEC Co., Ltd. All Rights reserved.
   概念検証フェーズとTypeScript
   少しの後悔
   オトとりっぷとTypeScript
   

   View Slide

9. 9
   オトとりっぷのアーキテクチャ
   Copyright © MEC Co., Ltd. All Rights reserved.
   React Native
   CDK
   Amplify
   TypeScriptを使用
   

   View Slide

10. 10
    オトとりっぷのフロントエンド
    Copyright © MEC Co., Ltd. All Rights reserved.
    React Native
    Redux /
    Redux Toolkit
    Amplify Sentry
    React Navigation Expo
    

    View Slide

11. 11
    React Native in TypeScript
    Copyright © MEC Co., Ltd. All Rights reserved.
    jacket/index.tsx
    jacket/styles.ts
    型安全に開発
    型 = ドキュメントになるのがいい
    Jacketは「s, m ,l」の3種類サイズ
    

    View Slide

12. 12
    React NativeとTypeScriptの関係
    Copyright © MEC Co., Ltd. All Rights reserved.
    https://reactnative.dev/blog/2023/01/03/typescript-first
    RN0.71よりTypeScriptが標準化
    多くのライブラリがTypeScript対応済み
    

    View Slide

13. 13
    Redux Toolkit
    Copyright © MEC Co., Ltd. All Rights reserved.
    一元管理されたState（状態）を型で縛れる
    

    View Slide

14. 14
    PlayTorch
    Copyright © MEC Co., Ltd. All Rights reserved.
    エッジ推論のためのライブラリ https://playtorch.dev/docs/tutorials/snacks/yolov5/
    React NativeでPyTorch
    学習済みモデルを動かす
    ことができる
    PyTorch：機械学習用の
    Pythonライブラリ
    

    View Slide

15. 15
    AWS CDK in TypeScript
    Copyright © MEC Co., Ltd. All Rights reserved.
    AWSのインフラをTypeScriptで記述できる
    Pythonもあるが、型安全の方が絶対いい
    

    View Slide

16. アジェンダ
    Copyright © MEC Co., Ltd. All Rights reserved.
    概念検証フェーズとTypeScript
    少しの後悔
    オトとりっぷとTypeScript
    

    View Slide

17. 17
    Copyright © MEC Co., Ltd. All Rights reserved.
    TypeScriptからちょっと脱線しますが、
    概念検証とAmplifyの話します！
    

    View Slide

18. 18
    概念検証とは
    Copyright © MEC Co., Ltd. All Rights reserved.
    簡易的なプロダクトを作成し、
    ビジネス的, 技術的に実現可能かを検証すること
    重要視しているポイントは、
    1. 開発リソースが少ないこと
    2. ある程度の拡張性が担保されていること
    3. メンテナンスが容易であること
    

    View Slide

19. 19
    Amplifyとは
    Copyright © MEC Co., Ltd. All Rights reserved.
    • Amplify CLI（メインで使用）
    コマンドラインからAWSリソースを作成
    • Amplify Framework
    各種クライアントフレームワーク用UI
    • Amplify Console
    ホスティングやCI/CD
    AWSの各種リソース作成のためのお助けフレームワークとして機能
    

    View Slide

20. 20
    Amplify CLIによるAWS構築
    Copyright © MEC Co., Ltd. All Rights reserved.
    オトとりっぷのアーキテクチャ
    作成可能なAWSサービス例
    • 認証（Cognito）
    • GraphQL API（AppSync）
    • データベース（DynamoDB）
    • ストレージ（S3）
    モチベーション
    「VPCなどのインフラ管理やりたくない」
    

    View Slide

21. 21
    AmplifyによるAPI管理
    Copyright © MEC Co., Ltd. All Rights reserved.
    schemaを定義
    FE
    Amazon DynamoDB
    型が定義される
    （CRUD）
    APIの管理がスキーマに集中できる
    フロントエンドの型からバックエンドDBの構造まで一気通貫管理
    BE
    DBが生成する
    

    View Slide

22. 22
    概念検証でAmplifyを使うメリット
    Copyright © MEC Co., Ltd. All Rights reserved.
    「スピード重視したい」と「型安全にいきたい」は
    トレードオフと思ってた
    ↓
    でもAmplifyを使えば、おいしいとこ取りできる。
    • 概念検証フェーズならではのスピード重視
    • 大規模開発だとアンチパターンでも、
    概念検証は１～２人で開発だから問題が顕在化しにくい
    

    View Slide

23. アジェンダ
    Copyright © MEC Co., Ltd. All Rights reserved.
    概念検証フェーズとTypeScript
    少しの後悔
    オトとりっぷとTypeScript
    

    View Slide

24. 24
    後悔の正体
    Copyright © MEC Co., Ltd. All Rights reserved.
    AWS Lambdaの言語にPythonを選択したが、
    TypeScriptにしとけばよかった。
    Pythonを採用した理由
    • AWS Lambda Powertools Python
    • Amazon CodeGuru Reviewer
    • チーム員の出自：計算化学、機械学習
    

    View Slide

25. 25
    AWS Lambda Powertools
    Copyright © MEC Co., Ltd. All Rights reserved.
    LoggerとTracerが便利
    でもTypeScriptも出たので、今となってはPythonじゃなくてもいい
    https://aws.amazon.com/jp/about-aws/whats-new/2022/07/aws-lambda-powertools-typescript-available/
    

    View Slide

26. 26
    Powertools機能紹介 : Logger
    Copyright © MEC Co., Ltd. All Rights reserved.
    Amazon CloudWatch Logsを整形してくれる
    • ログメッセージのフォーマット
    • コールドスタートやfunction情報など
    AWS Lambda上のコード
    CloudWatch Logsへの出力結果
    

    View Slide

27. 27
    Powertools機能紹介 : Tracer
    Copyright © MEC Co., Ltd. All Rights reserved.
    https://aws.amazon.com/jp/blogs/news/simplifying-serverless-
    best-practices-with-aws-lambda-powertools-for-typescript/
    AWS X-Rayに情報を出力してくれる
    X-Rayとは：リクエストに関するデータを収集するサービス
    サーバーレスの味方
    

    View Slide

28. 28
    Amazon CodeGuru Reviewer
    Copyright © MEC Co., Ltd. All Rights reserved.
    コードレビューしてくれる（PRに対してコメントくれる）
    この機能はTypeScriptまだない（まだかなー）
    

    View Slide

29. まとめ
    Copyright © MEC Co., Ltd. All Rights reserved.
    概念検証フェーズは、
    TypeScript一本で十分に戦える
    Amplifyやサーバーレスを掛け合わせることで、
    少人数ならではの最適化を実現できる
    

    View Slide

30. 30
    オトとりっぷに協力してくれる人を
    募集しています！
    OTO TRIP Ambassador
    Copyright © MEC Co., Ltd. All Rights reserved.
    ご興味ある方は、このあとお話しおねがいします！！
    

    View Slide

31. ありがとうございました！
    

    View Slide