【ITニュース解説】Building an AWS Flashcards App to Study for the SAA-C03 Exam

この記事は、AWS Solutions Architect Associate (SAA-C03) 認定試験合格を目指す方が、実践的なスキル習得のためAWSフラッシュカードWebアプリを自作するプロジェクトについて解説する。このプロジェクトは、試験勉強だけでなく、AWSサービスの実践経験を積む目的を持つ。開発するアプリは、AWSのフラッシュカードをめくり、学習進捗を管理できるWebアプリケーションである。

プロジェクトの背景には、認定試験の勉強方法に対する工夫がある。動画視聴やノート読解だけでは得られない実践的な知識とスキルを身につけたいという強い思いから、実際に手を動かすプロジェクトが企画された。これにより、実用的な方法でAWSサービスを練習し、日々の進捗を通じてモチベーションを維持し、さらには試験勉強そのものに活用できるツールを手に入れるという、複数の目標達成を目指している。

構築するWebアプリケーションは、ユーザーがログインし、AWSのフラッシュカードを閲覧・操作し、自身の学習進捗を追跡できるシンプルな構成を想定している。このアプリ自体をAWS上で動作させることで、試験で問われる主要なAWSサービスを実地で学ぶ機会とする。具体的には、静的コンテンツホスティングのAmazon S3、高速配信のAmazon CloudFront、データ保存のAmazon DynamoDB、ユーザー認証のAmazon Cognito、APIエンドポイントのAmazon API Gateway、サーバーレス実行のAWS Lambda、システム監視のAmazon CloudWatchなど、多岐にわたるサービスがプロジェクトに組み込まれる計画だ。

プロジェクトの進行は、約6週間をかけて段階的に進められる予定である。週あたり10〜15時間を開発に費やすことが見込まれている。ロードマップは以下の通りである。まず、最初の1週間では、開発環境のセットアップと、「Hello AWS Flashcards」という基本的なWebアプリケーションのローカルでの動作確認、そしてAWSへの初期デプロイを行う。次の2週目には、Amazon DynamoDBをデータベースとして使用し、AWS Lambdaを用いてバックエンドAPIを構築する。これにより、アプリが動的なデータを扱えるようになる。3週目では、Amazon Cognitoを導入してユーザー認証機能を実装し、アプリにログイン機能を加える。4週目には、アプリの機能強化を図る。学習進捗の追跡機能や複数フラッシュカードの表示、ユーザーインターフェース（UI）の改善などを行い、より実用的なアプリを目指す。5週目には、GitHubとAWS Amplifyを連携させ、継続的インテグレーション（CI）と継続的デリバリー（CD）のパイプラインを構築し、デプロイプロセスを自動化する。最後の6週目では、アプリの監視機能を追加し、負荷に応じたスケーリング対応やパフォーマンス最適化を行う。さらに、将来的な拡張として、間隔反復アルゴリズムの導入、ユーザーがフラッシュカードを作成できる機能、画像アップロード機能なども構想されている。

プロジェクトの進捗管理には、いくつかの工夫が凝らされている。具体的には、Trelloというプロジェクト管理ツールを活用し、各週のタスクを詳細なカードに分割し、ラベル付けを行うことで整理されている。また、日々の学習内容や直面した課題、その解決策、費やした時間などを記録する「日次ログ」をブログ記事として公開することで、自身の学習ジャーニーを文書化している。この日次ログは、「達成事項」「課題と解決策」「所要時間」「次のステップ」という一貫したテンプレートに従って記録される。ブログとして記録することには、学んだことを明確にする、自身の学習記録を振り返りやすくする、そして他のAWS認定試験の学習者たちに実践的なプロジェクトへの挑戦を促すという目的がある。

これまでの作業としては、プロジェクトの「セッション1」である開発環境のセットアップが完了している。具体的には、Node.js、npm（Node.jsのパッケージマネージャー）、AWS CLI（AWSコマンドラインインターフェース）、AWS CDK（AWSクラウド開発キット）、Gitといった開発に必要なツールが正しくインストールされ、動作が確認されている。さらに、PowerShellでのnpmスクリプト実行問題や、Gitが認識されない問題といった初期の環境設定に関する課題も解決されている。プロジェクトの構造として、aws-flashcards/ディレクトリの下にfrontend/（Reactアプリケーション）、cdk/（AWS CDKスクリプト）、backend/（Lambda/APIコード）というサブディレクトリが作成され、将来的な開発を見据えたクリーンな構成が用意された。また、VS Codeの推奨拡張機能が導入され、開発効率の向上も図られている。

次に、「セッション2」では、スターターとなるReactアプリケーションのセットアップが完了した。frontend/ディレクトリ内にReactアプリを作成し、App.jsファイルを「Hello AWS Flashcards」というシンプルなフラッシュカードコンポーネントに置き換えた。このコンポーネントでは、クリックすることでフラッシュカードの表示が切り替わる機能が実装され、npm startコマンドでローカル環境での動作が確認されている。これにより、基本的なWebアプリケーションの骨格が完成した状態である。

作業中に直面した具体的な課題と、その解決策についても共有されている。一つは、PowerShellのセキュリティポリシーによりnpmスクリプトが実行できないという問題だ。これは「npm.ps1をロードできない、スクリプト実行が禁止されているため」というエラーとして現れたが、Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSignedというコマンドを実行することで、現在のユーザーに対してスクリプトの実行ポリシーを緩和し、解決された。もう一つは、git initコマンドが認識されないという問題で、これはgitがコマンドレットとして認識されていないというエラーメッセージとともに発生した。この問題は、Git for Windowsをインストールし、その実行パスをシステムの環境変数PATHに追加することで解決された。また、プロジェクトのフォルダー構造に関する初期の不確かさに対しては、前述のfrontend/、cdk/、backend/という明確な構造を早期に確立することで、今後の開発の混乱を防ぐ策が講じられた。

これまでの作業に費やされた時間は、計画とTrelloのセットアップに約1時間、開発環境のセットアップに約2.5時間、VS Codeの設定とプロジェクト構造の構築に約1.5時間、Reactアプリのセットアップとテストに約1時間と記録されている。初日だけで合計約6時間が費やされており、プロジェクトへの真剣な取り組みがうかがえる。

次に取り組むべきステップは「セッション3」で、開発したアプリケーションをAWS上にデプロイすることである。具体的には、まずReactアプリケーションを本番環境向けにビルド（npm run build）し、その生成物をS3バケットにアップロードする。そして、S3バケットで静的ウェブサイトホスティングを有効にする。任意ではあるが、さらにAmazon CloudFrontディストリビューションを設定してコンテンツのキャッシュと高速配信を実現し、必要であればAmazon Route 53を使ってカスタムドメインを設定することも検討されている。このステップが完了すれば、インターネット経由で自身のフラッシュカードアプリにアクセスできるようになる。