Q&A
御回答ありがとうございます。
非同期処理かと思いましたが、それにしても先頭から先に実行されると思っていました。認識が誤っていました。
VBAのようにブレイクポイントを置いてデバッグすることはできないのかと思っていたので、御回答いただいた通り、ツールを利用して動作を確認してみます。
その上で、非同期処理とならないようにする（と言いますか、イメージ通り動作させるようにする）にはどうすればよいか調べてみます。
前提・実現したいこと
現在Monacaでアプリ開発を始めたばかりですが、躓いてしまいました。御回答いただけますと幸いです。
ニフティのモバイルバックエンド(mBaaS)を使い、JavaScriptでレコードの追加をしたいと思っています。
既に以下のコードでレコードの追加自体はできているのですが、
uniqueKeyが1以上のレコードカウントを取得し、それに1インクリメントした値を
uniqueKeyに入れてレコードを追加したいと思っていますが、
consoleのログを見る限り、「uniqueKeyNumの出力2」が最初にでてきているため、
上から順に実行されていない気がします。
また、２回ずつログが出ているのも謎です。
出力されているconsoleログは以下です。
ここから
uniqueKeyNumの出力2 :
uniqueKeyNumの出力2 :
undifined
results.countの出力 :
13
results.countの出力 :
13
uniqueKeyNumの出力 :
14
uniqueKeyNumの出力 :
14
ここまで
ソースコード
html
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <script src="components/loader.js"></script> 7 <link rel="stylesheet" href="components/loader.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 <script> 10 // データストアを使う準備 11 var APIKEY = 'mask'; 12 var CLIENTKEY = 'mask'; 13 var ncmb = new NCMB(APIKEY, CLIENTKEY); 14 var TestData = ncmb.DataStore('TestData'); 15 16 //追加 17 var uniqueKeyNum; 18 function addData() { 19 TestData.greaterThanOrEqualTo('uniqueKey', 1) 20 .count() 21 .fetchAll() 22 .then(function(results){ 23 console.log('results.countの出力 : ', results.count); 24 uniqueKeyNum = results.count + 1; 25 console.log('uniqueKeyNumの出力 : ', uniqueKeyNum); 26 }); 27 28 var col1Text = document.getElementById('col1').value; 29 var col2Text = document.getElementById('col2').value; 30 console.log('uniqueKeyNumの出力2 : ', uniqueKeyNum); 31 if(col1Text != '' && col2Text != '') { 32 var testData = new TestData(); 33 testData.set('uniqueKey', uniqueKeyNum) 34 testData.set('col1', col1Text) 35 testData.set('col2', col2Text) 36 .save() 37 .then(function(data) { 38 // 保存後の処理 39 alert('保存しました。'); 40 }) 41 .catch(function(err) { 42 // エラー処理 43 alert('保存に失敗しました。'); 44 }); 45 } 46 } 47 </script> 48</head> 49<body> 50 <h1>ここはh1です。</h1> 51 <input type="text" name="col1" id="col1"> 52 <input type="text" name="col2" id="col2"> 53 <button onClick="addData();">追加</button> 54 <div>ここはdivです。</div> 55</body> 56</html> 57
回答2件
0
ベストアンサー
非同期処理なので、こんな感じでどうでしょう？
js
1 // asyncを追加 2 async function addData() { 3 // awaitに変更 4 var results = await TestData.greaterThanOrEqualTo('uniqueKey', 1) 5 .count() 6 .fetchAll(); 7 console.log('results.countの出力 : ', results.count); 8 uniqueKeyNum = results.count + 1; 9 console.log('uniqueKeyNumの出力 : ', uniqueKeyNum); 10 var col1Text = document.getElementById('col1').value; 11 var col2Text = document.getElementById('col2').value; 12 console.log('uniqueKeyNumの出力2 : ', uniqueKeyNum); 13 if(col1Text != '' && col2Text != '') { 14 // awaitの例外処理対応として try / catchを追加 15 try { 16 var testData = new TestData(); 17 // awaitに変更。キーチェーンメソッドに変更 18 var data = await testData.set('uniqueKey', uniqueKeyNum) 19 .set('col1', col1Text) 20 .set('col2', col2Text) 21 .save(); 22 // 処理成功 23 alert('保存しました。'); 24 } catch (err) { 25 // エラー処理 26 alert('保存に失敗しました。'); 27 }; 28 } 29 }
もしかすると、addDataの呼び出し元も async/awaitにしないといけないかも知れません。
html
1<!-- 元 --> 2<button onClick="addData();">追加</button>
html
1<!-- 変更後 --> 2<button id="add">追加</button> 3 4<!-- イベントハンドリング用のスクリプト --> 5<script> 6 document.addEventListener('DOMContentLoaded', function(e) { 7 document.querySelector('#add').onclick = async function(e) { 8 await addData(); 9 } 10 }); 11</script>
投稿2020/04/02 23:51
総合スコア250
0
「uniqueKeyNumの出力2」が最初にでてきているため、
については、非同期処理のため、TestData.greaterThanOrEqualTo()の処理が完了する前に、次の行の処理が実行されます。
また、２回ずつログが出ているのも謎です。
については、addData()をコールしているコードの記載がないので、何とも言えません。
まずは、Chrome DevToolsなどを利用して、ブレイクポイントを置いて1行1行追いながら、どのような動きをするか確認すべきです。
投稿2020/04/02 12:52
総合スコア276
なお、ソースコードですが、スクリプトだけではなく、全体を載せるようにしましたので、何かお気づきの点がありましたらコメントいただけますと幸いです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/03 02:44
2020/04/03 02:49
2020/04/03 03:08