はじめに
こんにちは。25新卒の岡田 悠汰です。私が所属している第一開発事業部では、2025年度新卒課題研修として2ヶ月ほどの期間で画像投稿Webアプリケーションを作成しました。この記事では、研修で作成した成果物と研修を通じて楽しかった点、苦労した点について触れていきたいと思います。
課題概要
今回の課題では、バックエンドをPython、インフラをCDK(TypeScript)、フロントエンドをVue.js（Vue3 Composition API＋TypeScript）の構成で、画像投稿Webアプリケーションを作成しました。
画面構成
画面は、以下計９画面で構成しています。
- ログイン画面
- 画像アップロード画面
- 画像一覧画面
- 画像詳細画面
- 画像編集画面
- PW変更画面
- PWリセット画面
- 確認コード送信画面
- PW変更完了画面
画面遷移
構成図
課題で用いた各種AWSサービスの役割
ユーザー認証
- Amazon Cognitoのユーザープールを使用してユーザーを管理します。
- 新規ユーザー登録後、初期パスワードの再設定を事前に行っておきます。
- 認証されたユーザーのみがアプリケーションにアクセスできます。
フロントエンドの配信
- 静的なWebコンテンツ（HTML、CSS、JavaScriptなど）は、Amazon Simple Storage Service（S3）のバケットに配置されます。
- Amazon CloudFrontは、このS3バケットをオリジンとして設定し、コンテンツをユーザーに高速で配信します。これにより、コンテンツ配信のパフォーマンスとセキュリティが向上します。
APIエンドポイント
- Amazon API Gatewayは、アプリケーションのAPIエンドポイントとして機能します。
- クエリパラメータを使用して写真IDなどの情報を管理することで、RESTfulなAPI設計を実現し、フロントエンドからのリクエストを適切にバックエンドのLambda関数にルーティングします。
バックエンド処理
バックエンドは、3つのAWS Lambdaで構築しました。
- Lambda関数 （画像情報登録・編集・削除用）：
- 新規登録APIが呼び出されると、画像データをAmazonS3の画像データ格納用バケットに保存します。
- 同時に、画像のタイトルやS3上の写真URLなどのメタデータをAmazon Relational Database Service（RDS）に格納します。
- Lambda関数（その他2つ）：
- これらのLambda関数もRDSに接続されており、他の画像関連の処理（画像一覧、画像詳細情報取得）を担います。
データストレージ
- Amazon S3:
- フロントエンド用バケット：Webアプリケーションのコードをホスティングします。
- 画像データ格納用バケット：ユーザーが投稿した画像を格納します。
- Amazon RDS
- 画像データに関するメタデータ（タイトル、S3URLなど）を格納します。
- Lambda関数は、このデータベースに接続してデータの取得・登録・編集・削除を行います。
楽しかった点
私自身初めての個人開発だったのですが、バックエンドからフロントエンドまで一連の流れで構築を進めていったことで着実にスキルアップにつながっている実感が得られたところに楽しさを感じました。開発を進める中で、最も印象的だったのが、フロントエンド画面の実装後、実際にAPIリクエストを送信し、無事にレスポンスが返ってきた瞬間です。実際に、取得できた画像情報がWebページに表示されたときは、嬉しさと達成感がありました。また、LocalStackやPostmanを用いてローカルでAPIの動作確認を行なったり、Piniaやpinia-plugin-persistedstateなど今まで触れなかったライブラリやプラグインを用いて効率的に状態管理やデータの永続化を実装したところは、大きな学びになりました。
苦労した点
最も苦労した点としては、インフラ構築をCDKで行う際の状態管理です。IaC（Infrustructure as Code）のメリットとしてインフラをまとめて一度にデプロイできる点がありますが、初めてIaCでインフラ構築した私は、CDKのコード上のクラスやプロパティが、AWSマネジメントコンソール上のどのリソースのどの設定値に対応しているのかを理解することに難しさを覚えました。デプロイ後、AWSマネジメントコンソールからリソースの設定を仕様書と照らし合わせながら不明点を解消するところに多くの時間を要し、苦労しました。この経験から、IaCの便利さを享受するためには、コードと実際のインフラがどう対応しているかという「状態」を常に意識することの重要性を痛感しました。
最後に
今回は、第一開発事業部2025年度新卒課題についての概要と私自身の所感についてまとめました。
研修中に学んだことを大切にし、案件に入った後も精進していきたいと思います。
最後までお目通しいただき、ありがとうございました！
簡単30秒