【レポート】これからはじめる Web・モバイルアプリ開発。AWS Amplify で手軽にちょちょいと #AWSSummit

2020年9月8日から30日まで開催されるAWS Summit Onlineのセッションレポートです。本エントリではAWS-09：これからはじめる Web・モバイルアプリ開発。AWS Amplify で手軽にちょちょいとをレポートします。

いきなり感想から

タイトルに「これからはじめるWeb・モバイルアプリ開発」とあるように、30分のセッションのうち冒頭10分くらいはAmplifyの話が出てこず、近年のWeb・モバイルアプリ開発についての基本的な話から始まります。ですので、Amplifyはもとより本当にこれからWeb・モバイルアプリ開発するという方に是非チェックいただきたいセッションです。例えば以下のような説明が出てきます。

• Web・モバイルアプリの3階層、「フロントエンド」「Webサーバー」「DBサーバー」ってそれぞれ何？
• SPA（Single Page Application）って何？ （そして対になるMulti Page Applicationと比較して説明してくれるのでわかりやすい）

加えて、Amplifyの学習方法についてもしっかり後半で解説されているのがありがたいなと感じました。

また、以下 4スライドの流れが非常にわかりやすくAmplifyの必要性を説明できているなと感じました。個人的にこのセッションの要点はここだと思います。

いわゆるWeb3層を用いてコンテンツを配信するだけじゃなくて、近年のアプリは周辺でいろいろなことが必要になってきています。ログを収集して分析したり、他システムとの連携があったり、プッシュ通知を使ったり…

そんな中で開発者がやりたいこと、やるべきことはなんでしょうか？こういうこと？

そうじゃないですよね。端的に言うと「ユーザーに価値を届けたい」。競合との差別化に繋がらない作業に時間を取られたくないですよね。

（間に数スライド挟まります）
それ、Amplifyでできますよ！

「ユーザーに価値を届けたい」、そのための作業に集中したい、こういった考えは開発者の皆さん共感いただけるのではないでしょうか？でしたら、Amplifyについて知っておくのは悪くない選択肢のはずです。と、いうわけでこのセッションで学びましょう。動画リンクは以下です。

• AWS-09：これからはじめる Web・モバイルアプリ開発。AWS Amplify で手軽にちょちょいと

セッション概要

AWS Amplify は Web・モバイルアプリ開発者向けに提供されるサービスであり、一連のフレームワーク、ライブラリ、CLI 等を指します。爆速でプロトタイピングするところから多人数でセキュアにスケーラブルに開発するところまで、実用的な機能が揃っている Amplify。このセッションでは、まだ Web フロントエンドやモバイルアプリをちゃんと開発したことがない、けど実は割と興味ある、という方に AWS Amplify を使って優しく入門していただくためのセッションです。どなたでも大歓迎！

スピーカー

レポート

Web・モバイルアプリ開発のトレンド

冒頭でお伝えしたとおり、近年のWeb・モバイルアプリ開発についての基本的な説明から始まります。

• Web・モバイルアプリの3階層
• フロントエンドとは？
• フロントエンド開発で利用される技術の例
• Single Page Application（SPA）とは
• バックエンドとは？
• バックエンドを構成する要素と⽤語解説

Web・モバイルアプリ開発で考えないといけないこと

「フロントエンド」「Webサーバー」「DBサーバー」それぞれでやることがたくさんあります。

だけじゃなく…その周辺にもやることがたくさんあります。

そんな中で開発者がやりたいこと、やるべきことはなんでしょうか？こういうこと？

そうじゃないですよね。端的に言うと「ユーザーに価値を届けたい」。競合との差別化に繋がらない作業に時間を取られたくないですよね。

それ、Amplifyでできます！Amplifyを使えば、

• 爆速で、
• スケールするアプリを、
• 簡単に

開発できます！

AWS Amplifyの各要素紹介

一口にAmplifyと言っても、実は色々あります。4つの構成要素があります。

Amplify ライブラリ

AWSの各種バックエンドと簡単に統合できるクライアントライブラリです。React/Vue/Angularといった近年の代表的なJavaScriptライブラリや、iOS/Androidに対応しています。

「AWSの各種バックエンドと簡単に統合できる」という具体例を紹介します。S3というストレージサービスにファイルをアップロードしたい、とします。

Amplifyライブラリ無しでこれを実装しようとすると、AWS SDKを使って実装するのが最も一般的です。SDKのメソッドは個々のAWSサービスのAPIと密接に関連しているものが多く、つまりその扱うサービスについてしっかり理解している必要があります。

Amplifyライブラリを使うと、Amplifyライブラリがいい感じで抽象化してくれるので、より完結に実装することができます。

また、Amplifyライブラリには様々なカテゴリがあります。この中から自分が使いたいものだけピックして使うことができます。各カテゴリにはその裏に紐づくAWSサービスがあるのですが（例えばストレージ→S3）、あまり意識する必要はありません。やりたいことベースで選べます。

例えば画像認識を実装したい場合、これだけで実現できます。

Amplify UIコンポーネント

JavaScriptライブラリ向けのUIコンポーネントです。例えば以下はReactの例ですが、これだけ記述するだけで認証用のUIを簡単に実装することができます。

Amplify CLI

AWSでサーバーレスなバックエンドを構築・管理するためのCLIツールチェーンです。例えば、

$ amplify init

とコマンドを打つだけでプロジェクトの初期設定ができます。

また

$ amplify add api

とすれば、AppSyncとDynamoDBがすぐ作成できます。

こんな感じで、コマンドを打つ（そしてそこでされる対話的な質問に答えていく）だけで、サーバーレスなバックエンドを構築し、さらに必要な設定ファイルやソースコードも自動で作成してくれます。

Amplify Console

SPAで構築されたWebアプリ向けCI/CD＆ホスティングサービスです。

Gitリポジトリを設定してビルド設定をするだけ、簡単にCI/CDパイプラインが作成でき、デプロイ先の静的サイトも提供してくれます。つまりGitにプッシュしていくだけで自動でデプロイできる環境が爆速で手に入ります。

他にも様々な機能があります。

AWS Amplifyをはじめるためのラーニングパス

Amplifyの魅力は伝わったかと思います。ではどこから学んでいけばよいでしょうか？

インストールして触ってみる

Amplifyは前述のとおり簡単にはじめることができるので、まずは以下コマンドから始めてみましょう！

ハンズオンをやってみる

スタートアップのCTOになったつもりでソーシャルメディアアプリを開発するハンズオンが日本語で提供されています。 がっつりAmplifyの各機能を学べる充実の内容になっています。（Reactの勉強にもなります）

• AMPLIFY SNS WORKSHOP

各種資料を読む

• ［AWS Black Belt Online Seminar］AWS Amplify（⽇本語）
• builders.flash
• Amplify Docs
• AWS Amplify GitHubリポジトリ
• AWS Mobile Blog

まとめ

AWS AmplifyとはAWSを⽤いたWeb/モバイルアプリを爆速でリリースするための開発プラットフォームです。

• ライブラリ｜Web・モバイルアプリとAWSを統合するためのOSSライブラリ
• UIコンポーネント｜クラウドに接続された美しいUIコンポーネントOSSライブラリ
• CLI｜バックエンドをインタラクティブに作成・管理するためのOSSツールチェーン
• AWS Amplify Console｜フロントエンドとバックエンドに対してビルド、テスト、デプロイ、ホスティングを容易に実現できるサービス群

Amplifyを使えば、

• 爆速で、
• スケールするアプリを、
• 簡単に

開発できます！つまりスタートアップからエンタープライズまで、⼩さくはじめて⼤きく育てるビジネスを展開するお客様に最適です︕

あわせて読みたい