この記事は何？

第一開発事業部の新卒課題として画像投稿Webアプリケーションを1ヶ月半ほどの期間で作成しました。概要や開発を通して苦労した点、勉強になった点などを記載したいと思います。

課題概要

課題の概要は、バックエンドはAWS SAM(Python)、フロントエンドはVue.js(Vue3 Composition API＋TypeScript)という構成の画像投稿Webアプリケーションになります。
ログインや認証関係周りはAmazon Cognitoを使用しました。

主な画面としては以下の9画面になります。

  • ログイン画面
  • 画像アップロード画面
  • 画像一覧画面
  • 画像詳細画面
  • 画像編集画面
  • パスワード変更画面
  • パスワードリセット画面
  • 確認コード送信画面
  • パスワード変更完了画面

画面遷移図

使用したサービスについて

AWS SAM

AWS SAM（Serverless Application Model）は、サーバレスアプリケーションを簡単に構築・デプロイできるフレームワークです。LambdaやAPI Gateway、DynamoDBなどのAWSサービスと簡単に統合・管理することができ、インフラの設定や運用を自動化できることがメリットになります。ローカルテストやデプロイが簡単にできることも大きなメリットになります。今回の課題ではAWS Lambdaを使用し、言語はPythonで開発を行いました。

どのようにSAMを使うのか？

SAMを使う手順としてはSAM CLIをインストールし、template.yamlを作成します。そのyamlファイルの中でAWS Lambda関数などのリソースを定義し、Buildした後にDeployを行います。このような手順を踏むことでサーバレスアプリケーションを開発することができます。

Vue.js

Vue.jsとは、UIを構築するためのJavaScriptフレームワークになります。今回はTypeScriptを使用しました。TypeScriptとは、JavaScriptに型システムを追加したプログラミング言語になります。コードの品質や可読性を向上させるメリットがあります。

Amazon Cognito

Amazon Cognitoとは、ユーザ認証や認可、ユーザデータの管理を簡単に行うことのできるフルマネージド型のサービスになります。ログイン機能やユーザ登録、サインイン、パスワード変更、リセットをサポートします。今回、User Poolは予め用意されているものを使用し、そこにユーザを追加することで認証機能を使うことができるようになります。パスワードリセット機能はCognitoに登録されているユーザに紐ずくメールアドレスに確認コードが飛ばし、コードを使って認証する形にしました。ログインやパスワード変更・リセットはCognitoSDKを使用し作成しました。

API Gateway Authorizer

API Gateway Authorizerとは、AWS API GatewayでAPIリクエストの認証と認可を行う機能のことを言います。リクエストに含まれるトークンなどの認証情報を元に、Lambda関数やCognito User Poolを使用してアクセス権を確認します。これによりAPIへのアクセスを制御することが可能になります。今回の課題では、各APIを呼び出す際に認証ヘッダーとしてCognito User Poolで取得したアクセストークンをAuthorizationヘッダーに含めてリクエストをする形で認証を行うようにしました。

Amazon CloudFront

今回の新卒課題はCloudFrontを使用してデプロイしました。CloudFrontとは、コンテンツ配信ネットワークサービスで、ウェブサイトやアプリケーションのコンテンツを世界中のエッジロケーションから高速に配信することができます。

 

楽しかったこと

ここまでしっかりとしたアプリケーションを作成することが初めてだったので、作成したい処理の一つ一つが動いた時にとても楽しく感じました。最終的にしっかりしたWebアプリが完成しとても嬉しかったです。デザイン的な部分は要件がなく自由だったので私が好きなように作成することができたので、全体の要件や仕様に添いつつ好みやこだわりを出すことができました。特に楽しかったことはログイン機能周りです。画面遷移やクリックアクションなどは新卒研修でも行いましたが、ログイン機能関係は初めての実装でした。Cognitoを使用することでスムーズに認証機能をできましたし、AWSサービスについても学ぶことができたので楽しかったです。

苦戦したこと

環境構築からコード記述、AWSサービスの操作などほぼ全ての部分で苦戦しました。しかし、その都度公式ドキュメントや記事を参考にし試行錯誤しながら無事開発を完了させることができました。またJavaScriptの経験もなかったため苦戦しました。全体的に初めてのことばかりでしたが課題を通して基本的な開発工程を学ぶことができました。

勉強になったこと

コンポーネント化を効率的に使用し、コードの可読性を上げること

7月までの新卒研修期間中に開発演習を行うことがありましたが、その中ではコードの可読性を意識することができていませんでした。この課題期間中に様々な人のコードを読む機会があり、改めてコードの可読性を上げることの重要性を学ぶことができました。案件内でも可読性の向上のためにコンポーネント化が多く利用されているファイルに触れることが多いのですが、管理や改修が容易になるということを学びました。

AWSサービスに触れる

LambdaやRDS、S3、Cognitoなど様々なAWSサービスに触れながら学ぶことができました。用意されている手順通りに手を動かすのではなく、様々な記事や公式ドキュメントを見ながら開発を行うという経験は非常に多くを学ぶことができました。

タスク管理や報連相

今回の課題期間は、始まりの日付と終わりの日付だけが決められている状態でした。約1ヶ月半の期間で課題を完了させるために日々の進捗報告やスケジュールの見直しを意識的に行っておりました。1ヶ月半という短い期間でしたが、報連相の重要性やタスク管理方法など多く学ぶことができました。

終わりに

今回は第一開発事業部の新卒課題を振り返り、概要や苦戦した点などをまとめました。
新卒課題の開発を通して様々な技術やサービスに触れることができ、学びを深めることができました。
学んだ内容は忘れないように案件などでアウトプットしていきたいと思います。
読んでいただきありがとうございました！