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
18
Amplify_Reactで爆速アプリ開発.pdf
Hibiki
February 19, 2025
Tweet
Share
More Decks by Hibiki
See All by Hibiki
Network FirewallとTransit Gateway統合
hibikisuaga
3
200
NW-JAWS VPC間接続のまとめ
hibikisuaga
0
2
MFA必須化でハマった謎エラー
hibikisuaga
0
7
NW-JAWS ルートテーブルとエンドポイント入門
hibikisuaga
2
670
Other Decks in Technology
See All in Technology
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
960
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
320
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
180
Railsアプリケーション開発者のためのブックガイド
takahashim
14
6.1k
20250929_QaaS_vol20
mura_shin
0
110
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
120
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
370
Pure Goで体験するWasmの未来
askua
1
170
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
900
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
160
stupid jj tricks
indirect
0
7.9k
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.1k
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
570
Gamification - CAS2011
davidbonilla
81
5.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
The Cult of Friendly URLs
andyhume
79
6.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Building Adaptive Systems
keathley
43
2.8k
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の活用 ✓ コードの自動生成やデバックの効率化によって短期間で開発可能 ⚫ 感想 ➢ 自信の向上 ✓ 自分のアイデアを形にすることで、アプリ開発への苦手意識の払拭 ➢ 次のステップ ✓ より大規模なアプリケーション開発にも挑戦