APIを備えたシンプルな言語翻訳ツール

#100daysofMiva コーディング チャレンジの 8 日目、ある言語を別の言語に翻訳する単純な翻訳モデルに取り組みました。
JSです、魔法です✨?

?言語翻訳スクリプトのドキュメント

概要

この JavaScript コードは、遊び心のあるインタラクティブな言語翻訳ツールを作成するように設計されています。 MyMemory API を利用して異なる言語間でテキストを翻訳し、言語を交換したり、翻訳をコピーしたり、テキストを読み上げたりすることもできます。 ??

---

特徴

• ?言語の選択: ユーザーは、アムハラ語からズールー語まで、幅広い言語から選択できます!
• ?言語の切り替え: ボタンをクリックするだけで、ソース言語とターゲット言語を簡単に切り替えます。
• ?テキスト読み上げ: 選択した言語で元のテキストまたは翻訳されたテキストを聞きます。
• ?クリップボードにコピー: ワンクリックで元のテキストまたは翻訳されたテキストをコピーします。

---

コードの内訳

言語データ

const countries = { /*...*/ } 

このオブジェクトには、利用可能な言語とそれぞれの国コードが含まれています。たとえば、「en-GB」: 「English」は言語コードとその名前を組み合わせます。

動的なドロップダウン

selectTag.forEach((tag, id) => {
    /*...*/
});

このコードは、国オブジェクトにリストされているすべての言語をドロップダウン メニューに動的に入力します。最初のドロップダウンのデフォルトは英語 (「en-GB」)、2 番目のドロップダウンはヒンディー語 (「hi-IN」) です。

言語の交換

exchageIcon.addEventListener("click", () => {
    /*...*/
});

交換アイコンをクリックすると、ユーザーは「from」フィールドと「to」フィールドの間でテキストと選択した言語を入れ替えることができます。

リアルタイム翻訳

translateBtn.addEventListener("click", () => {
    /*...*/
});

「翻訳」ボタンをクリックすると、テキストが MyMemory API に送信され、翻訳されたテキストが「to-text」フィールドに表示されます。応答を待っている間、「翻訳中...」プレースホルダーが表示されます。

テキスト読み上げとコピー

icons.forEach(icon => {
    /*...*/
});

このセクションでは、テキスト読み上げ機能とコピー機能を扱います。

• 音声: 選択した言語でテキストを音声で再生します。
• コピー: テキストをクリップボードにコピーします。

---

仕組み

1. 言語を選択 ?: ドロップダウンから言語を選択します。
2. テキストを入力または貼り付け ✍️: 翻訳するテキストを入力します。
3. 翻訳 ?: 「翻訳」ボタンをクリックして、魔法が起こるのを見てください!
4. 入れ替え、聞く、またはコピー ???: 言語を入れ替えたり、翻訳を聞いたり、テキストをクリップボードにコピーしたりできます。

---

依存関係

• MyMemory API: 翻訳機能は MyMemory API によって強化されています。動作するには、アクティブなインターネット接続があることを確認してください。

---

潜在的な機能強化

• 言語自動検出: 入力テキストの言語を自動的に検出します。
• 高度なエラー処理: 変換エラーまたは API エラーに対する応答を改善します。
• 複数の翻訳: 可能な場合は代替の翻訳を表示します。

---

コードがどのように機能し、何を行うのかを段階的に説明します。

Step 1: Defining Available Languages

const countries = { /*...*/ }

• What it does: This object contains key-value pairs where the key is a language-country code (like "en-GB" for English) and the value is the name of the language (like "English").
• Purpose: This data is used to populate the language selection dropdowns so users can choose their source and target languages.

Step 2: Selecting DOM Elements

const fromText = document.querySelector(".from-text"),
      toText = document.querySelector(".to-text"),
      exchageIcon = document.querySelector(".exchange"),
      selectTag = document.querySelectorAll("select"),
      icons = document.querySelectorAll(".row i");
      translateBtn = document.querySelector("button"),

• What it does: This code selects various elements from the HTML document and stores them in variables for easy access later.
  • fromText and toText: Text areas where users input text and see the translation.
  • exchageIcon: The icon used to swap languages and text.
  • selectTag: The dropdown menus for selecting languages.
  • icons: Icons for copy and speech functions.
  • translateBtn: The button that triggers the translation.

Step 3: Populating Language Dropdowns

selectTag.forEach((tag, id) => {
    for (let country_code in countries) {
        let selected = id == 0 ? country_code == "en-GB" ? "selected" : "" : country_code == "hi-IN" ? "selected" : "";
        let option = `<option ${selected} value="${country_code}">${countries[country_code]}</option>`;
        tag.insertAdjacentHTML("beforeend", option);
    }
});

• What it does: This loop goes through the countries object and adds each language as an option in the language selection dropdowns.
  • If the dropdown is the first one (id == 0), English ("en-GB") is selected by default.
  • If the dropdown is the second one (id == 1), Hindi ("hi-IN") is selected by default.

Step 4: Swapping Languages and Text

exchageIcon.addEventListener("click", () => {
    let tempText = fromText.value,
        tempLang = selectTag[0].value;
    fromText.value = toText.value;
    toText.value = tempText;
    selectTag[0].value = selectTag[1].value;
    selectTag[1].value = tempLang;
});

• What it does: When the swap icon is clicked, this function swaps the text between the "from" and "to" text areas as well as the selected languages.
  • tempText temporarily holds the original text from the "from-text" field.
  • tempLang temporarily holds the original language from the first dropdown.
  • The "from-text" is then replaced with the "to-text", and vice versa. The selected languages are also swapped.

Step 5: Clearing Translated Text

fromText.addEventListener("keyup", () => {
    if(!fromText.value) {
        toText.value = "";
    }
});

• What it does: If the user deletes all the text from the "from-text" field, this function automatically clears the "to-text" field as well.
• Purpose: Ensures that if the input text is cleared, the translation is cleared too, preventing confusion.

Step 6: Translating Text

translateBtn.addEventListener("click", () => {
    let text = fromText.value.trim(),
        translateFrom = selectTag[0].value,
        translateTo = selectTag[1].value;
    if(!text) return;
    toText.setAttribute("placeholder", "Translating...");
    let apiUrl = `https://api.mymemory.translated.net/get?q=${text}&langpair=${translateFrom}|${translateTo}`;
    fetch(apiUrl).then(res => res.json()).then(data => {
        toText.value = data.responseData.translatedText;
        data.matches.forEach(data => {
            if(data.id === 0) {
                toText.value = data.translation;
            }
        });
        toText.setAttribute("placeholder", "Translation");
    });
});

• What it does: When the "Translate" button is clicked, this function:
  1. Extracts the text from the "from-text" field.
  2. Identifies the selected languages from the dropdowns.
  3. Sends a request to the MyMemory API with the text and selected languages.
  4. Receives the translation from the API and displays it in the "to-text" field.
  5. Updates the placeholder text while waiting for the translation to indicate that the process is ongoing.

Summary

The script allows users to translate text between different languages with a dynamic and interactive interface. Users can select languages, type in their text, translate it with a click, swap languages and text, hear the translation spoken aloud, or copy it to their clipboard.

Enjoy playing with different languages and make your translation journey fun and interactive! ?? Unto the next ?✌?✨

Check it out here
https://app.marvelly.com.ng/100daysofMiva/day-8/

Source code
https://github.com/Marvellye/100daysofMiva/blob/main/Projects%2FDay_8-Simple_language_translator

以上がAPIを備えたシンプルな言語翻訳ツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。