こんにちは。
アプリケーションサービス本部ディベロップメントサービス2課の濱田です。
最近ヨーグルトメーカーを購入しました🥛
豆乳 or 牛乳パックに少しヨーグルトを入れて一晩放置すると、1Lの大量のヨーグルトができます。おすすめです。
はじめに
先日、AWS Amplify Gen2 の入門記事をこちらに書きました。
こちらの記事はいわば座学編で、AWS Amplify Gen2の何が嬉しいかを直観的に理解することがコンセプトでした。
今回は実践編として、実際に手を動かしてAWS Amplify Gen2 でウェブアプリケーションを作ってみることを目的とします。
1記事では収まらなかったため、数回に分けてお届けします。
この記事では、Amplify Gen2 の学び方に関する今回のアプローチを説明し、
実際にWebアプリケーション制作の第一歩を踏み出します。踏み出すところまでです。
本記事の対象読者
- アプリケーション開発の知識がない方
- AWS Amplify Gen2 に入門したい方
- 勉強するよりも、作りながら学びたい方（私のような方）
- 以下の操作が可能なレベル感の方
- git の操作
- AWS ドキュメントを読んで、開発環境の準備ができる
本記事のアプローチ
まず、本記事のアプローチについて書かせてください。
本記事は完全なハンズオンを提供するというものではなく、
「自分で考えたWebサービスを作ってみる」というプロセスの一例を提供するものです。
どういうことでしょうか。
ハンズオンという学びかたへの不満点
AWS公式からもQuickStart や ハンズオンが提供されており、実際に手を動かすなら、それらを使ってみるのも良さそうです。
チュートリアルやハンズオンといった教材のよさは、「手ざわり」を得られる点でしょう。
この点において、技術の入門のために一度はハンズオンに触れるのはベストな選択肢です。
他方で、受動的にに手を動かしているだけでは、なんだかわからないままとりあえず終わってしまったな、何を学べたんだっけ、と、どこか実感が伴わないのも事実です。
ハンズオンのサービスは自分が考えて設計構築したものではないので、これは仕方ありませんね。
生成AIに作らせることへの不満点
「作りたいものを生成AIに伝えて作らせればいいじゃないか」
確かに。
bolt.new やv0.devなど、生成AIを用いたウェブアプリケーション制作ツールは色々と登場しつつあります。
リンク先からどうぞ少し触ってみてください。
いくつかのプロンプトを送るだけで、本当にそれらしい完成品が出来上がり、そのままデプロイまでできてしまうのには驚きます。
確かに驚くべきでしょうが、他方でこう思いませんか？
- ファイルが多すぎて途方に暮れる
- どのファイルが何をしてるのかわからないため、メンテナンスもデプロイもできない
- 現状が完成しているように見えるので、触って壊すのが怖い
要するに、これは自分が作ったものではないので、中身がよくわからないブラックボックスなのですよね。
たとえ動いたとしても、学びにもならないし、やりがいも薄いです。
やっぱり、「自分でWebサービスを作る」ことが学びのためにも魅力的です。
とはいえ、初心者なのにゼロから全てじぶんでコードを書くというのは、それこそ途方に暮れてしまいます。
「部分ごとに生成AIに作らせる」という方法
そこで本記事では、「AWS Amplify Gen2 の構成要素を部分へと分解して理解した上で、各部分を生成AIに作らせる」というアプローチを取ります。
この方法なら、「自分で作っている」というやりがい感と、学びやすさとが両立しやすいのではないか、と私は考えます。
というわけで早速始めていきましょう。
今回はフロントの作成までを行うこととします。
自分のWebアプリケーションを作ろう
さて、何から始めるべきでしょうか？
言語の勉強、使うAWSリソースの洗い出し、…….
TODOをリストしていくと気が重いので、わかりやすいところから手をつけましょう。
いきなり、画面を考える
いきなり画面から考えましょう。
今回はAWS Amplify Gen2 を使用しますので、フロントエンドの側から（AWSリソースのバックエンドを含む）アプリケーションを構築する、ということが容易です。
具体的には、特にユーザー認証やデータベースとの連携は比較的容易で、基本的にはAmplify Gen2 のみだけで開発経験が完結するようになっています。
なので、どんなバックエンドリソースを使うかということは一旦置いて、フロントから考える構築が可能です。。
最終的な見た目から作るのは、モチベーション維持のためにも有効だと思います。
叩き台の画面を作る
楽しい時間です。
CacooやPowerPoint、……等作図ツールの使用が考えられます。
私はCacooが使いやすいので、そちらで。
私の場合、よくある構築物例を作るだけだと「自分の」感がなくつまらないと感じてしまうため、ちょっとオリジナリティを出したいです。ここでは
「悩み事や考え事を書き込み、それを爆破した上で、一旦寝ることを促すアプリ」
を作りたいと思っています。
画面はこんな感じかな〜、とぽちぽち作りました。
と課長にアドバイスをいただいたので、それをアプリにします
処理のことは後で考える、で大丈夫です。
あとはこの画像を生成AIに読み込ませ、フロント部分を表現するコードを書いてもらえば楽ちんそうです！
Amplify Gen2 の出力形式とは？
しかしながら、生成AIに「フロントエンドを作って」というだけでは、どのような形式で出力するかをこちらでコントロールすることができません。
生成AIとの対話では出力の指定が効果的であり、欲しいものを手に入れるためにはほとんど必須です。
どのようなアウトプットが欲しいのか？
まずは私たち人間が明確な指示を出すための、知識が必要ですね。
次回予告
以上の理由から、私たちは
- 今回私たちが使うAmplify Gen2では、どのような形式でフロントエンドを表現するのか
を学びにいく必要があります。
今回の記事はここまでとし、続いては
「【初心者向け】AWS Amplify Gen2 入門・実践編②——環境構築とプロジェクトファイルの理解」
でお会いしましょう。
濱田 明日郎(執筆記事の一覧)
アプリケーションサービス本部ディベロップメントサービス2課
ベルクソン哲学研究で博士号（人間・環境学）取得ののち、2024年にサーバーワークスに新卒入社。
IT未経験で入社後、1年でAWS認定資格12冠達成。
奄美大島出身。
