はじめに

最近、Cursor、Vercelのv0、Bolt.newなど、AI によるコード生成やUI 作成を支援する開発ツールが注目を集めています。

今回紹介するReplitは、AIエージェント「Replit Agent」を備え、さらに進化した機能を活用することができます。

Replit Agentの大きな強みとして、バックエンドを実装することが可能であり、下記のようなウェブアプリを簡単に作成することができます。

Replitの主な特徴は次のとおりです。

  • ブラウザで動作するクラウドIDE: 環境構築の手間を省き、どこからでもアクセス可能。

  • リアルタイム共同編集機能: チーム開発をスムーズに進行。

  • 豊富なAI支援機能: コーディング、デバッグ、テストなどを効率化。

  • AIエージェント「Replit Agent」: 自然言語による指示でWebアプリケーション開発を支援。現時点(2024/11/7)では早期アクセスプログラム中であり利用は有料プランのみ。

本記事では、Replitの基本的な使い方からAI機能、そしてReplit Agentの使用方法まで解説します。

Replitとは？

Replitは、ブラウザ上で動作するクラウド統合開発環境 (IDE) です。複雑な環境構築やソフトウェアのインストールを必要とせず、Webブラウザさえあれば、いつでもどこでもコーディングを始められます。

Googleドキュメントで文章を書くように、Webブラウザ上でコードを書いたり、実行したり、デバッグしたりできます。

Replitの主な機能は以下のとおりです。

  • 多言語対応: 50以上のプログラミング言語をサポート。

  • クラウドIDE: ブラウザ上でコーディング、実行、デバッグが可能。

  • リアルタイム共同編集: 複数人で同時にコードを編集可能。

  • GitHub連携: GitHubリポジトリとの連携機能でバージョン管理も容易。

  • AIによるコーディング支援: AIがコード補完や解説、生成、編集など、様々な形で開発をサポート。

  • ワンクリックデプロイ: 簡単な操作でアプリケーションを公開・共有。

  • モバイルアプリ: スマートフォンやタブレットからも開発が可能。

  • 組み込みツール: デバッガ、ターミナル、データベースなど、開発に必要なツールが統合。

  • コミュニティ: 活発なコミュニティで他の開発者と交流、情報交換が可能。

これらの機能により、Replitは、

  • プログラミング初心者: 学習のための環境構築が不要、すぐにコーディングを始められる。

  • 経験豊富な開発者: 複雑なプロジェクトでも迅速に開発環境を構築。

  • チーム: 場所を問わず共同作業が可能。

など、様々な開発者にとって最適な環境を提供します。

Replitの基本操作と主要機能

Replit を使うのはとても簡単です。

まずはアカウントを作成し、Replと呼ばれるプロジェクトを作成するところから始めましょう。

1. アカウント作成

Replitのウェブサイトにアクセスし、「Sign up for free」をクリックします。
GoogleやGitHub、メールアドレスとパスワードで新規登録することができます。

2. Replの作成

アカウント作成後、Replitのホームページに移動します。「+ Create Repl」ボタンをクリックすると、Replの作成画面が表示されます。

  • テンプレートから作成: 多くのプログラミング言語やフレームワークのテンプレートが用意されているので、作りたいものに近いテンプレートを選んで始めると便利です。

  • Replit Agent:自然言語でやりたいことを伝えるとコーディングを開始してくれます。

  • GitHub からインポート: 既存の GitHubリポジトリをインポートして Replitで開発を続けることもできます。

3. ワークスペース

Replを作成すると、Replitのワークスペースが表示されます。ワークスペースは、主に以下のエリアで構成されています。

  • ファイルツリー: プロジェクトのファイルやフォルダが表示されます。ここでファイルの作成、削除、名前の変更などを行うことができます。

  • ツールバー: 実行ボタン、デバッグツール、設定など、様々な機能にアクセスできます。

  • エディタ: コードを編集するエリアです。シンタックスハイライトや自動補完などの機能で、快適にコーディングできます。

  • コンソール: コードの実行結果やエラーメッセージが表示されます。選択したツールなども表示されます。

4. コードの実行

ツールバーにある「Run」ボタンをクリックすると、コードが実行され、コンソールに結果が表示されます。

5. リアルタイム共同編集

「Invite」から複数人を招待して同時に同じReplを編集できます。
招待リンクを共有するだけで、簡単に共同編集を始められます。

Replitの基本的な操作は以上です。これらの機能を使いこなすことで、効率的な開発ワークフローを構築できます。

ReplitのAI機能

Replitは、AIを活用した強力なコーディング支援機能を備えています。

Replit AIは、無料プランでも基本的な機能が利用でき、有料プラン (Replit Core) ではより高度な機能が利用可能です。

また、現時点(2024/11/7)で使えるモデルはGPT-4o-mini、GPT-4o、Claude3.5SonnetV2となっています。

Replit AIは、大きく分けて以下の5つの機能を提供しています。

Complete Code (コード補完)

入力中のコードに基づいて、次に来る可能性のあるコードを予測し、サジェストしてくれます。

Tabキーを押すだけで、サジェストされたコードを挿入できるので、タイピングの手間を省き、コーディング速度を向上させることができます。

Explain with AI (コード解説)

コードを選択し、右クリックメニューから "Explain with AI" を選択すると、AI がコードの動作を分かりやすく解説してくれます。

複雑なコードや、他の人が書いたコードを理解するのに役立ちます。

Modify with AI(コード修正)

コードを選択し、右クリックメニューから "Modify with AI" を選択すると、AI がコードの修正案を提案してくれます。

コードのリファクタリング、パフォーマンスの改善、バグの修正などに活用できます。自然言語で指示を出すことも可能です

Generate Code(コード生成)

Cursorのように、自然言語で指示を出すことで、AIがコードを生成してくれます。

「Pythonでランダムなパスワードを生成する関数を作成してください」のように指示すれば、AIがそれに応じたコードを生成します。

AIチャット機能

AIとチャット形式で対話しながら、コーディングに関する質問をしたり、アドバイスをもらったりできます。

コーディングに行き詰まった時や、新しい技術について学びたい時に便利です。

普通に質問をすると英語で回答が返ってくるので、「日本語で解説してください」という趣旨を伝えることで、日本語で回答してくれます。

Replit Agent

Replit Agentは、ReplitのAI機能をさらに進化させた、AIエージェントによる Webアプリ開発支援機能です。

自然言語で指示を出すだけで、Webアプリケーションの開発をサポートしてくれます。

Replit Agentは現在、早期アクセス版として提供されており、Replit CoreまたはReplit Teamsの有料プランユーザーが利用できます。

Replit Agent で広がる可能性

Replit Agentの大きな強みとして、フロントエンドだけでなく、バックエンドのコードも生成できて、データベースと自動連携も可能です。

例として、Boltで作成したアプリはリロードすると記載事項が消えてしまいますが、Replit Agentで作成したアプリはリロードしても記載事項が保存されています。

Boltで作成したウェブアプリ：

https://drive.google.com/file/d/1oGKDW9ZZHJbmIYkXLp7eYVpwx2Fd46Lq/view?usp=drive_link

Replit Agentで作成したウェブアプリ：

https://drive.google.com/file/d/1nTfjA6rwea2maZkbZG0FydngQ-67QKm_/view?usp=drive_link

そのため、Webアプリケーション開発全体をReplit Agentに任せることができます。

Replit Agent を使ってみよう

Replit Agentの使い方を、TODOアプリの作成を題材に紹介します。

まずは、Replitのホーム画面から、または「+ Create Repl」ボタンからReplit Agentを選択します。

ホーム画面から開始
「+ Create Repl」から開始

次に、作成したい Web アプリケーションについて、下記のように自然言語で指示を入力します。

ユーザーがTODOを追加、削除、完了済みとしてマークできるTODOアプリを作成してください。JavaScriptで、データはデータベースに保存してください。

プロンプト

指示を入力したら、「Start building」をクリックします。

Replit Agent がコードを生成し、アプリケーションを構築します。開発の進捗状況はリアルタイムで確認できます。

実際の作成の様子：

https://drive.google.com/file/d/1Jlr_KK_fSOmsSwL4B335eZOd3Y4daZ13/view?usp=drive_link

アプリケーションが完成したら、テストを行い、修正があれば必要に応じて Replit Agentに指示するだけです。

最後に、画面右上の「Deploy」を利用してアプリケーションを公開します。

下記の4つの方法から選んでデプロイを行います。

デプロイメント方法について

Replitでは、作成したアプリケーションを簡単に公開・共有するためのデプロイメント機能が提供されています。以下の4つのデプロイメント方法があります。

1. Reserved VM Deployments (予約済み VM デプロイメント)

専用の仮想マシン上でアプリケーションを実行するデプロイメント方法です。安定したリソースを確保できるため、長時間実行するアプリケーションや、計算負荷の高いアプリケーション、バックグラウンドタスクなどに適しています。Webサーバーとしてだけでなく、バックグラウンドワーカーとしても利用可能です。

  • メリット:

    • 安定したパフォーマンス

    • コストが予測しやすい

    • 常時実行が可能 (99.9% uptime)

2. Autoscale Deployments (オートスケールデプロイメント)

トラフィック量に応じて自動的にスケーリングするデプロイメント方法です。アクセスが少ない時はサーバーリソースを節約し、アクセスが多い時は複数のインスタンスを起動して対応します。Webサイト、Webアプリケーション、API、マイクロサービスなどに最適です。

  • メリット:

    • トラフィック量に応じた柔軟なスケーリング

    • 高可用性 (99.95% uptime)

    • コスト効率が良い

3. Static Deployments (静的デプロイメント)

HTML、CSS、JavaScript などの静的ファイルをホスティングするためのデプロイメント方法です。サーバーサイドの処理がないシンプルな Web サイト (ポートフォリオ、ランディングページなど) に適しており、費用対効果の高い方法です。

  • メリット:

    • シンプルで低コスト

    • 高速な読み込み速度

4. Scheduled Deployments (スケジュールデプロイメント)

指定した時間にアプリケーションを実行するデプロイメント方法です。定期的なタスクやバッチ処理などに利用できます。

  • メリット:

    • 定期実行が容易

    • スケジュール設定が柔軟

それぞれのデプロイメント方法の特徴を理解し、アプリケーションの要件に最適な方法を選択しましょう。

上記の4つのうち、トラフィック量に応じて自動的にスケーリングするAutoscale Deploymentsで行うことで、コストを抑えることができるため、安くデプロイしたいという方は、Autoscale Deploymentsがおすすめです。

各種設定ができたら、「Deploy」をクリック。

するとデプロイが始まります。

デプロイが完了して、TODOアプリが使えるようになりました。

https://drive.google.com/file/d/1e2aDTEclXzQO_CLWX9ICpufhFokKv0zg/view?usp=drive_link

非常にクオリティの高いウェブアプリができました。
もちろん、URLをリロードしてもデータは消えませんし、他の人が追加したものも反映されます。

Replit Coreのメンバーは、プランに含まれている10ドル分のクレジットを利用できます。

まとめ

今回は、Replitの基本的な知識から、Replit Agentなどの画期的なAI機能をご紹介しました。

特にReplit Agentは、自然言語で指示するだけで Web アプリケーション開発を支援する強力な機能です。

まだ早期アクセス段階ですが、有料登録で実際に使用することが可能です。

いいね（スキ）することで、記事を後から見返すことができます。
ぜひいいねして何度も見返すことでReplit Agentをマスターしてください！