デイトラ2期 DAY16 Progateで「jQuery初級編」を学ぶ【30DAYSトライアル2nd】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

デイトラ2期(#30DAYSトライアル2nd)「DAY16 ProgateでjQuery初級編を学ぶ」について解説します。

【デイトラDAY16課題】Progateで「jQuery初級編」を学ぶ

デイトラDAY16の課題は「ProgateでjQuery初級編を学ぶ」です。

JavaScriptのライブラリ「jQuery」

「jQuery」はJavaScriptのライブラリです。

そもそもJavaScriptのライブラリとは、「よく使う処理を集めた便利なソースコード」です。

jQueryもその1つ。

ジョン・レシグさんという方が2006年に発表しました。

 

jQueryの特徴まとめ

jQueryの特徴まとめです

  • WEBページを動的に操作できる!
  • JavaScriptのライブラリトップクラスに有名!
  • 「write less, do more」の思想で、少ない記述で多くのことをやりたいというコンセプト
  • 2018年1月にVersion3.3.0が発表
  • 各種ブラウザ間の挙動の違いを吸収できる

という感じ。

 

とにかく、「WEBサイト制作のときには、多くの人が使っているんだー」と理解しておけばOKです。

また、先日まで習ったJavaScript(というプログラミング言語)で書かれています。

 

jQueryのメソッド呼び出し

jQueryのメソッド呼び出しは、

$(‘セレクタ’).メソッド(引数);

と書きます。

 

オブジェクトとメソッドという概念が新たに登場しました。

※「対象語(操作対象)」と「述語(操作内容)」のような関係です。

  • jQueryオブジェクト → 「$(‘セレクタ’)」と書く。操作したい対象のこと
  • jQueryメソッド → 「.メソッド(引数)」と書く。操作内容のこと

つまり、「セレクタというものを、あるメソッドで操作する」ということです。

 

HTML&CSSで出来たページは「静的」です。

jQueryを使うことで、ページに動きをつける(操作して変化させる)ことが出来ます。

今回使ったメソッド

  • cssメソッド
  • textメソッド
  • htmlメソッド
  • findメソッド

は覚えておきましょう。

 

jQueryのイベント処理

jQueryのイベント処理は、

$(‘セレクタ’).イベント名(function(){ });

と書きます。

 

簡単に言うと「セレクタにイベントが発生した時に、functionの中のことをする」というものです。

先程より複雑ですが、

  • 「function()」の前(セレクタとイベント)は、操作する状況(何に、どういうイベントが起こったら)を書いている
  • 「function(){}の中は、操作対象と内容

が書かれています。

ちなみに「Click」などのイベントが出てきました。

これは既に公式仕様で定義されています。

 

あと、イベントについて学びたいなら、こちらの記事も読んでみると良いかも(難しいかも)

 

イベント中のthisについて

イベント中のthisについては、Progateで習ったとおり

  • クオートで囲まないように注意する
  • 実際にイベントが発生した要素を取得する(操作対象にする)

ということを覚えておきましょう。

 

【おまけ】jQueryはオワコンなのか?

jQueryはオワコンなのか?という議論が最近良くあります。

こちらの資料いわく「サイト制作では今なお現役」とのこと。

speakerdeck.com

 

また、jQueryオワコン論争というのは定期的に起こっているようです。

 

とりあえず、覚えておいて損はしないはずですし、別のライブラリがスタンダード(皆使う)になっても、jQueryで覚えたことは無駄にはなりません。

ってことで、迷わず勉強して良いと思います。

以上、デイトラDAY16の解説でした。