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

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

oto trip
March 04, 2023

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

oto trip

March 04, 2023
Tweet

More Decks by oto trip

Other Decks in Technology

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を使えば、おいしいとこ取りできる。
    • 概念検証フェーズならではのスピード重視
    • 大規模開発だとアンチパターンでも、
    概念検証は1~2人で開発だから問題が顕在化しにくい

    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