> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# チームのPTOトラッカーを構築する

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="チーム向けPTOトラッカーを構築する" description="ツールの要件を記述すると、Devinがエンドツーエンドで構築・テスト・検証します。" prompt="社内向けのPTOトラッカーを /internal/pto 配下に構築してください。従業員は日付範囲、種別（休暇、病欠、私用）、任意のメモを指定して休暇申請を送信します。マネージャーは保留中の申請のキューを確認し、承認または却下します。カレンダー表示では、誰が不在かを種別ごとに色分けして表示します。ダッシュボードでは全従業員のPTO残高（年間20日）を表示します。従業員は残高を超えて申請したり、既存のPTOと重複させたりできないようにしてください。チームメンバーがすでに不在の場合は警告を出します。申請の送信時と承認/却下時に、SLACK_WEBHOOK_URL を使用して Slack 通知を送信します。Next.js アプリ、Prisma ORM、既存の DataTable および Calendar コンポーネントを使用してください。コードを書く前に、レビュー用の実装プランを作成してください。残高計算、重複検出、承認ワークフローに対するテストを書いてください。すべてのページとフローをブラウザでテストし、申請、承認、却下、カレンダー確認、ダッシュボード検証を行ってください。エンドツーエンドですべてが動作するまで PR をオープンしないでください。" category="機能開発" features="" />

<div className="uc-detail-wrapper">
  <Tip>手動でのセットアップを省略したいですか？このページのリンクを Devin セッションに貼り付けて、すべてのセットアップを依頼してください。</Tip>

  <Steps>
    <Step title="（任意）Ask Devin でコードベースのスコープを定義する">
      既にアプリに社内向けツールがある場合は、仕様を書き始める前に [Ask Devin](https://app.devin.ai/search?utm_source=docs\&utm_medium=use-case-gallery) を使って既存のパターンを把握してください。特に、新しいツールを既存のアーキテクチャに合わせたい場合に有用です。

      <PromptBlock agent="ada">
        ```txt Scope internal tools architecture theme={null}
        既存の社内向けツールがどのような構成になっているか教えてください:
        1. /internal/ 配下にはどんなページがあり、どのようなレイアウトですか？
        2. 社内ページでは認証とロールベースアクセス制御をどのように扱っていますか？
        3. どの共有 UI コンポーネント（テーブル、フォーム、モーダル）を使用していますか？
        4. データベースマイグレーションは Prisma のスキーマ内でどのように構造化されていますか？
        5. 既存の通知パターン（Slack、メール）はありますか？
        ```
      </PromptBlock>

      回答を使って、仕様に具体的なファイル参照、コンポーネント名、パターンを書き込み、Devin が既存ツールと一貫性のあるものを構築できるようにします。また、Ask Devin から直接 Devin セッションを開始することもでき、そのセッションには Ask Devin が取得した内容がコンテキストとして引き継がれます。
    </Step>

    <Step title="詳細な仕様を作成する">
      Internal tools — PTO トラッカー、管理パネル、データスクリプト、CLI ユーティリティなど — は不可欠ですが、優先されることはほとんどありません。要件が明確で、利用者は自分たちのチームであり、「正しく動作すること」がピクセル単位で完璧なデザインよりも重要なため、Devin にとって理想的な対象です。

      ツールが何をするのか、どんなデータを保存するのか、どのサービスと連携するのかを具体的に記述してください。詳細を含めれば含めるほど、最初のバージョンがあなたのニーズに近づきます。

      <PromptBlock>
        ```txt Build a team PTO tracker theme={null}
        /internal/pto 配下に、私たちのチーム向けの社内 PTO トラッカーを構築してください。

        ## Features
        - 従業員が休暇申請を、日付範囲・種類
          (vacation、sick、personal)・任意のメモ付きで送信できること
        - マネージャーは保留中の申請キューを確認し、それぞれを承認または却下できること
        - カレンダービューで、誰がどの日に休んでいるかを種類ごとに色分けして表示すること
        - ダッシュボードで、各従業員の PTO 残高 (合計日数、使用日数、残日数、保留中の申請) を表示すること
        - 各従業員には年間 20 日の PTO を付与すること
        - 従業員は、自分の残りの残高を超える日数を申請できないこと
        - 申請は、その従業員自身の既存の承認済み PTO と重複しないこと
        - 同じ日程でチームメイトがすでに休んでいる場合は、ブロックはせず警告を表示すること

        ## Notifications
        - 申請が送信されたとき、マネージャーに Slack 通知を送ること
        - 申請が承認または却下されたとき、従業員に Slack 通知を送ること
        - env vars の SLACK_WEBHOOK_URL を使用すること

        ## Technical notes
        - 既存の Next.js アプリと Prisma ORM を使用すること
        - /internal/users のレイアウトパターンに従うこと
        - src/components/ui/ の DataTable と Calendar コンポーネントを再利用すること

        ## Planning
        - コードを書く前に、実装プランのアウトラインを作成し、レビューのために私に共有すること

        ## Testing
        - 残高計算、日付の重複検出、および承認ワークフローのテストを書くこと
        - 実装後、dev サーバーを立ち上げてブラウザで全ページとフローをテストすること — 申請の送信、承認、却下、カレンダーの確認、ダッシュボード数値の検証、および日付の重複や残高超過のようなエッジケースのテストを行うこと
        - すべてがエンドツーエンドで動作するまでは PR を作成しないこと
        ```
      </PromptBlock>

      Ask Devin を使って仕様をブラッシュアップすることもできます。ラフなドラフトを貼り付けて、コードベースに基づいた抜け漏れの指摘や改善提案を依頼してください。
    </Step>

    <Step title="認証情報を追加">
      Devin が必要とする APIキー やトークンは、[Secrets](/ja/product-guides/secrets) 経由で渡します。この例では Slack の Webhook URL です。

      最も簡単な方法は、セッションを開始する前に、それらを組織シークレットとして保存しておくことです。

      1. **Settings > Secrets** に移動し、`SLACK_WEBHOOK_URL` を追加します
      2. Devin はシークレットに環境変数としてアクセスするため、それらがソースコードにハードコードされることはありません。

      <Note>組織シークレットはセッションを開始する **前に** 追加する必要があります。セッション開始時に注入されるためです。あるいは、チャットを使ってセッション中にシークレットを渡すこともできます。また、Devin は不足している環境変数がある場合、必要な認証情報を能動的に問い合わせます。</Note>
    </Step>

    <Step title="スラッシュコマンドでセッションを進行する">
      セッション開始後は、スラッシュコマンドを使って Devin のワークフローを調整できます。

      * **`/plan`** — コードを書く前に、詳細な実装計画を作成するよう Devin に依頼します。実装を始める前に計画を確認し、必要に応じて修正案を提案してください。
      * **`/test`** — すべてのテストを実行して作業内容を検証するよう Devin に指示します。各主要なマイルストーンの後に実行して、問題を早期に発見できるようにします。
      * **`/review`** — PR を作成する前に、バグ、エッジケース、スタイル上の問題について、自分で書いたコードをレビューするよう Devin に依頼します。

      これらのコマンドはセッションのどのタイミングでも使用できます。セッション開始時に `/plan`、各機能の実装後に `/test`、最終的な PR の前に `/review` を実行してください。
    </Step>

    <Step title="Devin が構築し、正常に動作することを検証します">
      Devin は社内ツールも本番機能とまったく同じように扱います — コードを書き、テストを追加し、組み込みブラウザでアプリを開いて、UI がエンドツーエンドで正しく動作するか検証します。

      1. **コードベースを調査** — `DataTable` と `Calendar` コンポーネントを見つけ、Prisma のスキーマを読み、既存の `/internal/` ページレイアウトを確認します
      2. **データベースマイグレーションを作成** — Prisma を使って `pto_requests` と `pto_balances` テーブルを追加します
      3. **ページを構築** — `/internal/pto` 配下に、申請フォーム、マネージャー承認キュー、カレンダービュー、残高ダッシュボードを作成します
      4. **Slack と連携** — 申請が送信されたとき、また承認または却下されたときに webhook 通知を送信します
      5. **テストを書く** — PTO 残高計算と日付重複検出のユニットテスト、申請エンドポイントの API テスト、承認ワークフローの統合テストを作成します
      6. **ブラウザでアプリを開く** — すべてのページに遷移し、テスト用の PTO 申請を送信し、マネージャービューから承認し、カレンダーが更新されることを確認し、ダッシュボードの数値をチェックし、日付の重複や残高超過などのエッジケースをテストします
      7. **PR を作成** — マイグレーション、シードスクリプト、アプリケーションコード、テストに加え、そのツールの使い方を説明する README セクションまで、すべてをまとめて提供します

      ブラウザでの検証によって、自動テストでは見逃される問題を発見できます — 崩れたフォームレイアウト、レンダリングはされるがクリックに反応しないカレンダー、成功後にフォームをクリアしない送信ボタンなどです。
    </Step>

    <Step title="ツールを拡張する">
      Once the base tool works, add features in follow-up sessions:

      <PromptBlock>
        ```txt PTO の競合検出を追加する theme={null}
        従業員が PTO（有給休暇）の申請をしたときに、同じ期間に
        同じチームの他のメンバーが既に休みになっていないか確認する。
        UI 上に次のような警告を表示する：
        "2 others on your team are out Nov 20-22."
        リクエスト自体はブロックせず、マネージャーが計画できるように
        休暇の重複が分かるようにするだけでよい。
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt 人事向けの CSV エクスポート機能を構築する theme={null}
        PTO ダッシュボードにボタンを追加し、当四半期に承認された
        すべての休暇情報を CSV としてエクスポートできるようにする。
        列：従業員名、日付、種別、使用日数、残日数。
        人事部はこれを毎月ダウンロードし、給与計算に利用する。
        ```
      </PromptBlock>
    </Step>

    <Step title="Devin Review で PR をレビューする">
      Devin が PR を作成したら、[Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) を使って変更内容をレビューします。Devin Review はコードベース全体のコンテキストを把握しているため、差分全体にわたってバグやセキュリティ上の問題、スタイルの不整合を検出できます。
    </Step>
  </Steps>
</div>