#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 エラーに対する応答を改善します。
• 複数の翻訳: 利用可能な場合は別の翻訳を表示します。

---

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

ステップ 1: 利用可能な言語を定義する

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

• 動作: このオブジェクトにはキーと値のペアが含まれます。キーは言語の国コード (英語の「en-GB」など)、値は言語の名前 (「英語」など)です。 ).
• 目的: このデータは、ユーザーがソース言語とターゲット言語を選択できるように、言語選択ドロップダウンに値を入力するために使用されます。

ステップ 2: DOM 要素の選択

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"),

• 動作: このコードは、HTML ドキュメントからさまざまな要素を選択し、後で簡単にアクセスできるように変数に格納します。
  • fromText および toText: ユーザーがテキストを入力し、翻訳を確認するテキスト領域。
  • exchageIcon: 言語とテキストを交換するために使用されるアイコン。
  • selectTag: 言語を選択するためのドロップダウン メニュー。
  • アイコン: コピーおよび音声機能のアイコン。
  • translationBtn: 翻訳をトリガーするボタン。

ステップ 3: 言語ドロップダウンの入力

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 = `${countries[country_code]}`;
        tag.insertAdjacentHTML("beforeend", option);
    }
});

• 動作: このループは、countries オブジェクトを処理し、言語選択ドロップダウンのオプションとして各言語を追加します。
  • ドロップダウンが最初のドロップダウン (id == 0) の場合、デフォルトで英語 (「en-GB」) が選択されます。
  • ドロップダウンが 2 番目のドロップダウン (id == 1) の場合、デフォルトでヒンディー語 (「hi-IN」) が選択されます。

ステップ 4: 言語とテキストを交換する

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;
});

• 機能: 交換アイコンをクリックすると、この関数は、「from」テキスト領域と「to」テキスト領域の間のテキスト、および選択した言語を入れ替えます。
  • tempText は、「from-text」フィールドの元のテキストを一時的に保持します。
  • tempLang は、最初のドロップダウンの元の言語を一時的に保持します。
  • 「コピー元テキスト」が「コピー先テキスト」に置き換えられ、その逆も同様です。選択した言語も入れ替わります。

ステップ 5: 翻訳されたテキストをクリアする

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

• 機能: ユーザーが「from-text」フィールドからすべてのテキストを削除すると、この関数は「to-text」フィールドも自動的にクリアします。
• 目的: 入力テキストがクリアされると、翻訳もクリアされ、混乱を防ぎます。

ステップ 6: テキストを翻訳する

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");
    });
});

• 機能: [翻訳] ボタンをクリックすると、この機能は次のようになります。
  1. 「from-text」フィールドからテキストを抽出します。
  2. ドロップダウンから選択した言語を識別します。
  3. テキストと選択した言語を含むリクエストを MyMemory API に送信します。
  4. APIから翻訳を受け取り、「to-text」フィールドに表示します。
  5. プロセスが進行中であることを示す翻訳を待機している間に、プレースホルダー テキストを更新します。
まとめ

このスクリプトを使用すると、ユーザーは動的で対話型のインターフェイスを使用して、異なる言語間でテキストを翻訳できます。ユーザーは言語を選択し、テキストを入力し、クリックして翻訳したり、言語とテキストを交換したり、翻訳を音声で聞いたり、クリップボードにコピーしたりできます。

さまざまな言語で遊んで、翻訳の旅を楽しくインタラクティブなものにしましょう! ??次へ?✌?✨

こちらからご覧ください

https://app.marvelly.com.ng/100daysofMiva/day-8/

ソースコード

https://github.com/Marvellye/100daysofMiva/blob/main/Projects/Day_8-Simple_ language_translator