5分間で臨床試験検索アプリを構築する方法 - 臨床試験APIチュートリアル

私たちは何を構築していますか

次の5分間で、あなたは条件と段階で臨床試験を検索できる簡単なウェブアプリケーションを構築します。結果をカードで表示し、結果をページングします。臨床試験API は、ClinicalTrials.gov を開発者に親しみやすいインターフェースに包み込む REST API です。構造化された資格要件（年齢、性別、状態、検査値などのカテゴリにパースされ、正規表現は不要）、緯度/経度による地理的範囲検索、新しい試験に関する HTTP webhook アラート、カーソルベースのページネーション、集計統計を提供します。クレジットカード不要で無料プランがあります。48万件以上の試験が220カ国以上にわたり、FDA から毎日更新されます。すべてが1つの API で駆動します。基本的な HTML/JavaScript の知識と無料の RapidAPI アカウントが必要です。

ステップ1：APIキーを取得する（30秒）

行くhttps://rapidapi.com/capifactory-capifactory-default/api/clinical-trials-api
無料プランで「Subscribe」をクリック（クレジットカード不要）
ダッシュボードからあなたのX-RapidAPI-Keyをコピーしてください

それで、APIコールができます。

ステップ2：初めてのAPIコールを行う

ターミナルを開いてこのcurlコマンドを実行してください（YOUR_API_KEYを置き換えてください）：

curl --request GET \
  --url 'https://clinical-trials-api.p.rapidapi.com/v1/trials/search?query=breast+cancer&phase=Phase+2&status=Recruiting&limit=3' \
  --header 'X-RapidAPI-Key: YOUR_API_KEY'

こんな感じのものが表示されるはずです：

{
  "success": true,
  "data": [
    {
      "nct_id": "NCT04589845",
      "title": "Atezolizumab and Chemotherapy for Triple-Negative Breast Cancer",
      "brief_summary": "This phase II trial studies how well atezolizumab works with chemotherapy...",
      "condition": "Breast Cancer",
      "phase": "Phase 2",
      "status": "Recruiting",
      "enrollment_count": 280,
      "last_updated": "2026-05-15",
      "locations": [
        {
          "facility": "Dana-Farber Cancer Institute",
          "city": "Boston",
          "state": "MA",
          "country": "United States"
        }
      ]
    }
  ],
  "pagination": {
    "total": 847,
    "limit": 3,
    "next_cursor": "eyJvZmZzZXQiOjN9",
    "has_more": true
  }
}

それは847件の一致する試行が、クリーンなJSON形式で組み込みのページネーションと共に返されます。スクレイピングもパーサリングもパイプラインのメンテナンスも不要です。

第3ステップ：テスト検索アプリをビルド

単一のHTMLファイル(index.html)を作成し、このコードを貼り付けます：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clinical Trial Search</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; background: #f5f5f5; }
        h1 { color: #1a1a2e; }
        .search-box { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
        input, select, button { padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
        input { flex: 1; min-width: 200px; }
        button { background: #1a56db; color: white; border: none; cursor: pointer; font-weight: 600; }
        button:hover { background: #1647b8; }
        .trial-card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .trial-card h3 { margin: 0 0 8px 0; color: #1a1a2e; font-size: 16px; }
        .trial-meta { display: flex; gap: 15px; font-size: 13px; color: #666; margin-bottom: 8px; flex-wrap: wrap; }
        .badge { padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; }
        .badge-recruiting { background: #d4edda; color: #155724; }
        .badge-phase { background: #cce5ff; color: #004085; }
        .summary { font-size: 14px; color: #444; line-height: 1.5; }
        .pagination { display: flex; gap: 10px; align-items: center; margin-top: 20px; justify-content: center; }
        .loading { text-align: center; padding: 40px; color: #666; }
        .error { text-align: center; padding: 20px; color: #dc3545; background: #f8d7da; border-radius: 8px; }
        .nct { color: #1a56db; font-family: monospace; font-size: 14px; }
        .location { font-size: 12px; color: #888; margin-top: 6px; }
    </style>
</head>
<body>
    <h1>Clinical Trial Search</h1>
    <p style="color: #666; margin-bottom: 20px;">Powered by <a href="https://rapidapi.com/capifactory-capifactory-default/api/clinical-trials-api">Clinical Trials API</a> -- 480K+ FDA trials, free tier, no credit card.</p>

    <div class="search-box">
        <input type="text" id="query" placeholder="Search condition or keyword (e.g., breast cancer)" value="breast cancer">
        <select id="phase">
            <option value="">All Phases</option>
            <option value="Phase 1">Phase 1</option>
            <option value="Phase 2" selected>Phase 2</option>
            <option value="Phase 3">Phase 3</option>
            <option value="Phase 4">Phase 4</option>
        </select>
        <select id="status">
            <option value="">All Statuses</option>
            <option value="Recruiting" selected>Recruiting</option>
            <option value="Not yet recruiting">Not Yet Recruiting</option>
            <option value="Active not recruiting">Active, Not Recruiting</option>
            <option value="Completed">Completed</option>
        </select>
        <button onclick="searchTrials()">Search</button>
    </div>

    <div id="results"></div>

    <script>
        const API_KEY = 'YOUR_RAPIDAPI_KEY'; // Replace with your key
        const BASE_URL = 'https://clinical-trials-api.p.rapidapi.com';

        let currentCursor = null;
        let currentQuery = null;

        async function searchTrials(cursor = null) {
            const query = document.getElementById('query').value;
            const phase = document.getElementById('phase').value;
            const status = document.getElementById('status').value;

            const params = new URLSearchParams({ query, limit: '5' });
            if (phase) params.append('phase', phase);
            if (status) params.append('status', status);
            if (cursor) params.append('cursor', cursor);

            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<div class="loading">Searching 480K+ clinical trials...</div>';

            try {
                const r = await fetch(`${BASE_URL}/v1/trials/search?${params}`, {
                    headers: { 'X-RapidAPI-Key': API_KEY }
                });

                if (r.status === 401) {
                    resultsDiv.innerHTML = '<div class="error">Invalid API key. Get your free key at <a href="https://rapidapi.com/capifactory-capifactory-default/api/clinical-trials-api">rapidapi.com/clinical-trials-api</a></div>';
                    return;
                }

                if (!r.ok) {
                    resultsDiv.innerHTML = `<div class="error">API error: HTTP ${r.status}</div>`;
                    return;
                }

                const body = await r.json();
                if (!body.success) {
                    resultsDiv.innerHTML = `<div class="error">${body.error?.message || 'Unknown error'}</div>`;
                    return;
                }

                currentCursor = cursor;
                currentQuery = { query, phase, status };
                renderResults(body);

            } catch (e) {
                resultsDiv.innerHTML = `<div class="error">Network error: ${e.message}</div>`;
            }
        }

        function renderResults(body) {
            const resultsDiv = document.getElementById('results');
            const pagination = body.pagination;

            let html = `<p style="color: #666; margin-bottom: 15px;">Found <strong>${pagination.total.toLocaleString()}</strong> trials. Showing ${(currentCursor ? 'next page' : 'first')} ${body.data.length} results.</p>`;

            body.data.forEach(trial => {
                const loc = trial.locations && trial.locations[0] ? `${trial.locations[0].facility}, ${trial.locations[0].city}, ${trial.locations[0].state}` : '';
                html += `
                    <div class="trial-card">
                        <h3>${trial.title}</h3>
                        <div class="trial-meta">
                            <span class="nct">${trial.nct_id}</span>
                            <span class="badge badge-phase">${trial.phase}</span>
                            <span class="badge badge-recruiting">${trial.status}</span>
                            ${trial.enrollment_count ? `<span>${trial.enrollment_count} participants</span>` : ''}
                        </div>
                        <p class="summary">${(trial.brief_summary || '').substring(0, 200)}${(trial.brief_summary || '').length > 200 ? '...' : ''}</p>
                        ${loc ? `<p class="location">${loc}</p>` : ''}
                    </div>
                `;
            });

            html += '<div class="pagination">';

            if (currentCursor) {
                html += `<button onclick="searchTrials(null)">First Page</button>`;
            }

            if (pagination.has_more) {
                html += `<button onclick="loadNextPage('${pagination.next_cursor}')">Next Page (${pagination.total - (currentCursor ? parseInt(currentCursor.match(/\d+/)?.[0] || 0) : body.data.length)} remaining)</button>`;
            } else if (body.data.length > 0) {
                html += '<span style="color: #666;">All results loaded.</span>';
            }

            html += '</div>';
            resultsDiv.innerHTML = html;
        }

        function loadNextPage(cursor) {
            document.getElementById('query').value = currentQuery.query;
            document.getElementById('phase').value = currentQuery.phase;
            document.getElementById('status').value = currentQuery.status;
            searchTrials(cursor);
        }

        // Search on load
        searchTrials();
    </script>
</body>
</html>

第4ステップ：実行

行~70のYOUR_RAPIDAPI_KEYを実際のAPIキーに置き換えます
ブラウザでindex.htmlを開きます（ファイルをダブルクリックするだけ）
機能している臨床試験検索アプリがあります

「アルツハイマー」「糖尿病」を検索してみて、またはデフォルトの「乳がん」のままにして、1秒以内に実際のFDA試験データが表示されます

次に何をするか？

地理的範囲検索エンドポイント(/v1/trials/nearby)を追加して、HTML5の地理的位置情報で「私の近くの試験」機能を構築します
構造化された資格表示を呼び出して/v1/trials/{nct_id}/eligibility ユーザーがトライアルカードをクリックしたとき（Pro タイアー：$19/月)
POST /v1/alerts を通じてウェブフックアラートを設定して、新しいトライアルがユーザーの保存された検索基準に一致したときに通知を受け取る
Vercel、Netlify、または GitHub Pages にデプロイしてライブデモを作成する
Tailwind CSS でスタイリングしてプロフェッショナルな見た目にする

API

無料プラン： 日に100リクエスト、基本的な検索、近隣検索、統計、条件ブラウザ、3つの保存されたアラート
Pro: 月額19ドル -- 10,000リクエスト、構造化された資格パーサリング、25つのウェブフックアラート、メールサポート
Ultra: 月額49ドル -- 50,000リクエスト、無制限のアラート、優先サポート
ドキュメント: https://rapidapi.com/capifactory-capifactory-default/api/clinical-trials-api/docs

RapidAPIでサブスクリプト -無料トライアル、クレジットカード不要.

このAPIで何かを作成したら、タグを付けてください - 作成したものを見るのが楽しみです。コメントに質問を投稿していただければ、回答します。

おすすめ購読元

DEV Community