Progate jQuery 初級編 学習コース攻略Tips【習うより慣れろ】

Progateで html/cssを一通り学んだら、次はjQueryに手をつけるのがおススメです。

html/cssをしっかり学んだ上で進めてくださいね。

Progate html/css 初級編 学習コース攻略【初心者向けに解説】
詰まった際の参考にどうぞ

javascriptでも良いのですが、jQueryの方が簡単でとっつきやすいです。

この記事ではjQueryの概要とProgateでのjQuery初級編攻略Tipsをまとめました。

html/cssまでの学習でコードを記述する基礎は身についているものとしますので、今回はjQueryの概要に絞ってお話しします。

progate以外でもjQueryを学習中の初心者さんでも読めるようにまとめてありますので、参考にしていただけると幸いです。

jQuary とは?

マークアップ言語の中でもアニメーションを得意とする言語のひとつ。正確にはJavascriptのライブラリの1つです。

Javascriptでできることをより簡単な記述で実装できるので初心者にもわかりやすいです。

・ボタンを押すと画像が下から出現する
・ボタンを押すとゆっくり文字が浮かんでくる
・カーソルを重ねるとメニューが飛び出す

ブログやHP・LPなどでよく見かける演出がおおむね実装可能になります。

一般の方が見たときに

あ、カッコいい

と思えるサイトを手っ取り早く作るならこれです。

jQueryを書く際に気をつけること

事前準備が必要

index.htmlのheadタグ内に「jQueryを使わせてください宣言」の一行を張ります。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>

jQueryは新たにscript.jsファイルを用意しそこに書いていきます。これを読みだす宣言も必要です。

bodyタグ終了直前の位置に以下の1行を張ります。

<script src=”script.js”></script>

一応張っておきますが覚える必要はありません。コピペでOKです。

次に「~.js」というファイルを作り、そこに記述していきます。

最も大枠としてこれを用意します。

$(function() {
  jQueryの記述
});

この中にjQueryを書かないと反映されません。

GEN
GEN

functionはfuncitonに入力ミスしやすいので注意しましょう(自戒

ここまでできれば後はjQueryを書きまくるだけです!

中級で改めてやりますが、初級を周回する中でも「これらは用意されているもの」という認識は持ちつつ進めてください。

classではなくidを使う

これまでタグに名前をつけて細分化する際には class=”~” を使ってきました。

しかしjQueryではid=”~”が良く使われます。classでも動かなくはないのですが、 idの方が処理が高速化されるのでこちらをおススメです。

また、idはclassと違って1ページ1回しか使えません。 html中級編のようにbtn クラスを連続して使うといったことはできないので注意です。

プロパティをCSSやjsファイルで記述する際にも違いがあります。classの際は「.class名」でしたがidについては「#id名」で始めます。

意外なところに大文字がある

jQueryの記述は2語を1語にくっつけて表現したものが多いですが、2語目にあたる部分の冒頭がほとんど大文字になっています。

fadeIn,fadeOut,slideUp,slideDown,

これらはすべて小文字で書くと認識されないので注意しましょう。

セレクタ名などくくる際はシングルクォーテーション

jQueryではダブルクォーテーション よりもシングルクォーテーションが好まれます。

jQueryの書き方

$(‘場所’).どうする;

最も基本的な書き方です。何か演出を与えたいときはこの書き方に終始します。

$(‘セレクタ名’).演出名(演出時間);

演出名をメソッド、演出時間を引数と言います。

メソッドは先ほどご紹介した fadeIn,fadeOut,slideUp,slideDown など多岐に渡ります。

jQueryでCSSを変更する

jQueryでもCSSを書くことができます。後で習う条件分岐を駆使すれば

ボタンを押したときにこっちのCSSにしてね

みたいな演出が可能です。

$(‘セレクタ名’).css(‘何を’, ‘どうする’);

演出名の後には演出時間ではなく「何をどうする」のニュアンスが続きます。カンマ(,)で区切るのを忘れずに。

GEN
GEN

厳密には「設定名」と「値」ですが、わかりにくくなるのでここでは割愛します。

「セレクタ名(場所)」に対して「何を」「どうする」です。

例えば文章の文字色を青くしたいときは

$(‘p’).css(‘color’,’blue’);

となります。

textイベント、htmlイベント

中身を丸々変更してしまう記述です。

$(‘#id名’).text(‘文章’);
$(‘#id名’).html(‘タグを含む文章’)

文字だけの時はtext、タグを含めるときはhtmlを使います。

クリック(click)イベント

セレクタ(id)がクリックされたときに、演出を付加させる記述です。

$(‘#id名’).click(function(){
 演出内容
});

後半カッコが多いので一瞬混乱しますが、色で区分けするとわかりやすくなりますね。

一列に書くとこうなります。

$(‘#id名’).click(function(){演出内容});

thisは「これ」がどこを指すか理解する

「これ」という意味ですが、クリックされたところのことだと思ってください。

li や img など1ページに複数登場することが多い要素に対してclickイベントが設定されていたとします。

以下のコードを走らせてみます。

$(‘img’).click(function(){
$(‘this’).css(‘border-radius’,’10px’);
})

ページ内の画像をクリックすると角が丸くなるという記述ですが、クリックされた画像のみ適応されます。

画像が5枚あるページなら、1つクリックすると1画像の角が丸くなるわけです。

this部分をimgに置換すると5枚一気に角が丸くなる結果が得られます。

変数宣言 var

var 変数名 = オブジェクト名;

これにより、変数名をオブジェクト名として使用できます。

オブジェクト名は $(‘#footer-logo’) みたいなやつです。変数名はなんでも良いですが、慣例として$を冒頭につけることになっています。

変数名を短くわかりやすくすることで、処理の高速化とコードが見やすくなる効果が得られます。

変数・オブジェクト共に$が出てきたり、””や()でくくってたりと混乱しますが、まずは右から左のニュアンスを理解してください。

オブジェクト名を変数名に代入するイメージです。

findとchildrenメソッド

$(‘親要素’).find(‘子要素’).css(何をどうする);
$(‘親要素’).children(‘子要素’).css(何をどうする);

findは親要素に対して一つ下の子要素すべて、childrenであれば直下の1つだけを拾います。その続きに追加でjQueryを記述すれば限定的な演出が可能になります。

子要素として拾った内容は、大抵CSSの変更記述に続くことが多いですが、メソッド系の記述でもなんでもOKです。

hoverイベント

$(‘セレクタ’).hover(
 function(){
マウスが乗った時の演出
 },
 function(){
マウスが離れた時の演出
}
);
乗った時の演出と離れた時の演出は分けて記述します。

ほとんどの場合、2つの記述は酷似します。

マウスが乗った時の記述が書けたら、それをコピペしておき離れた時の記述はコピペしたものをリライトすると早く正確に書けます。

Progate jQuery 中級編 学習・道場コース攻略Tips【モーダル hover アコーディオン】
LPでよく使う実装が多めです。
プログラミング
GENをフォローする

GENのプロフィール

(Youtubeにて毎週生放送中)

意識の低いIT自営業7年目。ネットを用いた物販・広告・金融業が得意。2020年はかねてより準備していたプログラミング(マークアップ・コーディング)の発信を開始。 twitterはこちら

禿げてもええやないか!スキンヘッド男道
タイトルとURLをコピーしました