1TypeScriptとAmplifyを使った概念検証術MixLeap Study #70 - 教えて!みんなのTypeScriptCopyright © MEC Co., Ltd. All Rights reserved.2023.03.02 Yuji Adachi
View Slide
2Copyright © MEC Co., Ltd. All Rights reserved.自己紹介足立 優司 (@adt0705 )所属 メック株式会社オトとりっぷの技術責任者よく使う AWS, React / React Native技術, 言語 Python, TypeScriptTypeScript歴 3年ぐらい
3経歴Copyright © MEC Co., Ltd. All Rights reserved.化学メーカで研究開発に従事↓新規事業担当、犬専用音楽を検討開始↓実証実験用に自作でWebアプリやIoTシステム構築のべ200頭以上で実験↓本格的にモバイルアプリケーション開発開始フロントエンドにTypeScript導入お手製の加速度センサー実験中のフィオちゃん
4Copyright © MEC Co., Ltd. All Rights reserved.留守番インターフェースアプリ♫♩♪♬♩
5Copyright © MEC Co., Ltd. All Rights reserved.
6Copyright © MEC Co., Ltd. All Rights reserved.概念検証フェーズは、TypeScript一本で十分に戦える。今日話したいこと
アジェンダCopyright © MEC Co., Ltd. All Rights reserved.概念検証フェーズとTypeScript少しの後悔オトとりっぷとTypeScript
9オトとりっぷのアーキテクチャCopyright © MEC Co., Ltd. All Rights reserved.React NativeCDKAmplifyTypeScriptを使用
10オトとりっぷのフロントエンドCopyright © MEC Co., Ltd. All Rights reserved.React NativeRedux /Redux ToolkitAmplify SentryReact Navigation Expo
11React Native in TypeScriptCopyright © MEC Co., Ltd. All Rights reserved.jacket/index.tsxjacket/styles.ts型安全に開発型 = ドキュメントになるのがいいJacketは「s, m ,l」の3種類サイズ
12React NativeとTypeScriptの関係Copyright © MEC Co., Ltd. All Rights reserved.https://reactnative.dev/blog/2023/01/03/typescript-firstRN0.71よりTypeScriptが標準化多くのライブラリがTypeScript対応済み
13Redux ToolkitCopyright © MEC Co., Ltd. All Rights reserved.一元管理されたState(状態)を型で縛れる
14PlayTorchCopyright © MEC Co., Ltd. All Rights reserved.エッジ推論のためのライブラリ https://playtorch.dev/docs/tutorials/snacks/yolov5/React NativeでPyTorch学習済みモデルを動かすことができるPyTorch:機械学習用のPythonライブラリ
15AWS CDK in TypeScriptCopyright © MEC Co., Ltd. All Rights reserved.AWSのインフラをTypeScriptで記述できるPythonもあるが、型安全の方が絶対いい
17Copyright © MEC Co., Ltd. All Rights reserved.TypeScriptからちょっと脱線しますが、概念検証とAmplifyの話します!
18概念検証とはCopyright © MEC Co., Ltd. All Rights reserved.簡易的なプロダクトを作成し、ビジネス的, 技術的に実現可能かを検証すること重要視しているポイントは、1. 開発リソースが少ないこと2. ある程度の拡張性が担保されていること3. メンテナンスが容易であること
19AmplifyとはCopyright © MEC Co., Ltd. All Rights reserved.• Amplify CLI(メインで使用)コマンドラインからAWSリソースを作成• Amplify Framework各種クライアントフレームワーク用UI• Amplify ConsoleホスティングやCI/CDAWSの各種リソース作成のためのお助けフレームワークとして機能
20Amplify CLIによるAWS構築Copyright © MEC Co., Ltd. All Rights reserved.オトとりっぷのアーキテクチャ作成可能なAWSサービス例• 認証(Cognito)• GraphQL API(AppSync)• データベース(DynamoDB)• ストレージ(S3)モチベーション「VPCなどのインフラ管理やりたくない」
21AmplifyによるAPI管理Copyright © MEC Co., Ltd. All Rights reserved.schemaを定義FEAmazon DynamoDB型が定義される(CRUD)APIの管理がスキーマに集中できるフロントエンドの型からバックエンドDBの構造まで一気通貫管理BEDBが生成する
22概念検証でAmplifyを使うメリットCopyright © MEC Co., Ltd. All Rights reserved.「スピード重視したい」と「型安全にいきたい」はトレードオフと思ってた↓でもAmplifyを使えば、おいしいとこ取りできる。• 概念検証フェーズならではのスピード重視• 大規模開発だとアンチパターンでも、概念検証は1~2人で開発だから問題が顕在化しにくい
24後悔の正体Copyright © MEC Co., Ltd. All Rights reserved.AWS Lambdaの言語にPythonを選択したが、TypeScriptにしとけばよかった。Pythonを採用した理由• AWS Lambda Powertools Python• Amazon CodeGuru Reviewer• チーム員の出自:計算化学、機械学習
25AWS Lambda PowertoolsCopyright © 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/
26Powertools機能紹介 : LoggerCopyright © MEC Co., Ltd. All Rights reserved.Amazon CloudWatch Logsを整形してくれる• ログメッセージのフォーマット• コールドスタートやfunction情報などAWS Lambda上のコードCloudWatch Logsへの出力結果
27Powertools機能紹介 : TracerCopyright © 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とは:リクエストに関するデータを収集するサービスサーバーレスの味方
28Amazon CodeGuru ReviewerCopyright © MEC Co., Ltd. All Rights reserved.コードレビューしてくれる(PRに対してコメントくれる)この機能はTypeScriptまだない(まだかなー)
まとめCopyright © MEC Co., Ltd. All Rights reserved.概念検証フェーズは、TypeScript一本で十分に戦えるAmplifyやサーバーレスを掛け合わせることで、少人数ならではの最適化を実現できる
30オトとりっぷに協力してくれる人を募集しています!OTO TRIP AmbassadorCopyright © MEC Co., Ltd. All Rights reserved.ご興味ある方は、このあとお話しおねがいします!!
ありがとうございました!