はじめに
2週間前からReactの学習を始めて、Udemyで動画を見てプログラミングコーチングスクールの課題になっているTodoアプリを作っているのですが、フロントエンドが初めてということもあり、慣れない画面ばかりでちょっと疲れてきました。学習の息抜きがてらに、フロントエンドの知識がなくても高速でアプリをリリースできそうなReactのローコードツールを調べてみました。
元々、FlutterFlowというローコードツールに2年ほど前に興味をもって少し触ってみたのが、私がプログラミング学習を始めるきっかけの一つでした。ローコードプラットフォームは初学者の入口としてはとてもいいと思います。Reactのローコードツールで代表的なものを調べてみました。
draftbit
FlutterのノーコードツールFlutterFlowと並んで有名なツール。アプリ画面エディタを操作して、コーディング知識があまりない初心者でも、GUIで直感的にアプリを制作できる。ネイティブモバイルアプリ、レスポンシブWebアプリ、社内ツールを作れる。
ソースコードがダウンロードできるので、ノーコードツールにありがちな、ロックインされないの良い。
私の様に、フロントエンドの知識ほぼ0状態だと、環境構築もいらないし、とにかく動くモックを作ってリリースしたい、という状況だととても良さそう！本番環境でどこまで耐えられるアプリになるのかは不明（LPを見る限りだとアプリストアにリリースしているアプリが並んではいるのでユーザー数少ないうちは全然問題なさそう）
Locofy.ai
デザインからコードへの変換するツール
・1クリックでデザインをコードに変換
・コードとインタラクティブ・プレビューをすぐに確認できる
・レスポンシブレイアウトに柔軟に対応
・エクスポート、デプロイ、GitHubへの同期が可能
Quest.AI
FigmaからReactJSコードを生成するツール。
GUIで操作して画面を作ることもできる。
(LPより)
・コードを一行も書かずに美しいステートアニメーションやバリアントアニメーションを作成できる
・生成されたコードを GitHub リポジトリにプッシュします。単一のコンポーネントまたはアプリ全体をプッシュすると、変更をマージ。
・独自のFigmaデザインに基づいて、フル機能のカスタムコンポーネントを作成。
・コードをエクスポート。生成されたコードは本番環境に対応し、既存の CI/CD パイプラインを使用してすぐにデプロイできる。Javascript または Typescript としてエクスポート可能。
FigamとGPTで作る
これが本命でしょ、という気が最初からしていましたが、調べてみるととても良さそうなソリューションに思えます。（他のツールの新しいサブスク増やさなくていいからコスト的にも◎）
すでに紹介している方がいて、
https://zenn.dev/silverbirder/articles/47965727b4f05b
「FigmaのデザインからReactコンポーネント作成」
「完璧ではありませんが、数分程度でFigmaの1画面が構築できました。(修正は2度ぐらい)」
「ゼロから開発するよりも、ある程度雛形となるコードを作成してくれる方が時間短縮になります。
また、自身では知らない方法でコード作成してくれる場合もあり、勉強になります。」
上記URLの記事より引用
とのこと、これは期待できそうですね。ノーコード/ローコードじゃないかもしれませんが、フロントエンドの知識があまりなくても、Figmaが使えれば、爆速で開発できそうな気配が漂っています！
これはピボットするプロダクトのリストでは？
以上、React ノーコード/ローコードツールを調べてみました。
非開発者・開発者両方をターゲットにしているdraftbitと、開発者向けにフォーカスして作り込んできた Locofy.aiとQuest.AIとなっていました。
draftbit以外は「Figmaでデザイン作って、Reactコードを生成」というツールばかりでした。FigmaからReactコードを作るというフローであれば、GPTかClaudeで十分なので他のツールにお金を払う必要性はあまりない様に感じます。
調べていて気付いたのですが、汎用型AIの進化が早すぎて、Locofy.aiとQuest.AIはGPTにできない価値を創出するのは相当難しくなっていると感じました。
GPT3とか3.5の頃だと、特化型AIなので、Reactへの変換精度が高いです！とかあったかもしれませんが、もはやそれはあまり余地がなくなってきていると思われます。また、開発者向けだとGUI画面では付加価値が出せないので、FigmaとGPT以外に間を変換するツールとしてのニーズはなくなっていっている様な気がします。
drafbitはノーコードツールが欲しい非開発者ニーズが取り込める余地があるかもしれないのですが、それもCopilotあたりに全部もっていかれる様な気もしますよね。GUI画面操作してモジュールを組んでいくの結構難易度高いし、学習コスト高いですからね。簡単そうに見えて以外と難しくて、ツールの学習に結構な時間がかかってしまうものです。だったらCopilotに手書きの絵をプロンプトでwebアプリ作ってもらう方が全然いいじゃん、となる様な気がしてきます。
ということで、Reactのローコードツールを調べていたら、
「汎用型AIによってピボットを迫られているプロダクトリスト」
を作ってしまいました。