はてなブログの「アーカイブページをアーカイブするカスタマイズ」のjQueryを1つづつ解析してみた：その３

3回目です！
JavaScriptやjQueryの知識が無いので、今回も翻訳レベルで単語や文法を調べていきます。（間違っていたら泣く・・・）
更新しても、ちょこちょこ修正したりしています。
今回は、ちょっと長いです。

元のプログラムがあるサイト​​

【レスポンシブデザイン向け】はてなブログアーカイブページの記事数を変更するカスタマイズを作りました - 小さな星がほらひとつ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$('#main-inner').ready(function(){
  "use strict";
  var pc_width = 600;
  var device = window.screen.width < pc_width ? 'sp' : 'pc';
  device = (device == 'pc' && $(window).width() > pc_width) ? 'pc' : 'sp';
  var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->
  var sections = $('#main-inner > div.archive-entries > section');

////////今回はここから///////////////////////
  if((sections.length > view_sec_num) && device == 'sp') {
    var page_index = 0;
    var $entries_archive = null;
    var archive_num = 0;
    $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
////////ここまでやります///////////////////////

    $entries_archive.insertBefore(sections[0]);
    for(var i=0; i < view_sec_num; i++) {
      $(sections[i]).appendTo($entries_archive);
      page_index += 1;
    }
    archive_num += 1;
    for(var i=view_sec_num; i < sections.length; i++) {
      if(page_index==view_sec_num) {
        var $read_more_link = $('<p style="text-align:center;background:#ddd"><a href="javascript:void(0)" style="line-height:3;font-size:80%:">もっと表示する</a></p>');
        $read_more_link.on('click',{archive_num: archive_num},function(e){
          $(e.target).hide();
          $('#entries-archive-' + e.data.archive_num).fadeIn("slow");
        });
        var $before_archive = $('#entries-archive-' + (archive_num-1));
        $before_archive.append($read_more_link);
        $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
        $entries_archive.hide();
        $entries_archive.insertAfter($before_archive);
        page_index = 0;
        archive_num += 1;
      }
      $(sections[i]).appendTo($entries_archive);
      page_index += 1;
    }
    $entries_archive.hide();
  }
});
</script>

解析するコードを書きましたが、設定の仕方等は上のサイトを御覧下さい。

【用語説明参照サイト】

・web design lab
・SMART
・WEB　MANABU
・HTML辞典
・js STUDIO
・HTMLクイックリファレンス
・Qiita
・teratail
・stack overflow
・ONZE/BLOG　オンズ開発ブログ
・ウェブランサー
・MDN web docs moz://a
・Samurai Blog
・TASK NOTES
・Webプログラミング入門
・jQuery入門
・「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
・Web’Notes

【解析その１】if文本体

if((sections.length > view_sec_num) && device == 'sp') {

});

【意味】
・表示予定のアーカイブの数が、指定した数字「5」より大きい
・モニターが600より小さいかブラウザの横幅が600より小さいかその両方

上の2つの条件を満たしていた場合は、「 {  } 」内に書いてある事をする。

という感じかしら。
プログラム的に書くと・・・

【条件】　
varで作ったsectionsの箱に入ってるsectionタグの数が
varで作ったview_sec_numの箱に入ってる5（数字）と比べて
sectionタグ数の方が多い場合

なおかつ

varで作ったdeviceの中に入ってる文字が「sp」だった場合

【結果】
「 {  } 」内に書いてある事をする。

・if( 条件式 ){
}
「もしも～だったら」という感じの条件文です。
条件内容は、ifの後の「 (  ) 」の中に書いてあります。
※絶対に「 (  ) 」の中に書かないといけません。

セミコロン「 ; 」に関しては if には使わないのが一般的らしいですが、使っても問題ないので気になる人は入れてもOKです。

セミコロンに関する話は、その1で説明しています。

(sections.length > view_sec_num) && device == 'sp'

if の条件式の中身を取り出してみました。
何で(sections.length > view_sec_num)だけ「 (  ) 」で囲ってるのかが分からなかったので、私より詳しい夫に聞いてみました。

「演算子には優先順位があるので、先に計算したいものは ( ) を付ける」

と教えてくれて、以下のリンク先を紹介してくれました。

【順位一覧リンク】
・演算子の優先順位

学校で習った四則演算（ + - × ÷ ）にも、優先順位があるのはご存じかと思います。

+ と - と × と ÷ がある計算式の場合、× と ÷ を先に計算し、+ と - は後に計算する。

というヤツです。

例外として、(  ) で囲った場合は、その中身を最初に計算する事。

みたいな事も習ったと思います。
jQueryでも同じような法則があるらしく、演算子が複数並んでいた場合は、優先順位の上から順に計算していくようです。

今回の演算子を並べてみたいと思います。

(  >  )  &&  ==

リンク先の優先順位を、上から順に並べてみると

( … )
… > …
… == …
… && …

・・・と、なりました。
プログラム的にも、&&を最後に判定してくれればOKのやつなので、
今回は(  )があっても無くても問題ない式だったようです。

それなら、何故付けたのか・・・？

「見やすくする為に、付ける事はあるよ。」

なるほど。
書いた人の気持ちの問題だったようです。
「 (  ) 」は、優先順位1位の最強演算子なので、とにかく優先したい場合や見やすくしたい場合に使われるようです。

素人なので、
「片側のみに付けるなんて、何かあるのではないのか！？」
等と気になってしまいましたが、無駄な悩みだったようですね・・・。

気になる人は、もう片方にも「 (  ) 」を付けても問題ないですよ～！
（今回の話では・・・ですけどね。）

演算子そのものについては、その２で説明しています。

・sections
前回、varで作った箱の名前です。

この中には、指定した位置にあるsectionタグ全てを入れています。
（孫は入ってない）
varは、名前付き箱を作る為の命令文です。
varに関する話は、その１で説明しています。

・length（レングス）
文字列の長さや配列の要素数などを取得するためのプロパティです。
簡単に言うと、「数数えマシーン」ですｗ
色々数えちゃうみたいですよ。

【書き方】
調べたいもの.length

必ずlengthの前に「 . 」を付けます。
そして、必ずlengthの後ろに「 (  ) 」は付けてはいけません。

複数の数字が入ってる箱を前に置くと、書いてある数字の個数を出し、
文字が入ってる箱を前に置くと、文字数を出します。
今回は、lengthの前にはsections箱があるので、その中身sectionタグの数をカウントして数字を出します。

lengthの前に何でも置いて良いわけではないと思いますので、詳しく知りたい方は下記のリンクを見て下さい。

【詳細リンク】
・【jQuery入門】lengthプロパティの使い方まとめ
・【JavaScript入門】lengthで文字列や配列の長さを取得する方法

・view_sec_num
varで作った箱の名前。
数字の「5」が入ってます。
その２で出てきました。

・device
varで作った箱の名前。
条件によって「pc」か「sp」の文字が入っています。
多分、パソコンとスマホの意味だと思います。
その１で出てきました。

・'sp'
「 '  ' 」で囲まれてるので、文字「sp」を直接指定してます。
この書き方は、その１とその２でも出てきました。

【解析その２】if文の中身

var page_index = 0;