どうも7noteです。これからjavascriptやjQueryを使いたい方向けの記事です。

WEBサイトの制作で、動きを付ける時に「javascriptを使ったらいいよ」とか「jQueryで書いたらいいよ」など書かれた記事を目にすることがあります。

「でも何が違うの？？？」

私も始めたての頃、javascriptとjQueryの違いがよくわからず躓いた経験があります。
その経験から、使えるようになるまでの道のりを5分で解説していきたいと思います。

関連用語の説明

javascriptとjQueryの一番の違い

まず大前提として、javascriptはプログラミング言語であり、jQueryはjavascriptのライブラリである。これが最も大きな違いです。そもそも比較されることがおかしいということです。

ではなぜ混同しまうことがあるのか。それはjQueryがjavascriptのライブラリだからです。
実はjavascriptでもjQueryでも同じ処理ができます。そのため、「アコーディオンをjavascriptで実装したい！」と思って検索しても、「javascriptの書き方」と「jQueryでの書き方」の両方がヒットしてごちゃごちゃになってしまう現象に陥ります。
javascriptに慣れていない人から見ればソースを見てもどちらも同じに見えてしまうんですよね。
コピペで使うのにもハードルがある・・・

javascriptとjQueryの見分け方

では区別をするためにはどうしたらよいのか。

検索した時に「jQueryを使って○○する方法」と丁寧に書かれていれば、基本jQueryでの書き方です。
それでも書いていなかったリ分からない場合も多いと思うので、ざっくり見分ける方法は以下の2種類です。

・ソースにドルマーク「$」が入っているならjQuery。
・「document.～～」って書いている場合はほぼjavascript。（jQueryが使われていない）

javascriptの記述例

(function(window,document){
    var _toggleMenuButton = document.getElementById('toggleMenuButton');
    var _toggleMenu = document.getElementById('toggleMenu');
    var _clientH;
    init();
    function init() {
        _toggleMenu.style.height = 'auto';
        _clientH = _toggleMenu.clientHeight;
        _toggleMenu.style.height = '0px';
        _toggleMenuButton.addEventListener('click',function(){clickToggle();},false);
    }
    function clickToggle() {
        var lastH = _toggleMenu.style.height;
        _toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
    }
})(window,document);

jQueryの記述例

$(function(){
  $("#acMenu dt").on("click", function() {
    $(this).next().slideToggle();
  });
});

上の例はどちらもアコーディオンを実装する処理ですが、ここまで述べた特徴が分かりやすくでているかと思います。
jQueryの方ではドルマーク「$」が使われており、プログラムの行数も短く済んでいることが分かると思います。

jQueryって何者？

「javascriptのライブラリで有名なものの一種」です。
ライブラリには様々な種類があり、jQuery以外のjavascriptのライブラリもあります。

他のものに例えてjQueryを説明すると・・・

・javascript（プログラミング言語）　⇒　日本語
・jQuery（ライブラリ）　　　　　　　⇒　辞書（言葉）

50音や漢字やひらがなを使って私たちは会話をしています。これは日本語です。
会話をするときには、様々な言葉を使っています。

「川」は日本語であり、言葉です。「あいうえお」というのは日本語ですが、言葉ではありません。
川という言葉がない時に川を説明しようと思うと、「つめたいみずがながれてきていてしょっぱくなくて～～～」というようにとても長い説明になってしまいます。
ですが、そのようなものを「川」という言葉として定義し、共通の認識を持つことで「川に行く」というだけで相手に伝わります。

つまりjQueryとは、このような言葉がたくさん詰まった辞書のようなものであり、辞書（ライブラリ）を使うことで、効率よく分かりやすくjavascriptを使うことができるものになります。

そのため、javascriptでも同じことはできますが、簡単にわかりやすくjavascriptを使えるようにしようとしたものがjQueryです。

jQueryの使い方

機械（パソコン）にはいま何の言語が使われているのかを自動で判断することはできません。javascriptで書かれているファイルであれば、拡張子に「.js」と付ける必要があります。

同様にjQueryも同じです。プログラミングファイルの中に、「いまからjQuery使うよ！」と宣言をする必要があります。要は事前に辞書を渡しておく必要があるのです。

jQueryを読み込む処理をプログラミングファイルの中に書く方法は大きく分けて2種類あり、「ローカルのjQueryを読み込む」か「ネットに上がっているjQuery」を読み込む方法があります。

ローカルのjQueryライブラリを読み込む

1. まずはローカル（自分のパソコン内）にjQueryライブラリをダウンロードします。

jQuery公式ダウンロードページ：https://jquery.com/download/

「Download the compressed, production jQuery 3.〇.〇」と書いている場所の上で右クリックをし、「名前をつけてリンク先を保存」とします。これでローカルにjQueryのファイルを用意できました。

2. htmlファイルを作成し、同じディレクトリに先ほど保存したjQueryのファイルを入れておきます。

3. htmlファイルのhead部分(jQueryの処理を書く前なら違う場所でもOK)に以下の1行を書きます。

<script type="text/javascript" src="./jquery-3.〇.〇.min.js"></script>

インターネット上にあるjQueryライブラリを読み込む

1. htmlファイルのhead部分(jQueryの処理を書く前なら違う場所でもOK)に以下の1行を書きます。

<script src="https://code.jquery.com/jquery-3.〇.〇.min.js"></script>

〇の場所には希望のバージョンの数字を入力してください。（2024年現在の最新は3.7.1）

これで、jQueryを使うことができます。あとはhtmlファイル内に<script>～jQueryの処理～</script>とするか、別で.jsファイルを作成して、その中にjQueryで書かれた処理を書くことで使用できます。

プラグインとは？

関連する言葉でプラグインというものがあります。jsプラグインとか、jQueryプラグインなんて呼ばれています。
プラグインとは日本語で「拡張機能」という意味が一番近いと思います。日本語の通り、機能を拡張するものです。
自分で自作するには難しい処理や、複雑な処理を簡単に使えるように改良されたツールで、これらを読み込むことで開発の効率化や幅を広げることができます。
個人や法人の方がjavascriptやjQueryを使って開発しており、無償で提供・公開されていることがほとんどなので、使えるものはぜひ使ってみてください。

まとめ

・javascriptのライブラリの一種がjQuery。
・jQueryとは、javascriptを簡単に分かりやすく使えるようにしたもの。
・jQueryを使うためには、事前にjQueryライブラリを読み込ませる必要がある。
・検索して出てきたソースに「$」がついていたらjQueryで書かれたもの。「document.～～」と書かれていたらjavascriptで書かれたもの。（両方併用も可能なので注意。）
・jsやjQueryで開発された拡張機能（プラグイン）が存在する。

超初心者に伝わりやすいように、粉々にかみ砕いたものを独自の解釈で記述しているため、本来の意味と若干の差異があるところがあるかもしれませんがご了承ください。
今回はWEB周りを中心にjavascriptの解説を行いましたが、javascriptができることは他にもいろいろあるので、興味のある方はぜひプログラミング本を買ってみたり、無料の学習サイトなどで勉強してみてください！

javascriptの学習が無料でできるサイト

・ドットインストール
・とほほのWWW入門
・Progate

おそまつ！