【JavaScript】functionの外で値を受け取りたい

Question

翻訳APIを作成しています。

テキスト入力されたmessageを翻訳APIに引数で渡し、
翻訳結果を戻したいのですが、値が受け取れません。

関数の定義の仕方が悪いのか、見当がつかず、、、。
ご指導頂けないでしょうか。

以下、翻訳APIです。

        // 翻訳API
        // 文字が入力されたらイベント発火
        var tranceLang = textTranslator(message);
        console.log("翻訳結果確認: " + tranceLang);

        function textTranslator(message) {

            // 現在の時刻をUNIX Time に変換して取得
            const now = new Date();
            const nowtime = now.getTime();

            // 認証トークンを取得するための関数 [getToken] を定義
            // http://docs.microsofttranslator.com/oauth-token.html
            const getToken = function() {
                const defer = $.Deferred();

                // 現在時刻と、sessionStorageに保存されている時刻を比較
                // sessionStorageに保存されているトークンが8分以内に発行されたものであれば、そのまままトークンを返す
                // 8分以上経っている場合、もしくはトークンが存在しない場合、新規にトークンを取得。
                // 取得したトークン、および取得時間をUNIX Time に変換したデータをJSON [datalist] に格納
                // sessionStorage [tdata] にJSONを保存する
                const arr = JSON.parse(sessionStorage.getItem("tdata"));

                if (arr === null || arr.time + 1000 * 60 * 8 < nowtime) {
                    $.ajax({
                        url: 'https://api.cognitive.microsoft.com/sts/v1.0/issueToken',
                        type: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/jwt',
                            'Ocp-Apim-Subscription-Key': '認証キー',
                        },
                        async: false,
                    }).done(function(data) {

                        const datalist = {
                            time: nowtime,
                            token: data,
                        }
                        sessionStorage.setItem('tdata', JSON.stringify(datalist));
                    });
                }

                // sessionStorage に保存されたデータを変数 arr2 に格納
                // JSONを文字列に変換後、トークンデータを引き出して翻訳用の関数にひきわたす
                const arr2 = JSON.parse(sessionStorage.getItem("tdata"));
                const token = arr2.token;
                defer.resolve(token);
                return defer.promise();
            };

            // 関数 [getToken] 実行後、取得したトークンを 受け取る
            // フォームから入力したデータとともに、 Microsoft Translator テキストAPIへ送信
            $.when(getToken()).done(function(token) {
                    const key = 'Bearer ' + token;
                    const text = message;
                    const response = $.ajax({
                        url: 'https://api.microsofttranslator.com/v2/http.svc/Translate',
                        type: 'GET',
                        data: {
                            'appid': key,
                            'Accept': 'application/xml',
                            'text': text,
                            'to': 'en',
                        },
                        async: false,
                    })

                    // Translator テキスト APIを通じて取得したデータから、翻訳語が含まれるプロパティを取得
                    // replace関数でタグを除去し、翻訳データのみを抽出して表示する
                    const data = response.responseText;
                    const translation = data.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
                })
        };

Comments

[MasakazuFukami]

すいません。どこがどうなっているのかいまいちわからないのと、どの関数に何が出力されないのかがわかりません。また、最初に呼び出してある textTranslator(message)もおそらくmessageはinput type="text"の入力ハンドリングから取得したものだと思いますが、このようなものもこちらで用意しなければならないので、回答者が回答しやすいように、必要な部分だけを残し、再現性のあるコードを記述していただけるとうれしいです！

Answer 1

var tranceLang = textTranslator(message);
console.log("翻訳結果確認: " + tranceLang);

$.ajax() は非同期処理の為、textTranslator() の返り値を受け取る事は出来ません。
コード中にあるように、.done() で結果を受け取って下さい。
関数 textTranslator() の中から、外側の関数を参照する事は可能です。
http://api.jquery.com/jquery.ajax/

Re: asakura さん

Comments

[asakura]

質問内容が分かりにくく申し訳ございません。
ご指摘頂いた内容を確認し、ajax内の値が取得できました。
ありがとうございました。