初心者向けに、jQueryメソッドの書き方とメソッドチェーンの指定方法を記載していきます。
jQueryメソッドの種類については、種類が沢山あることは理解できたけど「実際にどんなふうな書き方？」や、「同じ要素に対して複数のメソッドを指定するには？」「メソッドチェーン？」などの疑問を抱える初心者に向けて、解説していこうと思います。
jQueryメソッドの書き方自体も、簡単なものから複雑なものまで、色々とありますが、まずは基本的な書き方及びメソッドチェーンなどが理解できれば、後は、プログラミングの練習数をこなしていけば、徐々にスキルアップしていくものと思います。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
それでは、セレクタの記事サンプルでも使用してきた「CSS系」のメソッドから記載していきます。
セレクタの記事サンプルでは、下記のようにテキストを赤くする命令を記述していました。
上記はcss()メソッドを使い「color」を「red」にするという記述です。ただ色を赤にするだけであれば、わざわざjQueryを使わなくとも、初めからスタイルシートで記述すれば？と思う人もいる事と思います。
しかしながら、イベント系メソッドと組み合わせれば、「ユーザーが何らかの操作をしたときに、要素のスタイルを変更する」といったことが可能になります。
メソッドの記述方法を記載してみます。
メソッドはセレクタの後に記述して、「.」ピリオドでつなぐように記述します。そして必ずメソッド名()のように、カッコを付けます。
そして1行が終ったら、「;」セミコロンを付けます。()の中にはパラメータ（具体的な値、と考えればOK！）というものを指定する場合もあります。また、指定しない場合もあります。
CSS系メソッドは、おもに要素のスタイルを変更するためのメソッドです。代表的なものをさらに具体的に記載していきます。
css()メソッドは、名前の通りcssでスタイルを操作するためのメソッドです。それでは下記にサンプルを記載してみます。
css()メソッドによって、指定した要素のテキスト色が赤になりました。もちろんcolorやbackground-colorだけではなく、CSSの様々なプロパティを指定することが可能です。例えば、サンプルHTMLに下記のようなプロパティと値を指定することも可能です。
width()メソッドは、要素の幅を操作するメソッドです。似ているものに、高さを操作するheight()メソッドもあります。
width()メソッドによって、thirdというidが付いたli要素の幅が200pxになりました。width(200)のように、()内に数値のみ記述すると、pxでの指定になりますが、width("20em")というように、ダブルクォーテーション（またはシングルクォーテーション）で囲み、単位を明示的に指定することも可能です。
上記事記載したサンプルHTML2のコードを見てみると、1つの要素に対して、css()メソッドと、width()メソッドの2つが使われています。
上記では、$("#third")のセレクタを指定する部分が無駄になります。例えば同じセレクタでも、$("#third")という記述があれば、その度にjQueryはHTML内を検索し、指定された要素を取得しようとします。つまり上記のような書き方だと、同じ「#third」という要素を2回検索してしまいます。これは非常に問題で、その分処理スピードが落ちてしまうことになります。
このような場合、メソッドは「.」ピリオドでつないで記述することが可能です。
上記のように鎖（くさり）のようにつなげていくので、「メソッドチェーン」といいます。このように記述すれば、jQueryが要素を取得しに行く作業は1回で済むので、動作の高速化に繋がります。1つの要素に対して複数のメソッドを使用する場合は、メソッドチェーンを使うことをオススメします。
続いて、クラスを追加したり、削除したりするメソッドについて記載していきます。
addClass()メソッドは、指定した要素にクラス属性をつけるメソッドです。パラメータには、付けたいクラス名を指定します。例えば下記のようにaddClass("fiest")と記述すれば、「fiest」というクラスを付けることができます。
上記では、サンプルコード内にCSSの記述があります。「first」というクラスには、テクスト色を赤にするしタイルが記述されています。そしてaddClass()メソッドを使って、1番初めのli要素に「first」というクラスを付けています。なのでサンプルでは、1番目のli要素のテキスト色が赤になっています。
removeClass()メソッドは上記のaddClass()メソッドとはまったく逆で、クラスを削除してしまうメソッドです。パラメータには、削除したいクラス名を記述します。
HTMLのマークアップでは、3番目のli要素に「last」というクラスがついています。CSSでは、このクラスに「color:red;」が指定してあるので、テキスト色が赤になるはずです。
しかし、jQueryによって、この「last」というクラスは削除されています。結果、ブラウザの表示では、CSSで指定した「color:red;」は適用されなくなります。
今回の記事では1番初めに取り上げましたcss()メソッド。()内にパラメータを指定することで、要素のスタイルを操作することができますが、注意したいのが記述方法です。
jQueryのコードは、インターネット上などで沢山目にすることがありますが、パラメータの書き方には、数種類あることに気付きます。例えば下記の背景色を指定するコードを例に取ってみてみます。
css()メソッドの()内、今回の解説では1番のような書き方をしています。プロパティと値はダブルクォーテーションで囲み、カンマで区切っています。
しかし2番のように、全体をブレース「{}」で囲み、キャメルスタイルで記述する書き方もあります。プロパティはダブルクォーテーションで囲わず、区切りもカンマではなく「:」コロンを使います。
さらに3番のように全体をブレース「{}」で囲んだ上に、ダブルクォーテーションでプロパティを囲む書き方もあります。この場合も区切りには「:」コロンを使います。
1～3の、どの書き方でもlQueryは動作しますが、一番シンプルな記載方法をオススメします。
例えばCSSではbackground-colorというように、単語を「-」ハイフンでつないで、1つのプロパティとしています。
しかし、JavaScriptでは、慣例的にキャメルスタイルが使われています。キャメルスタイルとは、「-」ハイフンや「_」アンダーバーでつなぐのではなく、2番目の単語の頭文字を大文字にする書き方です。
この大文字にした部分が、ラクダのこぶのように出っ張って見えるので「キャメルスタイル」と呼ばれています。JavaScriptのコードの中では、よく見かけるスタイルなので、ぜひ覚えておくことをオススメします。
という事で今回は、メソッドの基本的な書き方・メソッドチェーンにつきまして、サンプルコードを交え記載してみました。
jQuery、CSSに記述方法が似ているので比較的簡単に覚えられそうですが、一番の問題は、記述ルールにあることのように思います。また、キャメルスタイルで指定する方法なども有り、一概にどれ！という事もなかなか難しいと思います。ここで言えることは「初めは大変！！」という事になります。
Web作成初心者の方に、少しでも独学の参考になれば幸いです。
とりあえず、今回はここまで...。
お仕事のご依頼は↓コチラより...、それではまた次回...。
