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

1回目です！
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

【解析その１】

$('#main-inner').ready(function(){
　　//中身（//を左につけるとコメント扱い）
});

一番上の行です。
中身は省略しました。

html内にある#main-inner以下のデータを見て
functionグループ内に書かれてる内容を実行してね！

・・・という意味かしら？
これから、単語ごとに意味を解析していきます。
それぞれの種類名は、以下の感じ。

$("セレクタ").メソッド(パラメータ);

$('#main-inner')

【意味】
「(CSSの書き方だけど)htmlで設定しているグループを見てねー！」
・・・って事かな。

htmlにあるセレクタを直接指定しているようです。

「$("セレクタ")」はオブジェクトの一種。
jQueryでは、「ここのセレクタ（グループ）を見てー！」という時は、この形で書くようです。

【オブジェクト】
プログラムの中で操作する対象の事を指す。
丁寧に書くと「jQuery(セレクタ)」ですが、基本的には省略して上記のように書くようです。
「jQueryオブジェクト」とも言うようです。

【説明リンク】
・jQueryの基本（2017年版）

【セレクタ】
htmlに書き込む言葉で、cssでスタイルを適用する（cssで動かす）時に使います。
htmlの簡単な説明は、下記にあります。

「#main-inner」はidセレクタです。
 classを入れる時は「$(".sample")」と直接書けばいい。
idとclassの書き方は、CSSの書き方のようです。

【セレクタの種類】
・$(“#sample”) idセレクタ
・$(".sample") classセレクタ
・$(“p”) 要素セレクタ
・$(“p img”) 子孫セレクタ
・$(“#sample,.sample”)グループセレクタ

※他は下記リンク参照
・jQueryを書いてみる前の予備知識
・jQueryのセレクタ解説
・子孫セレクタ、子セレクタ、全称セレクタの詳細説明

「p img」は「pの中にあるimg全て」という意味。
スペースで区切る。
「#sample,.sample」は「#sampleと.sample」という意味。
「,」で区切る。

.ready( )

【意味】
「「.ready」の左に書いてあるhtmlの場所を全部読み込んでから、
「.ready」の右側にある「( )」内を動かしてね！」
って感じかな？

全部読み込む前に実行できちゃうし、それをしたら実行元が無くてエラーが出ちゃうので、最初にこれを指定した方がいいそうです。

「ready」はメソッド（命令文）の一種。
他にも色んな命令文があるよー。

【メソッド】
オブジェクトを操作する命令文の事。
オブジェクトの後ろに書いて、間をドット（ . ）で区切る。

【書き方】
オブジェクト . メソッド

(function(){
})

【意味】
「function内にあるものを実行して！」
っていう感じ？

jQueryでは、大体こいつを指定してから中身を書いていってるように見えます。

「function」はパラメータの一種。（「引数」の事：読みは「ひきすう」）
無名関数なので、名前を付ける必要がない。
function内で指定した変数はその中でしか使えないので、他のfunctionグループにある変数名と重複してもエラーが起きない。

【詳細】
・JavaScript・jQueryの関数について　引数についても説明しています。
・無名関数の使い方

基本は

$(document).ready(function(){
 //処理内容色々
});

で、htmlを読み込んだ後に、html内全てを見てfunction内の処理を実行するようだけど・・・。

$(function(){
 //処理内容色々
});

と、ちょっと省略する事が出来る。
こっちの方が良く見ると思います。

「document」部分を「#main-inner」に変えてる理由は、html全体ではなく「#main-inner」内のみ見て処理したいから？
「document」以外での指定を説明するサイトが見つからなかったので、ちょっとわからないけど・・・。
一応動いてるから、これでも使えるのかな・・・？
一部のサイトでは、document以外は推奨していなかった。

;

セミコロン（ ; ）は、区切りを表してる。

しかしJavaScriptでは

セミコロンで区切らなくても、改行されてて文法的に問題なければ勝手に入れちゃうよ！

みたいに認識してるらしいので省略したりする人もいるようですが、基本的には区切りとして（ ; ）を付けた方がいいと思います。
でも、専門家達の間では if 文とかの一部のものの最後には「セミコロンは必要がない」のが常識らしいです。（素人なので解釈不可でした）

詳しく知りたい人は、以下のサイトで実験とかもやってるから見てね。
【詳細】
・JavaScriptのセミコロンを省くと起こること
・JS、jqueryのセミコロンをつけるべきかつけないべきか区別の方法がわかりません。 下記ソースの一番最後に入れるべきかどう区別するのでしょうか？
・JavaScript ／ function文でセミコロン

【htmlの基本例】

<html>
　　<head>
　　　　<link rel="stylesheet" type="text/css" href="sample.css">
　　</head>
　　<body>
　　　　<div id="sample-ID">
　　　　　　<div class="sample-Class">
　　　　　　　　<p>何か文章～
　　　　　　　　　　<img src="https://nanika/img.jpg" width="150" height="300">
　　　　　　　　</p>
　　　　　　</div>
　　　　</div>
　　</body>
</html>

簡単に書いたhtml文章です。
意味は・・・