> ## 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.

# アプリをリミックスする

> 公開されているReplit Appやテンプレートの自分用コピーを作成し、ワークスペースで探索、カスタマイズ、構築する方法を学ぶ。

export const RemixButton = ({replUrl = "https://replit.com/@sarahxli/Digital-Piano-Keys?v=1", label = "Remix this app", count = null}) => {
  if (typeof document !== 'undefined' && !document.getElementById('remix-button-styles')) {
    const style = document.createElement('style');
    style.id = 'remix-button-styles';
    style.textContent = `
      /* Button container */
      .remix-btn-container {
        --btn-bg: var(--replit-docs-bg-muted, #F1F1EE);
        --btn-bg-hover: var(--replit-docs-bg-elevated, #F1F1EE);
        --btn-text: var(--replit-docs-text, #1D1D1D);
        --btn-border: var(--replit-docs-border, #DEDAD5);
        --transition-duration: 120ms;
        display: flex;
        justify-content: center;
      }

      .dark .remix-btn-container,
      html.dark .remix-btn-container,
      [data-theme="dark"] .remix-btn-container {
        --btn-bg: var(--replit-docs-bg-elevated, #222223);
        --btn-bg-hover: var(--replit-docs-bg-muted, #222223);
        --btn-text: var(--replit-docs-text, #F5F5F5);
        --btn-border: var(--replit-docs-border, #39393D);
      }

      /* Button base styles - matching template page exactly */
      .remix-btn {
        /* Layout */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        max-width: 400px;
        min-width: 200px;
        height: 36px;
        padding: 0 16px;
        gap: 8px;

        /* Typography */
        font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        text-decoration: none;
        white-space: nowrap;

        /* Visual */
        border-radius: 8px;
        border: none;
        background: var(--btn-bg);
        color: var(--btn-text);
        box-shadow: inset 0 0 0 1px var(--btn-border);

        /* Interaction */
        cursor: pointer;
        user-select: none;
        transition-property: background-color;
        transition-duration: var(--transition-duration);
        transition-timing-function: ease-out;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
      }

      /* Content (icon + label) - centered */
      .remix-btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      /* Hover state */
      @media (hover: hover) {
        .remix-btn:hover {
          background: var(--btn-bg-hover);
        }
      }

      /* Active/pressed state */
      .remix-btn:active {
        background: var(--btn-bg-hover);
        transform: scale(0.99);
      }

      /* Focus visible state */
      .remix-btn:focus-visible {
        outline: 2px solid #0079F2;
        outline-offset: 2px;
      }

      /* Icon styles */
      .remix-btn svg {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
      }

      /* Label styles */
      .remix-btn span {
        font-weight: 600;
      }

      /* Animation */
      @keyframes remix-btn-fade-in {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .remix-btn-container {
        animation: remix-btn-fade-in 300ms ease-out;
      }
    `;
    document.head.appendChild(style);
  }
  const handleClick = e => {
    e.preventDefault();
    const url = replUrl.includes('replit.com') ? replUrl : `https://replit.com${replUrl}`;
    window.open(url, '_blank');
  };
  const RemixIcon = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" preserveAspectRatio="xMidYMin">
      <path d="M17.47 13.47a.75.75 0 0 1 1.06 0l4 4a.745.745 0 0 1 .118.16c.016.027.032.054.044.083.007.016.01.032.016.049a.744.744 0 0 1 .042.238.743.743 0 0 1-.037.223c-.007.02-.012.042-.02.062a.748.748 0 0 1-.163.245l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72H15.95a4.753 4.753 0 0 1-3.886-2.09l-.351-.442a.75.75 0 0 1 1.172-.936l.36.45.04.055a3.251 3.251 0 0 0 2.68 1.463h4.224l-2.72-2.72a.75.75 0 0 1 0-1.06ZM17.47 1.47a.75.75 0 0 1 1.06 0l4 4a.756.756 0 0 1 .162.816.749.749 0 0 1-.162.244l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72H16.02a3.25 3.25 0 0 0-2.674 1.372l-5.44 8.58a4.75 4.75 0 0 1-3.934 2.047L2 18.75a.75.75 0 0 1 0-1.5h1.979a3.25 3.25 0 0 0 2.673-1.373l5.442-8.578.02-.03a4.751 4.751 0 0 1 3.913-2.018l4.162-.001-2.72-2.72a.75.75 0 0 1 0-1.06ZM3.972 5.25a4.75 4.75 0 0 1 4.27 2.612.751.751 0 0 1-1.34.675 3.252 3.252 0 0 0-2.698-1.781l-.226-.006H2a.75.75 0 0 1 0-1.5h1.972Z" />
    </svg>;
  return <div className="remix-btn-container" style={{
    margin: '16px 0'
  }}>
      <button onClick={handleClick} className="remix-btn" type="button" tabIndex={0}>
        <RemixIcon />
        <span>{label}</span>
      </button>
    </div>;
};

リミックスを使うと、コミュニティが作成した既存のアプリから始められます。スクラッチから構築するより速く、動作するコードから学ぶ優れた方法です。

<Tip>
  Replitを初めて使いますか？[最初のアプリを構築する](/ja/build/your-first-app)を試して、Agentがゼロからどのように機能するかを学びましょう。
</Tip>

## リミックスとは

**リミックス**とは、現在アクセスできるアプリから作成する新しいReplit Appです。公開されているアプリやテンプレートをリミックスすると、自分のコピーができ、それを操作しながら段階的に改良できます。リミックス内で行った変更は元のアプリには影響しません。

リミックスは元のアプリを明示します：元のアプリへの**Remixed from**リンクが表示され、元のアプリのビルドプロンプトがカバーページに表示されます。

## リミックスに含まれるもの

リミックスは完全に動作するコピーであり、元のアプリとは明確に分離されています。

* **すべてのファイルと設定**がコピーされるため、アプリは元のものとまったく同じように動作します。
* **元のアプリのチェックポイント履歴**も引き継がれ、元のアプリの履歴としてラベル付けされます。これらのチェックポイントにはいつでもロールバックできますが、それらを生成した会話は元のアプリに残ります。
* **まったく新しいAgent**。リミックスは新しいAgentから始まり、引き継がれたチャット履歴はありません。
* **シークレットの値ではなく名前のみ**。アプリがシークレット（APIキーなど）を使用している場合、リミックスにはそれらが一覧表示されるため、何を入力すべきかがわかりますが、値は空になります。値がコピーされるのは、自分自身のアプリをリミックスする場合のみです。
* **新しいデータベース**。リミックスが元のアプリのデータベースに接続することはありません。元のアプリがそれを提供している場合、**Copy data from original App**オプションでデータ自体をコピーできますが、変更が元のアプリに影響することはありません。
* Replit Authを使用するアプリの場合、**新しいサインイン設定**。

コピーされないもの：デプロイメント、ドメイン、コネクターの設定は、自分のコピーで個別に設定します。また、リミックスは非公開の状態で始まるため、公開を選択するまでは何も共有されません。

## アプリをリミックスする方法

<Steps>
  <Step title="アプリのカバーページを開く">
    [コミュニティ](https://replit.com/community/all)などから、リミックスしたいアプリを見つけます。カバーページにはライブプレビューと共有オプションが表示されます。
  </Step>

  <Step title="アプリをリミックスする">
    **Remix this App**を選択して、自分のバージョンの作成を開始します。
  </Step>

  <Step title="アプリの詳細を入力する">
    **Remix App**ダイアログで、コピーに名前と任意の説明を付け、**Remix App**を選択します。これらの詳細は後で編集できます。

    <Frame>
      <img src="https://mintcdn.com/replit/u7DyWVbaIRze6Cmd/images/getting-started/quickstart_remix_dialog.png?fit=max&auto=format&n=u7DyWVbaIRze6Cmd&q=85&s=d1d41a640ac0fc55679aa4081d5c5ff2" alt="アプリ名、説明、プライバシー設定が表示されたRemix Appダイアログ" width="1222" height="1202" data-path="images/getting-started/quickstart_remix_dialog.png" />
    </Frame>
  </Step>

  <Step title="自分のコピーを探索する">
    自分のコピーがワークスペースで開き、自動的に起動します。**Preview**タブに移動すると、動作している様子を確認できます。
  </Step>
</Steps>

## 実際に試す

[テンプレートから始める](/ja/design/start-from-a-template)で紹介されているテンプレートの一つ、**Supercar showcase**テンプレートのリミックスを作成してみましょう。

<Frame>
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/templates/supercar-showcase.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=3807a96319b4d974f30bda957f6bd92e" alt="Supercar showcaseテンプレートのカバー。シルバーのスーパーカーがヒーロー画像になっているダークなランディングページ" width="1920" height="1080" data-path="images/design/replit-design/templates/supercar-showcase.webp" />
</Frame>

<RemixButton replUrl="https://replit.com/t/replit-gallery/repls/Apex-01/view" label="Remix this app" />

## リミックスの上に構築する

リミックスがワークスペースで開いたら、Agentを使って変更・拡張します。追加したい機能を説明するプロンプトを**Agent**タブに入力してください。

Agentの変更を取り消すには、変更後に作成されたチェックポイントで**Rollback to here**を選択します。詳しくは[チェックポイントとロールバック](/ja/features/version-control/checkpoints-and-rollbacks)を参照してください。

## リミックスとプロンプトからの構築、どちらを選ぶか？

どちらの方法も最終的には同じ場所にたどり着きます：Agentが進化を手伝ってくれる、自分自身のアプリです。ただし、始まり方は異なります。

|             | リミックス             | プロンプトからの構築            |
| ----------- | ----------------- | --------------------- |
| 出発点         | そのままコピーされた動作するアプリ | あなたの説明からAgentが作成するアプリ |
| 最初の結果       | 即座に得られ、元のアプリと同一   | より時間がかかり、出力は毎回異なる     |
| Agentの最初の動き | あなたの指示を待つ         | あなたのプロンプトから計画し、構築する   |

望んでいるものに近いアプリがすでに存在するなら、それをリミックスしましょう。まっさらな状態から始める代わりに、Agentの最初のターンが実際に動作するアプリに対して行われます。あなたのアイデアに似たものが見つからない場合は、プロンプトから構築しましょう。

## 次のステップ

* **さらにリミックスを探索する**：[コミュニティ](https://replit.com/community/all)を閲覧して、リミックスして学べるアプリを見つけましょう
* **スクラッチから構築する**：Agentを使って[自分のアプリを作成](/ja/build/your-first-app)し、体験を比較してみましょう
* **リミックス用に公開する**：改良したバージョンを共有して、他の人があなたの作業の上に構築できるようにしましょう