Progateで html/cssを一通り学んだら、次はjQueryに手をつけるのがおススメです。
html/cssをしっかり学んだ上で進めてくださいね。
javascriptでも良いのですが、jQueryの方が簡単でとっつきやすいです。
この記事ではjQueryの概要とProgateでのjQuery初級編攻略Tipsをまとめました。
html/cssまでの学習でコードを記述する基礎は身についているものとしますので、今回はjQueryの概要に絞ってお話しします。
progate以外でもjQueryを学習中の初心者さんでも読めるようにまとめてありますので、参考にしていただけると幸いです。
jQuary とは？
マークアップ言語の中でもアニメーションを得意とする言語のひとつ。正確にはJavascriptのライブラリの１つです。
Javascriptでできることをより簡単な記述で実装できるので初心者にもわかりやすいです。
ブログやHP・LPなどでよく見かける演出がおおむね実装可能になります。
一般の方が見たときに
あ、カッコいい
と思えるサイトを手っ取り早く作るならこれです。
jQueryを書く際に気をつけること
事前準備が必要
index.htmlのheadタグ内に「jQueryを使わせてください宣言」の一行を張ります。
jQueryは新たにscript.jsファイルを用意しそこに書いていきます。これを読みだす宣言も必要です。
bodyタグ終了直前の位置に以下の1行を張ります。
一応張っておきますが覚える必要はありません。コピペでOKです。
次に「～.js」というファイルを作り、そこに記述していきます。
最も大枠としてこれを用意します。
jQueryの記述
});
この中にjQueryを書かないと反映されません。
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語目にあたる部分の冒頭がほとんど大文字になっています。
これらはすべて小文字で書くと認識されないので注意しましょう。
セレクタ名などくくる際はシングルクォーテーション
jQueryでは“ダブルクォーテーション “よりも‘シングルクォーテーション‘が好まれます。
jQueryの書き方
$(‘場所’).どうする;
最も基本的な書き方です。何か演出を与えたいときはこの書き方に終始します。
演出名をメソッド、演出時間を引数と言います。
メソッドは先ほどご紹介した fadeIn,fadeOut,slideUp,slideDown など多岐に渡ります。
jQueryでCSSを変更する
jQueryでもCSSを書くことができます。後で習う条件分岐を駆使すれば
ボタンを押したときにこっちのCSSにしてね
みたいな演出が可能です。
演出名の後には演出時間ではなく「何をどうする」のニュアンスが続きます。カンマ(,)で区切るのを忘れずに。
厳密には「設定名」と「値」ですが、わかりにくくなるのでここでは割愛します。
「セレクタ名（場所）」に対して「何を」「どうする」です。
例えば文章の文字色を青くしたいときは
となります。
textイベント、htmlイベント
中身を丸々変更してしまう記述です。
$(‘#id名’).html(‘タグを含む文章’)
文字だけの時はtext、タグを含めるときはhtmlを使います。
クリック(click)イベント
セレクタ(id)がクリックされたときに、演出を付加させる記述です。
演出内容
});
後半カッコが多いので一瞬混乱しますが、色で区分けするとわかりやすくなりますね。
一列に書くとこうなります。
thisは「これ」がどこを指すか理解する
「これ」という意味ですが、クリックされたところのことだと思ってください。
li や img など1ページに複数登場することが多い要素に対してclickイベントが設定されていたとします。
以下のコードを走らせてみます。
$(‘this’).css(‘border-radius’,’10px’);
})
ページ内の画像をクリックすると角が丸くなるという記述ですが、クリックされた画像のみ適応されます。
画像が5枚あるページなら、1つクリックすると1画像の角が丸くなるわけです。
this部分をimgに置換すると5枚一気に角が丸くなる結果が得られます。
変数宣言 var
これにより、変数名をオブジェクト名として使用できます。
オブジェクト名は $(‘#footer-logo’) みたいなやつです。変数名はなんでも良いですが、慣例として$を冒頭につけることになっています。
変数名を短くわかりやすくすることで、処理の高速化とコードが見やすくなる効果が得られます。
変数・オブジェクト共に$が出てきたり、””や（）でくくってたりと混乱しますが、まずは右から左のニュアンスを理解してください。
オブジェクト名を変数名に代入するイメージです。
findとchildrenメソッド
$(‘親要素’).children(‘子要素’).css(何をどうする);
findは親要素に対して一つ下の子要素すべて、childrenであれば直下の1つだけを拾います。その続きに追加でjQueryを記述すれば限定的な演出が可能になります。
子要素として拾った内容は、大抵CSSの変更記述に続くことが多いですが、メソッド系の記述でもなんでもOKです。
hoverイベント
function(){
マウスが乗った時の演出
},
function(){
マウスが離れた時の演出
}
);
ほとんどの場合、2つの記述は酷似します。
マウスが乗った時の記述が書けたら、それをコピペしておき離れた時の記述はコピペしたものをリライトすると早く正確に書けます。
