【初級編2】javascriptのAPIライブラリ jQueryを使ってみよう

javascript

実践編プログラムの第二弾です!
前回はjavascriptを利用した内容でしたが、今回はjavascriptを簡単に利用できるようにしたAPI「jQuery」を紹介

本記事の対象者

HTMLとCSSの基本が分かる方で、javascriptの言葉を聞いたことがあるというかた対象です。

注意事項:技術力の高い人は今更jQueryと思われるかもしれません。SPAなどangular / React / Vueなどを!と思われるかもしれませんが、それは後々掲載していきます。

jQueryとは

jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。

引用元:Wikipedia

なんと、13年前にすでにリリースされているんですね。私がプログラム始めた時期と同じくらいです。。。

jQueryのすごいところ

jQueryはjavascriptを簡単に利用できるようにしたAPI(フレームワーク)であり、WEBエンジニア経験者はほぼ触ったことがあるんじゃないでしょうか?そんなjQueryの簡単な実演から。

javascript / jQuery 実演

<html> <body>
<div id="hoge">テスト文字列</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
// ここが通常のjavascript
document.getElementById('hoge').style.color = "red";

// ここがjQuery
$('#hoge').css("color","red");
</script>
</body>
</html>

javascript / jQuery 解説

idにhogeが入った要素の文字を赤くするプログラムです。
どちらのjavascriptプログラムも body内のhogeというidを指定して、赤文字に装飾するという指令を出していますが、文字数でいうと

jQuery: 30文字
javascript: 50文字

の20文字の差分が出てきます。
これはdocument.getElementById(‘hoge’)というセレクタ(HTML文章の特定箇所)を指定してる部分とstyle.color = “red”;という要素指定(今回は色)をしているのですが、jQueryを使うことによってすごく簡単にセレクタを指定して、変更命令を出すことが可能になります。

jQueryの使い方 参考URL一覧

jQuery 日本語リファレンス
jQueryの日本語リファレンスサイト。だいたい最新版の、ほぼ全てのAPIを網羅。ほとんどのAPIにサンプルコード付き。

昔からお世話になっている参考サイトです。ただ更新が止まっているのが残念です。。。でも上記ページの内容は今でも実用可能です。

jQuery本家のサイトです。jQueryに必要な知識はここで全て学べます。

jQueryに必要な知識について

jQuery必要知識
  • セレクタ
  • イベント
  • 要素の変更

これだけを覚えれば、あるタグ(セレクタ)にイベント(クリック・マウスオン)をしたら要素変更(色変更)をするといった実現が可能です。

ではこの3つのポイントを抑えたjQueryを書いてみましょう。

<html> <body>
<div id="hoge">テスト文字列</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>

// ここがjQuery
// id=hoge選択
// クリックすると(イベント)
// 文字が大きくなる。
$('#hoge').on("click",function(){
  $(this).css('fontSize','20px');
});
</script>
</body>
</html>

これだけで動的な仕組みができるようになります。文字変更だけでなく、色変更などもご自身で工夫されて色々試すのもありです^^

まとめ

まとめ
  • jQueryAPIを使って学習しよう
  • jQueryを使えば入力文字数も減り捗るよ
  • 基本は「セレクタ」「イベント」「要素」を覚えること

Ads フリーランスの手始めにココナラで出品挑戦

ココナラでは自分のスキルを売り買いすることができます。

特化したスキルを生み出せば最低500円〜自分の金額設定でスキルを売ることが可能です。例えばホームページの修正など。フリーランスの第一歩として手始めにやってみるのもありかも!

コメント

タイトルとURLをコピーしました