Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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/

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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とは：リクエストに関するデータを収集するサービス サーバーレスの味方

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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