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

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

Avatar for oto trip oto trip
March 04, 2023
Technology
470
0

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

Avatar for oto trip

oto trip

March 04, 2023

More Decks by oto trip

See All by oto trip
AWS Amplify Gen2 GA ! 裏側をちょっと覗いて、Gen2と仲良くなろう.pdf
Avatar for oto trip ototrip
1
380
さっそくチェック！ Amplify Gen2のデプロイ体験
Avatar for oto trip ototrip
1
490
Maestroで楽がしたい！
Avatar for oto trip ototrip
0
280
Amplify + React Nativeで挑む! 新規事業アプリの開発
Avatar for oto trip ototrip
0
460

Other Decks in Technology

See All in Technology
OTel × Datadog で 「AI活用」を計測し、改善に繋げる
Avatar for Yuki Shiho shihochan
2
430
SONiC Scale-Up Working Group から探る Scale-UpやUltraEthernet機能の実装方法
Avatar for ebiken ebiken
PRO
2
420
GitHub Copilot app最速の発信の裏側
Avatar for tomokusaba tomokusaba
1
190
AIAU_UMEMOGU_ninomiya_slide
Avatar for ninomiya ninomiya_ii
0
240
Kiro Ambassador を目指す話
Avatar for Kazuki Adachi k_adachi_01
0
110
徹底討論！ECS vs EKS！
Avatar for 高棹大樹 daitak
0
550
AIネイティブな開発のサプライチェーンリスク対策 〜激動の開発現場でリスクに立ち向かう〜【ZennFes】
Avatar for サイバーセキュリティクラウド cscengineer
PRO
2
140
When Platform Engineering Meets GenAI
Avatar for suci sucitw
0
130
Oracle Cloud Infrastructure：2026年6月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
130
Chainlitで作るお手軽チャットUI
Avatar for tomo ynt0485
0
280
AIのReact習熟度を測る
Avatar for uhyo uhyo
2
650
Claude Codeをどのように キャッチアップしているか
Avatar for Oikon oikon48
13
8.6k

Featured

See All Featured
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
600
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
160
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
200
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
210
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
460

Transcript

  1. 1 TypeScriptとAmplifyを使った概念検証術 MixLeap Study #70 - 教えて！みんなのTypeScript Copyright © MEC

    Co., Ltd. All Rights reserved. 2023.03.02 Yuji Adachi

  2. 2 Copyright © MEC Co., Ltd. All Rights reserved. 自己紹介

    足立 優司 (@adt0705 ) 所属 メック株式会社 オトとりっぷの技術責任者 よく使う AWS, React / React Native 技術, 言語 Python, TypeScript TypeScript歴 3年ぐらい

  3. 3 経歴 Copyright © MEC Co., Ltd. All Rights reserved.

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

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

    ♫ ♩ ♪ ♬ ♩

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

  6. 6 Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズは、

    TypeScript一本で十分に戦える。 今日話したいこと

  7. アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズとTypeScript

    少しの後悔 オトとりっぷとTypeScript

  8. アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズとTypeScript

    少しの後悔 オトとりっぷとTypeScript

  9. 9 オトとりっぷのアーキテクチャ Copyright © MEC Co., Ltd. All Rights reserved.

    React Native CDK Amplify TypeScriptを使用

  10. 10 オトとりっぷのフロントエンド Copyright © MEC Co., Ltd. All Rights reserved.

    React Native Redux / Redux Toolkit Amplify Sentry React Navigation Expo

  11. 11 React Native in TypeScript Copyright © MEC Co., Ltd.

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

  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対応済み

  13. 13 Redux Toolkit Copyright © MEC Co., Ltd. All Rights

    reserved. 一元管理されたState（状態）を型で縛れる

  14. 14 PlayTorch Copyright © MEC Co., Ltd. All Rights reserved.

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

  15. 15 AWS CDK in TypeScript Copyright © MEC Co., Ltd.

    All Rights reserved. AWSのインフラをTypeScriptで記述できる Pythonもあるが、型安全の方が絶対いい

  16. アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズとTypeScript

    少しの後悔 オトとりっぷとTypeScript

  17. 17 Copyright © MEC Co., Ltd. All Rights reserved. TypeScriptからちょっと脱線しますが、

    概念検証とAmplifyの話します！

  18. 18 概念検証とは Copyright © MEC Co., Ltd. All Rights reserved.

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

  19. 19 Amplifyとは Copyright © MEC Co., Ltd. All Rights reserved.

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

  20. 20 Amplify CLIによるAWS構築 Copyright © MEC Co., Ltd. All Rights

    reserved. オトとりっぷのアーキテクチャ 作成可能なAWSサービス例 • 認証（Cognito） • GraphQL API（AppSync） • データベース（DynamoDB） • ストレージ（S3） モチベーション 「VPCなどのインフラ管理やりたくない」

  21. 21 AmplifyによるAPI管理 Copyright © MEC Co., Ltd. All Rights reserved.

    schemaを定義 FE Amazon DynamoDB 型が定義される （CRUD） APIの管理がスキーマに集中できる フロントエンドの型からバックエンドDBの構造まで一気通貫管理 BE DBが生成する

  22. 22 概念検証でAmplifyを使うメリット Copyright © MEC Co., Ltd. All Rights reserved.

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

  23. アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズとTypeScript

    少しの後悔 オトとりっぷとTypeScript

  24. 24 後悔の正体 Copyright © MEC Co., Ltd. All Rights reserved.

    AWS Lambdaの言語にPythonを選択したが、 TypeScriptにしとけばよかった。 Pythonを採用した理由 • AWS Lambda Powertools Python • Amazon CodeGuru Reviewer • チーム員の出自：計算化学、機械学習

  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/

  26. 26 Powertools機能紹介 : Logger Copyright © MEC Co., Ltd. All

    Rights reserved. Amazon CloudWatch Logsを整形してくれる • ログメッセージのフォーマット • コールドスタートやfunction情報など AWS Lambda上のコード CloudWatch Logsへの出力結果

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

  28. 28 Amazon CodeGuru Reviewer Copyright © MEC Co., Ltd. All

    Rights reserved. コードレビューしてくれる（PRに対してコメントくれる） この機能はTypeScriptまだない（まだかなー）

  29. まとめ Copyright © MEC Co., Ltd. All Rights reserved. 概念検証フェーズは、

    TypeScript一本で十分に戦える Amplifyやサーバーレスを掛け合わせることで、 少人数ならではの最適化を実現できる

  30. 30 オトとりっぷに協力してくれる人を 募集しています！ OTO TRIP Ambassador Copyright © MEC Co.,

    Ltd. All Rights reserved. ご興味ある方は、このあとお話しおねがいします！！

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