Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for oto trip oto trip
March 04, 2023
Technology
500
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
400
さっそくチェック！ Amplify Gen2のデプロイ体験
Avatar for oto trip ototrip
1
510
Maestroで楽がしたい！
Avatar for oto trip ototrip
0
310
Amplify + React Nativeで挑む! 新規事業アプリの開発
Avatar for oto trip ototrip
0
490

Other Decks in Technology

See All in Technology
Lint の層を組み直した話
Avatar for 弁護士ドットコム bengo4com
3
320
Kiro Crew の Bot (続く役目を任せる窓口) | 目指せ Kiro マスター 12
Avatar for Riku INADA inariku
PRO
2
290
続・ソフトウェアアーキテクトのための意思決定術: Decision Readiness, Revisited — When AI Changes the Economics of Software Architecture
Avatar for Koji SHIMADA snoozer05
PRO
9
2.7k
公共システムAdventCalendar2026
Avatar for Toru_Kubota toru_kubota
0
280
GCASアップデート（202607-202610）
Avatar for 高橋広和 techniczna
1
210
Copilot Coworkで「みのるん式」やってみた
Avatar for みのるん minorun365
PRO
2
1.6k
新米を「売り越さない」、Aurora DSQLで作る在庫ゼロ死守の限定ドロップEC
Avatar for Yuuki Yamashita yama3133
0
190
[JAWS Festa 2026]一番いい仕事は、請求書に現れない / jawsfesta2026
Avatar for sh_fk2 sh_fk2
2
330
AI AgentによるEmbedded SREの取り組み
Avatar for norimichi.osanai tgidgd
1
360
バックオフィスに染み出すTypeScript ── clasp で安全に仕組みを作る
Avatar for Nealle nealle
1
180
業務でAWSをあまり使っていない私が、AWSへのモチベを保つ方法
Avatar for Makky12 smt7174
0
170
内製アプリとClaudeスキルのセキュリティチェック、 Backlogの課題で回しています。
Avatar for Ayaka ayaka_egaaa
0
140

Featured

See All Featured
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
970
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.3k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
760
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.4k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.8k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
430
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
5
55k

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