Replitとは

ブラウザ上で使用できるAIが搭載されたIDEです。
AI搭載エディターは、今では不思議なものではないものになっていますが
Replitは、AIとのインタラクティブな開発を提供しています。

どういうことか。

これまでのAIを使っていた人であれば、恐らく誰もが考えたことがあると思われる
「◯◯という機能を追加して」
という雑なプロンプトを投げると、自動でコードを書いてくれて、そのコードを既存のコードに組み込んでくれ、エラーが出たら直してくれる。
そんな近未来なAIがあればいいなぁと多くの人が思っていたと思います。

それを実現したものがReplitになります。

今回はTypeScriptで、バックエンドをExpress、フロントをReactで構築してもらったものをベースに紹介したいと思います。

執筆時点(2024/12)のものです。(12月初旬に書いたのですが、中旬くらいにUIや機能に変更入ったので、かなり劇的に変更していく可能性はあります。)

基本的な使い方(機能紹介)

Replit Agent

基本的に、他のAIサービスと同じように使えるのですが、大きく違うのは Replit Agent の存在です。

◯◯アプリを作りたいと伝えると、その場で軽くアプリを作ってくれます。
しかし、そこまではboltでもやってくれます。
Replitはそこからさらに、追加要望などを伝えるとそれも反映した上でファイルの中身を変更してくれたりもします。

今回は定番のTODOアプリを作ってもらいました。

こんな感じでお願いしています。

初っ端で出鼻を挫かれたのですが
NextとHonoは使えないということでした。
そこで、雑にReact + Expressでお願いしたところ、陽気に答えてくれました。

作業する前の確認をしてくるところがいいですね。

Replitの目玉

バックエンド

Replitの目玉機能としてバックエンドの構築があります。
bolt や v0 といったフロントエンドに特化して作ってくれる生成AIは多くありますが
このReplitはDBを含めたバックエンドも構築してくれます。
これにより、一つのアプリのプロトタイプをサクッと作ることが可能になっています。

後述しますが、デプロイというのもセットになっていて、バックエンドを含めたアプリを作った上で、そのままReplitからボタン一つでデプロイもすることができます。
これにより、簡単なReproductionやPrototypeを即時に作ることが可能になっているため、開発する上での認識合わせも手軽になり、かなり生産性が高まるのではないでしょうか。

webview

Replitには、webviewという機能もあります。
構築したページがどのようなものかをバックエンドの挙動も含めて動作確認できるようなwebviewを立ち上げることができます。

検索でwebviewを選択すると

IDE上に立ち上がったプロジェクトをブラウザの中で確認することができます。

アプリケーション上の右上のNew Taskボタンをクリックすると、作成モーダルが表示されました。

そして、入力し作成すると

追加されたのが分かります。
このように、作られたものをすぐに動作確認することができます。

使用できるAIモデル

現在使用できるモデルは

プラン	利用可能なモデル
Basic	Gemini 1.5 Flash
Advanced	GPT-4o Claude 3.5 Sonnet V2

となっています。
見てわかるように、主要なモデルを使っているためこれまで同様のモデルを使っていた方にとっては、そのまま移行できるため、使いやすいのではないでしょうか。

私自身、Claudeはずっと利用していて、Replitでも使えはしますが、継続利用をしているヘビーユーザーなので、Claude 3.5 Sonnetが使えるだけでもかなり嬉しいです。

Tips

Replitを使う上で知っておくと便利なことを列挙しています。

ファイルを聞く

AI機能を備えているIDEとして使えるので、ファイルの場所や、名前を聞くことで教えてくれるのですが

そこに記載されるパスをわざわざファイラから選択したり、コマンドを叩かなくとも、クリックするだけでファイルが開くようになります。

デプロイ

先にも述べましたが、Replitの画面からボタン一つでデプロイができます。
これにより、プロトタイプを作成しすぐにデプロイし、動作を見てもらうという流れが非常にシームレスに進みます。

方法も簡単で、順番にボタンを押すだけです。

デプロイのwindowを開いて順番にデプロイ設定を確認しボタンを押していきます。

auto-scalingの設定でデプロイすることにより費用を抑えられます。

設定を行うとデプロイが進んでいきます。

すると、失敗してしまったようです。
エラー箇所としては、コンポーネント内の型エラーが発生しているようです。

しかし、ここでも慌てない。
すぐにReplit Agentにエラーを投げてみます。
すると、このエラーを勝手に直してくれました。
この時点で、コード書いてません。見てすらいません。

直ったようなので、再デプロイを試みると無事にデプロイできたようです。

URLは省略しますが、ブラウザでアクセスもできて、動作も問題なさそうでした。
（DBは、手元で動かしているものと同じものを見ているようで、ローカルで登録したものがそのままデプロイ先でも表示されていました）

デプロイしたままにしておきたくなかったので、shutdownをして終わります。

注意点

デプロイの制限もいくつかあるので注意が必要です。

以下を参考にしてください。

オートスケールデプロイメント

制限項目	上限値
マシン数	デプロイメントあたり10台
HTTPリクエストサイズ	32MiB
HTTPレスポンスサイズ	32MiB

ネットワーク制限

制限項目	上限値
クライアントごとの受信リクエスト	10秒間で150リクエスト
デプロイメントあたりの総受信リクエスト	1秒間で800リクエスト

静的デプロイメント

制限項目	上限値
カスタムレスポンスヘッダー	デプロイメントあたり100個
バンドルサイズ	1GiB

Git連携

Gitの連携も可能です。
GitHub等と連携すると、すでに作成済みのリポジトリからimportして、Replit IDE上で使うことができます。

しかし、GitHub等からimportしたプロジェクトでは、Reolit Agentは使えないので注意です。
その代わり、他の生成AIモデルを使えるので、そちらで使っていただくことができます。

Git ClientもIDE上にあるので、fetch, pull, add, commit, pushなどの基本的な操作ができます。

フォルダのダウンロード

生成されたプロジェクトのフォルダをローカルにダウンロードすることが可能です。

料金

プラン内容

2024/12 時点

価格帯は以下を参照してください。

引用: https://replit.com/pricing

料金プラン比較

機能	スターター	コア	チーム	エンタープライズ
Replit AI
エージェント	✓	✓	✓	✓
アシスタント（チャット）	基本	高度	高度	高度
コード補完	✓	✓	✓	✓
コード生成	基本	高度	高度	高度
デバッガー	基本	高度	高度	高度
開発
仮想CPU	1	4	8	最大64 vCPU
メモリ（GiB）	2	8	16	最大128 GiB RAM
アウトバウンドデータ転送（GiB）	1	100	1,000	カスタム
SSHアクセス		✓	✓	✓
公開Repl	3	無制限	無制限	無制限
プライベートRepl		✓	✓	✓
コラボレーター	1	3	チームメンバー全員	チームメンバー全員
開発時間（分）	1200	無制限	無制限	無制限
ストレージ
アカウントストレージ（GiB）	2	50	250	カスタム
Replitデータベース	✓	✓	✓	✓
PostgreSQLストレージ（GiB）		✓	✓	カスタム
PostgreSQL計算時間（時間）		✓	✓	カスタム
オブジェクトストレージ		✓	✓	✓
オブジェクトストレージデータ転送（GiB）		✓	✓	✓
オブジェクトストレージ高度な操作		✓	✓	✓
オブジェクトストレージ基本操作		✓	✓	✓
デプロイメント
アウトバウンドデータ転送（GiB）	10	100	1,000	カスタム
予約済みVMデプロイメント		✓	✓	✓
自動スケール計算ユニット		✓	✓	✓
自動スケールリクエスト		✓	✓	✓
スケジュールされたデプロイメント計算ユニット		✓	✓	✓
スケジュールされたデプロイメントスケジューラー		✓	✓	✓
静的デプロイメント	1	✓	✓	✓
プライベートデプロイメント			✓	✓
セキュリティとコンプライアンス
ロールベースのアクセス制御			✓	✓
SSO				✓
シングルテナントとVPC				近日公開
カスタム請求				✓
メンバーサポート
メンバーサポート		✓	✓	✓
メンバー限定イベント		✓	✓	✓
新機能への早期アクセス		✓	✓	✓
メンバーコミュニティ		✓	✓	✓
オンボーディングサポート			✓	✓

Desktopアプリ

デスクトップアプリもリリースされています。
ClaudeにもデスクトップアプリやiPhoneなどのネイティブアプリもあったりしますが
Claudeではできない、デスクトップアプリのwindowの新規作成ができます。

つまり、プロジェクトごとに新規ウィンドウを立ち上げることができるので、本当にIDEをプロジェクトごとに立ち上げるというようなイメージになります。
これは個人的に嬉しく、Claudeでは別のチャットを開くために今の画面から遷移しないといけなかったのが、現在のプロジェクトは据え置きで、別プロジェクトを開けるので非常に便利です。

Team機能

チームでの同時開発も可能にしています。
Live Shareのような機能です。
さらに、内部でGitベースでのバージョン管理も備わっているようで、
ブランチを切るというような、他の作業者との競合も起こらないような工夫がされているようです。

私自身はまだTeam機能を使っておらず、深く触ってはいないのですが、もしチームで取り入れるとなったら導入することでかなり開発生産性は上がると思われます。

注意点

これを書いてる現在、サポートしているフレームワークなどの制限があるようです。
僕が試したところでは、前述の通りNext.jsもサポート外のようです。
TypeScriptは使えるので、React + Expressの構成でならできると提案されるので、あくまでプロトタイプとして作るために使うといった用途になってくると思います。

Replitでよく使われる構成は以下のようです。

FULLSTACK_JS (React, Express.js, Tailwind CSS, Shadcn UI)
FLASK_VANILLA_JS (Flask, VanillaJS, Bootstrap)
STREAMLIT (Python/Streamlit)

まとめ

Replitは、ビジネスの観点で見てもAIによる開発体験をかなり画期的な進化をもたらしたツールだと思います。

直近でいうと、GPT o1 proといったモデルが出て、かなり界隈を賑わしていますが
これまでの5年スパンでの技術の発展くらいのスピードが、一気に1年くらいに短縮されて進んでいっている気がしました。

また、公式のYouTubeチャンネルでは、使い方の説明や機能の説明などを詳しく話してくれているので、サポートも優れている点が個人的に高評価なエージェントでした。

補足

これを書いた12月の間にかなりアップデートがあったようで、成長速度がかなり速いエージェントのようです。

上で紹介したようにIDEの新規タブで使うツール（Git Clientだったり、AI Assistantだったり）を選ぶ以外に、左にもメニューが追加されてパッと開けるようになったようです。

これだけ短期間で成長があると将来も楽しみになりますね！