【初めてのjQuery】JavaScriptライブラリのjQueryとは！？

こんにちは！キャメルコードブログ、通称キャメコーブログのキャメルです！

今回はJavaScriptのライブラリ「jQuery」について解説をしていきます。

jQueryを学ぶことのメリットなども交えながら、初めてjQueryを学ぶ方でも理解できるようにわかりやすく解説をしていきますので、ぜひ最後までお読みください^^

jQuery基本のキ。jQueryとは？

そもそもjQueryとは何でしょうか。

それでは基本から理解していきましょう^^

概要を理解しよう

何か新しいものを学ぶときに、その技術が生まれた背景や概要を理解しておくことは大切です。それにより本質を理解することに繋がり、実践にも役立ちます。

作り方を覚えれば料理は作れます。でも、なぜその順番で食材を入れるのか、なぜその調味料を使うのか、その背景を理解していなければ、他の料理に応用はできませんよね。

これと同じで、しっかりと本質を理解していれば

「あ、これはjQueryでも書けそうだな。」

「いや、今回はJavaScriptを使った方が良さそうだな。」

といったように、状況に合わせてどの技術を使うべきかを、自分で考えて決めることができるようになります。

これはただ書き方を知っているだけではできません。

めちゃくちゃ詳しくなる必要はありませんが、最低限の基礎知識は理解しておきましょう^^

ライブラリとは？

jQueryはJavaScriptライブラリです。

ライブラリというのは、特定の機能をまとめたプログラムのことです。

例えば以下のコードを見てみましょう。

-- jQuery -

$('button').click(function() {
  alert('ボタンがクリックされました');
});

このコードは、「ボタンがクリックされた際に ‘ ボタンがクリックされました’ というアラートメッセージを表示する」ものですが、

実はこの裏側ではJavaScriptが動いていて、click()イベントが発生したときに、指定された関数が呼び出されるように設定されています。

このように、ライブラリとはあらかじめよく使う機能を作っておき、使いたいときに呼び出して機能を実行できるプログラムのことです。

なぜjQueryが生まれたのか

さて、ではなぜjQueryができたのでしょうか？

jQueryは当初ブラウザ間でのJavaScriptの処理方法の差異を埋めるために開発されました。

例えば、Internet ExplorerではaddEventListener()がサポートされておらず、代わりにattachEvent()を使用しなければいけなかったため、以下のように書く必要がありました。

-- JavaScript --

var btn = document.getElementById('myButton');

if(btn.addEventListener){
  btn.addEventListener('click', function() {
    alert('ボタンをクリックしました');
  });
} else {
  btn.attachEvent('onclick', function() {
    alert('ボタンをクリックしました');
});
};

このような背景から、jQueryはブラウザ間の差異を吸収し、どのブラウザでも同じように動作するコードを簡単に書けるように開発されました。

ちなみにjQueryで書くとこうなります。

-- jQuery --

$('#myButton').on('click', function() {
  alert('ボタンをクリックしました');
});

めちゃくちゃ簡単になりましたよね。

またjQueryはブラウザ間でも統一されているためブラウザごとに異なるコードを書く必要がありません。

JavaScriptにおけるブラウザ間の差異の大部分は解消されましたが、簡潔なコードで書けるという特徴と、多くの既存プロジェクトで使われているということもあり、現在もjQueryは現場で使われています。

みたいに言われたりもしているみたいですが、

Webサイト制作においては、WordPressにデフォルトでjQueryが組み込まれているということもあり、今後もしばらくは使われ続けるのではないかと考えています。

今必要なら、今学ぶ。新しいものが出てきたらまたそのときに学ぶ。

このような精神で頑張っていきましょう^^

jQueryを使うメリット

jQueryを使う主なメリットはこちら。

コードが短くて済む

自分で0からコードを書く必要がないため、制作のための労力と時間の短縮が可能になります。

またコードが簡素化するため、メンテナンスも楽になります。

学習コストが低い

jQueryはそれほど難しい文法ではないため、始めて学習をする方でもハードルが高くありません^^

しっかり学習すれば、Web制作で使うスキルはそれほど時間をかけなくても身につけることが可能です。

豊富なプラグインが存在する

jQueryには多くのプラグインが存在しており、複雑な機能でもプラグインを利用することで簡単に実装することが可能になります。

jQueryを使うデメリット

パフォーマンスが低下することがある

jQueryはJavaScriptのコード群でできているため、jQueryを使うためにはそのコード群を全て読み込む必要があります。そのため、ページの動作に時間がかかるなどパフォーマンスの低下につながる可能性があります。

新たに書き方を覚える必要がある

JavaScriptの他に、新たにjQuery独自の文法を学習する必要がある。

基本的な書き方を覚えよう

それではjQueryの基本的な記法について解説をしていきます。

今回は初めてのjQueryということで、CSSスタイルの変更とクラス名の追加と削除を例に解説していきます。

それほど難しくないので基本をしっかり押さえつつ、一つひとつ理解していきましょう^^

jQueryの基本的な記法はこちら。

jQuery('主語').動詞('補語')
//以下の書き方でもOK
$('主語').動詞('補語')

それではこれを踏まえて実際にjQueryを使ってみましょう。今回はCSSは省略します。

-- HTML --

<div class="jq">
  <h1 class="jq_title">初めてのjQuery</h1>
  <div class="jq_box">
    <p class="jq_text">こんにちは。これはjQueryの練習です。</p>
    <button class="jq_button" id="jq_button">詳細はこちら</button>
  </div>
</div>

最初の状態はこんな感じ。

CSSスタイルの変更

それではjQueryを使ってタイトルのカラーを変更してみます。

-- jQuery --

$('h1').css('color', 'blue');

変更できましたね^^

という意味になります。基本的な構文は以下。

-- jQuery --

$('セレクタ').css('プロパティ', '値');

プロパティを複数指定することも可能です。やってみましょう。

-- jQuery --

$('h1').css({
  'color': 'green',
  'font-weight': 'bold'
});

//以下の記述でもOK
$('h1').css({
  color: 'green',
  fontWeight: 'bold'
});

複数指定する場合は上記のように書くのですが、上記では2つの方法で記述しました。違いがわかりますか？

プロパティに「’」（シングルクォーテーション）が入っているかどうかです。

「’」を入れた場合にはCSSの記法でいいのですが、「’」を省略する場合には「-」を外して続く文字の頭文字を大文字で書かなければなりません。この書き方をキャメルケースと言ったりしますね。
ラクダのコブのように見えるからキャメルケースと呼ぶそうです^^

ちなみにキャメルコードブログという名前もキャメルケースが由来です^^

クラスを追加・削除する

次はクラスの追加と削除を行ってみましょう。

HTML、CSSを以下のように変更します。

-- HTML --

<div class="jq">
  <h1 class="jq_title">初めてのjQuery</h1>
  <div class="jq_box">
    <p class="jq_text" id="jq-text">こんにちは。これはjQueryの練習です。</p>
    <p class="jq_text jq-accent"  id="jq-text02">こんにちは。これはjQueryの練習です。</p>
    <button class="jq_button" id="jq_button">詳細はこちら</button>
  </div>
</div>

-- CSS --

.jq-accent {
  color: purple;
}

表示はこのようになります。

それでは #jq-text に jq_accentクラス を追加してみましょう。

以下のように書きます。

-- jQuery --

$('#jq_text').addClass('jq-accent');

次はクラスを削除してみましょう。

それでは #jq-text02 から jq_accentクラス を削除してみましょう。

-- jQuery --

$('#jq-text02').removeClass('jq-accent');

まとめ：jQueryの基本を理解して今後の学習を進めていこう

いかがでしたか？今回の記事では以下について解説をしました。

まずは初めの一歩、jQueryについて知り、今後の学習を進めていく助けにしてもらえたらと思います。

大丈夫です。一歩一歩地道に続けていくことで必ずできるようになります^^

ゴリゴリにプログラミングをするならともかく、Web制作で使うjQueryはそこまで難易度は高くないです。よく使うパターンも決まってたりするので、過度に不安にならず着実に学習していきましょう。

このブログでもなるべくわかりやすく、初心者の方でも理解できるように解説していきます。どんどんブラッシュアップもしていきます。

今後もjQueryについて実際の実務で使えるような記事を書いていくので、一緒に頑張りましょう^^

ではまた次の記事でお会いしましょう！それでは！