jQueryのコードを解説してほしい

Question

こちらのサイトを使用するのは初めてですので、粗相がございましたら申し訳ありません。

jQueryのコードの2つの部分について、ご解説いただきたく投稿いたしました。

私は今、トップへ戻るボタンを実装しようと思っております。
CSSアニメーションと以下のコードで思い通りのものが完成したのですが、コードの意味をわからないまま使うのをためらっています。

$(function(){

  let topBtn = $('#top');
  let topBtnView = false;

  $(window).on('scroll',function(){
    let now = $(window).scrollTop();
    if( topBtnView != now>=window.innerWidth*0.01 ) {
      topBtn.toggleClass('view');
      topBtnView = !topBtnView;
    }
});

});

以下の2点なのですが、恥ずかしながら自力で検索しても理解が及びませんでした。

①if(topBtnView != now>=window.innerWidth0.01)
「a!=b」については、「aが=bでなければtrueになる」ということはわかっています。
①のコードの場合は、「topBtnView」が「now>=window.innerWidth0.01」でなければ、という意味になるのでしょうか？
その場合、「topBtnView」と「now>=window.innerWidth*0.01」を比べる意味は何なのでしょうか？

②topBtnView = !topBtnView
「a=!a」というコードは、どういった意味を持つのでしょうか？
「a=!b」という形であれば多少理解しやすいのですが、両方aというのが理解が難しく、色々と調べてもいまいち理解が進みませんでした。

jQueryの学習を始めたばかりで、初歩的な質問になってしまっているかもしれませんが、お教えいただけますと幸いです。

Comments

[hoshi-takanori]

① はなんかおかしい気がしますね。コードの出どころはどこでしょうか？
② はフラグを反転します。

[nkfn_39]

こちらはYahoo知恵袋で教えていただいたコードです。
その方は2通りのやり方を教えてくださり、私はもう一方のやり方についてその方に(返信という形で)質問をお送りしました。
ですので、何度も聞くのもはばかられ、また別の方のご意見も伺いたく、こちらで聞いてみようと思った形です。
該当ページはこちらになります。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13263408738

[hoshi-takanori]

知恵袋には ① のコード (!= と >= を両方使った条件) が見当たらないんですが、まぁいいや。「なんかおかしい」と書きましたが、おかしくないですね。ごめんなさい。BeatStar さんの回答の通り、topBtnView != (now>=window.innerWidth0.01) という条件になります。((不) 等価演算子 != よりも代償比較演算子 >= のほうが優先順位が高いので。でも、括弧を使ったほうが分かりやすいと思う…。)

で、① の条件ですが、
if ((topBtnView == false && now >= window.innerWidth0.01) || (topBtnView == true && now < window.innerWidth0.01)) { ... }
と同じ意味になるかと。

[BeatStar]

@ hoshi-takanoriさん

多分、そのページの5htrさんの回答にある例(URL先)のことかと。

[nkfn_39]

BeatStarさんのおっしゃる通り、5htrさんのご回答にあるURL先のコードになります。

hoshi-takanoriさんの書いてくださった、同じ意味になるコードは非常にわかりやすく大変助かりました。
誠にありがとうございます。

Answer 1

①に関しては、「aとbを比較する」というよりも、「○○という条件を満たすかどうか」ですね。

a == b であれば、「aとbが同じなら」となりますよね。そのため、「aとbを比較する」となっているだけです。
a >= b であれば、もうちょっと私たちが見やすいように書くと『a ≧ b』でしょうか。
つまり「aがbより同じか大きい」、よって「aがb以上なら」となります。if文とかでの条件式はあくまで「条件式」です。
数Aの「集合と論理」に出てくる命題とかのあのアレです。

ただ、topBtnView != now>=window.innerWidth*0.01の部分は二つ重なっている気がします。(読みにくい…)
おそらく、topBtnView != (now>=window.innerWidth*0.01) のように優先順位がある気がする…
(JavaScriptってこれ行けたっけ？)

a = !a;に関しては、「aを反転させる」ですかね。topBtnView = false;とあるので、true/false、つまり「真か偽」です。条件を満たす・満たさない的な。
true/falseは二値なので、trueでないならfalse, falseでないならtrueとなりますよね。じゃあ、topBtnViewがfalseだったのを反転、つまり逆転
させたらどうなるでしょうか。
そう、trueになりますよね。だって二つしかないのにfalseではないのだから。

つまり、「反転させる」です。a = !b;という場合はbの値を反転させてaにセットしているのです。a = !a;はaを反転させてaにセット。

ーーーー

[追記1]

if( topBtnView != now>=window.innerWidth*0.01 )であればおそらくnow以降は括弧で括られていて、
if( topBtnView != (now>=window.innerWidth*0.01) )という解釈になると思います。
その場合、まず算数や数学のように括弧の中から先に計算します。
now>=window.innerWindow*0.01を先に計算。
集合と論理(細かく言えば論理学のようですが)でやる真偽(true/false)で行ってこの演算結果をDとします。で、topBtnView != D を計算します。
もしDの値がtrueならif( topBtnView != true )と等価です。
D = falseだったならif( topBtnView != false )と等価です。
このif( topBtnView != D )の演算結果がif文でのチェック対象になります。このtopBtnView != D が trueなら処理して、falseなら処理しないっていう感じで。

条件がもっとあるなら同じように繰り返していく。つまり算数や数学での1 + 2 * 3 - ( 2 - 1 ) とかみたいな演算結果が数字なのか、true/falseが演算結果になるのかが違うだけですね。(演算方法も微妙に違うがなんとなく同じ)

Comments

[nkfn_39]

ご丁寧にご解説いただきありがとうございます。

①に関してはそもそも解釈が難しいものなんですね。
もしかして、「now>=window.innerWidth*0.01」がfalseなら、「topBtnView=(now>=window.innerWidth*0.01)」が成り立つ
つまりそれが成り立った場合に、if以下の処理をする
という意味なのでしょうか？

②について、大変よくわかりました。
falseだったtopBtnViewをtrueへ反転させる命令文、という認識でしょうか。

[nkfn_39]

立て続けにすみません、!=なので逆ですね。
「now>=window.innerWidth*0.01」がfalseなら、「topBtnView!=(now>=window.innerWidth*0.01)」が成り立つ
つまりそれが成り立った場合に、if以下の処理をする
でしょうか？