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

6回目です！
JavaScriptやjQueryの知識が無いので、今回も翻訳レベルで単語や文法を調べていきます。（間違っていたら泣く・・・）
今回は説明が長すぎて、1行しか解析出来ませんでした。

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

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

<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
・Handy Web Design
・パソコンあれこれ
・TECH PLAY
・Let'sプログラミング
・gaaamiiのブログ
・SE学院
・jQuery 入門と実践

【解析その１】if文の中の for文の中の if文の中身

$read_more_link.on('click',{archive_num: archive_num},function(e){
});

「意味」
「もっと表示する」ボタンを押したら、「function(e){ }」の中の事をやって下さい。

簡単に書くと、こんな感じです。
もうちょっとプログラム的に書くと・・・

「$read_more_link」がある部分を「click」したら、「function(e){ }」内の事を実行して下さい。
押した直後に、function(e)専用箱「archive_num」（左側のやつ）に、
前に作った「archive_num」（右側のやつ）の中身を入れておきます。

私が混乱した事。

・{archive_num: archive_num}て何？
・function(e)って何？

「{archive_num: archive_num}」って、何？

そもそも、「.on( )」の説明部分を見た時から、混乱が始まりました。

jQuery リファレンス：on

上記の「.on( )」説明では、

・jQo.on( イベント名, function)
・調査範囲.on( イベント名, セレクタ, function)
・調査範囲.on( イベント名, セレクタ, object, function)
・調査範囲.on( object, セレクタ [,object] )

※調査範囲はjQueryオブジェクトにしないといけません。
jQo = jQueryオブジェクト = $("#aaa")等
 = htmlやCSS等を箱「$()」に入れてjQueryで直接指定出来る様にしたもの

とあったので、

・「'click'」＝イベント名
・「function(e){ }」＝ function

というのは分かりましたが、
（何で「function」に「e」が付くのか分からないけど）
{archive_num: archive_num}が何なのか、謎だった。

「セレクタ」として考えた場合

セレクタは、CSSでの書き方のグループ名(「#aaa」とか「.bbb」とか 「section」とか）なのですが、
それなら「archive_num: archive_num」はどういう意味かを考えてみた。

私は、CSSでグループの書き方に「aaa:bbb」なんて物は聞いた事がない。
「$read_more_link」の中身の

<p style="text-align:center;background:#ddd">
    <a href="javascript:void(0)" style="line-height:3;font-size:80%:">もっと表示する</a>
</p>

のCSSで書く部分（style部分をCSSで直接書いた場合）は

#entries-archive-0 p {
    text-align: center;
    background: #ddd;
}

#entries-archive-0 p a {
    line-height: 3;
    font-size:80%;
}

または

#entries-archive-0 p { text-align: center; background:#ddd; }
#entries-archive-0 p a { line-height: 3; font-size:80%; }

となる。
※1　書き方はどちらでもいいし、「{ }」内の単語横のスペースはあっても無くてもいい。
※2　「#ddd」の右横の未記入と80%の右横の「:」は記入ミスとみて「;」に変えた。
※3　「$read_more_link」に書いてあるhtmlは、ID「entries-archive-（番号）」の子供に置かれます。

上記のCSSを見て頂ければ分かりますが、
グループ名（pやa）では「:」は使われず、
装飾する部分を指定する時に「:」を使います。
変数に物を入れる時の「=」と同じような使い方かな。

【例】
aaa = 1　（jqueryでの変数設定）
line-height : 3　（CSSでのテキストの高さ設定）

aaaの箱に1を入れる。
line-height（テキストの高さ）に3を指定する。

htmlタグの種類に<archive_num>という言葉は存在しないから、使うとしたらID名かclass名になるけど、

・IDなら「#archive_num」と書く
・classなら「.archive_num」と書く

・・・ので、結局どちらにも当てはまらない。

（IDやclass名のarchive_num自体、今回のhtml内には存在しない）あるのは、jquery専用の箱「archive_num」のみです。

それで、まず最初に「{archive_num: archive_num}」を見て混乱しました。
・・・これ、セレクタじゃなくない？

「オブジェクト」として考えた場合

オブジェクトというのは、jqueryで使える「物」であり、
「$( )」内にhtmlやCSS等を直接入れて指定できます。

しかし「{archive_num: archive_num}」を見ても、
「$( )」がどこにもない。
・・・これ、オブジェクトじゃなくない？

結局「{archive_num: archive_num}」って、何!?