ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用した Word Unscrambler の構築 (パート 4)

JavaScript を使用した Word Unscrambler の構築 (パート 4)

Mary-Kate Olsen
リリース: 2024-10-16 18:26:02
オリジナル
901 人が閲覧しました

皆さんこんにちは! ?

前回、私は最適な API を探す小さな冒険に出かけ、いくつかのオプションを試した後、Wordnik に落ち着きました。膨大な単語データベースがあり、API キーの取得に 1 週​​間かかりましたが、ようやく取得できました。次に、それを統合し、順列から生成された単語が実際に有効かどうかを確認します。

課題: 単語の検証

私が気づいたのは、Wordnik を含むほとんどの辞書 API には、単語が存在するかどうかを直接確認する方法がないということです。これらは定義と例を提供しますが、単純な検証ではありません。
これを回避するために、Wordnik の Scrabble スコア エンドポイントを使用しました。ロジックは単純です。単語にスクラブル スコアがある場合、その単語は有効であるとみなされます。

この検証を実装するコードは次のとおりです。

async function isValidWord(word) {
    const apiKey = 'API_KEY'; // use your own API keys
    const url = `https://api.wordnik.com/v4/word.json/${word}/scrabbleScore?api_key=${apiKey}`;

    try {
        const response = await fetch(url);

        if (response.status === 200) {
            return true;  // Word is valid
        } else if (response.status === 404) {
            return false; // Word not found in dictionary
        } else {
            console.error(`Error: Received status ${response.status} for word "${word}"`);
            return false; 
        }
    } catch (error) {
        console.error('Error checking word validity:', error);
        return false;
    }
}

async function descrambleWords() {
    const input = document.getElementById('scrambledInput').value;
    const combinations = generatePermutations(input); 
    const validWords = [];

    // Check each word one by one for validity
    for (const word of combinations) {
        const isValid = await isValidWord(word);
        if (isValid) {
            validWords.push(word); // Only push valid words
        }
    }

    const categorizedWords = categorizeByLength(validWords); 
    displayResults(categorizedWords); 
}
ログイン後にコピー

ブレイク・イット・ダウン

非同期関数 isValidWord(word)

この関数は、Scrabble スコア エンドポイントをクエリすることで、特定の単語が Wordnik API に存在するかどうかを確認する役割を果たします。

  1. URL 設定:

    • この関数は、チェックする単語を使用して API リクエストを構築し、それをスクラブル スコア エンドポイントのベース URL に追加します。
    • 例: 「apple」という単語の場合、URL は次のようになります: https://api.wordnik.com/v4/word.json/apple/scrabbleScore?api_key=YOUR_API_KEY.
  2. API リクエスト:

    • await fetch(url) は、HTTP リクエストを Wordnik API に送信します。
    • 応答処理:
      • 200 (OK): API が 200 ステータスを返した場合、単語が存在し、スクラブル スコアがあることを意味します。これを有効な単語として扱い、true を返します。
      • 404 (見つかりません): API が 404 を返した場合、その単語は辞書に見つからず、false を返します。
      • その他のステータス コードはエラーとして記録され、単語が無効であるか問題があったことを示す false を返します。

非同期関数 descrambleWords()

これは、入力単語のスクランブルを解除し、各順列を検証するメイン関数です。

  1. 入力を取得:

    • 最初に、document.getElementById('scrambledInput').value を使用して入力フィールドからスクランブルされた単語を取得します。
  2. 順列の生成:

    • この関数は、generatePermutations(input) を呼び出して、スクランブルされた単語のすべての可能な組み合わせを生成します。
  3. 各単語を検証します:

    • 次に、各順列をループし、isValidWord(word) を呼び出して有効かどうかを確認します。
    • 単語が有効な場合 (つまり、Wordnik API に存在する場合)、その単語は validWords 配列に追加されます。

Building a Word Unscrambler with JavaScript (part 4)
GitHub にプッシュする前に API キーを保護する方法が見つかり次第、ライブ リンクを共有します。

もう 1 つのハードルは、Wordnik の API によって課されたレート制限でした。制限を超えると、検証プロセスで 429 (Too Many Requests) エラーが発生し、すべてが停止しました。私が検討している潜在的な解決策は、API の過負荷を避けるために制限に達したときに遅延を追加することです。

より良いアイデアや提案がある場合は、お気軽にコメントで共有するか、Twitter で私にご連絡ください。

次は: パフォーマンスの最適化、レート制限の解決策を見つけて、入力が数値ではなく文字列のみを受け入れるようにすることに取り組みます。
今後の最新情報をお楽しみに!

以上がJavaScript を使用した Word Unscrambler の構築 (パート 4)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート