メインコンテンツへスキップ

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

⏰ 所要時間: 約10分 このガイドを終えると、共有できる URL に公開された小さなアプリが完成します。
新しいブラウザタブで開いた公開済みの Runwell アプリ — このガイドの成果: 共有できるプレミアムランニングトラッカー
ランニングトラッカーをビルドします。このアプリは目的に特化しており、大きなプロジェクトを計画する必要なく、完全な最初のビルドを体験できます。

​
始める前に

Replit アカウントが必要です。 目標は、1つの完全なループを完了することです:
  • Agent でビルドし、
  • アプリをテストし、
  • 公開して、共有する。
Agent は Replit の AI ビルダーです。作りたいものを説明すると、Agent がアプリの作成、説明、修正を手伝います。

​
最初のバージョンをビルドする

1

新しいアプリを開始する

2

Agent に最初のバージョンを依頼する

プロンプトは4つの短いセクションに分かれており、Agent に文字の壁ではなく明確な意図を伝えます:
  • Context（コンテキスト） — アプリが何であり、誰のためのものか。
  • Visual direction（ビジュアル方向性） — どのような見た目と雰囲気にするか。
  • Scope（スコープ） — どの画面をビルドし、それぞれに何を表示するか。
  • Data and navigation（データとナビゲーション） — どのサンプルデータを使用し、モバイルとデスクトップでレイアウトをどう調整するか。
Agent はビルド前にプランを表示することがあります。プランに Home、Add Run、Progress 画面、サンプルのランとシューズのマイレージ、モバイル + デスクトップのレイアウトが含まれていることを確認してください。重要なものが欠けている場合は、ビルドを開始する前に Agent にプランを更新するよう依頼してください。
3

ビルド前に探索する（オプション）

Agent にコードを書く前にデザインを検討させたい場合は、プロンプト入力の横にある Plan をトグルしてください。Plan モードでは、Agent が質問をしてビルドを承認する前に確認できる構造化されたプランを作成します — このプロジェクトよりも大きなプロジェクトに便利です。詳しくは Plan モード をご覧ください。
4

Agent がビルドする間、待機する

Agent がアプリを計画、生成、接続します。これには通常数分かかります — チャットパネルで作業の進捗を追うことができます。
ビルド中の Agent — チャットパネルに Runwell プロンプトと「フロントエンドアーキテクチャの計画中」ステータスの Agent のプランが表示されており、右ペインにはプレビュー生成前のプレースホルダーが表示されている
5

Preview でアプリが正常に動作することを確認する

Agent が完了したら、Preview を開いて、訪問者のようにアプリを使ってみてください。Preview は公開前にビルド中にアプリをテストする場所です。以下を確認してください:
  • Add Run を開いてアウトドアまたはトレッドミルを選択できる。
  • 距離、時間、メモを入力できる。
  • ランを保存できる。
  • Recent Runs にランが表示される。
  • 週間距離とシューズのマイレージが更新される。
  • 励みになる推奨事項や洞察が表示される。
  • ページをリフレッシュしてもアプリを再び使用できる。
  • Preview を電話サイズの幅にリサイズできる。
何か壊れている場合は、症状を Agent に説明してください。コードを自分で診断する必要はありません。
Preview で動作している Runwell アプリ。ネオンライムのアクセントを持つダークテーマ — Runwell ロゴ、ランナー画像付きの「Ready to work」ヒーロー、ライムのプログレスバー付きの週間ボリュームメトリックカード、Recent Runs リスト、Log Run ボタンが表示されている
公開前にビジュアルのバリエーションを探索したいですか？Canvas でデザインする を参照して、代替のルックスを並べて生成し、好みのものを適用してください。
6

アプリを公開する

Preview が正常に動作したら、2つの方法で公開できます:
  • Agent チャットから: Agent がビルドを完了した後、インラインの Publish カードで公開を提案します。サブドメインを確認し、アプリにアクセスできる人を選択して、Publish を選択してください。
  • ツール & ファイルパネルから: Publishing を開いて同じオプションを設定します。インラインカードを閉じた場合や後で公開したい場合はこの方法を使ってください。
どちらの方法でも、共有できる URL を持つアプリのパブリックバージョンが作成されます。
Agent チャットにサブドメインフィールド、アクセスオプション、Publish ボタン付きのインライン Publish カードが表示されている Project Editor
7

公開したアプリを開く

新しいブラウザタブで公開 URL を開き、同じ確認を繰り返してください。共有する前に、アプリが Project Editor の外でも動作することを確認してください。公開されたアプリが Preview と異なる動作をする場合は、公開ログとアプリに必要な本番設定を確認してください。よくある公開の問題については、公開のトラブルシューティング をご覧ください。
新しいブラウザタブで開いた公開済みの Runwell アプリ。Runwell ロゴ、「Ready to work」のランナーヒーロー、週間ボリュームカード、Log Run ボタンが表示されている

​
🎉 おめでとうございます — 初めてのアプリを公開しました

1つのプロンプトからライブで共有できる URL まで作り上げました。その過程で:
  • Runwell を Agent に説明して、動作する最初のバージョンを受け取りました。
  • Preview でテストして、ランが保存され週間合計が更新されることを確認しました。
  • アプリを公開して、パブリック URL で開きました。
これがすべての Replit プロジェクトが従うループです — プロンプト、テスト、改善、公開。

​
次のステップ

Canvas でデザインする

Runwell のビジュアルバリエーションを探索して、再ビルドせずに新しいデザインを適用しましょう。

並行してビルドする

複数の Agent タスクを同時に実行して、アプリのさまざまな部分を並行して進めましょう。

バイブコーディング入門

Agent をアイデアから動作するアプリへと導く方法を学びましょう。

データベースを追加する

リフレッシュ後もランの履歴を保存しましょう。