Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript と Amplify を使った概念検証術
Search
oto trip
March 04, 2023
Technology
0
430
TypeScript と Amplify を使った概念検証術
oto trip
March 04, 2023
Tweet
Share
More Decks by oto trip
See All by oto trip
AWS Amplify Gen2 GA ! 裏側をちょっと覗いて、Gen2と仲良くなろう.pdf
ototrip
1
310
さっそくチェック! Amplify Gen2のデプロイ体験
ototrip
1
450
Maestroで楽がしたい!
ototrip
0
210
Amplify + React Nativeで挑む! 新規事業アプリの開発
ototrip
0
420
Other Decks in Technology
See All in Technology
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1.2k
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
820
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
560
Frontier Airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
frontierairlineswithflyagent
0
100
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
20
7.7k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
2
360
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
190
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
5
800
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
260
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
200
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.6k
Building GoReleaser - from shell script to paid product
caarlos0
0
180
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Adopting Sorbet at Scale
ufuk
77
9.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Site-Speed That Sticks
csswizardry
10
710
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Docker and Python
trallard
45
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Transcript
1 TypeScriptとAmplifyを使った概念検証術 MixLeap Study #70 - 教えて!みんなのTypeScript Copyright © MEC
Co., Ltd. All Rights reserved. 2023.03.02 Yuji Adachi
2 Copyright © MEC Co., Ltd. All Rights reserved. 自己紹介
足立 優司 (@adt0705 ) 所属 メック株式会社 オトとりっぷの技術責任者 よく使う AWS, React / React Native 技術, 言語 Python, TypeScript TypeScript歴 3年ぐらい
3 経歴 Copyright © MEC Co., Ltd. All Rights reserved.
化学メーカで研究開発に従事 ↓ 新規事業担当、犬専用音楽を検討開始 ↓ 実証実験用に自作でWebアプリやIoTシステム構築 のべ200頭以上で実験 ↓ 本格的にモバイルアプリケーション開発開始 フロントエンドにTypeScript導入 お手製の加速度センサー 実験中のフィオちゃん
4 Copyright © MEC Co., Ltd. All Rights reserved. 留守番インターフェースアプリ
♫ ♩ ♪ ♬ ♩
5 Copyright © MEC Co., Ltd. All Rights reserved.
6 Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズは、
TypeScript一本で十分に戦える。 今日話したいこと
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズとTypeScript
少しの後悔 オトとりっぷとTypeScript
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズとTypeScript
少しの後悔 オトとりっぷとTypeScript
9 オトとりっぷのアーキテクチャ Copyright © MEC Co., Ltd. All Rights reserved.
React Native CDK Amplify TypeScriptを使用
10 オトとりっぷのフロントエンド Copyright © MEC Co., Ltd. All Rights reserved.
React Native Redux / Redux Toolkit Amplify Sentry React Navigation Expo
11 React Native in TypeScript Copyright © MEC Co., Ltd.
All Rights reserved. jacket/index.tsx jacket/styles.ts 型安全に開発 型 = ドキュメントになるのがいい Jacketは「s, m ,l」の3種類サイズ
12 React NativeとTypeScriptの関係 Copyright © MEC Co., Ltd. All Rights
reserved. https://reactnative.dev/blog/2023/01/03/typescript-first RN0.71よりTypeScriptが標準化 多くのライブラリがTypeScript対応済み
13 Redux Toolkit Copyright © MEC Co., Ltd. All Rights
reserved. 一元管理されたState(状態)を型で縛れる
14 PlayTorch Copyright © MEC Co., Ltd. All Rights reserved.
エッジ推論のためのライブラリ https://playtorch.dev/docs/tutorials/snacks/yolov5/ React NativeでPyTorch 学習済みモデルを動かす ことができる PyTorch:機械学習用の Pythonライブラリ
15 AWS CDK in TypeScript Copyright © MEC Co., Ltd.
All Rights reserved. AWSのインフラをTypeScriptで記述できる Pythonもあるが、型安全の方が絶対いい
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズとTypeScript
少しの後悔 オトとりっぷとTypeScript
17 Copyright © MEC Co., Ltd. All Rights reserved. TypeScriptからちょっと脱線しますが、
概念検証とAmplifyの話します!
18 概念検証とは Copyright © MEC Co., Ltd. All Rights reserved.
簡易的なプロダクトを作成し、 ビジネス的, 技術的に実現可能かを検証すること 重要視しているポイントは、 1. 開発リソースが少ないこと 2. ある程度の拡張性が担保されていること 3. メンテナンスが容易であること
19 Amplifyとは Copyright © MEC Co., Ltd. All Rights reserved.
• Amplify CLI(メインで使用) コマンドラインからAWSリソースを作成 • Amplify Framework 各種クライアントフレームワーク用UI • Amplify Console ホスティングやCI/CD AWSの各種リソース作成のためのお助けフレームワークとして機能
20 Amplify CLIによるAWS構築 Copyright © MEC Co., Ltd. All Rights
reserved. オトとりっぷのアーキテクチャ 作成可能なAWSサービス例 • 認証(Cognito) • GraphQL API(AppSync) • データベース(DynamoDB) • ストレージ(S3) モチベーション 「VPCなどのインフラ管理やりたくない」
21 AmplifyによるAPI管理 Copyright © MEC Co., Ltd. All Rights reserved.
schemaを定義 FE Amazon DynamoDB 型が定義される (CRUD) APIの管理がスキーマに集中できる フロントエンドの型からバックエンドDBの構造まで一気通貫管理 BE DBが生成する
22 概念検証でAmplifyを使うメリット Copyright © MEC Co., Ltd. All Rights reserved.
「スピード重視したい」と「型安全にいきたい」は トレードオフと思ってた ↓ でもAmplifyを使えば、おいしいとこ取りできる。 • 概念検証フェーズならではのスピード重視 • 大規模開発だとアンチパターンでも、 概念検証は1~2人で開発だから問題が顕在化しにくい
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズとTypeScript
少しの後悔 オトとりっぷとTypeScript
24 後悔の正体 Copyright © MEC Co., Ltd. All Rights reserved.
AWS Lambdaの言語にPythonを選択したが、 TypeScriptにしとけばよかった。 Pythonを採用した理由 • AWS Lambda Powertools Python • Amazon CodeGuru Reviewer • チーム員の出自:計算化学、機械学習
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/
26 Powertools機能紹介 : Logger Copyright © MEC Co., Ltd. All
Rights reserved. Amazon CloudWatch Logsを整形してくれる • ログメッセージのフォーマット • コールドスタートやfunction情報など AWS Lambda上のコード CloudWatch Logsへの出力結果
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とは:リクエストに関するデータを収集するサービス サーバーレスの味方
28 Amazon CodeGuru Reviewer Copyright © MEC Co., Ltd. All
Rights reserved. コードレビューしてくれる(PRに対してコメントくれる) この機能はTypeScriptまだない(まだかなー)
まとめ Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズは、
TypeScript一本で十分に戦える Amplifyやサーバーレスを掛け合わせることで、 少人数ならではの最適化を実現できる
30 オトとりっぷに協力してくれる人を 募集しています! OTO TRIP Ambassador Copyright © MEC Co.,
Ltd. All Rights reserved. ご興味ある方は、このあとお話しおねがいします!!
ありがとうございました!