エンジニアステップ

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

【DAY18】Progate「jQuery上級編」学習(連想配列やjqueryメソッド)【#30DAYSトライアル2nd】

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

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

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

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

 

【DAY18課題】Progateで「jQuery上級編」を学ぶ

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

 

jQueryの各種メソッドの学習ポイント

今回学んだjQueryの各種メソッドの学習ポイントは、各メソッドで

  • 「何を目的とした処理なのか」
  • 「何が返り値なのか」

に注目すると分かりやすいです。

 

あと、メソッドの引数の数によって、使用用途が変わることがあります。

この辺りがちょっと分かりづらいので注意です。

 

連想配列とは

連想配列の理解については、下記サイトが(比較的)わかりやすいです。

https://wa3.i-3-i.info/word11931.html

 

こちらも見ておくと良いかも

JavaScript の配列と連想配列の違い - IT戦記

 

こういう基本的な概念理解のところでプログラミングはつまずきやすいので、しっかり学んでおきましょう。

※他にも初心者にわかりやすい記事あったら、教えてください~

 

jqueryのindexメソッド

「indexメソッド」は特定要素のインデックス番号を取得するために使うメソッドです。

メソッドの中で、何か処理をするわけではなく、返り値を返すこと(インデックス番号を見つけること)が目的のメソッドですね。

返り値は

  • 条件に一致するものが見つかる→「インデックス番号(整数値)」
  • 条件に一致するものが見つからない→「-1」

となっています。

整数0以上の数字は「見つかった時」に使います。

見つからないときは、0以上の数字を使えないので「-1」を使います。

※マイナス1という返り値は様々なメソッドで使われます

api.jquery.com

 

jqueryのprevメソッドとnextメソッド

jqueryのprevメソッドとnextメソッドも学びました。

先程のindexメソッドと同様に、この関数は返り値を得るために処理が行われます。

返り値は、indexメソッドのようにわかりやすい「数値」ではなく「jqueryの要素」です。

そのjqueryの要素に対して、別のメソッド(例えばcssメソッド)を使っているので少々分かりづらいかもしれません。

semooh.jp

 

jqueryのattrメソッド

jqueryのattrメソッドは、今まで学んだメソッドと異なり、「ゲット」と「セット」ができます。

  • GET=値の取得
  • SET=値の代入

同じメソッド名ですが、引数(メソッドのカッコの中に入れる値)の数を変えることで、ゲットとセットを表現しています。

  • 引数が1つ→「属性名」を入れると、GET
  • 引数が2つ→「属性名」と「属性値」を入れると、SET

 

名前は一緒ですが、最初のうちは「別のメソッドなんだなー」という感覚でいるとわかりやすいと思います。

 

jqueryのvalメソッド

jqueryのvalメソッドもattrメソッド同様に

  • 引数なし→指定要素に入力されている値を取得
  • 引数1つ→指定要素に値をセット(代入)

 

jqueryのanimateメソッド

jqueryのanimateメソッドはより複雑ですね。

» 参考:以前学習したanimationを思い出します

 

animateメソッドは、$('セレクタ').animate({'プロパティ':'値'})という書き方をしています。

第1引数は{'プロパティ':'値'}という連想配列です。

細かい設定をしたい場合は、この使い方を理解しておく必要があります↓

semooh.jp

 

って感じで、色々なメソッドが出てきました。

結局は「どんなメソッドがあるか(何が出来るか)」を知っておくことが重要です。

あとは、実際に使う時に、しっかりと調べられる力も必要ですね。

 

徐々に慣れるはずなので、頑張りましょ~

 

他の日の記事はこちらにまとめています↓

www.engineer-step.com