AWSのサービスを使って ローコードで webアプリを作りたい🥺 第33回 JAWS-UG札幌 クラウド女子会コラボ 勉強会 飯田夕葵（yuki） （と思ったのでAmplify Studioを触ってみた）

自己紹介 飯田夕葵（yuki） ⭐ 好きなAWSサービス AWS CDK Lambda ⭐ 札幌生まれ札幌育ち ゴールデンカムイのオタクです 😌 ⭐ 千葉県船橋市 在住 @prinprinprrr

⭐ 高校は英語科・大学は文学部で根っからの文系 ⭐ 新卒で入社した前職でAWSに出会う ⭐ 前職ではひたすらLINE botをサーバレスで開発 → サーバーのことわかんないけどサーバレス大好き🙌🥳 ⭐ 昨年10月に現職に転職 → EC2,ECS、、、サーバーわかんない😵 経歴

登壇のきっかけ 転職してAWSつよつよの 会社に入ったし、 コミュニティ活動にも 参加してみよう JAWS-UG東京 ランチタイムLT会 #6 (2023/12/18)

登壇のきっかけ 登壇前 登壇後 緊張する 震える 震える 吐きそう 寒い オエッ 楽しかった！ Twitterで感想も らえて嬉しい 仕事で頑張ったこと、 勉強したことを 楽しく共有し合える って最高🙌

登壇のきっかけ 札幌が大好きだから 札幌のコミュニティに 参加したい 帰省するタイミングで 何かイベントないかな？ あった😄

発表内容について AWSのサービスを使って ローコードで webアプリを作りたい🥺 バックエンドはわかるけど、 フロントがわからないから 一人でwebアプリを作れない ローコードでフロントの 実装ができたらいいな！ （と思ったのでAmplify Studioを触ってみた）

AWSのローコード・ノーコードツール 1. AWS Amplify Studio AWS Amplify Studio は、デベロッパーが完全なウェブアプリやモバ イルアプリを数時間で簡単に構築して配信できる視覚的なインター フェイスです。 Amplify Studio を使用すると、アプリのバックエンドをすばやく構築 し、豊富なユーザーインターフェイス (UI) React コンポーネントを作 成し、数回クリックするだけで UI をバックエンドに接続できます。 https://aws.amazon.com/jp/amplify/studio/ なんか簡単に アプリ作れそう

AWSのノーコード・ローコードツール 2. Amazon Honeycode https://aws.amazon.com/jp/blogs/news/how-to-create-an-expe nse-tracking-app-without-coding-using-amazon-honeycode/ AWSはユーザーフレンドリーな "ノーコード" アプリ開発プラット フォームである Amazon Honeycode を提供しています。 デスクトップ、iOS、Android のモバイルデバイスで動作するウェブ およびモバイルアプリケーションを構築できます。プログラミングを 必要としないので、誰でもアプリ開発者になれます。 ただし、2024年2月29日にサービス終了😭😭

とりあえず Amplify Studioやってみよう

AWS Amplify Studioとは？ フロント側 バックエンド側 Figmaでデザインを作成 Reactコンポーネントを生成 ⭐ GUIでデータモデリングができる ⭐ テーブルの定義 ⭐ リレーション ⭐ データをコンポーネントに紐付ける ⭐ 作成したデータはDynamoDBに保存

今回やってみたこと AWSブログにあるAmplify Studioのハンズオン https://aws.amazon.com/jp/blogs/news/aws-amplify-studio-figma-to-fullstack-react-ap p-with-minimal-programming/ 最近追加された住宅を表示する 「住宅リスト」アプリケーション を開発する 完成物はこんな感じ→

⭐ AWSが用意しているリポジトリをforkして接続 ⭐ Amplifyアプリケーションをデプロイする Amplifyアプリケーションをデプロイ 自動生成されたURLを叩くと こんな感じ！

Amplify Studio を起動 Amplify Studio を起動してみる😳

Amplify Studio を起動 少し待つと起動した！🙌

データモデリング すでに「Home」というモデルがある🙄

データモデリング ⭐「Data Manager」でデータの追加ができる ⭐自動でデータを作成できる！ DynamoDBを確認すると、 テーブルが作成されデータが入っている → ⭐自動でデータを作成できる！

データモデリング 自動生成されたデータ データの形式を「住所」に指定できる 他にもいろいろな形式が指定できる

Figmaとの連携 FigmaのファイルURLを貼り付けると簡単に連携できる

コンポーネントの作成と設定 Figmaでコンポーネントを作成すると Amplify Studio側にも作成される

コンポーネントの作成と設定 コンポーネントの画像と homeテーブルのimage_urlが対応している

コンポーネントの作成と設定 コンポーネントを複数並べて コレクションを作成 ソートやフィルターも設定できる

作成したコンポーネントをソースコードに追加 ⭐ ローカル環境のセットアップ ⭐ AWSが用意しているリポジトリをclone ⭐ ソースコードに先ほど作成したコンポーネントを追加 コンポーネントのコードは`Amplify pull`コマンドで取得できる ここからが少し大変🥵

完成したもの 全然違う、、、 色々試行錯誤しましたが直せませんでした、、、 お手本

やってみた感想 フロント側 バックエンド側 ⭐ フロントをまるっとFigmaで 作るのではなく、パーツを作る イメージ ⭐ GUIで簡単にテーブル定義できる ⭐ 複雑な処理はできないのであまり実用的 ではないかも ⭐ フロントの知識０では難し い。 ⭐ デザイナーがFigmaで作成 したコンポーネントをそのまま 取り込めるので、時短にはなる かも🤔 ハンズオンをやってみただけなので、 深掘りしたらもっと便利な機能があるかも 🤔

ご清聴ありがとうございました！