2024.12.30 2024.12.30

【初心者必見！】JavaScriptとjQueryのキホンのキホン

juru

じゅる

どうも！フリーランスエンジニアのじゅるです！

今回は、ウェブ制作に欠かせない「JavaScript」と「jQuery」について、初心者の方にもわかりやすく解説します。

HTMLやCSSを勉強して、ウェブサイトを作れるようになったけれど、「もっと動きをつけたい！」「クリックしたら何か変化が起こるページを作りたい！」と思ったことはありませんか？
そんなときに登場するのがJavaScriptとjQueryです。

この記事を読めばわかること

さっそく見ていきましょう！

JavaScriptとは？

おさるくん

JavaScriptって聞いたことあるけど、何をするもの？

JavaScriptは、ウェブページに「動き」を加えるためのプログラミング言語です。

例えば、以下のようなことができます。

Javascriptでできること

じゅる

HTMLが「建物の骨組み」、CSSが「デザイン」なら、JavaScriptは「動く仕掛け」みたいなものやね！
マスターすれば、ゲーム開発もできるで！

おさるくん

じゃあjQueryってJavaScriptと何が違うの？

jQueryは、JavaScriptをもっと簡単に使えるようにしたライブラリ。つまり「便利な道具箱」です。JavaScriptを書くのはちょっと難しいですが、jQueryを使うと直感的に簡単に書けるようになります。

例えば、「クリックしたら文字を変える」コードを比較してみましょう。

document.getElementById('button').addEventListener('click', function() {
    document.getElementById('text').innerText = 'こんにちは、世界！';
});

$('#button').click(function() {
    $('#text').text('こんにちは、世界！');
});

じゅる

jQueryを使うとこんなに短く書けるんやで！

項目	JavaScript	jQuery
難しさ	初心者には少し難しい	比較的簡単
書く量	コードが長くなることがある	シンプルに書ける
柔軟性	何でもできる	特定の用途に便利
学ぶべき順番	基本を知ってからjQueryを使うのが良い	jQueryから入ってもOKだけど、できる範囲は絞られる

おさるくん

jQueryって初心者にやさしいんだね！

2006年：John Resigによって開発。
「Write Less, Do More」（少ないコードで多くのことを）をスローガンにして広まりました。
現在：使用頻度が下がりつつありますが、初心者向けの学習にはまだまだ有用です。

じゅる

正直、jQueryは使用頻度は減っているみたいやけど、まだまだWeb制作では使えるし、jQueryで書かれている現場は多いから学んでおいて損はない！

おさるくん

どこから始めればいいの？

JavaScriptの基本を学ぶ
まずは、JavaScriptで簡単な動きを作る練習をしましょう。
書籍であれば「1冊ですべて身につくJavaScript入門講座」って本がおすすめです。
下にリンクを載せておきますね！広告料はありません！笑
jQueryを触ってみる
JavaScriptのコードを短くする感覚をつかむのに最適です。
ハンズオンで実践
実際にボタンやアニメーションを使ったページを作ってみると楽しいです！
リソースを活用する
- MDN Web Docs
- jQuery公式サイト