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
Amplify_Reactで爆速アプリ開発.pdf
Search
Hibiki
February 19, 2025
Technology
0
19
Amplify_Reactで爆速アプリ開発.pdf
Hibiki
February 19, 2025
Tweet
Share
More Decks by Hibiki
See All by Hibiki
Network FirewallとTransit Gateway統合
hibikisuaga
3
240
NW-JAWS VPC間接続のまとめ
hibikisuaga
0
2
MFA必須化でハマった謎エラー
hibikisuaga
0
8
NW-JAWS ルートテーブルとエンドポイント入門
hibikisuaga
2
680
Other Decks in Technology
See All in Technology
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
1
590
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
140
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
shigeruoda
1
160
Azure Well-Architected Framework入門
tomokusaba
1
140
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
140
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
500
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
550
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
510
知覚とデザイン
rinchoku
1
620
re:Inventに行くまでにやっておきたいこと
nagisa53
0
640
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
450
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.6k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Writing Fast Ruby
sferik
630
62k
Statistics for Hackers
jakevdp
799
220k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
It's Worth the Effort
3n
187
28k
Embracing the Ebb and Flow
colly
88
4.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building Applications with DynamoDB
mza
96
6.7k
Site-Speed That Sticks
csswizardry
13
930
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Why Our Code Smells
bkeepers
PRO
340
57k
Transcript
Amplify&Reactで爆速アプリ開発! ~AWS認定デジタルバッジをおしゃれに配置~ 伊藤忠テクノソリューションズ株式会社 須永 響
アジェンダ ⚫ 自己紹介 ⚫ 開発したもの ⚫ 開発過程 ⚫ デモ ⚫
学びと感想
自己紹介 ⚫ 名前:須永 響 ⚫ 所属会社:伊藤忠テクノソリューションズ株式会社 ⚫ 年次:2年目 ⚫ 業務内容:AWSを商材としたSI業務
⚫ 趣味:洋服、カフェ巡り、スノーボード
開発したもの ⚫ タイトルにもある通り… AWS Amplify React & を利用してAWS認定デジタルバッジを並べるアプリケーションを開発しました
開発に使用した技術スタック AWS Amplify React ⚫ フロントエンド/バックエンド開発:Typescriptベースで開発可能 ⚫ CI/CDの自動構築:GitHubと連携し自動化 ⚫ バックエンドサービスの構築:ストレージ、DB、AIなどをコードで管理
⚫ フロントエンド開発者向け:AWSの利用を簡単にする設計 ⚫ Typescriptベースのライブラリ ⚫ ANGEL Dojoで使用
開発したもの 作成したアプリケーション https://aws-badge.gravitas580.com ⚫ GitHub:https://github.com/gravitas580/aws-badge-display ⚫ デプロイされているアプリのURL:https://aws-badge.gravitas580.com
開発過程 ⚫ なぜ開発しようと思ったか… 普段使っていた バッジ並び替えサイトが 長らく更新されておらず 新しい資格に非対応に… ANGEL Dojoで学んだ 開発技術でアプリを作りたい!
参考サイトもAmplifyでの開発を 今後の展望としている! 作成したアプリケーション https://aws-badge.gravitas580.com
⚫ 実際の開発の流れ 開発過程 AmplifyとReactのテンプレート取得 ローカルで開発 & GitHubでバージョン管理 GitHubとAmplifyを連携させてデプロイ 作成したアプリケーション https://aws-badge.gravitas580.com
所要時間:約5h
⚫ AmplifyとReactのテンプレート取得 npm createコマンドでプロジェクトの作成 or GitHub上にあるテンプレートからリポジトリ作成 開発過程 作成したアプリケーション https://aws-badge.gravitas580.com AmplifyとReactのテンプレート取得
ローカルで開発 & GitHubでバージョン管理 GitHubとAmplifyを連携させてデプロイ こっちを採用
⚫ ローカル環境で開発 ➢ Reactをローカル環境で実行しながら Copilotを用いて開発 ⚫ GitHubでバージョン管理 ➢ Git Flow、GitHub
Flowは採用せず単一ブランチで開発 開発過程 作成したアプリケーション https://aws-badge.gravitas580.com AmplifyとReactのテンプレート取得 ローカルで開発 & GitHubでバージョン管理 GitHubとAmplifyを連携させてデプロイ
⚫ GitHubとAmplifyを連携させてデプロイ ➢ Amplifyのコンソール画面で GitHubアカウントと連携&開発リポジトリを選択 するとデプロイ可能 開発過程 作成したアプリケーション https://aws-badge.gravitas580.com AmplifyとReactのテンプレート取得
ローカルで開発 & GitHubでバージョン管理 GitHubとAmplifyを連携させてデプロイ
デモ ⚫ 事前準備:CredlyからAWS認定デジタルバッジをダウンロードしておく https://info.credly.com/
学びと感想 ⚫ 学び ➢ Amplifyの利便性 ✓ Reactを使用してアプリケーション開発が可能 ✓ GitHubと連携させるだけなのでデプロイの手間を大幅に削減 ➢
生成AIの活用 ✓ コードの自動生成やデバックの効率化によって短期間で開発可能 ⚫ 感想 ➢ 自信の向上 ✓ 自分のアイデアを形にすることで、アプリ開発への苦手意識の払拭 ➢ 次のステップ ✓ より大規模なアプリケーション開発にも挑戦