if構文でブロック内の2行目のコードだけ実行される

Question

下記のコードにおいてif構文内において「document.getElementById("iframe-contents").style.height = e.data + "px";」を実行させたいのですが、「 console.log("aaa")」を記述を入れると正常に動作します。
しかし、この記述を消すと動作しません。

###上手く動作するコード

    window.addEventListener("message", receiveSize, false);
    function receiveSize(e) {
    if (e.origin === "https://file003.shop-pro.jp/")
			console.log("aaa")
      document.getElementById("iframe-contents").style.height = e.data + "px";
    }

「document.getElementById("iframe-contents").style.height = e.data + "px";」は動作しますが、console.logは動作しません。

###動作しないコード

    window.addEventListener("message", receiveSize, false);
    function receiveSize(e) {
    if (e.origin === "https://file003.shop-pro.jp/")
      document.getElementById("iframe-contents").style.height = e.data + "px";
    }

色々試してみたのですが、原因が全くわかりません。アドバイスお願い致します。

###追記
ifのブロック内で2行目だけ実行されているようです。。。
下記の文だと1行目がスキップされ2行目だけ実行されています。

if (e.origin === "https://file003.shop-pro.jp/")
  console.log("aaa")
  document.getElementById("iframe-contents").style.height = e.data + "px";


if (e.origin === "https://file003.shop-pro.jp/")
  document.getElementById("iframe-contents").style.height = e.data + "px";
  console.log("aaa")

1行目と2行目を入れ替えると2行目の「console.log("aaa")」正常に動作します、

Answer 1

解決した後ですが、質問の主旨、発言からifの条件以外にもifの書き方で知識としての問題があるように思えます。

ifのブロック内で2行目だけ実行されているようです。。。

違うんです。あなたのifの書き方では、ifの結果がfalseだから1行目が実行されず、2行目はそもそもifの外なんだから絶対実行されるんです。

解説

var check = false;
if(check)
  console.log("checkがtrueのときの処理1");
  console.log("checkがtrueのときの処理2");
console.log("共通処理");

さて、checkがfalseなので「checkがtrueのときの処理1、2」は処理されないはずです。では実際に動かすとどんな出力が出るでしょう？正解は以下のとおりです。

checkがtrueのときの処理2
共通処理

checkがfalseなのに「checkがtrueのときの処理2」だけ走ってしまっています。なんででしょう？それはifの{}を省略して、ifが**「省略if(1行if)」という扱いに変わっているからです。{}を書かずにifを書いた場合、「直後の1つの処理だけ」**しか判定の影響を受けません。インデントを揃えていても関係ありません。以下の処理は同じことなのです。

if(check)
  console.log("checkがtrueのときの処理1");
  console.log("checkがtrueのときの処理2"); // ifの影響を受けない

if(check) {
  console.log("checkがtrueのときの処理1");
}
console.log("checkがtrueのときの処理2"); // ifの影響を受けない

私は「省略if」の存在を許せないタイプです。なぜなら「うっかり処理を挟むと意図しない動作になるから」です。例えば元々以下のコードで正しく動いていたコードがあったとします。

if(check)
  console.log("checkがtrueのときの処理1");
console.log("共通処理");

しかし、後日「あ、そうだcheckがtrueのときは事前にもう1個処理が必要だわ」となったとき、こう加えたとします。

if(check)
  console.log("checkがtrueのときの処理0");
  console.log("checkがtrueのときの処理1");
console.log("共通処理");

そして、checkをtrueにして動作テストしてみたところちゃんと処理0が実行されたのを見て満足します。すると、後日「checkがfalseなのに処理1が走ってるんだけどどうなってんの？」とバグ報告が上がります。1行ifを使っていると「ふとした拍子に処理を追加したときにバグを埋め込む可能性がある」ということです。しかし、ちゃんとブロックで囲っていればこんな事故は起きません。
たった2文字のタイピングをケチるためにこのようなバグを埋め込みかねないコード、私は親の敵ぐらい嫌いです。ちなみに1行forを書くことも同じことなので嫌いです。

Comments

[masaya_ohashi]

おんなじこと書いてたー…遅かったー…

Answer 2

if構文の記述に問題があるからです.

function receiveSize(e) {
  if (e.origin === "https://file003.shop-pro.jp/")
    console.log("aaa")//A
    document.getElementById("iframe-contents").style.height = e.data + "px";//B
}

ではif文の後に{}を記述していないことから条件分岐の影響下にあるコードはAの行のみになります. 言い換えると次のコードと同等ということになります.

//書き換えたコード
function receiveSize(e) {
  if (e.origin === "https://file003.shop-pro.jp/"){
    console.log("aaa")//A
  }
  document.getElementById("iframe-contents").style.height = e.data + "px";//B
}

一方Aの行を削除した場合に得られたコード

function receiveSize(e) {
  if (e.origin === "https://file003.shop-pro.jp/")
    document.getElementById("iframe-contents").style.height = e.data + "px";//B
}

は次のコードと同等になります.

//書き換えたコード
function receiveSize(e) {
  if (e.origin === "https://file003.shop-pro.jp/"){
    document.getElementById("iframe-contents").style.height = e.data + "px";//B
  }
}

ご覧の通り, if文の影響下にあるコードが全く異なりますから, 動作が変化するのは当然です.

Answer 3

単純にif文に入っていないということではないですか？
e.originの中身を確認してみてはいかがでしょう。

Comments

[yuki_90453]

コンソールログで中身を確認しましたが、正常に入っています。

試してわかったのですが下記の構文だと2行目だけ実行されているようです。。。
下記の文だと1行目がスキップされ2行目だけ実行されています。

if (e.origin === "https://file003.shop-pro.jp/")
console.log("aaa")
document.getElementById("iframe-contents").style.height = e.data + "px";

if (e.origin === "https://file003.shop-pro.jp/")
document.getElementById("iframe-contents").style.height = e.data + "px";
console.log("aaa")

1行目と2行目を入れ替えると2行目の「console.log("aaa")」正常に動作します、

[yuki-saito]

事象としてはif文に入っていないことを表しています。
if文に{}を付けたらどちらも動作しなくなるのではないですか？

if (e.origin === "https://file003.shop-pro.jp/") {
console.log("aaa")
document.getElementById("iframe-contents").style.height = e.data + "px";
}

e.originの値は本当に"https://file003.shop-pro.jp/"と完全一致ですか？

[yuki_90453]

はい、そうなんです。{}をつけると動作しなくなります。
e. originの値がhttps://file003.shop-pro.jp
if文の値をhttps://file003.shop-pro.jp/
にしていました。"/"が原因で完全一致にハネられていたみたいです。

お騒がせ致しました。

[yuki-saito]

一致しているなら正しくOKになるはずです。
https://codepen.io/anon/pen/pdvmqq?editors=1111

値か型か、何かが違うということだと思います。

[yuki-saito]

解決したようでよかったです＾＾