AWS Amplify Studioを試す

私のスキルは、Backendはガッツリかけるけど、Frontendは少々苦手です。(React, Vueは書けるけど、CSSをリッチに当てられない感じです)
そんななか、21年12月初頭にAWSがAmplify Studioなるものを発表しました。
フロントエンド領域に苦手な場所がある私にとって、救世主となるのか検証してみました。
※公式ページに概要やチュートリアルがあるので、詳しくはそちらを御覧ください

AWS Amplify Studioとは

Figma(デザインツール)をコード(ReactやVue)に変換できるAWSのツールです。他にも機能がありますが、目玉であるだろう機能を紹介します。

どのように変換されるのか

今回はAWS Amplifyが用意しているサンプルを変換してみました。

このコンポーネントが

こんなふうに変換されます(全部で454行になりました。先頭の部分だけ載せています)

感想

普段からCSSに慣れ親しんでいる人にとっては、数百行のCSSはお手の物なのかもしれませんが、MUIなどのCSSフレームワークを多用している人は1から全てCSSを書く機会が減っているのではないでしょうか。
そんな方々にとって、救世主となりえるツールです。
そりゃ500行のファイルを何十個/何百個も書くとなったら頭がパンクしますよね。
デザイナーとエンジニアの連携がしやすくなり、プロダクトのリリースを早めることができるツールになり得ると感じました。

結論：ローコードって便利！
以上です