こんにちは。今回は噂のAIコードエディタ・Cursorを使ってみたので紹介したいと思います。
ノーコード・ローコードで開発を行っている人にはものすごく相性がいい印象でした。
AIの力でどんどんコーディングが進みます。
基本的な部分はノーコードで作り、ローコードでカスタマイズが必要なカスタムファンクション、カスタムアクション・ウィジェットはAIで一気に作りあげる。
「AI x ノーコード」での爆速開発。そんなスタイルが最先端となっていきそうです（というより既にそうなっている）。
では、革命的なAIツール「Cursor」とノーコードツール「FlutterFlow」の組み合わせについて書いてみたいと思います。
Cursor.sh（カーソル）とは？
Cursor（カーソル）は、AIを利用した先進的なコードエディタです。プログラミングの高速化を目的とし、コード生成、バグの特定と修正、自然言語でのコード編集など、多様な機能を提供します。
上記スクショのようにサイトのトップに「The AI-first Code Editor」（AIファースト・コードエディタ）と書かれてますね。
少し使ってみましたがまさにAI-Firstな印象です。
Adalo-Firstコードエディタ「Cursor」を使ってみた印象
上記コードは、試しにFlutterFlowのカスタムWidgetとして使うボタンを作ってみました。
でも上記は1行も自分で書いていません。Cursorに組み込まれたAI（ChatGPT）に質問したら方針を答えてくれたりコードを教えてくれたりし、それをAcceptすれば勝手に元のコードにどんどん反映してくれます。
意図と違うところはAIに言えばすぐカスタマイズしてくれますし、とてつもなく強力なツールです。
ChatGPTとの違いは、ファイル全体を理解した上で提案してくれるので間違いが少ない印象でし、めちゃくちゃ使いやすいです。
Cursorの料金体系
まず試したいなら無料プランでも十分です。一定のAI利用数を超えると使えなくなるので有料化が必要です。
しかしこれでProプラン月額20ドルで使えるなら格安だと思います。
FlutterFlowでカスタムWidgetを作ってみよう。
では、FlutterFlowでカスタムWidgetを作ってみます。今回は簡単なボタンを作ってみます。
まずはCustom CodeからAddボタンでWidgetを追加し名前をつけます。
次に右上の緑のボタンをクリックするとコードが表示されるので、これをCopyToEditorしましょう。
そしてこのコピーされたコードをコピーしておいてあとでカーソルに貼ります。
Cursorをインストール、アカウント作成
https://cursor.sh へアクセスし、以下のボタンからダウンロード・インストールします。
その後、アカウント作成も求められるのでWebに飛んでアカウントを作りましょう。
新規ファイルを作成する
左上のアイコンから新規ファイルを作成し、先ほどのFlutterFlow側で作ったコードを貼り付けました。
Command+KでAIに指示
ファイルのコード全体を選択し、Command + Kを押すとこのコードに対し指示をできます。
また、Command + L を押すと右メニューが開き、こちらからAIに相談できます。この場合は特定のコードではなくファイル群全体に対して話ができるイメージです。（Cursorではない）通常のChatGPTでコードを書いたりするとこれまでの経緯とか前に伝えたコードを忘れたりして困ることがありましたよね？そうではなくこのプロジェクトのファイル群を理解してくれた上で提案してくれるので、精度が高いと思います（多分）。
今回は以下のように「カスタムボタン」を作ってもらおうと思います。
AIの作業が終わると、以下のようにコードの変更箇所の差分が表示されます。Y/Nが出て、自分で受け入れるかどうかを決められます。すごく便利ですね！
全部OKの場合は緑のAcceptボタンを押せばOKです。
FlutterFlow側に反映
あとは、以下のように出来たコードをFlutterFlow側に貼り付けてコンパイル・保存すればOK。
UI側でコンポーネントから選択して貼り付ければ完成です！
挙動が想定と違う場合は、またCursorのAIにそのフィードバックをしてあげて、どんどんカスタマイズしていけば良いですね。
FlutterFlow x Cursor：まとめ
今回はCursorを使ってみました。めちゃくちゃ可能性を感じますよね。
ノーコードでアプリをサクッと作り、足りないところをAIでコードを書き拡張する。
FlutterFlowとCursorの相性が良すぎます。
今後よりAI xノーコードの開発方式が加速するのは間違いないと思います。
アプリ・Webサービスの開発の無料相談はこちら
FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。