デイトラWeb制作中級編 Day4～6『jQuery』学習記録

Day4～6で学んだこと「jQueryの基礎」

【Day4】jQueryを学ぼう

jQueryとは

JavaScriptのライブラリで、JavaScriptをより簡単に記述できるようにしたもの

jQueryを使うメリット

1. 短いコードで簡単にかける
2. ブラウザごとの対応がいらない
3. 便利なライブラリがたくさんある

jQueryの書き方

①jQueryのライブラリー本体を読み込む

• jQueryのCDN
• GoogleのCDN
• MicrosoftのCDN

3つのうちどれか1つのタグを</body>の直前に書く。

//jQueryのCDN
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
 
 
//GoogleのCDN
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
 
 
//MicrosoftのCDN
 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>

②プログラムを書いていく

(例)h2の 文字を“デイトラ”に変える

$(function() {
$('h2').text('デイトラ');
}); 

普通のjsで書いた場合↓

document.getElementByTagName(‘h2’).innerText = ‘デイトラ’

セレクタの指定の仕方3パターン

■タグ名で指定する
$(“h2”)

■クラス名で指定する
$(“.lead”)

■ID名で指定する
$(“#js-for-web”)

メソッド一覧

find()メソッドとchildren()メソッド

.find(‘セレクタ’)：子孫要素全体から探してくる

.children(‘セレクタ’)：対象要素の直属の子要素から、セレクタに該当するものを取ってくる

イベント処理

$(‘セレクタ’).イベント名(function(){ });
という構文で書く。

(例1)クリックされたときに何か処理を追加したい場合
$(‘セレクタ’).click(function(){
//ここに処理を書く
});

(例2)スクロールしたときに何か処理を追加したい場合
$(‘セレクタ’).scroll(function(){
//ここに処理を書く
});

アニメーション処理

アニメーション一覧
https://api.jquery.com/category/effects/

・スライドのように開閉して表示

$('#service-title').hover(
function(){
$('#register').slideUp();
},
function(){
$('#register').slideDown();
}
);

・フワッと浮き上がる表示

$('#service-title').hover(
function(){
$('#register').fadeIn();
},
function(){
$('#register').fadeOut();
}
);

【Day5】jQuery実践課題①

課題①：ドロワーメニューの実装

「slideToggle」を使って実装する。

「.slideToggle(“fast”)」や「.slideToggle(“slow”)」、「.slideToggle(200)」などでアニメーションの早さを変えれる。

課題②：ページトップへ戻るボタンを付ける

「scrollTop」を使って実装する。

【Day6】jQuery実践課題②

課題③：モーダルで画像の拡大表示

「attr」または「prop」を使って実装する。

jQuery注意点、学習方法

仕事において「自作 = 正義」ではない

調べれば簡単に実装できるコードを、数時間〜数日かけて自作する行為は無駄。

スキルアップは実務でせずに個人の時間でやる。

プログラマーの実装力とは「＝書ける力」ではなく、「調べれば作れる力」も含めて”実装力”。

どんどん調べて、カンニングして、使えるコードは再利用していくのが正解。

エンジニア向けメモ帳『Boostnote』

『Boostnote』を利用し、一度書いたコードは、手持ちのカードとして使い回す。

アニメーション実装の引き出しを増やす方法

1. ググって出てきたコードをマネする
2. 良いサイトを見つけたらデベロッパーモードでソースコードを読む
3. テンプレートを購入し、ソースコードを読む
4. CodePenなどで検索したコードをマネする
   
   ※使えるコードを見つけたら、『Boostnote』に写しておく

まとめ

モーダルの実装に少々手こずりました。

上手く実装できた時はとても嬉しかったです！

ググって、理解して、カスタマイズして、この繰り返しが大切なんだなぁと実感しました。