javascriptでモーダルの返り値を表示できない

お世話になっております。
2点教えてもらいたいことがあるのですが、
下記ソースでモーダルの閉じるを押したときに値を返したいのですが、
alert('ret:' + ret);で値が表示させれなくて困っております。
もう１点はconsole.logで1,2,3,4と順番に表示するかと思いきや1,4,2,3と4が先に実行されてしまいます。
javascriptの非同期の部分がそうさせていると思うのですが、1,2,3,4と順番に表示させるようにするにはどうすればいいか教えていただけないでしょうか？

<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style>
  .modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .inner {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border: solid 3px #dfe4ea;
    border-radius: 10px;
    padding: 10px;
  }

</style>
</head>
<body id="parent">

<input type="button" id="btn1" value="ボタン１">

<script type='text/javascript' src='//code.jquery.com/jquery-2.2.4.min.js'></script>
<script type="text/javascript">
let ret;

var btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function(event) {
  console.log('1');
  ret = showModal();
  alert('ret:' + ret);
  console.log('4'); //←ここが先に処理されてしまう
});

function showModal() {
  const modalElement = document.createElement('div');
  modalElement.classList.add('modal');
  const innerElement = document.createElement('div');
  innerElement.classList.add('inner');

  innerElement.innerHTML = `
      <iframe id="inner_elem" src="child.html" style="border: 0; width:400px; height:200px;"></iframe>
    `;

  modalElement.appendChild(innerElement);
  document.body.appendChild(modalElement);
  $('#inner_elem').on('load', function () {
    console.log('2');

    var doc = document.getElementById("inner_elem").contentWindow.document;
    const btn_close = doc.getElementById('btn_close');
    btn_close.addEventListener('click', function(){
      closeModal(modalElement);
      console.log('3');
      return 'aaa';
    });
  });
}

function closeModal(modalElement) {
  document.body.removeChild(modalElement);
}
</script>
</body>
</html>

--child.html
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<p>iframe内</p>
<div><button id="btn_close">閉じる</button></div>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

この問題、後者だけが非同期の問題のように見えますが実は前者も非同期に関する問題です。

`showModal` について

まず return 'aaa' しているのは btn_close.addEventListener で渡している関数であって showModal ではありません。じゃあ受け取る方法はあるのかというと最近では async/await を使えば可能ですが、それを理解するにはまずコールバックという概念から始めましょう。

いまソースコードに書いてもらっている通り、関数の引数に関数を渡すということが可能です。これを利用すると関数 f に関数 g を渡し、f の実行先で g を実行してもらうということが出来ます。これがコールバックで、このときの g をコールバック関数と呼びます。コードに書くとこんな感じです。

JavaScript
1function f(callback){
2    callback('nyaan')
3}
4
5function g(x){
6    console.log(x)
7}
8
9f(g) // nyaan

このようにすれば値を返してもらわなくても関数の出先で関数を呼び出してもらうことが出来ます。上記のコードであれば

JavaScript
1function showModal(callback){
2    ...

とコールバック関数を引数に取るように変え、呼び出す際は

JavaScript
1showModal(alert)

などとすると良いでしょう。このようにして非同期処理の中でも値を返してもらうことなく処理の後の結果を使って処理を実行してもらう、ということが出来ます。しかしこれは「コールバック地獄」というのを生み出すことになりますが、やってみるとわかるでしょう。そしてから Promise や asyc/await を学ぶと良いかもしれません。