JavaScript ライブラリについて

Question

学習目的で、jQueryの中身を理解し、自分オリジナルのJavaScriptライブラリを作成しようと
考えています。

そこで、自分なりに(jQueryの)size()メソッドを再現してみました。

  <div class="sample"></div>
  <div class="sample"></div>
  <div class="sample"></div>

  var size =  function(t) {
    return t.length;

  }
  var sample = document.getElementsByTagName('div');
  console.log(size(sample)); // 3

ですが、なにか違うなとは薄々気づいてます。。
望んでいるのは、

　　size: function() {
     return this.length;
   }
　　$("div").size();

のような記述方法です。
ライブラリや、上記の方法で記述するには、
JavaScriptのプロトタイプを学習すればよろしいでしょうか？

スクリプトタグで毎回読み込んでいるjQuery。
よくよく考えるとなぜjQueryのメソッド使えるようになるのか理解していません。

一般的なライブラリは、どのようなJavaScriptの技術を使って構築されているのでしょうか？
よろしくお願いいたします。

追記
// JavaScriptのプロトタイプを学習すればよろしいでしょうか？
この部分は、自分なりに調べてプロトタイプあたりかなと思って書きました。間違っていたらすみません

Answer 1

JavaScriptのプロトタイプを学習すればよろしいでしょうか？

はい、JavaScriptのprototypeの知識が必要です。

jQueryっぽい簡易JavaScriptライブラリを作成するための
サンプルコードを書いてみました。

SHIVAさんなら文章で説明するよりも
コードを見ていただければ直感的にご理解いただけるかと。

<div class="first">foo</div>
<div>bar</div>
<div>baz</div>
<script>
var j = function(s) {
  this.value = /^#/.test(s) ?
  [document.getElementById(s.slice(1))] :
  Array.prototype.slice.call(document.querySelectorAll(s));
  return this;
};
var $ = function(selector) {
  return new j(selector);
};
j.prototype = {
  each: function(fn) {
    [].forEach.call(this.value, fn);
    return this;
  },
  size: function(v) {
    return this.value.length;
  },
  html: function(v) {
    return this.each(function(i) {
      i.innerHTML = v;
    });
  }
};
console.log($('div').size());
// => 3

$('.first').html('Hello');
// => <div class="first">Hello</div>

Comments

[SHIVA]

ご回答ありがとうございます。IE対応が必要で、コードがわかりやすかったので
ベストとさせてもらいました。
1つだけわからないことがあります。Array.prototype.slice.callの部分なのですが、
なぜ配列形式じゃないと駄目なのでしょうか？NodeListだとDOMなどの動的なものに対応できないからでしょうか？よろしくお願いいたします

Answer 2

Internet Explorer: 9+

Browser Support | jQuery

とあるように、恐ろしいことにjQueryはIE9に対応しています。（1.12以下ならIE6にも対応しています）
なので、レガシーブラウザ対応の勉強をするつもりではないなら、そのコードを参考にしないほうがいいでしょう。

よそ様のコメント欄にも書きましたが、個人的にはprototypeはレガシーだと思っていますので、class構文を学んだ方がいいと思います。

Answer 3

今知るべきはクラスの概念だと思います。

jQueryでその書き方ができるのは、jQueryが必ずjQueryのオブジェクトを返すからです。
望んでいる書き方で、sizeが所属しているクラスがjQueryクラスにあたります。

jQueryっぽい書き方を再現しようとすると、わずかに一つ、sizeを再現するためだけでも、クラスから構築する必要があります

Comments

[miyabi_pudding]

横槍失礼します。
JavaScriptはプロトベースなので、あくまでJavaScriptでやるなら、まっすぐプロトタイプでいいかなとは思いますけどね・・・。（クラスベースとは、随分仕様ややり方が違ってくる）
概念的には、確かにクラスの考え方も必要かと思いますが、そこは概念でいうならオブジェクト指向の概念と言った方がいいような気もします。もちろん、クラスベースな書き方はES6以降の今ならできますが。
細かい部分失礼しました。

[Lhankor_Mhy]

横槍の横槍失礼します。
ブラウザのES6対応がおおむね済んでいる現状では、class構文ではなくprototypeを直接操作するのはレガシーだと、個人的には思います。

[miyabi_pudding]

Lhankor_Mhyさん>確かに・・・。その通りですね。
かくいう私自身が、業務では、IEのサポート必須で、ES6対応がなかなか進められない状況ですが（ポリフィルも導入困難）、
個人的なものに関しては、class構文始めES6以降での構築をしてます。
papinianusさん、大変失礼しました。

[Lhankor_Mhy]

> IEのサポート必須
ああ、それは……
お疲れ様です。

[miyabi_pudding]

Lhankor_Mhyさん>
こう言っちゃうと言い訳なんですが、IEのサポート（ユーザーが3割以上いて無視できない）のおかげで、技術にめちゃくちゃ遅れを感じています　泣
なので、個人的にでも、勉強してガリガリやらんとって思ってやってます。

[papinianus]

色々な意見があること(それが業務バックグラウンドをもって語られること)は少ないここの利点だと思うのでぜひともご指摘ください
できれば、参考にすべきでないと思われた場合はマイナスしてください(初心者のかたも見るサイトなのではっきり順位を下げていただきたいと考えます)。もちろん検討した結果マイナスを取り消していただければなお嬉しいですが。

[miyabi_pudding]

papinianusさん>
いえ、見返し、再考して、このご回答で正しいと思いました。
拝見当初からクラスとインスタンスの概念で、JSの構文も含め、そうだとは思っていました。
どうにも私自身、言葉遊びに走ってしまっていたようです。
大変失礼しました。

Answer 4

jQueryのように$がオブジェクトを返すのであれば必ずしも
prototypeに頼る必要はありません。
（もちろん頼ってもよい）

sample

<script>
var $$=function(selector){
  var arr=[];
  var obj={};
  if(typeof selector=="object" && selector instanceof HTMLElement){
    arr=[selector];
  }else{
    arr=[].map.call(document.querySelectorAll(selector),function(x){return x});
  }
  obj={
    "length":arr.length,
    "size": function(){return this.length;},
    "eq":   function(x){return $$(this[x]);},
    "text": function(x){
      if(x==null){
        return this[0]?this[0].textContent:null;
      }
      for(var i=0;i<this.length;i++){
        this[i].textContent=x;
      }
      return this;
    },
  };
  arr.forEach(function(x,y){obj[y]=x});
  return obj;
}
window.addEventListener('DOMContentLoaded', function(e){
  console.log($$('.sample1').text());
  console.log($$('.sample1').eq(1).text());
  $$('.sample2').text('xxx');
  $$('.sample2').eq(2).text('yyy');
  console.log($$('.sample3').text());
  console.log($$('.sample3').eq(3).text());
});
</script>
<div class="sample1">aaa</div>
<div class="sample1">bbb</div>
<div class="sample1">ccc</div>
<div class="sample2">aaa</div>
<div class="sample2">bbb</div>
<div class="sample2">ccc</div>

Answer 5

何を目的としているのかが少々分かりにくいですが、まずは勝手な事をやってないでソースを読むべきです。

まぁ、少し複雑で分からない、というのなら
「jQueryプラグインを自作するには？」とかのキーワードで検索してみるといいのではないでしょうか？

JavaScriptの綺麗な書き方、とかそういうのを考えているのなら、古いですがprototype.jsを読む、というのが個人的にはいいかと思います。
今のJavaScript全般を学ぶのには時代遅れのようですが。

Answer 6

class構文を使ったうえで、
jQueryのような使用感でとするならば、下記でいかがでしょうか。

(function(){

class libDomSingle {
  constructor(selector){
    this.ELM = document.querySelectorAll(selector);
  }
  size(){
    return this.ELM.length;
  }
// あとはここに各種メソッド追加していく。メソッドチェーンさせる場合は、必ず、メソッドの最後で、return this;を入れる
}
class libInnerCollection {
  constructor(){
    this.DOMLIST = {};
  }
}
const innerListInstanse = new libInnerCollection();
Object.defineProperty(window, '$', {value: function(selector){
  if (typeof innerListInstanse.DOMLIST[selector] == 'undefined') {
    innerListInstanse.DOMLIST[selector] = new libDomSingle(selector);
  }
  return innerListInstanse.DOMLIST[selector];
}});

})();

もっとスマートな書き方あるとは思いますが・・・。

Comments

[SHIVA]

コードありがとうございます。
私の業務では、IE対応が必要なのでプロトタイプにベストさせてもらいました。すみません。
しかし、class構文を調べたところ、プロトタイプより全然(記述が)簡単にできるのに感心しました。
プロトタイプを学んだあとすぐにクラスでも同じことをしてみようと思います。

[miyabi_pudding]

うぁ、IE対応ですか・・・。
非常に痛み入ります。
私の会社でも、IEサポート、まだまだ抜けれない状況なので、その辛さはよくわかります・・・。
ポリフィルとか使えばIEでもいけますが、導入困難な場合がありますので、致し方ないかと思います。
そうですね、業務で使えない状況なら、自分で勉強するしかないですよね。