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
13
Amplify_Reactで爆速アプリ開発.pdf
Hibiki
February 19, 2025
Tweet
Share
More Decks by Hibiki
See All by Hibiki
NW-JAWS ルートテーブルとエンドポイント入門
hibikisuaga
2
590
Other Decks in Technology
See All in Technology
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
4k
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
110
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
540
rubygem開発で鍛える設計力
joker1007
2
220
A2Aのクライアントを自作する
rynsuke
1
220
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
260
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
570
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
190
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
360
Wasm元年
askua
0
160
OpenHands🤲にContributeしてみた
kotauchisunsun
1
480
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
17
5.8k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Practical Orchestrator
shlominoach
188
11k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Navigating Team Friction
lara
187
15k
How to train your dragon (web standard)
notwaldorf
94
6.1k
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の活用 ✓ コードの自動生成やデバックの効率化によって短期間で開発可能 ⚫ 感想 ➢ 自信の向上 ✓ 自分のアイデアを形にすることで、アプリ開発への苦手意識の払拭 ➢ 次のステップ ✓ より大規模なアプリケーション開発にも挑戦