エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

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

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【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」などのイベントが出てきました。

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

developer.mozilla.org

 

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

developer.mozilla.org

 

イベント中のthisについて

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

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

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

 

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

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

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

speakerdeck.com

 

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

togetter.com

 

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

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

 

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

他の日にちの記事はこちら↓

www.engineer-step.com