Amplify_Reactで爆速アプリ開発.pdf

Transcript

1. Amplify&Reactで爆速アプリ開発！ ~AWS認定デジタルバッジをおしゃれに配置~ 伊藤忠テクノソリューションズ株式会社 須永 響
2. アジェンダ ⚫ 自己紹介 ⚫ 開発したもの ⚫ 開発過程 ⚫ デモ ⚫ 学びと感想
3. 自己紹介 ⚫ 名前：須永 響 ⚫ 所属会社：伊藤忠テクノソリューションズ株式会社 ⚫ 年次：２年目 ⚫ 業務内容：AWSを商材としたSI業務 ⚫ 趣味：洋服、カフェ巡り、スノーボード
4. 開発したもの ⚫ タイトルにもある通り… AWS Amplify React & を利用してAWS認定デジタルバッジを並べるアプリケーションを開発しました
5. 開発に使用した技術スタック AWS Amplify React ⚫ フロントエンド/バックエンド開発：Typescriptベースで開発可能 ⚫ CI/CDの自動構築：GitHubと連携し自動化 ⚫ バックエンドサービスの構築：ストレージ、DB、AIなどをコードで管理 ⚫ フロントエンド開発者向け：AWSの利用を簡単にする設計 ⚫ Typescriptベースのライブラリ ⚫ ANGEL Dojoで使用
6. 開発したもの 作成したアプリケーション https://aws-badge.gravitas580.com ⚫ GitHub：https://github.com/gravitas580/aws-badge-display ⚫ デプロイされているアプリのURL：https://aws-badge.gravitas580.com
7. 開発過程 ⚫ なぜ開発しようと思ったか… 普段使っていた バッジ並び替えサイトが 長らく更新されておらず 新しい資格に非対応に… ANGEL Dojoで学んだ 開発技術でアプリを作りたい！ 参考サイトもAmplifyでの開発を 今後の展望としている！ 作成したアプリケーション https://aws-badge.gravitas580.com
8. ⚫ 実際の開発の流れ 開発過程 AmplifyとReactのテンプレート取得 ローカルで開発 & GitHubでバージョン管理 GitHubとAmplifyを連携させてデプロイ 作成したアプリケーション https://aws-badge.gravitas580.com 所要時間:約5h
9. ⚫ AmplifyとReactのテンプレート取得 npm createコマンドでプロジェクトの作成 or GitHub上にあるテンプレートからリポジトリ作成 開発過程 作成したアプリケーション https://aws-badge.gravitas580.com AmplifyとReactのテンプレート取得 ローカルで開発 & GitHubでバージョン管理 GitHubとAmplifyを連携させてデプロイ こっちを採用
10. ⚫ ローカル環境で開発 ➢ Reactをローカル環境で実行しながら Copilotを用いて開発 ⚫ GitHubでバージョン管理 ➢ Git Flow、GitHub Flowは採用せず単一ブランチで開発 開発過程 作成したアプリケーション https://aws-badge.gravitas580.com AmplifyとReactのテンプレート取得 ローカルで開発 & GitHubでバージョン管理 GitHubとAmplifyを連携させてデプロイ
11. ⚫ GitHubとAmplifyを連携させてデプロイ ➢ Amplifyのコンソール画面で GitHubアカウントと連携＆開発リポジトリを選択 するとデプロイ可能 開発過程 作成したアプリケーション https://aws-badge.gravitas580.com AmplifyとReactのテンプレート取得 ローカルで開発 & GitHubでバージョン管理 GitHubとAmplifyを連携させてデプロイ
12. デモ ⚫ 事前準備：CredlyからAWS認定デジタルバッジをダウンロードしておく https://info.credly.com/
13. 学びと感想 ⚫ 学び ➢ Amplifyの利便性 ✓ Reactを使用してアプリケーション開発が可能 ✓ GitHubと連携させるだけなのでデプロイの手間を大幅に削減 ➢ 生成AIの活用 ✓ コードの自動生成やデバックの効率化によって短期間で開発可能 ⚫ 感想 ➢ 自信の向上 ✓ 自分のアイデアを形にすることで、アプリ開発への苦手意識の払拭 ➢ 次のステップ ✓ より大規模なアプリケーション開発にも挑戦