AWS AmplifyとVueによるToDoリストの作成手順

最終更新日：2026年8月12日

AWS Amplifyとは

項目	AWS	Microsoft Azure	Google Cloud
世界シェア	約33%（首位）	約22%	約11%
強み	サービス数・実績	Microsoft製品連携	データ分析・AI
無料枠	12ヶ月+常時無料	12ヶ月無料	常時無料枠あり
主な資格	CLF / SAA / SAP	AZ-900 / AZ-104	ACE / PCA

AWS Amplifyは、セキュアでスケーラブルなモバイルアプリケーションとウェブアプリケーションを構築するための開発プラットフォームです。AWS Amplifyによって、ユーザーの認証、データとユーザーのメタデータのセキュア保存、データへの選択的なアクセス許可、機械学習の統合、アプリケーションのメトリクス分析、サーバー側コードの実行といった作業を簡易化することができます。

AWS Amplifyの利点

幅広いサービスの対応と深い機能の利用

AWS Amplifyは、AWSクラウドを利用してアプリケーションを強化するため、他のモバイル開発プラットフォームよりもはるかに幅広いサービスに加え、これらのほとんどのサービス内のより深い機能にアクセスできます。

上記の他にAWS Amplifyは、次のことができます。

• アプリやビジネスの拡大に応じてスケーリングする
• オンデマンドのライブなアプリケーションを構築する
• 大量のデータに対する多数のリクエストを低レイテンシーで処理する

どのプラットフォームでも構築可能

AWS Amplifyは、ネイティブに動作する下記のアプリケーションを構築し、動作させるためのエンドツーエンドのソリューションを提供しています。

• AndroidとiOSアプリケーション
• React NativeやReact、Ionic、Angular、Javascript、Vue.jsによるウェブアプリケーション

AWS Amplifyにはバージョンコントロール、自動的なコードテスト、および実稼働のアプリケーションデプロイのために必要なものが備わっています。AWS Amplifyは、フロントエンドとバックエンドの両方について、完全な開発ワークフローを提供しています。

データの単純化

AWS Amplifyでは、次のことができます。

• 複数のデータベーステクノロジーのセットアップを行うことなく、シームレスにデータにアクセスする
• 様々なリレーショナルおよび非リレーショナルデータベースのような既存のデータベースを簡単に統合する
• GraphQLを使う

GraphQLを使用すると、一回のネットワークリクエストで、複数のソースにわたって情報を問い合わせ、取得できます。これにより、より高速でインタラクティブなモバイルアプリケーションを構築できます。その結果、アプリケーションによるCPU使用率は下がり、バッテリー寿命も長くなります。

オフラインの同期

AWS Amplifyには、デバイス上のデータストアを、バックエンドのデータストアと同期する機能が内蔵されています。

デバイスがオフラインの時

アプリケーションはAWS Amplifyを使用して、ローカルにデータの問い合わせと書き込みを行います。

デバイスが再接続してオンラインに戻った時

AWS Amplifyは自動的にローカルデータストアとバックエンドのデータストアと同期し、矛盾があると解決します。

AWS Amplifyでは、ネットワークの中断にも耐えることができる、信頼性の高いモバイルアプリケーションを構築できます。また、複数のデバイス間にわたってリアルタイムのコラボレーションを行うアプリケーションも可能です。

サーバー管理が不要

AWS Amplifyは、ビジネスロジックによってサーバ側コードを実行することができるため、サーバーを管理する必要がありません。使用するリソース分だけ支払うため、コストを最適化できます。

また、サーバーの管理やアップグレード、バックエンドが不要なだけでなく、アプリケーションは可用性が高く、自動化されたものになります。

きめ細かいセキュリティ管理

AWS Amplifyを使うと、アプリケーションのユーザーごとに、きめ細かいアクセス制御を設定できます。Amazon、Facebook（Meta）、Google認証のフェデレーションを簡単にセットアップできます。また、ユーザーごとにデータのどの部分を許可するかを正確にコントロールすることができます。

AWS AmplifyとVue.jsによるToDoアプリケーション

ここでは、GraphQL APIを使用して、アイテムをクラウドデータベースに保存して取得し、リアルタイムサブスクリプションで更新を受信する「ToDoアプリケーション」の作成までの流れを例として示します。その中でバックエンドの設定と、バックエンドとWebアプリケーションの統合について説明します。

事前準備

ここでのアプリケーションの作成には、Node.js・npm・gitの各ツールが必要です。バージョン要件はAmplify CLIの更新に伴って変わるため、着手前に必ずAWS公式ドキュメントで現在の推奨バージョンを確認してください。

• Node.js（LTS版を推奨）
• npm
• git

1. AWSアカウントにサインアップ

2. AWS Amplify CLIをインストールと構成

フルスタックプロジェクトの設定

1. 新しいVueアプリケーションの作成

Vue CLIを用いて新しいVueアプリケーションをブートストラップします。

2. 新しいバックエンドの初期化

アプリケーションをサポートするために必要なバックエンドサービスを作成できるように、AWS Amplifyを設定します。

3. AWS Amplifyライブラリのインストール

「@aws-amplify/ui-vue」パッケージは、Vue固有のUIコンポーネントのセットで、エンドツーエンドの認証フローなどの機能を容易に統合することができます。

4. フロントエンドの設定

クライアントでAWS Amplifyを構成して、バックエンドサービスとやり取りできるようにします。

APIとデータベースをアプリに接続

（アプリケーションの要件）

• ToDoリスト
• タスクを作成／更新／削除する機能

これらの要件を前提として、APIにToDoのリストを照会し、APIに更新を送信してToDoを作成、更新、削除する方法を提供できるようにします。

1. GraphQL変換によるデータのモデル化

GraphQL SDLとカスタムAWS Amplifyディレクティブを使用して、APIのバックエンド要件を定義します。次に、GraphQL変換ライブラリは、SDL定義を、データモデルを実装するAWS CloudFormationテンプレートのセットに変換します。

2. GraphQL APIとデータベースの作成

データがモデル化されたので、プロジェクトのルートから「amplify add api」を実行して、GraphQL APIを作成します。

3. GraphQL APIのデプロイ

APIをデプロイできるように、「amplify push」を実行することで更新した構成をクラウドにプッシュします。

4. GraphQL APIのフロントエンドコードの生成

プッシュを実行すると、スキーマで検出されたすべてのGraphQL操作をコードで生成するオプションが表示されます。オプションを選択した後、コマンドを実行してAWS Amplifyのステータスを確認します。AWS Amplifyコンソールでプロジェクトにデプロイされたサービスは、「amplify console」を実行することで表示されます。

5. フロントエンドをAPIに接続

Vueのアプリケーションを開き、以下のことができるようにします。

• GraphQL ミューテーションを使用したデータの書き込み
• GraphQLクエリを使用したデータの読み取り
• GraphQLサブスクリプションを使用したリアルタイムデータの取得

6. モジュラーインポートの使用

バンドルサイズを小さくするために、特定の機能のみを使用している場合は特定のカテゴリのみをアプリケーションにインポートすることができます。

認証を追加

1. AWS Amplifyによる認証

AWS Amplifyフレームワークは、Amazon Cognitoをメインの認証プロバイダーとして使用しています。Amazon Cognitoは、

ユーザー登録、認証、アカウント復旧、その他の操作を処理する堅牢なユーザーディレクトリサービスです。

2. 認証サービスの作成

サービスをデプロイするために、「amplify push」を実行します。これにより、認証サービスがデプロイされ、使用開始できます。

3. ログインUIの作成

Vueアプリケーションに認証を追加します。AWS Amplifyフレームワークには、認証UIコンポーネントがあります。これは、「aws-exports.js」ファイルで指定された構成を使用して、認証フロー全体を提供できるため、ログインフローが短時間かつ容易に作成できます。

アプリケーションをデプロイしてホストする

静的なWebアプリケーションを手動でデプロイしてホストし、他のユーザーと共有できるようにします。

1. アプリケーションにホスティングを追加

プロジェクトのルートから「amplify add hosting」を実行します。

2. アプリケーションの公開

「amplify publish」を実行すると、アプリケーションが公開されます。公開後、ターミナルには、amplifyapp.comドメインでホストされているアプリケーションのURLが表示されます。追加の変更をする場合は、「amplify publish」を再実行します。

押さえておきたいポイント

• AWS Amplifyはフロントエンドとバックエンドを一体で扱える開発プラットフォームで、Amplify CLIから「amplify add api」「amplify push」などのコマンドを実行するだけでGraphQL APIやデータベース、認証（Amazon Cognito）といったバックエンドサービスを構築できる。
• オフライン時のローカル書き込み・自動同期や、GraphQLサブスクリプションによるリアルタイム更新など、モバイル/Webアプリに求められる機能が標準で組み込まれている。
• 2024年以降はTypeScriptでバックエンドをコード定義する「AWS Amplify Gen 2」が新しい主流になりつつあるため、新規に構築する場合は本記事のGen 1方式とGen 2のどちらが適しているか、着手前に公式ドキュメントで確認するとよい。

よくある質問

AWS AmplifyとAWS Amplify Gen 2は何が違いますか？

本記事で解説しているのは、Amplify CLIとGraphQL Transformを使ってバックエンドを構築する従来型（Gen 1）の方式です。2024年以降に提供されているAmplify Gen 2は、TypeScriptのコードでバックエンドをそのまま定義できる方式で、ローカル開発体験やCI/CDとの親和性が改善されています。Gen 1のプロジェクトも引き続き動作しますが、新規構築時はどちらの方式を採用するか公式ドキュメントで確認することをおすすめします。

Vue.js以外のフレームワークでもAWS Amplifyは使えますか？

使用できます。AWS Amplifyは、React・React Native・Angular・Ionic・JavaScript（Vue.js含む）といったWebフレームワークに加え、AndroidやiOSのネイティブアプリケーションにも対応しています。

AWS Amplifyの利用に料金はかかりますか？

AWS Amplify自体の利用料に加えて、Amazon CognitoやAWS AppSync、Amazon DynamoDBなど、裏側で実際に使用するAWSリソースの利用量に応じた従量課金が発生します。料金体系や無料利用枠の条件は変更されることがあるため、最新料金はAWS公式サイトでご確認ください。

まとめ

本記事では、AWS Amplifyの利点と、AWS AmplifyとVue.jsによるToDoリストアプリケーションの作り方の流れについて解説しました。AWS Amplifyは、開発フレームワークおよび開発者用サービスで構成されており、モバイルアプリケーションやウェブアプリケーションをAWSで構築するための簡単な方法が提供されています。従来型（Gen 1）のCLIベースの構築方式に加え、TypeScriptでコード定義するAmplify Gen 2も登場しているため、プロジェクトの要件に合わせて採用する方式を検討してください。