今回の話題は、jQueryのfind();メソッドについて。
メインの学習サイトをProgateとしつつ学習していたのですが、イマイチ理解していない自分がいたので、Progateで学習している同じ境遇の人に向けて記事を書きたいと思います。
例題としては、Progateに似ている感じで解説できればと思っているので、参考にしていただけると幸いです。
【jQuery】find();をわかりやすく解説【プログラミング初心者向け】
find();メソッドについて、簡単に紹介してみようと思います。
プログラミング初心者だとメソッドって何？って感じだと思うので、その点に関しても解説していきますね！
find();ってどんなメソッド？
find();メソッドは、指定したセレクターから子要素を探し出すためのメソッドです。
クリックイベントと組み合わせることがProgateでは求められてきますが、jQueryで何かを実装するときには他のイベントとの組合せも出てきます。
そのため、findメソッドは必ず習得しておかなければ、後々面倒な事になって来ることが予想されるので、しっかりと理解しておくようにしましょう。
jQueryの基本となる書き方
実際に、find();メソッドを使用するには、どのような流れになっているのかを確認してみましょう。
jQueryの基本形
jQuery
$('セレクター').イベント or メソッド ;
基本形は、このような形になっていてセレクターを記述してから、どんなアクションを起こすかをイベント or メソッドの部分に記述することで、文字色を変えられたり要素を消すことができたりします。
find();を使用すると「子要素を取得できる」
それでは、実際にfindメソッドを記述するとどうなるかを紹介します。
findメソッドの記述例
jQuery
$(function(){
$('#container').click(function(){
$('li').find('a');
});
}
例えば、セレクターにclassやidを指定するとして、上記のような記述にすると#containerの中にあるリストをクリックしたときに、どんなa要素が存在しているかなどがわかります。
この性質を利用すると、クラスを付け外しするメソッドを利用する事によって、ページ切り替え機能を実装できます。
上記は1のページネージャーボタンで10個のボックスが表示されている状態ですが、2をクリックすると現在表示されているボックス10個からidを外して、11-20までのボックスにidを付ける。
そのクリックイベントをjQueryで記述して、findで表示したいidがついているボックスを探して表示するという記述にすると、ページの表示切り替え機能が実装可能になります。
ぼくも学び始めた間もないですが、findメソッドの簡単な理解の仕方としては、findで探して該当する要素にアクションを起こすという理解をしておくとわかりやすいはずです。
jQuery学習でのコツ
jQueryに限らずですが、他のプログラミング言語でも共通して使用できる学習方法です。
jQueryはJavaScriptのライブラリ
jQueryはJavaScriotのライブラリとなっているので、基本的な構造としてはJavaScriptの構造を継承しています。
例えば、PHPのLaravelやCSSのBootstrapとかでもそうですが、最初に大元になっているプログラミング言語が存在しているものがあります。
そういった場合は、元になっている言語の概要だけでも理解しておいたほうが、『どんな事ができる言語なのか』『どんなフレームワークなのか』を理解した上で学習できるので、理解しやすくなります。
逆に理解しておかないと、かなり遠回りになるものもあると思うので、この流れは徹底しておきましょう。
セレクター+メソッドの概念を基本に考えるjQuery
それでは、少し話が脱線しましたがjQuery学習のコツですね。
基本形として、先程『セレクター+メソッド』という概念をお伝えしました。
ポイント
『アクションをしたいセレクターを選んで、どんなアクションを起こしたいのかを指定する』
という考え方で学習することで、入口部分は通過です。
この考え方を維持しつつ、一つずつできることを理解しつつ学習していくようにしましょう。
jQuery等の言語は$(this)や変数の概念を理解しつつ学習すること
jQueryを学習していると$(this)や変数という考え方が出てきますが、最初は結構混乱しがちです。
イメージのコツとしては、変数は処理やクラスなどを格納しておくボックスと言う感じで理解しておくと、わかりやすいと思います。
変数については、プログラミングの変数ってなに？使い方や代入方法などをわかりやすく解説！で詳しく解説しているので、あわせてご覧ください。
何回も記述するよりもボックスの中に入れておいて、そのボックスを記述すればコードをいちいち書かなくても良くなり、コード全体が見やすくなるといった感じですね。
jQueryや多言語の学習方法を工夫して、自分にあった方法を見つける
プログラミングの学習方法としては、書籍・動画・学習サイト・スクールなどが挙げられると思います。
手軽に利用できるものとしては、スクール以外の書籍・動画・学習サイトではないでしょうか。
それぞれ、自分にあってる学習方法がどれかは正直やってみないとわからない部分があるので、実際に全部に手を付けてみることをおすすめします。
例えば、学習サイトではドットインストールがあっているのか、Progateが合っているのか。
学習サイトではなく、動画学習のほうがあっているのかもしれない。
独学は難しく感じるからスクールに入校して最短でプログラミングを身につけることにしよう。
など、人によって最適な学習方法というのは異なってくるので、ぜひ固定概念にこだわらずにいろいろな学習方法を試してみて、自分にあった方法でコツコツ学習を進めていくのが一番効率がよいと思います。
プログラミング学習では固定概念を捨てよう
プログラミング学習の方法はいろいろな方法が発信されていますよね。
プログラミング学習系のサイトで信頼をおいているところの情報をもとに学習するもの良いですが、自分の判断で少しそれてみることも大切です。
Progateを推しているサイトで学習しているとしても、たまにドットインストールを使用してみると学習速度が上がることもあります。
そのため、すべて鵜呑みにするわけではなく、『自分で考えるということ』をしっかりと忘れずに学習していくのが重要です。