はじめに
近年、AIの発展とともにバイブコーディングという言葉を聞く機会が増えたかと思います。テレビや街中でも、ノーコードで開発できる！といった広告をみることが増えましたね。
筆者もバイブコーディングの一種としてReplitというサービスを使用していました。
非常に便利ですが、説明がすべて英語のため、使い方を毎回翻訳にかけて調べるという手間があり、やや不便だなと感じていました。
しかし、ある日Replitにログインしたら、日本語でのサービス提供を開始したという嬉しいお知らせが飛び込んできたのです！！
せっかくなので、この記事では日本語版のUIを使用した状態でReplitの使用方法と便利な活用法を紹介していこうと思います。
そもそもReplitとは
Replitとは、AI搭載型IDE (統合開発環境) です。提供はアメリカ、カリフォルニア州に本社を構えるReplit社によって行われています。
対話型生成AIの中でもIDEを持っているため、AIによって出力されたコードが直接プロジェクトファイルに書き込まれたり、テストを実行してから作業を完了させ、関連コードを一気に書き換えてくれたりと、短時間でのコーディングが可能になります。
開発の始め方
始め方は非常に簡単です！
まず、アカウント登録をすると下記画像の画面が表示されます。
ここにあるピッチデッキを作成...に「タイマーアプリを作って」のように日本語で指示を送るだけです。
作成したいものが詳細に決まっている場合は、この時に具体的な要件を一緒に送信します。
別の生成AIに「Replitへ入力するためのプロンプトを作成して」と依頼し、あらかじめ整理されたプロンプトを用意しておくのも一つの方法です。
今回は実際の例として、まず以下のプロンプトを送信してみます。
タイマーアプリを作って。
カウントダウンもカウントアップも機能としてほしい。
モノトーンでクールな感じに仕上げて。
もし、すでに作成済みのプロジェクトを修正してもらいたい場合、あとでプロジェクトファイルをアップロードするため、「まだ何もしないでください」と指示を出すと空のプロジェクトを生成してくれます。
作業の進め方
先ほどのプロンプトを実行すると、このようにAIがコードを作成し、プレビュー画面を表示してくれます。
もし、そのまま修正を依頼するのであれば、エージェントにメッセージ...に引き続きプロンプトを送信しましょう。
次に、この画面で閲覧できる他の機能について紹介します。
1. コストのチェック
Replitでは、プロンプトを実行するごとにコストが発生します。
料金プランについては別で詳しく説明しますが、プロンプトの実行には毎回お金がかかると覚えておいてください。
実行したプロンプトにかかった料金は、画面左の対話欄にある作業時間〇分のプルダウンを開くと出てきます。
今回は簡単なアプリの作成だったため、$0.90で実行できたみたいですね。
この料金は、AIの思考量やコードの書き換え量と比例して増えていきます。
2. 変更差分の閲覧
コードの差分はチェックポイントを作成しました〇分前プルダウンを開き、<>変更をクリックすると閲覧できます。
ここでは作成された新規ファイルや、変更があったファイルの差分がまとめて閲覧できます。
3. ロールバック
2の<>変更の隣にはここにロールバックというボタンがあります。これをクリックすると、該当プロンプトが完了した段階のコードに一気に戻すことができます。
追ってプロンプトを送ったけど、さっきの方がよかったなーといった時に活用してください。
4. ツールの使用
ヘッダーのPreviewの隣にある+を押すと、New tabが開かれます。
ここではシェルでコマンドをたたいたり、環境変数を設定したり、DBを直接触ったりと様々なことができます。
詳しく書くと長くなってしまうのでここでは割愛しますが、コードを書く以外のことは大体ここからできます。
5. ファイルツリーとコードの閲覧・修正
ヘッダー右端にあるアイコンからファイルツリーを開けます。ここから目的のコードファイルを見ることができます。
また、このコードは現在プレビューで閲覧できるアプリのコードそのものなので、わざわざAIに頼まなくてもできる修正なら、直接手でコードを書き換えることで、リアルタイムでプレビューに反映させることができます。
コストについて
2026/07/27時点での料金プランについて説明します。
Replitの料金支払いは基本サブスクリプション制です。
年間払いだと月々下記画像の価格になります。
それぞれのプランについて説明します。
Starter
簡単に言うと完全無料のお試しプランです。
ただ、月に3プロンプトほどしか実行できません。
アカウント登録も無料なので、試しに触ってみて、よさそう、本格的に導入しようとなれば課金プランに切り替えるといいと思います。
Replit Core
月々$20のクレジットが使用できる課金プランです。
クレジットというのは、先ほどの1の説明であった、プロンプトの実行にかかる料金のことを指します。
Replitの一番安い料金プランはこちらなので、最低月に$20はあらかじめクレジットを購入する必要があります。
プロンプト実行の際は、この$20のクレジットから料金を消費していきます。
また、クレジットを使い切った場合、従量課金制に切り替わり、月の終わりに超過した分の料金が請求されます。
この従量課金で損得は特にありませんが、年払いでお支払いすると月初めのクレジット分だけ若干割引があります。
一点注意したいことが、Replitでは料金の繰り越しはありません。
つまり、今月は$10しか使わなかったから来月は$30使えるね、とはなりません。
個人的には、個人開発や小規模プロジェクトの場合、このプランで十分かと思います。
Replit Pro
月々$100のクレジットが使用できる課金プランです。
こちらは主にチーム開発や大規模プロジェクト向きのプランです。
このプランの特徴として、クレジットの共有があげられます。
AさんとBさんがReplitで共同開発をするとします。Aさんは今月$100使い切ってしまいましたが、Bさんはまだ$40しか使用していません。
この時、お互いがProプランを契約していれば、AさんはBさんの余っているクレジットを使用してReplitAIを使用することができます。
これはお互いにProプランであることが条件なので、片方はCoreプランですとなるとクレジットの共有はできません。 (同じプロジェクトに入って開発はできるはずです)
現在はこの3プランのみなので、規模や用途によって使い分けてください。
使用済みのコストについて
現在、何$分のコストを使用しているかは設定の使用状況から見ることができます。
筆者の場合、残り$11.41使用できるみたいですね。
残高合計の欄に制限を管理というリンクがあります。
これを押すと、従量課金に切り替わる際通知を出すための金額と、予算の超過を防止する金額を設定できます。
この使用量アラートと使用量予算は同じ金額が設定できないため、筆者は従量課金に勝手に切り替わらないよう$0.01と$0.02に設定しています。
なるべくコストを抑える方法
プロンプトを送るたびにお金がかかるとなると、なるべく少ない金額で多くの作業をAIにやらせたいですよね。
そんな方に、個人的に思う、低コストでなるべく多くのタスクをAIに行わせるポイントをいくつかあげてみました。
こちらはある程度コードが理解できる経験者向けになっています
1. 1プロンプトで複数タスクの指示を出す
実体験として、新規画面を一つ作らせるごとに$2~$3程のコストがかかります。
しかし、新規画面を3つ作らせたとしても$3~$4程しかかかりません。
これは、正確な内部仕様は公開されていませんが、プロジェクトの解析やコンテキストの読み込みが影響しているためではないかと推測しています。
つまり、複数タスクを一気に行えばプロジェクトの読み込み回数が減らせて、低コストでたくさんのタスクを行えるというわけです。
しかし、じゃあ10個くらい一気に作らせよう欲張ると、プロンプトの指示をいくつか取りこぼすため注意が必要です。
2. なるべく共通化を意識する
Replitは、言語指定を何もしなかった場合はReactベースの構成で生成されるケースが多いのですが、基本コンポーネントを活用しません。
しかし、コンポーネントや共通関数などを作りながら画面を作らせることで、後々同じ処理をする画面を作成する際に、コードの記載量を減らすことができ、1画面を作るコストの大幅カットが見込まれます。
3. 書き込みをして欲しいファイル名を指定して指示を出す
ログイン機能作ってる画面直して、と指示を出すと、Replitはまずログイン画面を探すタスクから行います。修正したいコードがある場合、該当ファイルを指示するだけで大幅にコストカットができます。
4. リネームは絶対にしない
このファイルの名前を変更したい、という指示は、全ファイルを読み込んで修正という作業になるため、かなり大きなタスクになります。
結構な額がかかってしまうため、リネームは手動で行う方が吉です。
ちなみに、「リネームしたらエラーで動かなくなった。修正して。」という指示の場合は、低コストで行うことができます。(エラーに従って、該当ファイルだけを読み込むため)
まとめ
Replitは、うまく使いこなせば開発工数を大きく削減できる便利なサービスだと感じました。
特に、日本語対応によって従来よりも手軽に利用できるようになったため、これからAI開発ツールを試してみたい方にもおすすめです。
Replitに限らず、AIを活用した開発支援サービスは今後さらに増えていくと思われます。ぜひ自分に合ったツールを見つけて活用してみてください。
ReplitのUIは頻繁に更新されるため、記事の作成時と操作は異なる場合が高くなっています。