デイトラ中級Day4 : jQueryの基礎

chapter1 : jQueryとは

jQueryとは、JavaScriptでできることをより簡単な記法で実現できように設計されたJavaScriptライブラリです。

jQueryのおかげで、プログラミングの初心者でもフロントエンド開発に参加しやすくなったそうです(昔を知らんからなんとも言えない)。
とにかくjQueryは初心者にやさしい、とても有用なJavaScriptライブラリだそうです。

僕も実際に使ってみましたが、やさしいかどうかは置いといて初心者ながらとても便利だなと思いました。

chapter2 : iQueryを使うメリット

jQueryを使うメリットは大きく3つあります。

①短いコードで簡単に書ける
例えばJSで書くと30行くらい書かないといけないところを、jQueryを使えば10行くらいで書けます。しかも1行1行がJSに比べて端的です。なのでエラー等の発見が早まりますし、保守性もあがります。

②ブラウザごとの対応が不要
Chrome/Fire Fox/Safariなどブラウザによって仕様が異なるため、通常は各ブラウザごとにコードを記述しなければいけないのですが、jQueryを使えばそれが不要になります。

③豊富なライブラリが用意されている
例えばWebページになにかアニメーション等で動きをつけたい時、自分でいちからコードを作るのではなく、すでに先輩エンジニア方が作ったライブラリがたくさん用意されています。なので難易度もぐっとさがり、初心者ながらもより良い感じの制作物を作れるようになります。

chapter3 : jQueryの書き方の基本ルール

cssでstyle.cssを読み込むのと似たような感じで、1番最初にjQueryでもライブラリを読み込ませてあげる必要があります。(下記はあくまでも例です。URL等は変わります)

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

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

②jQueryの本体を読み込んだ後にjQueryで書いたファイルを読み込む

<script src="js/practice.js"></script>

次に型ですが、HTMLやCSSやJSでも書き方の型があるように、jQueryでも記述する際の型があります。

$(function(){

  //ここにプログラムを書く

});

で、プログラムを書くときがこんな感じです。

$(function(){

  $('h2').text('●●●●●');

});

この場合だと「h2の要素を●●●●●にして」という命令になります。


実はプログラムを書く形も決まっていて、


$('id名/class名/タグ名').メソッド('条件');


のような感覚です。


※注意点※

・id名を書くときは先頭に「#」がつく

・class名を書くときは先頭に「.」がつく



最初は、何を書けばいいのか分からないのと併せて、記号の位置関係を覚えることも大変でしょうけどすぐ慣れます。僕も1日で慣れました。

chapter4 : とにかくコードを書く

よく「コードを暗記する必要はない」と言われますが本当にその通りだと思います。もちろん覚えてた方がいいと思いますが、暗記するというよりもコードを書いていくうちに自然と覚えていきます。

jQueryにもたくさんのライブラリがありますが、全部覚えるなんて正気の沙汰じゃありません。

なのでとにかく書いて書いて書きまくった方がいいです。僕もそれをひしひしと感じている最中です。

なのでnoteでアウトプット記事を書く際のコードはコピペではなくちゃんと自分でカタカタと入力しています。

ということで今日学んだアニメーションのコードを打って終わりにしたいと思います。

ホバーさせたい時

$('id名').hover(
  function(){
  //ホバーされたときの処理
},
  function(){
  //ホバーを外したときの処理
}
);

スライドさせたい時

$('id名').hover(
  function(){
  $('id名').slideUp();
},
  function(){
  $('id名').slideDown();
}
);

ふわっとさせたい時

$('id名').hover(
  function(){
  $('id名').fadeIn();
},
  function(){
  $('id名').fadeOut();
}
);

それでは今回はこの辺で終わりにしたいと思います。
ありがとうございました。
けけ丸