ReplitでAI駆動開発してみた: AI時代の開発スタイルを試したら未来を見た

Replitが話題にのぼっていたので、試してみました。
Replitとは、オンラインIDE（統合開発環境）です。AIでコードを書き、デプロイできるらしいです。もちろんAIを使わないこともできます。

今回はほかの記事などを参考せずに、Replitを使ったことのない僕が一から試してみるというコンセプトです。

Table of Contents

面倒抜きに使ってみよう

Replitにアクセスしてサインアップしましょう。Google、GitHub、メールアドレスのオプションがあります。お好みの方法でサインアップしてください。

ログインしたらこんな感じ。

赤枠の + Create Repl を選択しましょう。たぶんIDEでいうところのプロジェクトと同じです。
するとモーダルが出てきます。

今回はデモなので静的サイトにします。

PrivacyはGitHubのPublic/Privateリポジトリのような感じです。

Replの初期設定が終わったら次のような画面が表示されます。

ペインがいくつかあります。

UIもいい感じ。

まずは Run してみましょう。

Replit.devにデプロイしました。ここまで3分くらい。

ファイルツリーペインから pages/index.tsx を選択してください。

次にエディタペインで編集したい行を選んで右クリックでコンテクストメニューが開きますので、そこから Generative with AI を選んでください。macなら Command + I、Windowsなら Ctrl + I でたぶんいけます。

するとエディタの中にプロンプトを入力できるエリアが表示されます。こんな感じに。

プロンプトを渡せば、自動でコーディングします。

コードに問題がなければAcceptを選択してエディタに反映しましょう。

次にファイルツリーから styles/globals.css を選択して見た目を整えましょう。
もちろんCSSにもAIを使えます。

それでできたものがこれ。

まじ？
10分たらずでできあがりました。

AI駆動開発ができるIDE、Replitをご紹介しました。チームで導入したら、かなり生産性上がりますね。

みなさんもぜひReplit使ってみてください。