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
17
Amplify_Reactで爆速アプリ開発.pdf
Hibiki
February 19, 2025
Tweet
Share
More Decks by Hibiki
See All by Hibiki
MFA必須化でハマった謎エラー
hibikisuaga
0
0
NW-JAWS ルートテーブルとエンドポイント入門
hibikisuaga
2
620
Other Decks in Technology
See All in Technology
AI工学特論: MLOps・継続的評価
asei
10
2k
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
3
160
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
380
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
130
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
290
SAE J1939シミュレーション環境構築
daikiokazaki
1
190
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
690
今日からあなたもGeminiを好きになる
subaruhello
1
660
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
260
Wasmで社内ツールを作って配布しよう
askua
0
150
Kiro Hookを Terraformで検証
ao_inoue
0
140
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.1k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GitHub's CSS Performance
jonrohan
1031
460k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Writing Fast Ruby
sferik
628
62k
It's Worth the Effort
3n
185
28k
Docker and Python
trallard
45
3.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Modern Web Designer's Workflow
chriscoyier
695
190k
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の活用 ✓ コードの自動生成やデバックの効率化によって短期間で開発可能 ⚫ 感想 ➢ 自信の向上 ✓ 自分のアイデアを形にすることで、アプリ開発への苦手意識の払拭 ➢ 次のステップ ✓ より大規模なアプリケーション開発にも挑戦