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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for oto trip oto trip
March 04, 2023
Technology
480
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
390
さっそくチェック！ Amplify Gen2のデプロイ体験
Avatar for oto trip ototrip
1
500
Maestroで楽がしたい！
Avatar for oto trip ototrip
0
290
Amplify + React Nativeで挑む! 新規事業アプリの開発
Avatar for oto trip ototrip
0
470

Other Decks in Technology

See All in Technology
電話に出る Python のログの話
Avatar for shinnosuke shinnosuke_kishida
0
220
AI開発に用いられるHPC技術について
Avatar for GPU UNITE gpuunite_official
0
280
フィジカルAIの知識ゼロの僕でも AIを使えばここまでできた
Avatar for tatsuya1970 tatsuya1970
0
180
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
77k
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
3.2k
AI駆動開発を組織で促すために
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
290
形式手法特論：Hyperproperty とモデル検査 #kernelvm / Kernel VM Study Tokyo 19th
Avatar for y_taka_23 ytaka23
0
810
「ミスを許さない手順書」を作ってみた 〜 個人的にはこれ以上できることはあまりなさそう/20260827-ssmjp-operation-procedure-update
Avatar for opelab opelab
1
160
1.5時間を無駄にして学んだwsl2におけるaptとsnapの選択と仕組み
Avatar for y-osaka0123 yosaka0123
0
440
作って理解するCoding Agent 〜フレームワークに頼らないピュア Python での実装〜
Avatar for Takanobu Nozawa takapy
4
1.3k
長期運営で肥大化したExcelマスターデータの解消に向けた移行事例
Avatar for gree_tech gree_tech
PRO
0
510
会計事務所と顧問先の契約関係をOIDC・OAuthで表現する
Avatar for てらら terara
0
330

Featured

See All Featured
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
510
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
790
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.3k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
880
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
850
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k

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. ありがとうございました！