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

2回目です！
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　オンズ開発ブログ
・ウェブランサー

【解析その１】

device = (device == 'pc' && $(window).width() > pc_width) ? 'pc' : 'sp';

【意味】
モニターもブラウザ幅も600より大きければ、PC扱い。
どちらかが600以下または両方600以下なら、sp(スマホ？)扱い。

こんな感じかな。
プログラム的に書くと・・・

【条件】
・deviceの箱の中に入ってるのが「pc(文字)」
・htmlを表示しているブラウザの横幅（スクロールバーは含まない）は「600」ピクセルより大きい

【結果】
2つともクリアしてる場合
・deviceの箱の中に「pc（文字）」を入れ替える

片方または2つともクリアしていない場合
・deviceの箱の中に「sp（文字）」を入れ替える

前回varでdeviceという箱を作って、中に「pc」か「sp」の文字を入れていました。
そして、同じくvarでpc_widthという箱を作って、中に「600」という数字を入れました。
今回は、この二つの箱を使って、2種類の条件を聞いています。

device == 'pc' && $(window).width() > pc_width

・「==」
左側と右側が同じかどうか聞いてます。

・「&&」
「なおかつ」的な意味のようです。
「&&の左側と右側の条件が両方OKだった場合」という感じかな。

・「>」
左側の方が右側より大きいかどうかを聞いてます。
以上・以下を聞く場合は、「>=」「<=」という感じに「=」を追加します。
こういう記号を「演算子」と言うそうです。
「+ 」とか「 - 」とか「 × 」とか「 ÷ 」とかも演算子（四則演算子）です。

【詳細リンク】
【jQuery】入門9. 演算子

※「 ? 」は if （もしも）、「 : 」は elseで、「 : 」の左側が条件が当てはまる場合の答えで、右側が条件が当てはまらない場合の答えです。
詳細は前回に出てきたので、その１に書いてあります。

【解析その２】

var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->