こんにちは。ノア子です。

今日はライブラリについて学びましょう！
記事の画像を見てみましょう。図書館は本がたくさん詰まっていますね。どれを読んでみようかな？

プログラミング言語におけるライブラリは、便利なプログラムの部品がたくさん収められているファイルのことです。

自分がやりたい処理をしてくれるプログラムを、イチから全部記述するのは骨が折れますよね。特に初心者だと正しい処理を書くまでに時間も手間もしっかりとかかってしまいます。

実はそのプログラムを、とっても親切な人が作ってくれているものがライブラリです。あなたが頑張って全部コードを書かなくても、僕が代わりにかんたんに書ける道具を作っておいたよ！ということです。

本も一緒ですね。
いろんな論文を読んだり、あちこちに行って調べたり、わかる人に聞いたりしなくても、本を手に取って読めば、だれでも情報を使えるようにまとめてくれているものです。

一例として、jQueryというライブラリをご紹介します。

jQueryは、2006年にJohn Resig（ジョン・レシグ）氏が開発したJavaScriptのライブラリです。同じ処理をするJavaScriptのコードを、短い量で簡単に記述できるのがjQueryです。

JavaScriptのコード例

window.onload = function () {

  var $openModal = document.getElementsByClassName("js-modal-open");

  let $closeModal = document.getElementsByClassName("js-modal-close");

  for( var $i = 0; $i < $openModal.length; $i++ ) {

    $openModal[$i].onclick = function (event) {

      event.preventDefault();

      var $target = this.dataset.target;

      var $modal = document.getElementById($target);

      $modal.classList.add('open');

    }

  }

  for( var $i = 0; $i < $closeModal.length; $i++ ) {

    $closeModal[$i].onclick = function (event) {

      event.preventDefault();

      this.closest(".js-modal").classList.remove('open');

    }

  }

}

うわ！18行もあります！なんだか、横に長い。
同じような記述も複数ありますね。
ちなみにWebページのある部分をクリックすると、モーダルウィンドウが表示される処理です。HTML／CSS部分は割愛します。

こちらをjQueryで記述すると、どうなるでしょうか？

jQueryのコード例

$(function(){

  $('.js-modal-open').each(function(){

    $(this).click(function(){

      var target = $(this).data('target');

        $("#" + target).addClass("open");

        return false;

    });

  });

  $('.js-modal-close').click(function(){

    $('.js-modal').removeClass("open");

      return false;

  });

});

5行減って13行になりました。横の長さも半分くらい？

引用元：Javascript、JQueryコード比較。 - Qiita

どうでしょうか？jQueryの方が、文字の量が半分くらいになって、見た目もシンプルですね。
初めてプログラミング言語を勉強する方は、jQueryから学習するのをオススメします。簡単だからです。

★もっと知りたい人用★

JavaScriptの2行目のコードから、クラス属性に js-modal-open という名前がつけられた要素を呼び出す記述を抜き出してみました。

document.getElementsByClassName("js-modal-open");

説明すると
ブラウザに読まれたWebページの中から・クラス名が次の要素を指定する・ js-modal-open という名前
となります。
jQueryだと2行目のこれだけで済みます。

$('.js-modal-open')

素晴らしいですね。John Resig氏、jQueryを開発してくれてありがとうございます。
jQueryのほうにある $() はjQueryの関数です。jQueryのルールで処理してね、という指示になります。jQuery() と同じ意味ですね。

NOa Infinityのエンジニアカリキュラムでは、HTML／CSSの学習後にすぐjQueryを学ぶことができます。

今日の記事はインプットでしたが、カリキュラムはアウトプット中心の構成になっています。
初心者でも、ちゃんとコードを打てるようになります。というか、コードを打たないと課題が進まないようになっています。

私でも出来るかな？仕事が取れるようになるって本当？などなど
先輩エンジニアの声が聞いてみたい方は、ぜひご連絡ください！